:root {
  --verde-oscuro: #1b4332;
  --verde-principal: #2d6a4f;
  --verde-medio: #40916c;
  --verde-claro: #74c69d;
  --verde-pastel: #d8f3dc;
  --verde-fondo: #f1f9f4;
  --tierra: #b08968;
  --naranja: #e76f51;
  --texto: #1c2b24;
  --texto-suave: #5a6b62;
  --blanco: #ffffff;
  --borde: #dfece4;
  --sombra: 0 8px 24px rgba(27, 67, 50, 0.10);
  --sombra-hover: 0 14px 32px rgba(27, 67, 50, 0.18);
  --radio: 16px;
  /* Tipografía de marca: Rubik para títulos y cifras, Nunito Sans para el texto. */
  --font-titulo: 'Rubik', sans-serif;
  --font-texto: 'Nunito Sans', sans-serif;

  /* Paleta de marca oficial — en adopcion gradual, reemplazando la escala --verde-* de arriba.
     Ya migrado: hero (h1 no, botones si) y footer. Pendiente: nav, catalogo, producto, checkout,
     etc. Convive a proposito con --verde-* mientras dure la migracion (--color-primario #2D3B2A
     NO es lo mismo que --verde-oscuro #1b4332). */
  --color-primario: #2D3B2A;         /* verde oscuro — texto de marca, CTA primario */
  --color-primario-hover: #3D4F38;   /* hover del CTA primario */
  --color-secundario: #5C5850;       /* gris calido — texto secundario, headings suaves, acentos chicos */
  --color-fondo-secundario: #E8E1D3; /* beige calido — fondo de boton/elemento secundario */
  --color-superficie: #EAEEE0;       /* verde-beige muy tenue — fondos de pagina, hovers, chips (era --verde-fondo / --verde-pastel) */
  --color-borde: #82907A;            /* verde-gris sage apagado — bordes y focus rings (era --verde-medio / --verde-claro) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-texto);
  color: var(--texto);
  background: var(--color-superficie);
  background-image:
    radial-gradient(circle at 100% 0%, rgba(116, 198, 157, 0.18), transparent 45%),
    radial-gradient(circle at 0% 20%, rgba(45, 106, 79, 0.08), transparent 40%);
  min-height: 100vh;
  line-height: 1.5;
  padding-top: 10px; /* respiro sutil arriba del navbar — ver .navbar { top: 10px } para que se mantenga igual al scrollear, no solo al cargar */
  /* Red de seguridad para el sangrado completo de las secciones de video del detalle de producto
     (width:100vw + margin calc(50% - 50vw)): en navegadores donde 100vw incluye el ancho de la
     barra de scroll vertical, eso puede sobrar un par de píxeles y generar un scroll horizontal
     fantasma — esto lo esconde sin afectar nada más (ninguna otra sección del sitio se desborda). */
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-titulo); color: var(--color-primario); }

button { font-family: inherit; cursor: pointer; border: none; }
input, select { font-family: inherit; }

/* ---------- NAVBAR ---------- */
/* Al cargar (scrollY dentro del hero): transparente, se funde con el fondo del hero/body (que ya no
   tiene color propio — ver .landing-hero). Al pasar el hero (.navbar-scrolled, ver app.js): blanco
   sólido + separación sutil, para seguir siendo legible sobre banners/fotos más abajo. */
.navbar {
  position: sticky;
  top: 10px; /* mismo valor que el padding-top del body: el respiro se mantiene también ya scrolleado */
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transform: translateY(0);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.3s ease;
}
.navbar.navbar-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 2px 14px rgba(27, 67, 50, 0.08);
}
/* Se oculta deslizándose hacia arriba (no display:none, para que la transición se anime) al bajar;
   translateY(0) — arriba de este bloque — lo trae de vuelta al subir. Ver manejarScrollNavbar(). */
.navbar.navbar-oculto { transform: translateY(-100%); }

.navbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 40px; /* antes 34px vertical -> ~113px de alto total; bajado para acercarse más a la proporción de la referencia */
  display: flex;
  align-items: center;
  /* flex-start (no space-between): logo + categorías quedan agrupados a la izquierda como un solo
     bloque; el hueco libre lo absorbe el margin-left:auto de .nav-actions (ver abajo), no queda
     repartido en dos huecos simétricos que centran visualmente las categorías. */
  justify-content: flex-start;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-titulo);
  font-size: 1.7rem;
  color: var(--color-primario);
  cursor: pointer;
  white-space: nowrap;
}
.brand-icon { width: 40px; height: 40px; flex-shrink: 0; }
.brand-icon svg { width: 100%; height: 100%; display: block; }
.brand strong { color: var(--color-secundario); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto; /* antes flex:1 (crecía para llenar todo el hueco hasta los íconos, lo que dejaba las
    categorías con su punto medio casi exacto al centro del navbar) — ahora ocupa solo su ancho natural,
    pegado al logo; sigue pudiendo encogerse (flex-shrink:1 + min-width:0 abajo) para el fallback de scroll. */
  flex-wrap: nowrap;
  min-width: 0; /* permite que el flex-item se encoja y active overflow-x en vez de forzar el ancho del padre */
  overflow-x: auto;
  scrollbar-width: none; /* Firefox: fallback de scroll invisible, sigue siendo desplazable con trackpad/rueda */
  -ms-overflow-style: none;
}
.nav-links::-webkit-scrollbar { display: none; }

.nav-link {
  background: transparent;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--texto-suave);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.nav-link:hover { background: color-mix(in srgb, var(--color-borde) 14%, transparent); color: var(--color-primario); }
.nav-link.active { background: var(--color-primario); color: white; }

/* ---------- BARRA DE CATEGORÍAS (estilo Samsung Shop: un botón = una categoría = un dropdown propio) ---------- */
.nav-categorias { display: flex; gap: 2px; flex-wrap: nowrap; flex-shrink: 0; }
.nav-cat-trigger { padding: 12px 16px; font-size: 1rem; }
.nav-cat { position: relative; }

.nav-cat-panel {
  /* position: fixed (no absolute) a propósito: .nav-links tiene overflow-x:auto para el fallback de
     scroll horizontal, y por la spec de CSS eso fuerza overflow-y a "auto" también (no hay forma de
     declarar solo un eje) — un panel absolute quedaría recortado verticalmente por ese overflow del
     ancestro. fixed escapa de esa cadena de clipping; top/left se calculan en JS (abrirNavCat). */
  position: fixed;
  /* Posición segura mientras está cerrado: sin top/left (los pone abrirNavCat al abrirlo), cada panel quedaba donde
     está su botón y, con 900 px de ancho, sobresalía del borde derecho; el navegador podía correr la página de lado. */
  top: 0;
  left: 0;
  width: min(620px, 92vw);
  padding-top: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.22s;
  z-index: 500;
}
.nav-cat.open .nav-cat-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Estilo Samsung: panel blanco flotando sobre el resto de la página, 2 columnas —
   productos (principal) + "Descubre" (angosta, separador vertical sutil). */
.nav-cat-panel-inner {
  background: white;
  border-radius: 18px;
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-hover);
  padding: 20px;
  display: flex;
  gap: 20px;
  transform: translateY(-8px);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-cat.open .nav-cat-panel-inner { transform: translateY(0); }

.nav-cat-panel-productos { flex: 1 1 auto; min-width: 0; }

.nav-cat-panel-descubre {
  flex: 0 0 160px;
  border-left: 1px solid var(--borde);
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-cat-descubre-titulo {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 8px;
}
.nav-cat-descubre-link {
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--texto);
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-cat-descubre-link:hover { background: color-mix(in srgb, var(--color-borde) 14%, transparent); color: var(--color-primario); }

.nav-mega-productos {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* siempre se muestran 4 productos (slice(0,4)): 2x2 fijo */
  gap: 14px;
  min-height: 168px;
}
.nav-mega-producto {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background: transparent;
  border-radius: 12px;
  padding: 8px;
  transition: background 0.18s ease, transform 0.18s ease;
  animation: aparecerTarjeta 0.25s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.nav-mega-producto:hover { background: color-mix(in srgb, var(--color-borde) 14%, transparent); transform: translateY(-2px); }
.nav-mega-producto-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-superficie);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
}
.nav-mega-producto-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-mega-producto-nombre {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-mega-producto-precio { font-size: 0.82rem; font-weight: 700; color: var(--color-primario); }
@media (prefers-reduced-motion: reduce) {
  .nav-mega-producto { animation: none; }
}

/* ---------- PANEL DE BÚSQUEDA (overlay estilo Samsung, ícono de búsqueda del navbar) ---------- */
/* Mismo fondo semi-transparente que .modal-overlay, pero anclado arriba (align-items:flex-start)
   en vez de centrado: el panel es una hoja que cuelga del borde superior, no una tarjeta flotante. */
.search-overlay {
  position: fixed; inset: 0;
  background: rgba(27, 67, 50, 0.35);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 900;
  animation: fadeIn 0.2s ease;
  overflow-y: auto;
}
.search-overlay.hidden { display: none; }

.search-panel {
  background: white;
  width: min(1100px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px clamp(20px, 5vw, 40px) 36px;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  position: relative;
  animation: buscarPanelBajar 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes buscarPanelBajar {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

.search-panel-input-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 2px solid var(--borde);
  padding: 8px 44px 16px 4px; /* padding-right deja lugar al botón de cierre */
  margin-bottom: 24px;
}
.search-panel-icon { font-size: 1.3rem; color: var(--texto-suave); }
.search-panel-input {
  flex: 1;
  border: none; outline: none;
  font-size: 1.25rem;
  font-family: inherit;
  color: var(--texto);
  background: transparent;
}
.search-panel-input::placeholder { color: var(--texto-suave); opacity: 0.7; }

.search-panel-heading {
  display: flex; align-items: center; gap: 8px;
  font-size: 1rem;
  margin-bottom: 16px;
  color: var(--texto);
}

.search-panel-body { display: flex; gap: 32px; }

/* Columna angosta con términos reales trackeados (ver POST/GET /productos/busquedas en el
   servicio Productos) — mismo estilo que la columna "Descubre" del mega-dropdown. Se oculta
   por completo (no un hueco vacío) cuando todavía no hay suficiente historial de búsquedas. */
.search-panel-populares {
  flex: 0 0 180px;
  border-right: 1px solid var(--borde);
  padding-right: 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-panel-populares.hidden { display: none; }
.search-panel-populares-titulo {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 8px;
}
.search-panel-popular-item {
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto);
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.search-panel-popular-item:hover { background: color-mix(in srgb, var(--color-borde) 14%, transparent); color: var(--color-primario); }

.search-panel-resultados { flex: 1; min-width: 0; }

.search-panel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 700px) {
  .search-panel-body { flex-direction: column; gap: 20px; }
  .search-panel-populares {
    flex-basis: auto;
    border-right: none;
    border-bottom: 1px solid var(--borde);
    padding-right: 0;
    padding-bottom: 14px;
  }
  .search-panel-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .search-panel { padding: 20px 16px 28px; }
  .search-panel-input { font-size: 1.05rem; }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto; /* empuja carrito/cuenta al extremo derecho; el hueco libre queda entre las
    categorías y aquí (proporción variable según cuántas categorías quepan), no repartido simétricamente. */
}

.btn {
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.96); }
.btn-primary {
  background: linear-gradient(135deg, var(--color-primario-hover), var(--color-primario));
  color: white; box-shadow: var(--sombra);
  position: relative; overflow: hidden;
}
.btn-primary:hover { background: linear-gradient(135deg, var(--color-primario-hover), var(--color-primario-hover)); box-shadow: var(--sombra-hover); transform: translateY(-1px); }
/* Barrido de brillo al pasar el mouse — puramente decorativo, un solo elemento ::after
   reusado por todos los .btn-primary del sitio, sin JS ni markup adicional por botón. */
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) { .btn-primary::after { display: none; } }
.btn-outline { background: white; color: var(--color-primario); border: 1.5px solid var(--color-borde); }
.btn-outline:hover { background: color-mix(in srgb, var(--color-borde) 14%, transparent); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--texto-suave); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-borde) 14%, transparent); color: var(--color-primario); }
.btn-block { width: 100%; }
.btn-danger { background: #fff0ee; color: var(--naranja); }
.btn-danger:hover { background: #ffe0da; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn:focus-visible, .nav-link:focus-visible, .product-card:focus-visible, .btn-favorito:focus-visible {
  outline: 2px solid var(--color-borde);
  outline-offset: 2px;
}

.cart-btn { position: relative; font-size: 1.05rem; }
.cart-badge {
  position: absolute;
  top: -4px; right: -6px;
  background: var(--naranja);
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 50%;
  transition: transform 0.15s ease;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.cart-badge.bump { animation: cartBadgeBump 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes cartBadgeBump {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ---------- ÍCONO DE CUENTA (estilo Samsung Shop: ícono junto al carrito, dropdown por hover) ---------- */
.nav-account { position: relative; }
.nav-account-trigger {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blanco); /* elemento elevado sobre la banda --color-superficie, no fondo plano */
  border: 1px solid var(--color-borde);
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.nav-account-trigger:hover { background: color-mix(in srgb, var(--color-borde) 14%, transparent); }
.nav-account-trigger:active { transform: scale(0.94); }

.nav-account-panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 220px;
  padding-top: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.22s;
  z-index: 500;
}
.nav-account.open .nav-account-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-account-panel-inner {
  background: white;
  border-radius: 16px;
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-hover);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateY(-8px);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-account.open .nav-account-panel-inner { transform: translateY(0); }

.nav-account-saludo {
  padding: 8px 12px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--borde);
  font-size: 0.82rem;
  color: var(--texto-suave);
}
.nav-account-saludo strong { color: var(--color-primario); }

.nav-account-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  padding: 9px 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--texto);
  transition: background 0.15s ease;
}
.nav-account-item:hover { background: color-mix(in srgb, var(--color-borde) 14%, transparent); color: var(--color-primario); }
.nav-account-logout { color: var(--naranja); }
.nav-account-logout:hover { background: #fff0ee; }

.hamburger { display: none; background: none; font-size: 1.4rem; color: var(--color-primario); }

/* ---------- MAIN / VIEWS ---------- */
#app-main { max-width: 1280px; margin: 0 auto; padding: 24px; min-height: 60vh; }

.view { display: none; animation: fadeIn 0.35s ease; }
.view.active { display: block; }

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

/* ---------- LANDING (INVITADOS) ---------- */
.btn-lg { padding: 14px 28px; font-size: 1rem; }

/* Hero a pantalla completa con el video real de fondo — mismo patrón "full-bleed + texto
   superpuesto con degradado" que las secciones de video de Chirimoya en Detalle de Producto (ver
   .detalle-video-wrap/.detalle-video-degradado/.detalle-video-texto más abajo: se REUTILIZAN tal
   cual aquí, mismas clases, no un sistema paralelo). El full-bleed es la misma técnica documentada
   ahí ("width:100vw + margin calc(50% - 50vw)"), aplicada directo a .landing-hero porque
   .detalle-video-seccion por sí sola no trae estilos propios (depende de combinarse con
   .detalle-hero/.detalle-galeria-item, que traen reglas ajenas a este hero).
   Diferencia con Chirimoya: acá el bloque de texto apilado es más alto (badge+título+párrafo+2
   botones+3 stats, no solo etiqueta+título+párrafo), así que el degradado cubre más porcentaje del
   video (ver "detalle-video-degradado" abajo) y el hero es un poco más alto. */
.landing-hero {
  position: relative;
  height: 92vh;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 64px;
}
.landing-hero .detalle-video-degradado { height: 85%; }
.landing-hero-content {
  max-width: 680px; /* más ancho que los 620px de Chirimoya: acá conviven 2 botones + 3 stats en fila */
}
.landing-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  background: white;
  color: var(--verde-principal);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 18px;
  box-shadow: var(--sombra);
}
.landing-hero h1 {
  color: inherit; /* blanco, heredado de .detalle-video-texto — mismo mecanismo que el h3 de Chirimoya */
  font-size: clamp(2.4rem, 3.4vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.landing-hero p {
  color: inherit;
  opacity: 0.88;
  font-size: 1.12rem;
  margin-bottom: 32px;
}
.landing-hero-actions {
  display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap;
  margin-bottom: 36px;
}

/* ── Paleta de marca — PRIMERA aplicacion, SOLO los botones del hero (ver :root). Todo scopeado a
   .landing-hero-actions: .btn-primary / .btn-outline GLOBALES no se tocan; nav, footer y el resto
   del sitio siguen con la escala --verde-*. El <h1> del hero se mantiene blanco a proposito: los
   colores de marca son oscuros y sobre el degradado del video quedarian ilegibles. El .btn base ya
   trae `transition: ... background 0.2s ease`, asi que el hover ya es animado. ── */
.landing-hero-actions .btn-primary       { background: var(--color-primario); }
.landing-hero-actions .btn-primary:hover { background: var(--color-primario-hover); }
.landing-hero-actions .btn-outline {
  background: var(--color-fondo-secundario);
  color: var(--color-primario);
  border-color: var(--color-fondo-secundario); /* tapa el borde verde global (--verde-medio) */
}
.landing-hero-actions .btn-outline:hover { background: var(--color-fondo-secundario); } /* no vira a verde-pastel */

.landing-hero-stats {
  display: flex; justify-content: flex-start; gap: 36px; flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.25); /* var(--borde) es gris claro, ilegible sobre el degradado oscuro */
}
.landing-hero-stats > div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.landing-hero-stats strong { font-size: 1.5rem; font-family: var(--font-titulo); color: inherit; }
.landing-hero-stats span { font-size: 0.8rem; color: inherit; opacity: 0.75; }

@media (max-width: 860px) {
  .landing-hero { height: 96vh; } /* más contenido apilado que Chirimoya necesita algo más de alto en móvil */
}

/* ---------- BANNERS DE CATEGORÍA (LANDING) ---------- */
.landing-banner-grupo { margin: 64px 0 0; }
.landing-banner {
  position: relative;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  min-height: 440px;
  display: flex;
  align-items: center;
  color: white;
}
.landing-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--verde-oscuro); /* mientras carga la foto real, o si el producto no tiene foto */
  background-size: cover;
  background-position: center;
}
.landing-banner::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(20, 83, 45, 0.9) 0%, rgba(20, 83, 45, 0.6) 48%, rgba(20, 83, 45, 0.18) 100%);
}
.landing-banner-content {
  position: relative;
  z-index: 2;
  max-width: 460px;
  padding: 36px 40px;
}
.landing-banner-content h2 {
  color: white;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}
.landing-banner-content p { color: rgba(255, 255, 255, 0.9); margin-bottom: 22px; }

/* Banners sin fila de tarjetas debajo: redondeo completo, no solo arriba. Sin uso por ahora — los
   dos banners que la llevaban (Frutas, Sabor de la sierra) ya migraron al tratamiento
   "cinematográfico" (con su propia fila de tarjetas, ver .landing-banner-tarjetas--cine) — se deja
   la clase por si un futuro banner sin tarjetas la necesita de nuevo. */
.landing-banner-standalone { border-radius: 24px; }

/* Tratamiento "cinematográfico" — ya aplicado a los 3 banners de categoría (Frutas de temporada,
   Sabor de la sierra, Lácteos frescos; ver el comentario junto a esta clase en el HTML de cada
   uno). Mismo espíritu que el video de Chirimoya: banner notoriamente más grande que el resto
   (440px → 78vh) y texto que aparece al
   hacer scroll, no visible desde el principio — con la diferencia de que ACÁ se repite cada vez que
   el bloque de texto entra/sale de pantalla (no una sola vez), a pedido explícito: título/párrafo/
   botón vuelven a opacity:0 al salir de vista y se re-animan escalonados (transition-delay
   creciente por elemento) cada vez que se vuelve a entrar, sea bajando o subiendo (ver
   inicializarBannerCinematico en app.js — agrega Y quita .visible según isIntersecting, sin
   unobserve()). El observer mira .landing-banner-content (el bloque de texto en sí) de CADA
   sección .landing-banner-cine, no la sección completa de 78vh — el texto vive centrado
   verticalmente dentro de esa sección tan alta, así que observar la sección entera cruzaba el
   umbral mucho antes de que el texto llegara a estar en pantalla de verdad. */
.landing-banner-cine { min-height: 78vh; }
.landing-banner-cine h2,
.landing-banner-cine p,
.landing-banner-cine .btn {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.landing-banner-content.visible h2 { opacity: 1; transform: none; transition-delay: 0.05s; }
.landing-banner-content.visible p { opacity: 1; transform: none; transition-delay: 0.22s; }
.landing-banner-content.visible .btn { opacity: 1; transform: none; transition-delay: 0.38s; }
@media (prefers-reduced-motion: reduce) {
  .landing-banner-cine h2, .landing-banner-cine p, .landing-banner-cine .btn {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* VUELTA A CORRECCIÓN #2 (con evidencia real del usuario): la corrección #3 (calcar el ancho de
   #app-main, sin sangrado propio) sí igualaba estos banners al carrusel/"Una plataforma, tres
   roles" — pero en una pantalla bien ancha eso choca contra el HERO, que SIEMPRE fue a sangre
   completa (llega al borde real del viewport, nunca vivió dentro de #app-main): al lado del hero
   sin límite, un banner metido en los 1280px de #app-main se ve con un margen enorme — el mismo
   problema original, solo que ahora contra el hero en vez de contra la referencia de Samsung. A
   pedido explícito del usuario ("déjalo como estaba anteriormente"), estos banners vuelven a la
   corrección #2: anchos e inmersivos como el hero (margen fino y CONSTANTE relativo al viewport,
   no al max-width:1280px de #app-main). Misma técnica de sangrado completo que usan el hero y los
   videos de Chirimoya (width:100vw + margin calc(50% - 50vw)) para que el WRAPPER llegue de verdad
   al borde del viewport, con un padding fijo adentro como margen visible. Las esquinas redondeadas
   de .landing-banner/.landing-banner-tarjetas de siempre se mantienen.
   CORRECCIÓN #4: eso solo dejaba anchos a los banners — el resto del contenido de la landing
   ("Recomendado para ti", "Una plataforma, tres roles", los 3 íconos de confianza) se seguía
   quedando angosto dentro de #app-main, ahora chocando contra los banners de arriba en vez de al
   revés. Mismo margen fino y constante para TODO ese contenido — .landing-ancho-completo comparte
   la regla con .landing-banner-grupo--cine (misma técnica, mismos valores) envolviendo ese bloque
   completo en el HTML en vez de aplicarlo sección por sección. */
.landing-banner-grupo--cine,
.landing-ancho-completo {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 24px;
}
@media (max-width: 640px) {
  .landing-banner-grupo--cine, .landing-ancho-completo { padding: 0 16px; }
}

.landing-banner-tarjetas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: var(--color-superficie);
  border-radius: 0 0 24px 24px;
  padding: 20px;
}
.landing-banner-tarjeta.hidden { display: none; }

/* Botón "Comprar" oculto por defecto en las tarjetas de los 3 banners de categoría, visible solo
   al pasar el puntero (o con foco de teclado, vía :focus-within) — las mismas clases compartidas
   .landing-banner-tarjeta/.producto-simple-* se usan también en el grid de 8 y el carrusel, que NO
   llevan este modificador y siguen mostrando el botón siempre. Altura de la tarjeta fija de todos
   modos (el botón solo cambia de opacidad, no de tamaño) para que la imagen no salte ni cambie de
   alto al pasar el mouse. */
.landing-banner-tarjetas--cine .producto-simple-comprar {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.landing-banner-tarjetas--cine .landing-banner-tarjeta:hover .producto-simple-comprar,
.landing-banner-tarjetas--cine .landing-banner-tarjeta:focus-within .producto-simple-comprar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .landing-banner-tarjetas--cine .producto-simple-comprar { transition: none; }
}

@media (max-width: 760px) {
  .landing-banner-grupo { margin-top: 40px; }
  .landing-banner { min-height: 260px; }
  .landing-banner::before {
    background: linear-gradient(180deg, rgba(20, 83, 45, 0.55) 0%, rgba(20, 83, 45, 0.88) 65%, rgba(20, 83, 45, 0.94) 100%);
  }
  .landing-banner-content { max-width: none; padding: 30px 24px; }
  .landing-banner-tarjetas { grid-template-columns: repeat(2, 1fr); padding: 16px; }
  /* Sigue siendo notoriamente más grande que el resto (260px) en móvil, solo que menos que el
     78vh de desktop — a ese alto en una pantalla angosta se sentiría excesivo. */
  .landing-banner-cine { min-height: 60vh; }
}

/* ---------- TARJETA DE PRODUCTO SIMPLIFICADA ----------
   Compartida por las tarjetas de los banners y el carrusel "Recomendado para ti": solo imagen +
   nombre + botón "Comprar" (el carrusel además suma precio, ver .landing-carousel-tarjeta más
   abajo). La tarjeta completa del catálogo (.product-card, con precio/calificación/stock) es un
   componente aparte y no se toca. (Antes también la usaba el grid estático "Productos destacados",
   eliminado por redundante con este mismo carrusel.) */
.landing-banner-tarjeta,
.landing-carousel-tarjeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
  animation: aparecerTarjeta 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.producto-simple-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem;
  box-shadow: var(--sombra);
  transition: transform 0.18s ease;
}
.landing-banner-tarjeta:hover .producto-simple-img,
.landing-carousel-tarjeta:hover .producto-simple-img { transform: translateY(-3px); }
.producto-simple-nombre {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-primario);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.producto-simple-comprar { width: 100%; padding: 8px 14px; font-size: 0.82rem; }

/* ---------- CARRUSEL "RECOMENDADO PARA TI" ----------
   Comparado a propósito contra la referencia real de Samsung (captura del usuario): tarjetas casi
   el doble de grandes (150px → 260px, con más aire entre ellas), título de la sección más grande
   (ver #view-landing .section-header h2 más abajo — escalado a propósito solo acá, la clase
   .section-header genérica se usa en muchas otras vistas y no se toca ahí), y las flechas de
   navegación bajan de flanquear el carrusel a una fila propia junto a la barra de progreso, abajo
   a la derecha (antes: dos botones grandes a los costados, chocando contra el ancho completo del
   carrusel — ver .landing-carousel-footer). */
.landing-carousel-wrap { /* ya no lleva flechas adentro (ver .landing-carousel-footer) */ }
.landing-carousel {
  min-width: 0; /* permite que el flex-item se encoja y active el scroll interno, no el ancho del padre */
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 4px 2px 14px;
  -webkit-overflow-scrolling: touch; /* scroll táctil fluido en iOS */
}
.landing-carousel-tarjeta { flex: 0 0 260px; scroll-snap-align: start; }
/* Nombre y precio notoriamente más grandes que en las tarjetas de los banners (0.88rem, sin
   precio) — proporción similar a la referencia de Samsung. El nombre pasa de una sola línea con
   "..." a envolver en hasta 2 líneas (a este tamaño, truncado a una línea se veía peor); el precio
   reutiliza el mismo .product-price/.price-unit de siempre en el resto de la app (detalle de
   producto, catálogo) — precio único real, el catálogo no maneja precios de oferta. */
.landing-carousel-tarjeta .producto-simple-nombre {
  font-size: 1.2rem;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.landing-carousel-tarjeta .product-price { font-size: 1.4rem; margin-top: 4px; }

/* Progreso + flechas en una sola fila, abajo a la derecha del carrusel (ver el comentario grande
   más arriba) — el progreso ocupa el espacio sobrante (flex:1), las flechas quedan compactas a la
   derecha, ya no flanqueando el carrusel entero. */
.landing-carousel-footer {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 4px;
}
.landing-carousel-arrows { display: flex; gap: 8px; flex-shrink: 0; }
.landing-carousel-arrow {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
  color: var(--color-primario);
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
}
.landing-carousel-arrow:hover { background: color-mix(in srgb, var(--color-borde) 14%, transparent); }

.landing-carousel-progreso {
  flex: 1;
  height: 4px;
  background: var(--borde);
  border-radius: 999px;
  overflow: hidden;
}
.landing-carousel-progreso-barra {
  height: 100%;
  width: 0%;
  background: var(--color-primario);
  border-radius: 999px;
  transition: width 0.15s ease;
}
@media (max-width: 760px) {
  .landing-carousel-arrow { width: 32px; height: 32px; font-size: 1.1rem; }
  .landing-carousel-tarjeta { flex-basis: 190px; }
  .landing-carousel { gap: 16px; }
}

/* Más aire entre bloques de la landing: el .section-header genérico (usado en muchas otras vistas,
   no tocado ahí) no trae margin-top propio — se lo damos aquí, solo dentro de la landing. El h2
   tampoco trae tamaño propio (hereda el porte por defecto del navegador) — acá sí lo agrandamos,
   otra vez solo dentro de la landing (#view-landing), a propósito distinto del resto de la app,
   para que "Recomendado para ti" pese como título en vez de como encabezado de sección chico —
   proporción similar a la referencia de Samsung. */
#view-landing .section-header { margin-top: 64px; }
#view-landing .section-header h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
@media (max-width: 760px) {
  #view-landing .section-header { margin-top: 40px; }
}

.landing-roles { margin: 64px 0 8px; }
.landing-roles h2 { text-align: center; margin-bottom: 24px; }
.landing-roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.landing-role-card {
  background: white;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--sombra);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.landing-role-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-hover); }
.landing-role-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-borde) 12%, transparent);
  font-size: 1.6rem;
  margin-bottom: 14px;
}
.landing-role-card h3 { margin-bottom: 8px; }
.landing-role-card p { color: var(--texto-suave); font-size: 0.9rem; margin-bottom: 18px; min-height: 3.2em; }

.landing-confianza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 40px 0 24px;
}
.landing-confianza-item {
  display: flex; gap: 14px; align-items: flex-start;
  background: white;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: var(--sombra);
}
.landing-confianza-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-borde) 12%, transparent);
  font-size: 1.3rem;
}
.landing-confianza-item strong { display: block; margin-bottom: 4px; color: var(--color-primario); }
.landing-confianza-item p { font-size: 0.86rem; color: var(--texto-suave); line-height: 1.45; }

@media (max-width: 640px) {
  .landing-hero { height: 100vh; margin-bottom: 40px; } /* sin padding propio: lo rompería el full-bleed, el padding real lo da .detalle-video-texto */
  .landing-hero-stats { gap: 20px; }
}

/* ---------- FOOTER CTAs (INVITADOS) ---------- */
.footer-ctas {
  max-width: 720px;
  margin: 0 auto 20px;
  text-align: center;
}
.footer-ctas-title {
  font-weight: 700;
  color: var(--color-primario); /* paleta de marca — migrado de --verde-oscuro */
  margin-bottom: 12px;
  font-family: var(--font-titulo);
}
.footer-ctas-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Paleta de marca — botones del footer scopeados a .footer-ctas-buttons (mismo patron que
   .landing-hero-actions). .btn-primary GLOBAL sigue intacto para nav / cards / checkout / resto. */
.footer-ctas-buttons .btn-primary       { background: var(--color-primario); }
.footer-ctas-buttons .btn-primary:hover { background: var(--color-primario-hover); }

.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; flex-wrap: wrap; gap: 12px;
}
.section-header.inner { margin-top: 32px; }

/* Cabecera con foto — pedido explícito de "imágenes" para los 4 paneles operativos
   (Productor/Repartidor/Admin). Reusa la MISMA foto que ya usa el hero de la
   landing (hero-valle-andino), no una fototeca nueva — con degradado de la paleta de marca
   encima para que el texto/ícono queden legibles en blanco. */
.panel-header-hero {
  background-image: linear-gradient(120deg, color-mix(in srgb, var(--color-primario) 92%, transparent), color-mix(in srgb, var(--color-primario-hover) 78%, transparent)), url('../assets/hero-valle-andino-1600.jpg');
  background-size: cover;
  background-position: center 65%;
  border-radius: var(--radio-lg, 22px);
  padding: 26px 28px;
  margin-bottom: 22px;
  color: white;
}
.panel-header-hero h2 { color: white; }
/* Idioma del agricultor (js/idioma.js): dos botones sobre el encabezado del panel, con su estado en aria-pressed. */
.idioma-selector { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); }
.idioma-selector > i { margin: 0 4px 0 8px; font-size: 1.15rem; color: var(--color-primario); }
.idioma-btn { min-height: 40px; padding: 6px 14px; border: none; border-radius: 999px; background: transparent; color: var(--color-primario); font: inherit; font-weight: 700; cursor: pointer; }
.idioma-btn[aria-pressed="true"] { background: var(--color-primario); color: #fff; }
.idioma-btn:focus-visible { outline: 3px solid rgba(161, 98, 7, 0.6); outline-offset: 2px; }
.idioma-nota { display: flex; gap: 8px; align-items: center; margin: -10px 0 18px; padding: 10px 14px; border-radius: 12px; background: rgba(161, 98, 7, 0.08); font-size: 0.9rem; color: var(--texto); }
.idioma-nota[hidden] { display: none; }
.panel-header-hero .btn-outline { background: rgba(255,255,255,0.92); }

@media (max-width: 560px) {
  .panel-header-hero { padding: 20px 18px; border-radius: 16px; }
}

.btn-sm { padding: 6px 12px; font-size: 0.8rem; margin-left: auto; }
/* En pantallas táctiles los botones chicos de los paneles llegan a los 44px mínimos para el dedo. */
@media (pointer: coarse) { .btn-sm { min-height: 44px; } }

/* ---------- GRID / CARDS ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.product-card {
  background: white;
  border-radius: 20px;
  box-shadow: var(--sombra);
  border: 1px solid var(--borde);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  animation: aparecerTarjeta 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-hover);
  border-color: var(--color-borde);
}
.product-card:active { transform: translateY(-3px) scale(0.99); }

@keyframes aparecerTarjeta {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .product-card,
  .propuesta-card,
  #envios-list .pedido-card,
  #pedidos-list .pedido-card,
  .produccion-card { animation: none; }
}
.product-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-primario), var(--color-borde));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: 2;
}
.product-card:hover::after { transform: scaleX(1); }

.product-card-media { position: relative; }
.product-banner {
  width: 100%;
  height: 150px;
  background: var(--color-superficie);
  display: flex; align-items: center; justify-content: center;
  font-size: 3.4rem;
  overflow: hidden;
}
.product-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.product-card:hover .product-banner img { transform: scale(1.08); }

.product-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.product-card-body .btn { margin-top: auto; }

/* variante compacta (galería del detalle de producto) */
.product-emoji {
  font-size: 2.4rem;
  background: var(--color-superficie);
  width: 64px; height: 64px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
  overflow: hidden;
}
.product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-card h4 { font-size: 1.05rem; color: var(--color-primario); line-height: 1.3; }

.product-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pill {
  border-radius: 999px;
}
.pill-categoria {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-secundario);
  background: var(--color-superficie);
  padding: 3px 10px;
  width: fit-content;
  white-space: nowrap;
}
.product-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--texto);
  white-space: nowrap;
}
.product-rating .rating-stars { color: #f0a500; font-size: 0.85rem; }
.product-rating .rating-count-mini { font-weight: 500; color: var(--texto-suave); }

.product-productor { font-size: 0.82rem; color: var(--texto-suave); }

/* ---- Favoritos ---- */
.btn-favorito {
  position: absolute;
  top: 10px; right: 10px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(27, 67, 50, 0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  line-height: 1;
  z-index: 3;
  color: var(--texto-suave);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, color 0.2s ease;
}
.btn-favorito:hover { transform: scale(1.1); background: white; }
.btn-favorito:active { transform: scale(0.92); }
/* Antes eran dos emojis distintos (🤍/❤️); ahora es un solo ícono (ti-heart) y el estado
   "guardado" se distingue por color, no por cambiar de ícono (ver alternarFavorito en app.js). */
.btn-favorito.activo, .btn-favorito-detalle.activo { color: var(--naranja); }
.btn-favorito.favorito-pop { animation: favoritoPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes favoritoPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.detalle-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-favorito-detalle {
  position: static;
  width: auto; height: auto;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texto);
  gap: 6px;
  backdrop-filter: none;
  box-shadow: none;
  border: 1.5px solid var(--borde);
  background: white;
}
.btn-favorito-detalle.activo { border-color: #f3aa9a; background: #fff5f3; }
.btn-favorito-detalle:hover { background: color-mix(in srgb, var(--color-borde) 14%, transparent); }

/* ---- Detalle de producto: jerarquía y acción principal ---- */
.detalle-cabecera {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 20px;
}
.detalle-cabecera h2 { font-size: 1.5rem; line-height: 1.25; }
.detalle-cabecera .rating-row { margin: 0; }
/* Descripción que escribe el agricultor (texto plano; se respetan sus saltos de línea). */
.detalle-descripcion { margin: -12px 0 24px; color: var(--texto-suave); font-size: 1rem; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.borrador-opcional { font-weight: 400; color: var(--texto-suave); }
.borrador-descripcion { resize: vertical; min-height: 96px; line-height: 1.5; font: inherit; font-weight: 400; }
.borrador-descripcion-pie { display: flex; justify-content: space-between; gap: 12px; font-size: 0.8rem; font-weight: 400; color: var(--texto-suave); }
.borrador-descripcion-contador { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.borrador-descripcion-contador.cerca { color: var(--acento-cosecha-texto); font-weight: 700; }
/* H6: el precio sugerido (o por qué no hay) debajo del campo de precio del borrador. */
.borrador-sugerencia { display: flex; gap: 8px; align-items: flex-start; margin-top: 2px; padding: 10px 12px; border-radius: 10px; background: rgba(161, 98, 7, 0.08); font-size: 0.9rem; font-weight: 400; line-height: 1.45; color: var(--texto); }
.borrador-sugerencia > i { flex: none; margin-top: 2px; font-size: 1.1rem; color: var(--acento-cosecha-texto, #a16207); }
.detalle-precio-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.detalle-precio-row .product-price { margin-top: 0; font-size: 1.5rem; }

.detalle-unidad-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto);
}
.detalle-unidad-label select {
  padding: 11px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--color-borde);
  font-size: 0.95rem;
  background: white;
  outline: none;
}
.detalle-unidad-label select:focus { border-color: var(--color-primario); }

.detalle-accion-principal {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.detalle-accion-principal .btn-block { flex: 1; }
.detalle-cantidad-selector {
  flex-shrink: 0;
  background: var(--color-superficie);
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  padding: 6px 10px;
  gap: 12px;
}
.detalle-cantidad-selector button { width: 30px; height: 30px; font-size: 1.05rem; }
.detalle-cantidad-selector span { min-width: 22px; font-size: 0.95rem; }

.detalle-productor-card {
  background: var(--color-superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.detalle-productor-header { display: flex; align-items: center; gap: 12px; }
.detalle-productor-icono {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-borde) 12%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.detalle-productor-info { display: flex; flex-direction: column; }
.detalle-productor-label { font-size: 0.7rem; color: var(--texto-suave); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.detalle-productor-nombre { font-size: 1.05rem; margin: 1px 0; }
.detalle-productor-ubicacion { font-size: 0.82rem; color: var(--texto-suave); }
.detalle-productor-card .mapa-mini { margin-top: 14px; }

/* ---- Feedback de éxito en botones de acción ---- */
.destello-exito {
  background: var(--color-primario-hover) !important;
  transition: background 0.2s ease;
}
.product-price { font-size: 1.3rem; font-weight: 800; color: var(--color-primario); margin-top: 4px; }
.product-price .price-unit { font-size: 0.78rem; font-weight: 600; color: var(--texto-suave); white-space: nowrap; }
.product-stock { font-size: 0.78rem; color: var(--texto-suave); }
.product-stock.low { color: var(--naranja); font-weight: 600; }

.empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--texto-suave);
  font-size: 1rem;
}
.empty-state.hidden { display: none; }

/* ---------- SKELETON LOADERS ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--color-superficie) 25%, color-mix(in srgb, var(--color-superficie) 60%, #fff) 37%, var(--color-superficie) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.5s ease infinite;
  border-radius: 8px;
}
@keyframes skeletonShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; opacity: 0.6; }
}

.skeleton-card {
  background: white;
  border-radius: 20px;
  border: 1px solid var(--borde);
  overflow: hidden;
  box-shadow: var(--sombra);
  animation: none;
}
.skeleton-media { height: 150px; border-radius: 0; }
.skeleton-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.skeleton-line { height: 12px; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-70 { width: 70%; }
.skeleton-line.tall { height: 20px; }
.skeleton-btn { height: 38px; border-radius: 999px; margin-top: 6px; }

.skeleton-row-card {
  background: white;
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: var(--sombra);
  border: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skeleton-row-card .skeleton-line { height: 14px; }

/* ---------- PEDIDOS ---------- */
.lookup-box {
  display: flex; gap: 10px; margin-bottom: 20px; max-width: 480px;
}
.lookup-box input {
  flex: 1; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--borde);
}

.pedidos-list, .notif-list { display: flex; flex-direction: column; gap: 16px; }

.pedido-card {
  background: white;
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: var(--sombra);
  border: 1px solid var(--borde);
}
/* Animación de entrada + hover en Gestionar Envíos (#envios-list). Mis Pedidos (#pedidos-list)
   comparte la misma clase .pedido-card pero solo suma la animación de entrada (ver regla de
   abajo) — el hover no se pidió para esta pantalla, así que no se agrega en silencio. */
#envios-list .pedido-card {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  animation: aparecerTarjeta 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
#envios-list .pedido-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
}
#pedidos-list .pedido-card {
  animation: aparecerTarjeta 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
/* Mismo hover que #envios-list, sumado ahora a las listas de tarjetas de Productor/Admin
   (pedido explícito de más "dinamismo" en esos paneles) — explícito por
   contenedor, no un .pedido-card global, para no tocar Mis Pedidos (ver comentario de arriba). */
#entregas-directas-lista .pedido-card,
#pendientes-capacidad-lista .pedido-card,
#productos-transito-lista .pedido-card {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
#entregas-directas-lista .pedido-card:hover,
#pendientes-capacidad-lista .pedido-card:hover,
#productos-transito-lista .pedido-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
}
.pedido-card-header {
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 10px;
  margin-bottom: 12px;
}
.pedido-id { font-size: 0.78rem; color: var(--texto-suave); font-family: monospace; }
.pedido-fecha { font-size: 0.82rem; color: var(--texto-suave); }

.pill-estado {
  padding: 5px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pill-pendiente, .pill-propuesto { background: #fff3cd; color: #8a6d1a; }
.pill-confirmado { background: #d6f5f0; color: #0f6d63; }
.pill-en_camino, .pill-en_transito, .pill-en_ruta { background: #cfe8ff; color: #14538a; }
.pill-entregado, .pill-aprobado { background: var(--verde-pastel); color: var(--verde-oscuro); }
.pill-cancelado, .pill-rechazado, .pill-error { background: #ffe0da; color: #b3401f; }
.pill-asignado { background: #e6e0fb; color: #5b3ea6; }
.pill-pendiente_asignacion { background: #eef0f2; color: #5a6570; }
.pill-default { background: #eee; color: #555; }

.badge-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--naranja);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
}

.pedido-total-header { font-weight: 800; color: var(--color-primario); font-size: 1.05rem; white-space: nowrap; }

.pedidos-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.pedidos-tab {
  padding: 8px 18px;
  border-radius: 999px;
  background: white;
  border: 1.5px solid var(--borde);
  color: var(--texto-suave);
  font-weight: 600;
  font-size: 0.88rem;
  transition: all 0.2s ease;
}
.pedidos-tab:hover { background: color-mix(in srgb, var(--color-borde) 14%, transparent); }
.pedidos-tab.active { background: var(--color-primario); color: white; border-color: var(--color-primario); }

.estado-badges-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borde);
}
.estado-badge-item { display: flex; flex-direction: column; gap: 4px; }
.estado-badge-label { font-size: 0.68rem; color: var(--texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

.pedido-items { list-style: none; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.pedido-item-linea {
  display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--texto);
  padding: 6px 0; border-bottom: 1px dashed var(--borde);
}
.pedido-item-media { flex-shrink: 0; }
.pedido-item-thumb {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--color-superficie);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  overflow: hidden;
}
.pedido-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pedido-item-nombre { flex: 1; }
.pedido-item-precio { font-weight: 600; white-space: nowrap; }

.pago-rechazado-aviso {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #fff0ee;
  border: 1px solid #f3aa9a;
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 0.85rem;
  color: #8a2f1c;
  font-weight: 600;
}

.resena-cta { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.resena-cta .btn { animation: aparecerTarjeta 0.3s cubic-bezier(0.22, 1, 0.36, 1); }

.pin-entrega-aviso {
  display: flex; align-items: center; gap: 12px;
  background: var(--verde-fondo);
  border: 1px solid var(--verde-claro);
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 10px;
  color: var(--verde-oscuro);
}
.pin-entrega-aviso i { font-size: 1.3rem; flex-shrink: 0; }
.pin-entrega-aviso strong { display: block; font-size: 0.9rem; }
.pin-entrega-aviso span { font-size: 0.85rem; }
.pin-entrega-codigo { font-weight: 800; font-size: 1.1rem; letter-spacing: 0.1em; }

.envio-actualizar {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
/* H11 (validación con usuarios del 2026-10-13, R03): los pasos del envío, qué hacer ahora y un botón con el siguiente. */
.envios-guia { display: grid; gap: 4px; margin: 0 0 16px; padding: 12px 16px 12px 36px; border-radius: 12px; background: rgba(45, 59, 42, 0.06); font-size: 0.92rem; line-height: 1.5; color: var(--texto); }
.envios-guia li { padding-left: 2px; }
.envios-guia li::marker { font-weight: 800; color: var(--color-primario); }
.envio-estado { margin-top: 14px; }
.envio-estado-pasos { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; }
.envio-estado-pasos li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--borde); font-size: 0.85rem; font-weight: 600; color: var(--texto-suave); }
.envio-estado-pasos li span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--borde); font-size: 0.75rem; color: var(--texto); }
.envio-estado-pasos li.hecho { border-color: transparent; background: rgba(45, 59, 42, 0.08); color: var(--color-primario); }
.envio-estado-pasos li.actual { border-color: var(--color-primario); background: var(--color-primario); color: #fff; }
.envio-estado-pasos li.actual span { background: rgba(255, 255, 255, 0.25); color: #fff; }
.envio-guia { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--texto); }
.envio-guia i { flex: none; margin-top: 2px; font-size: 1.1rem; color: var(--color-primario); }
.envio-estado .envio-actualizar { margin-top: 12px; }
.envio-estado .envio-actualizar .btn { min-height: 48px; }

/* ---------- Confirmar entrega (PIN + foto) ---------- */
.form-confirmar-entrega {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--borde);
}
.form-confirmar-entrega-campos { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
@media (min-width: 480px) { .form-confirmar-entrega-campos { flex-direction: row; } }
.form-confirmar-entrega-campos label { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--texto-suave); }
.form-confirmar-entrega-campos input[type="text"] {
  padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--borde);
  font-size: 1.1rem; font-weight: 700; letter-spacing: 0.15em; text-align: center;
}
.form-confirmar-entrega-campos input[type="file"] { font-size: 0.82rem; }
.form-confirmar-entrega-acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
/* ---------- Selector de la foto de entrega ----------
   Zona grande y táctil (mínimo 64px de alto, ícono de cámara en dorado cosecha) en vez del botón nativo del navegador.
   Con foto elegida se muestra la vista previa con su nombre y peso, y los botones Cambiar/Quitar (44px). El input
   nativo queda oculto pero operable con teclado: el foco se dibuja en la zona con :focus-within. Los errores llevan
   texto además del color y se anuncian (role="alert"). */
.foto-entrega { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1.7; }
.foto-entrega-titulo { font-size: 0.82rem; font-weight: 600; color: var(--texto-suave); }
.foto-entrega-input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.form-confirmar-entrega .foto-entrega-zona,
.form-despacho-agencia .foto-entrega-zona,
.asistente .foto-entrega-zona {
  display: flex; flex-direction: row; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px;
  border: 2px dashed #b9c8bd; border-radius: 14px; background: #fff; cursor: pointer;
  font-size: inherit; font-weight: inherit; color: inherit; flex: none;
  transition: border-color 0.2s, background-color 0.2s;
}
.form-confirmar-entrega .foto-entrega-zona:hover,
.form-despacho-agencia .foto-entrega-zona:hover,
.asistente .foto-entrega-zona:hover { border-color: var(--color-primario); background: var(--verde-fondo); }
.foto-entrega:focus-within .foto-entrega-zona { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }
.foto-entrega-icono {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto); font-size: 1.4rem;
}
.foto-entrega-texto { min-width: 0; }
.foto-entrega-texto strong { display: block; font-size: 0.95rem; color: var(--texto); }
.foto-entrega-texto small, .foto-entrega-datos small { display: block; font-size: 0.78rem; font-weight: 500; color: var(--texto-suave); }

.foto-entrega-previa {
  display: none; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px;
  border: 1.5px solid var(--verde-claro); border-radius: 14px; background: var(--verde-pastel);
}
.foto-entrega-previa img { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: #fff; }
.foto-entrega-datos { flex: 1; min-width: 120px; }
.foto-nombre { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; color: var(--texto); }
.foto-entrega-botones { display: flex; gap: 8px; }

.foto-entrega[data-estado="lista"] .foto-entrega-zona { display: none; }
.foto-entrega[data-estado="lista"] .foto-entrega-previa { display: flex; }
.foto-entrega[data-estado="error"] .foto-entrega-zona { border-color: #b3401f; background: #fdf1ec; }

.foto-entrega-ayuda { margin: 0; min-height: 1.1em; font-size: 0.8rem; font-weight: 600; line-height: 1.4; }
.foto-entrega-ayuda.ok { color: var(--color-primario); }
.foto-entrega-ayuda.error { color: #b3401f; }
@media (prefers-reduced-motion: reduce) {
  .form-confirmar-entrega .foto-entrega-zona, .asistente .foto-entrega-zona { transition: none; }
}

.form-entrega-mensaje {
  display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
  font-size: 0.85rem; font-weight: 600; line-height: 1.4;
  color: #b3401f; background: #fdf1ec; border: 1px solid #f1c9bb;
}
.form-entrega-mensaje i { font-size: 1.1rem; line-height: 1.2; flex: none; }
.form-entrega-mensaje.bloqueado { color: var(--acento-cosecha-texto); background: var(--acento-cosecha-suave); border-color: #ecd9ae; }

/* ---------- Confirmar llegada al almacén (cantidad recibida + observaciones) ----------
   Mismo lenguaje que "Confirmar entrega": borde punteado arriba, etiquetas visibles y campos de 44px.
   El mensaje de diferencia va pegado al campo (role=status, se anuncia sin mover el foco) y no depende solo
   del color: cada estado dice qué pasa con palabras. */
.form-llegada { --llegada-error: #b3401f; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--borde); }
/* Siempre en columna: la tarjeta vive en una rejilla de hasta 3 columnas y, en fila, el mensaje de diferencia
   ("Faltan 300 kg de los 800 declarados…") quedaba en una columna de ~140px y el campo de observaciones se salía
   de la tarjeta. */
.form-llegada-campos { display: flex; flex-direction: column; gap: 14px; }
.form-llegada-campos label { min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--texto-suave); }
.form-llegada-campos input {
  width: 100%; min-width: 0; box-sizing: border-box;
  min-height: 44px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--borde);
  font: inherit; font-size: 1rem; font-weight: 500; color: var(--texto); background: white;
}
.form-llegada-campos input[type="number"] { font-weight: 700; font-variant-numeric: tabular-nums; }
.form-llegada-campos input:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }
.form-llegada-campos input[aria-invalid="true"] { border-color: var(--llegada-error); }
.form-llegada-ayuda { font-size: 0.8rem; font-weight: 600; line-height: 1.4; }
.form-llegada-ayuda.ok { color: var(--color-primario); }
.form-llegada-ayuda.aviso { color: var(--acento-cosecha-texto); background: var(--acento-cosecha-suave); padding: 6px 10px; border-radius: 8px; }
.form-llegada-ayuda.error { color: var(--llegada-error); }
.form-llegada-acciones { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ---------- PANEL ADMIN — mismas secciones dedicadas + ancho completo que Productor/Repartidor ---------- */
.admin-shell { display: flex; flex-direction: column; gap: 22px; }

/* Las pestañas del admin comparten el estilo de las del productor (ver "Pestañas de los paneles"). */

.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: flex; flex-direction: column; gap: 24px; animation: productorFadeUp .35s ease both; }

.admin-resumen-layout { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 900px) {
  .admin-resumen-layout { flex-direction: row; align-items: stretch; }
  .admin-resumen-layout > #admin-resumen { flex: 1.3; display: flex; }
  .admin-resumen-layout > .grafico-card { flex: 1; display: flex; flex-direction: column; }
  /* La tarjeta de contadores llena la altura del gráfico (antes quedaba más corta, con un hueco debajo) y su
     botón baja al pie, como en el panel del repartidor. */
  .admin-resumen-layout > #admin-resumen > .resumen-panel { flex: 1; margin-bottom: 0; display: flex; flex-direction: column; }
  .admin-resumen-layout .resumen-panel .resumen-acciones { margin-top: auto; padding-top: 18px; }
}
.admin-resumen-layout .grafico-card canvas { max-height: 220px; }
.grafico-resumen { margin: 10px 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--texto-suave); }
.grafico-resumen:empty { display: none; }
.admin-resumen-layout .grafico-card h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }

.grid-admin { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 760px) { .grid-admin { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; } }
@media (min-width: 1150px) { .grid-admin { grid-template-columns: repeat(3, 1fr); } }


/* ---------- MAPAS (LEAFLET) ---------- */
.mapa-mini {
  width: 100%;
  height: 180px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--borde);
  background: var(--verde-fondo);
}
.mapa-seleccionable {
  width: 100%;
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--borde);
  cursor: crosshair;
  background: var(--verde-fondo);
}
.mapa-bloque { margin-top: 14px; }
.mapa-bloque-neutro {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-superficie);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin-top: 14px;
}
.mapa-titulo { font-size: 1.02rem; margin: 20px 0 10px; }
.ruta-stats { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ruta-stat {
  flex: 1;
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 10px 14px;
}
.ruta-stat-icon { font-size: 1.3rem; line-height: 1; }
.ruta-stat strong { display: block; font-size: 1rem; color: var(--color-primario); }
.ruta-stat span { font-size: 0.72rem; color: var(--texto-suave); }
.mapa-selector-bloque { margin: 4px 0 6px; }
.mapa-selector-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.mapa-ayuda { font-size: 0.78rem; color: var(--texto-suave); margin-top: 6px; }
/* H5: "Usar mi ubicación" grande y arriba del mapa (antes era un enlace chico al costado). */
.btn-mi-ubicacion { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-bottom: 10px; font-size: 1rem; font-weight: 700; }
.btn-mi-ubicacion i { font-size: 1.2rem; }
#mapa-productor-ayuda, #mapa-chacra-ayuda { font-size: 0.92rem; line-height: 1.45; }
.mapa-ayuda.confirmado { color: var(--verde-principal); font-weight: 600; }
.mapa-seleccionable.destino-requerido {
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px rgba(231, 111, 81, 0.25);
}

.marcador-mapa-wrap { background: transparent !important; border: none !important; }
.marcador-mapa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(27, 67, 50, 0.4), 0 0 0 2px white;
  font-size: 15px;
}

.ubicacion-estado { margin-bottom: 18px; }
.ubicacion-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
.ubicacion-ok { background: var(--verde-pastel); color: var(--verde-oscuro); }
.ubicacion-error { background: #fff0ee; color: #8a2f1c; }
.ubicacion-espera { background: #fff3cd; color: #8a6d1a; }

/* ---------- GESTIONAR ENVÍOS (REPARTIDOR) ---------- */
.disponibilidad-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: var(--radio);
  padding: 16px 20px;
  margin-bottom: 18px;
  box-shadow: var(--sombra);
  border: 1.5px solid transparent;
}
.disponibilidad-icono { font-size: 1.8rem; line-height: 1; display: inline-flex; }
/* Punto de color dibujado en CSS, no un ícono de Tabler — ver el comentario en app.js
   (renderBannerDisponibilidad): el set outline no tiene una variante de círculo sólido, y un
   anillo hueco se ve mucho más débil para un "semáforo de estado" como este. Toma el color de
   la regla ya existente ".disponibilidad-verde/ambar/gris span" (currentColor), sin duplicar. */
.disponibilidad-punto {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: currentColor;
}
.disponibilidad-banner strong { display: block; font-size: 1.05rem; font-family: var(--font-titulo); }
.disponibilidad-banner span { font-size: 0.82rem; }
.disponibilidad-verde { background: var(--verde-pastel); border-color: var(--verde-claro); }
.disponibilidad-verde strong { color: var(--verde-oscuro); }
.disponibilidad-verde span { color: var(--verde-medio); }
.disponibilidad-ambar { background: #fff3cd; border-color: #f0d585; }
.disponibilidad-ambar strong, .disponibilidad-ambar span { color: #8a6d1a; }
.disponibilidad-gris { background: #eef0f2; border-color: #d8dee3; }
.disponibilidad-gris strong, .disponibilidad-gris span { color: #5a6570; }

.propuestas-section {
  margin: 20px 0 28px;
  background: #fffaf0;
  border: 1.5px solid #f0d585;
  border-radius: var(--radio);
  padding: 18px 20px;
}
.propuestas-section .section-header.inner { margin-top: 0; margin-bottom: 14px; }
.propuestas-section h3 { display: flex; align-items: center; gap: 8px; }
.propuestas-list { display: flex; flex-direction: column; gap: 14px; }

.propuesta-card {
  /* Fondo con un leve tinte cálido (no blanco plano) + borde izquierdo más grueso: la señal de
     "esto requiere tu acción" tiene que notarse antes de leer el badge de estado, no solo
     depender de él — ver auditoría: antes competía visualmente igual que un envío histórico. */
  background: linear-gradient(180deg, #fffaef, #ffffff 65%);
  border-radius: 14px;
  padding: 16px 18px;
  border: 1px solid var(--borde);
  border-left: 5px solid #f0a500;
  box-shadow: var(--sombra);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  /* "backwards" mantiene el estado inicial del keyframe (opacity:0) durante el animation-delay
     escalonado — sin esto, con delay > 0 la tarjeta se ve un instante antes de animarse. */
  animation: aparecerTarjeta 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.propuesta-card:hover {
  /* Mismo desplazamiento/sombra que .product-card, pero SIN tocar border-color: el borde
     izquierdo ámbar es la señal de urgencia y no debe apagarse ni cambiar de color al pasar
     el mouse. */
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
}
.propuesta-actions { display: flex; gap: 10px; margin-top: 14px; }

/* Datos para decidir (distancia, peso, tarifa): tres cifras grandes y comparables de un vistazo, con la etiqueta
   debajo; el ícono en dorado cosecha como el resto de acentos del panel. Cifras tabulares para que no salten. */
.propuesta-metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.propuesta-metrica {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--borde);
}
.propuesta-metrica i { color: var(--acento-cosecha); font-size: 1.15rem; line-height: 1; margin-bottom: 4px; }
.propuesta-metrica strong {
  font-family: var(--font-titulo); font-size: 1.05rem; line-height: 1.2; color: var(--texto);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.propuesta-metrica span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); }
.propuesta-aviso {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 12px; border-radius: 10px;
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto); font-size: 0.82rem; font-weight: 600;
}
.propuesta-actions .btn { flex: 1; padding: 12px 16px; font-size: 0.92rem; }
/* De dónde sale lo que gana el repartidor (envío del comprador − comisión), bajo las cifras. */
.propuesta-reparto { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--texto-suave); }
.propuesta-reparto i { flex: none; margin-top: 2px; color: var(--acento-cosecha); }

/* En el celular (375px) tres columnas dejan cifras y etiquetas partidas en varias líneas y "Aceptar envío" se corta
   dentro de su botón: los datos pasan a lista (ícono, etiqueta y cifra a la derecha) y los botones a ancho completo. */
@media (max-width: 560px) {
  .propuesta-metricas { grid-template-columns: 1fr; gap: 8px; }
  .propuesta-metrica { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; }
  .propuesta-metrica i { margin-bottom: 0; }
  .propuesta-metrica span { order: 1; flex: 1; }
  .propuesta-metrica strong { order: 2; white-space: nowrap; text-align: right; }
  .propuesta-actions { flex-direction: column; gap: 8px; }
  .propuesta-actions .btn { flex: none; width: 100%; min-height: 46px; }
}

.pedido-card-activo {
  border-left: 4px solid var(--color-primario);
  box-shadow: var(--sombra-hover);
}

/* ---------- GESTIONAR ENVÍOS — reorganización de ancho completo (mismo criterio que Panel
   Productor: nada de tarjetas angostas pegadas a la izquierda con la mitad del monitor vacía). ---------- */
.repartidor-shell { display: flex; flex-direction: column; gap: 22px; }

.repartidor-resumen-layout { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 900px) {
  .repartidor-resumen-layout { flex-direction: row; align-items: stretch; }
  .repartidor-resumen-layout > .repartidor-col-principal { flex: 1.3; min-width: 0; }
  .repartidor-resumen-layout > .grafico-card { flex: 1; display: flex; flex-direction: column; }
}
.repartidor-resumen-layout .grafico-card canvas { max-height: 220px; }

/* Columna izquierda: contadores + disponibilidad + ubicación apilados, a la altura del gráfico de la derecha. Antes el
   banner y el chip iban en una fila aparte debajo y la columna de los contadores dejaba un hueco vacío. */
.repartidor-col-principal { display: flex; flex-direction: column; gap: 16px; }
.repartidor-col-principal .repartidor-estado-row { flex-direction: column; align-items: stretch; gap: 12px; }
.repartidor-col-principal .repartidor-estado-row > * { flex: 0 0 auto; }
.repartidor-col-principal .disponibilidad-banner,
.repartidor-col-principal .ubicacion-estado { margin-bottom: 0; }
.repartidor-col-principal .ubicacion-chip { align-self: flex-start; }
.repartidor-resumen-layout .grafico-card h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }

.repartidor-estado-row { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 700px) {
  .repartidor-estado-row { flex-direction: row; align-items: center; }
  .repartidor-estado-row > * { flex: 1; margin-bottom: 0; }
  .repartidor-estado-row .disponibilidad-banner { margin-bottom: 0; }
}

.propuestas-grid { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 760px) { .propuestas-grid { display: grid; grid-template-columns: repeat(2, 1fr); } }

.envios-grid { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 760px) { .envios-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
/* La tarjeta mide la mitad del panel: el código y la foto de la entrega se apilan cuando la tarjeta es angosta (antes
   dependía del ancho de la ventana y una tarjeta angosta ensanchaba su columna). */
#envios-list .pedido-card { container-type: inline-size; }
@container (max-width: 520px) { .form-confirmar-entrega-campos { flex-direction: column; } }

/* ---------- NOTIFICACIONES — rediseño premium ---------- */
/* Criterios del skill ui-ux-pro-max: los avisos se agrupan por día y se distinguen por tipo con ícono + título
   (no solo color), el estado de lectura es texto ("Nueva") además del acento, los filtros son botones con
   aria-pressed y la cantidad se anuncia con aria-live, objetivos táctiles >= 44px y reduced-motion. Mismo
   lenguaje que Mis Pedidos (cabecera con foto, filtros con conteo). Sin acciones inventadas: cada aviso solo
   ofrece lo que existe (ver los pedidos, abrir el producto reservado). */
.notif-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.notif-principal { min-width: 0; }

/* Filtros por tipo */
.notif-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.notif-filtro {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 20px; border-radius: 999px;
  border: 1.5px solid var(--borde); background: white; color: var(--texto); font-size: 0.95rem; font-weight: 600; cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.notif-filtro:hover { border-color: var(--color-borde); background: var(--color-superficie); }
.notif-filtro.active { background: var(--color-primario); border-color: var(--color-primario); color: white; }
.notif-filtro:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }
.notif-filtro-cuenta {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px;
  background: var(--color-superficie); color: var(--color-primario); font-size: 0.8rem; font-weight: 700;
}
.notif-filtro.active .notif-filtro-cuenta { background: rgba(255, 255, 255, 0.22); color: white; }

/* Lista agrupada por día */
.notif-list { gap: 0; }
.notif-grupo { display: flex; flex-direction: column; gap: 14px; }
.notif-grupo + .notif-grupo { margin-top: 28px; }
.notif-grupo-titulo {
  display: flex; align-items: center; gap: 14px; margin: 0; font-family: var(--font-texto); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave);
}
.notif-grupo-titulo::after { content: ''; flex: 1; height: 1px; background: var(--borde); }

.notif-card {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 20px 22px;
  background: white; border: 1px solid var(--borde); border-radius: 20px; box-shadow: var(--sombra);
  animation: aparecerTarjeta 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.notif-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); }
.notif-card--nueva {
  border-color: color-mix(in srgb, var(--acento-cosecha) 40%, white);
  background: linear-gradient(90deg, var(--acento-cosecha-suave), white 42%);
}
.notif-icon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; font-size: 1.6rem;
  background: var(--color-superficie); color: var(--color-primario);
}
.notif-icon.tipo-pedido_creado { background: var(--acento-cosecha-suave); color: var(--acento-cosecha); }
.notif-icon.tipo-envio_actualizado { background: #cfe8ff; color: #14538a; }
.notif-icon.tipo-producto_disponible { background: var(--verde-pastel); color: var(--verde-principal); }
.notif-cuerpo { min-width: 0; }
.notif-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.notif-titulo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font-family: var(--font-titulo); font-size: 1.1rem; color: var(--color-primario); }
.notif-nueva {
  padding: 3px 10px; border-radius: 999px; background: var(--acento-cosecha); color: white;
  font-family: var(--font-texto); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
}
.notif-tiempo { flex-shrink: 0; font-size: 0.85rem; color: var(--texto-suave); white-space: nowrap; }
.notif-msg { margin: 6px 0 0; font-size: 1rem; line-height: 1.5; color: var(--texto); }
.notif-estado-envio { margin-top: 10px; }
.notif-estado-envio .pill { font-size: 0.9rem; padding: 6px 14px; }
.notif-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.notif-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--color-superficie); color: var(--texto-suave); font-size: 0.85rem; font-weight: 600;
}
.notif-accion {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; background: none;
  color: var(--color-primario); font-size: 0.92rem; font-weight: 700; cursor: pointer;
}
.notif-accion i { transition: transform 0.2s ease; }
.notif-accion:hover { text-decoration: underline; }
.notif-accion:hover i { transform: translateX(3px); }
.notif-accion:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; border-radius: 8px; }
.notif-skel-icono { width: 56px; height: 56px; border-radius: 16px; }
#btn-notif-cargar-mas { min-height: 52px; margin-top: 22px; border-radius: 16px; font-size: 1rem; }
#view-notificaciones .empty-state { padding: 56px 20px; background: white; border: 1px solid var(--borde); border-radius: 22px; }

/* Columna lateral */
.notif-lateral { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; }
/* H6: avisos al celular y por correo (21st.dev "Notification Settings Card"). */
.avisos-card { display: grid; gap: 14px; padding: 22px; background: white; border: 1px solid var(--borde); border-radius: 22px; box-shadow: var(--sombra); }
.avisos-card:empty { display: none; }
.avisos-cabeza { display: flex; gap: 12px; align-items: flex-start; }
.avisos-icono { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--verde-pastel); color: var(--color-primario); font-size: 1.4rem; }
.avisos-cabeza h3 { margin: 0; font-size: 1.15rem; }
.avisos-cabeza p { margin: 2px 0 0; font-size: 0.92rem; color: var(--texto-suave); line-height: 1.4; }
.avisos-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding-top: 14px; border-top: 1px solid var(--borde); }
.avisos-fila-texto { display: grid; gap: 2px; flex: 1 1 180px; min-width: 0; }
.avisos-fila-texto strong { font-size: 0.98rem; }
.avisos-fila-texto small { font-size: 0.88rem; color: var(--texto-suave); line-height: 1.4; }
.avisos-fila-activo .avisos-fila-texto small { color: #2f6b34; font-weight: 600; }
.avisos-fila-bloqueado .avisos-fila-texto small, .avisos-fila-instalar-iphone .avisos-fila-texto small { color: var(--acento-cosecha-texto, #8a5a00); }
.avisos-acciones { display: flex; gap: 8px; }
.avisos-acciones .btn { min-height: 44px; border-radius: 12px; }
.avisos-fila-correo { cursor: pointer; }
.avisos-switch { appearance: none; flex: none; width: 52px; height: 30px; border-radius: 999px; background: #cfd6cb; position: relative; cursor: pointer; transition: background-color .2s ease; }
.avisos-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s ease; }
.avisos-switch:checked { background: var(--color-primario); }
.avisos-switch:checked::after { transform: translateX(22px); }
.avisos-switch:focus-visible { outline: 3px solid rgba(45, 59, 42, .35); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .avisos-switch, .avisos-switch::after { transition: none; } }
.detalle-reserva-celular { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.notif-resumen, .notif-cta { padding: 24px; background: white; border: 1px solid var(--borde); border-radius: 22px; box-shadow: var(--sombra); }
.notif-resumen:empty { display: none; }
.notif-resumen-cab { display: flex; align-items: center; gap: 16px; }
.notif-resumen-icono {
  display: grid; place-items: center; width: 60px; height: 60px; flex-shrink: 0; border-radius: 18px;
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha); font-size: 1.8rem;
}
.notif-resumen-cab strong { display: block; font-family: var(--font-titulo); font-size: 2.2rem; line-height: 1; color: var(--color-primario); }
.notif-resumen-cab span:not(.notif-resumen-icono) { font-size: 0.9rem; color: var(--texto-suave); }
.notif-resumen-lista { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde); }
.notif-resumen-lista li { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 0.95rem; color: var(--texto-suave); }
.notif-resumen-lista li i { font-size: 1.25rem; color: var(--color-primario); }
.notif-resumen-lista li span { flex: 1; }
.notif-resumen-lista li strong { color: var(--texto); }
.notif-resumen-nuevas {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto); font-size: 0.9rem; font-weight: 600;
}
.notif-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.notif-cta-icono {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 16px;
  background: #cfe8ff; color: #14538a; font-size: 1.6rem;
}
.notif-cta h3 { margin: 0; font-size: 1.2rem; }
.notif-cta p { margin: 0 0 12px; font-size: 0.95rem; color: var(--texto-suave); }
.notif-cta .btn { min-height: 48px; border-radius: 14px; }

@media (max-width: 980px) {
  .notif-layout { grid-template-columns: minmax(0, 1fr); }
  .notif-lateral { position: static; }
  .notif-resumen { display: none; }
  /* H6: en el celular, "Avisos en tu celular" va arriba de la lista (el resto de la columna lateral, abajo). */
  .notif-layout { display: flex; flex-direction: column; }
  .notif-lateral { display: contents; }
  .avisos-card { order: -1; }
}
@media (max-width: 700px) {
  /* Filtros en una fila desplazable, a sangre (mismo criterio que las categorías del buscador). */
  .notif-filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .notif-filtros::-webkit-scrollbar { display: none; }
  .notif-filtro { flex-shrink: 0; }
  .notif-card { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .notif-icon { width: 44px; height: 44px; border-radius: 13px; font-size: 1.3rem; }
  .notif-cabecera { flex-direction: column; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .notif-card { animation: none; transition: none; }
  .notif-card:hover { transform: none; }
  .notif-accion i { transition: none; }
}

/* ---------- PANEL PRODUCTOR ---------- */
.card-panel {
  background: white;
  border-radius: var(--radio);
  padding: 24px;
  box-shadow: var(--sombra);
  border: 1px solid var(--borde);
}
/* Sin max-width por defecto: antes 640px acá adentro dejaba cada .card-panel pegado a la
   izquierda con un vacío enorme al costado en pantallas anchas (#app-main ya tiene su propio
   tope de 1280px — no hace falta un segundo tope más angosto encima). Las vistas que sí quieren
   tarjetas angostas a propósito ya tienen su propio override más específico (ver
   #view-panel-admin .card-panel más abajo), así que siguen intactas. */
.card-panel h3 { margin-bottom: 6px; }
.muted { color: var(--texto-suave); font-size: 0.9rem; margin-bottom: 16px; }

/* ---------- RESUMEN DE PANEL (dashboard de Productor/Repartidor/Admin) ----------
   Extiende .perfil-datos-grid/.perfil-dato (Mi Perfil) con más peso visual — no se reutilizan
   esas clases tal cual porque acá varias cosas son nuevas: ícono en círculo por métrica, un
   tamaño más grande para la métrica más importante (.resumen-stat-destacado) y un bloque de
   contenido libre para texto que no es un simple conteo (próxima cosecha, código por vencer). */
.resumen-panel { max-width: none; margin-bottom: 24px; border-left: 4px solid var(--color-primario); }

.resumen-stats { display: flex; flex-wrap: wrap; gap: 24px; }
.resumen-stat { display: flex; align-items: center; gap: 12px; flex: 1 1 170px; }
.resumen-stat-icono {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-superficie);
  color: var(--color-primario);
  font-size: 1.25rem;
  flex-shrink: 0;
}
.resumen-stat-valor { display: block; font-family: var(--font-titulo); font-weight: 700; font-size: 1.6rem; line-height: 1.15; color: var(--texto); }
.resumen-stat-label { display: block; font-size: 0.74rem; color: var(--texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

/* La métrica más importante de cada dashboard (definida por cada renderResumen*()) usa esta
   clase — círculo relleno + número más grande, para que no compita en peso con las demás. */
.resumen-stat-destacado .resumen-stat-icono { width: 56px; height: 56px; font-size: 1.6rem; background: var(--color-primario); color: white; }
.resumen-stat-destacado .resumen-stat-valor { font-size: 2.3rem; color: var(--color-primario); }

.resumen-destacado {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-superficie);
  border: 1px dashed var(--color-borde);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.88rem;
  color: var(--color-primario);
  margin-top: 18px;
}
/* Variante para contenido que pide atención pronto (entrega en camino, código por vencer) —
   mismo tono de alerta que .pill-expirada/.btn-danger, no un color inventado. */
.resumen-destacado-urgente { background: #fff0ee; border-color: #f3b8a8; color: #b3401f; }
.resumen-destacado code { background: rgba(0, 0, 0, 0.06); padding: 1px 6px; border-radius: 4px; }
/* Variante clicable: hace scroll a la sección real (ver delegación sobre #productor-resumen en
   app.js) — mismo aviso, pero además es una acción, no solo información. */
.resumen-destacado-clicable { cursor: pointer; }
.resumen-destacado-clicable:hover { filter: brightness(0.97); }

.resumen-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.resumen-acciones .btn-sm { margin-left: 0; } /* .btn-sm trae margin-left:auto pensado para un botón solo en un header — acá son varios en fila */

.resumen-ver-mas { margin-top: 14px; }

@media (max-width: 560px) {
  .resumen-stat { flex: 1 1 100%; }
  .resumen-acciones { flex-direction: column; }
  .resumen-acciones .btn { width: 100%; }
}

/* Acciones al pie de una tarjeta (p. ej. "Marcar como entregado" en Entregas directas). */
.tarjeta-acciones { display: flex; gap: 10px; margin-top: 14px; }
.tarjeta-acciones .btn-sm { margin-left: 0; flex: 1; } /* .btn-sm trae margin-left:auto pensado para un botón solo */

/* ---------- PANEL ADMIN ---------- */
#view-panel-admin .card-panel { border-color: var(--color-borde); max-width: 560px; }
/* Mismo esquema que .pill-estado del resto del sitio (pedidos/envíos), con los tokens nuevos
   para vigente/usada — "expirada" reusa el rojo ya establecido para estados fallidos/inactivos
   (.pill-cancelado/.pill-rechazado/.pill-error), no es --verde-* así que no aplica la migración. */
.pill-vigente { background: var(--color-fondo-secundario); color: var(--color-primario); }
.pill-usada { background: var(--color-superficie); color: var(--color-secundario); }
.pill-expirada { background: #ffe0da; color: #b3401f; }

/* ---------- MI PERFIL — rediseño premium ---------- */
/* Criterios del skill ui-ux-pro-max: la identidad de la persona (quién es y qué rol tiene) va primero y grande,
   las cifras clave (gestión económica) como tarjetas legibles de un vistazo, los accesos rápidos como botones
   de 44px+ con ícono y texto, y solo se muestra lo que existe: sin campos inventados, cada rol ve sus datos.
   Misma cabecera con foto que Mis Pedidos y Notificaciones. */
#perfil-contenido { display: flex; flex-direction: column; gap: 24px; }
#perfil-contenido > * { animation: aparecerTarjeta 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
@media (prefers-reduced-motion: reduce) {
  #perfil-contenido > * { animation: none; }
}

.perfil-hero { display: flex; align-items: center; gap: 28px; margin-bottom: 0; padding: 34px 38px; box-shadow: 0 18px 40px -22px rgba(27, 67, 50, 0.55); }
.perfil-avatar {
  display: grid; place-items: center; width: 104px; height: 104px; flex-shrink: 0; border-radius: 50%;
  background: white; color: var(--color-primario); font-family: var(--font-titulo); font-size: 2.8rem; font-weight: 700;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.25);
}
.perfil-hero-info { flex: 1; min-width: 0; }
.perfil-hero-etiqueta { display: block; margin-bottom: 4px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
.perfil-hero h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; overflow-wrap: anywhere; }
.perfil-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.perfil-email { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; color: rgba(255, 255, 255, 0.92); overflow-wrap: anywhere; }
.perfil-rol-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.18); color: white; font-size: 0.88rem; font-weight: 700;
  backdrop-filter: blur(4px);
}
.perfil-hero .btn { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 46px; padding: 10px 22px; }

.perfil-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.perfil-principal { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.perfil-lateral { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; }

.perfil-tarjeta { max-width: none; padding: 28px 30px; border-radius: 22px; }
.perfil-tarjeta > h3, .perfil-accesos > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 1.3rem; }
.perfil-principal .perfil-datos-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; margin-bottom: 0; }
.perfil-principal .perfil-dato-label { font-size: 0.78rem; letter-spacing: 0.05em; }
.perfil-principal .perfil-dato-valor { font-size: 1.1rem; overflow-wrap: anywhere; }
.perfil-cuenta-descripcion { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--borde); color: var(--texto-suave); }
.perfil-principal .mapa-bloque { margin-top: 26px; }
.perfil-principal .mapa-mini { height: 300px; border-radius: 18px; }
.perfil-principal .disponibilidad-banner { margin: 22px 0 0; }

/* Cifras de gestión económica */
.perfil-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.perfil-stat {
  display: flex; align-items: center; gap: 16px; min-width: 0; padding: 24px;
  background: white; border: 1px solid var(--borde); border-radius: 22px; box-shadow: var(--sombra);
}
.perfil-stat-icono {
  display: grid; place-items: center; width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px;
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha); font-size: 1.6rem;
}
.perfil-stat-valor { display: block; font-family: var(--font-titulo); font-size: clamp(1.3rem, 1.8vw, 1.8rem); font-weight: 700; line-height: 1.15; color: var(--color-primario); white-space: nowrap; }
.perfil-stat-valor.ganancia-negativa { color: #b3401f; }
.perfil-stat-etiqueta { display: block; margin-top: 2px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); }
.perfil-economia .produccion-nota-resumen { margin: 12px 4px 0; }

/* Accesos rápidos */
.perfil-accesos { padding: 24px; border-radius: 22px; }
.perfil-acceso {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 8px 10px; border-radius: 14px;
  background: none; color: var(--texto); text-align: left; font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease;
}
.perfil-acceso:hover { background: var(--color-superficie); }
.perfil-acceso:focus-visible, .perfil-hero .btn:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }
.perfil-acceso-icono {
  display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px;
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha); font-size: 1.3rem;
}
.perfil-acceso > span:nth-child(2) { flex: 1; }
.perfil-acceso > .ti-chevron-right { color: var(--texto-suave); transition: transform 0.2s ease; }
.perfil-acceso:hover > .ti-chevron-right { transform: translateX(3px); }

.perfil-titulo-seccion { display: flex; align-items: center; gap: 10px; margin: 8px 0 18px; font-size: 1.5rem; }

@media (max-width: 980px) {
  .perfil-layout { grid-template-columns: minmax(0, 1fr); }
  .perfil-lateral { position: static; }
}
@media (max-width: 700px) {
  .perfil-hero { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 22px; }
  .perfil-avatar { width: 84px; height: 84px; font-size: 2.3rem; }
  .perfil-hero .btn { width: 100%; justify-content: center; }
  .perfil-stats { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .perfil-stat { gap: 14px; padding: 16px 18px; }
  .perfil-stat-icono { width: 46px; height: 46px; font-size: 1.35rem; }
  .perfil-tarjeta { padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .perfil-acceso, .perfil-acceso > .ti-chevron-right { transition: none; }
}

.perfil-datos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.perfil-dato { display: flex; flex-direction: column; gap: 4px; }
.perfil-dato-label { font-size: 0.72rem; color: var(--texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.perfil-dato-valor { font-size: 0.95rem; color: var(--texto); font-weight: 600; }
.perfil-dato-mono { font-family: monospace; letter-spacing: 0.05em; }

.perfil-cta-completar {
  background: white;
  border: 1px solid var(--borde);
  border-radius: 22px;
  box-shadow: var(--sombra);
  padding: 52px 24px;
  text-align: center;
}
.perfil-cta-completar .empty-state-icon { margin-bottom: 10px; }
.perfil-cta-completar .btn { margin-top: 16px; }

/* ---- Gestión Económica (Módulo 1) ---- */
.ganancia-positiva { color: var(--verde-oscuro); }
.ganancia-negativa { color: #b3401f; }

.produccion-precio-ref {
  background: var(--color-superficie);
  border: 1px dashed var(--color-borde);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--color-primario);
  margin-top: -4px;
}

.produccion-nota-resumen { margin-top: 4px; }

.produccion-card { animation: aparecerTarjeta 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards; }

.produccion-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.produccion-card-header h4 { margin: 0; }

.produccion-sin-calculo {
  background: #fff8ee;
  border: 1px solid #f0d9a8;
  color: #8a6d1a;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
  margin: 0;
}

.produccion-card .btn-completar-cosecha { min-height: 48px; font-size: 1rem; align-self: flex-start; }
.produccion-card .produccion-sin-calculo + .btn-completar-cosecha { margin-top: 12px; }

/* ---------- Evidencia en origen: siembra y cosecha desde la chacra ----------
   Reemplaza al Verificador. Dos piezas: el aviso dorado ("hazlo dentro de tu chacra", lo primero que se lee en el
   formulario) y el bloque de ubicación, con una píldora de estado que dice con ícono y palabras dónde está el
   agricultor respecto de su chacra (no solo con color) y un botón de 44px. Fuera del radio o sin GPS se permite igual:
   el estado lo dice como advertencia, no como error. */
.aviso-en-chacra {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--acento-cosecha-suave); border: 1px solid #ecd9ae;
}
.aviso-en-chacra > i {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--acento-cosecha); font-size: 1.35rem;
}
.aviso-en-chacra strong { display: block; font-family: var(--font-titulo); font-size: 1rem; color: var(--acento-cosecha-texto); }
.aviso-en-chacra p { margin: 2px 0 0; font-size: 0.88rem; font-weight: 500; line-height: 1.5; color: var(--texto); }

.evidencia-gps {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px;
  border: 1.5px solid var(--borde); border-radius: 14px; background: #fff;
  transition: border-color 0.2s, background-color 0.2s;
}
.evidencia-gps-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.evidencia-gps-titulo { font-size: 0.82rem; font-weight: 600; color: var(--texto-suave); }
.evidencia-gps-estado {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 700; background: #eef0f2; color: #4a5560;
}
.evidencia-gps-texto { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--texto); }
.evidencia-gps .btn-gps-tomar { min-height: 44px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.evidencia-gps[data-estado="dentro"], .evidencia-gps[data-estado="tomada"] { border-color: var(--verde-claro); background: var(--verde-fondo); }
.evidencia-gps[data-estado="dentro"] .evidencia-gps-estado,
.evidencia-gps[data-estado="tomada"] .evidencia-gps-estado { background: var(--verde-pastel); color: var(--verde-oscuro); }
.evidencia-gps[data-estado="fuera"] { border-color: #e2c27a; background: #fffaf0; }
.evidencia-gps[data-estado="fuera"] .evidencia-gps-estado { background: #fff3cd; color: #6f5200; }
.evidencia-gps[data-estado="sin-gps"] { border-color: #f1c9bb; background: #fffaf7; }
.evidencia-gps[data-estado="sin-gps"] .evidencia-gps-estado { background: #fdf1ec; color: #b3401f; }
.evidencia-gps[data-estado="buscando"] .evidencia-gps-estado i,
.icono-girando { display: inline-block; animation: girar 0.9s linear infinite; }

/* Lo que quedó sellado: la foto y dónde estaba el agricultor (en la tarjeta de una cosecha completada). */
.evidencia-resumen {
  display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--borde); border-radius: 14px; background: var(--verde-fondo);
}
.evidencia-resumen-foto { flex: none; border-radius: 10px; overflow: hidden; line-height: 0; }
.evidencia-resumen-foto img { width: 72px; height: 72px; object-fit: cover; }
.evidencia-resumen-foto:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }
.evidencia-resumen-lista, .timeline-datos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.evidencia-resumen-lista li, .timeline-datos-lista li {
  display: flex; align-items: flex-start; gap: 6px; font-size: 0.85rem; line-height: 1.45; color: var(--texto);
  overflow-wrap: anywhere;
}
.evidencia-resumen-lista li i, .timeline-datos-lista li i { flex: none; margin-top: 2px; color: var(--verde-principal); }
.evidencia-resumen-lista li.es-advertencia, .timeline-datos-lista li.es-advertencia { color: #6f5200; font-weight: 600; }
.evidencia-resumen-lista li.es-advertencia i, .timeline-datos-lista li.es-advertencia i { color: var(--acento-cosecha); }

/* La foto de la cosecha en la cadena (modal del productor y página del QR). */
.timeline-foto {
  display: inline-flex; flex-direction: column; gap: 6px; margin-top: 10px; max-width: 240px;
  font-size: 0.8rem; font-weight: 600; color: var(--color-primario); text-decoration: none;
}
.timeline-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid var(--borde); }
.timeline-foto:hover span { text-decoration: underline; }
.timeline-foto:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 3px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
  .evidencia-gps { transition: none; }
  .evidencia-gps[data-estado="buscando"] .evidencia-gps-estado i, .icono-girando { animation: none; }
}

.produccion-lista { display: flex; flex-direction: column; gap: 16px; }

/* "Registrar nueva siembra": el formulario queda fijo al costado y el historial (la parte más
   larga de la vista) ocupa el resto del ancho disponible. */
.produccion-layout { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 900px) {
  .produccion-layout { flex-direction: row; align-items: flex-start; }
  .produccion-layout > .card-panel { flex: 0 0 360px; position: sticky; top: 16px; }
  .produccion-layout > .produccion-lista { flex: 1; margin: 0; }
}

.form-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}
.form-grid label, .auth-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto);
}
.form-grid input, .form-grid select, .form-grid textarea,
.auth-form input, .auth-form select {
  padding: 11px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--borde);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease;
}
.form-grid textarea { font-family: inherit; resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus,
.auth-form input:focus, .auth-form select:focus {
  border-color: var(--color-borde);
}

/* ---------- PUBLICAR PRODUCTO: VISTA PREVIA EN VIVO ---------- */
.btn-publicar-borrador { margin-top: 18px; }

.publicar-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 260px;
  gap: 28px;
  align-items: start;
}
.publicar-preview {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.publicar-preview-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.publicar-preview .product-card { animation: none; }

@media (max-width: 760px) {
  .publicar-layout { grid-template-columns: 1fr; }
  .publicar-preview { position: static; }
}

/* ---------- SUBIDA DE FOTOS (drag & drop) ---------- */
.fotos-upload-bloque {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--borde);
}
.fotos-upload-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.fotos-upload-header h4 { color: var(--color-primario); }
.fotos-contador {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-secundario);
  background: var(--color-superficie);
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.upload-zona {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  border: 2px dashed var(--color-borde);
  border-radius: 16px;
  padding: 24px 16px;
  margin: 12px 0;
  background: var(--color-superficie);
  color: var(--texto-suave);
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.upload-zona:hover { background: color-mix(in srgb, var(--color-borde) 14%, transparent); border-color: var(--color-borde); }
.upload-zona.dragover { background: var(--color-superficie); border-color: var(--color-primario); transform: scale(1.01); }
.upload-zona strong { color: var(--color-primario); }
.upload-zona-icono { font-size: 1.8rem; }
.upload-zona.deshabilitada {
  cursor: not-allowed;
  opacity: 0.6;
  border-style: solid;
  border-color: var(--borde);
}

.upload-miniaturas { display: flex; flex-wrap: wrap; gap: 10px; }
.upload-miniatura {
  position: relative;
  width: 86px; height: 86px;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid var(--borde);
  animation: aparecerTarjeta 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.upload-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload-miniatura-quitar {
  position: absolute; top: 2px; right: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(27, 67, 50, 0.75);
  color: white;
  font-size: 0.68rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
  z-index: 2;
}
.upload-miniatura-quitar:hover { background: var(--naranja); transform: scale(1.1); }

.miniatura-badge-principal {
  position: absolute;
  top: 3px; left: 3px; right: 22px;
  max-width: fit-content;
  background: var(--color-primario);
  color: white;
  font-size: 0.52rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding: 2px 5px;
  border-radius: 999px;
  z-index: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(27, 67, 50, 0.35);
}

.upload-miniatura-mover {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: rgba(27, 67, 50, 0.55);
  backdrop-filter: blur(2px);
}
.miniatura-mover-btn {
  flex: 1;
  background: transparent;
  color: white;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 0;
  transition: background 0.15s ease;
}
.miniatura-mover-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.25); }
.miniatura-mover-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ---------- TARJETAS DEL PRODUCTOR (mis productos) ---------- */
.badge-flotante {
  position: absolute;
  top: 10px; left: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(27, 67, 50, 0.18);
}
.badge-stock-bajo { background: #fff3cd; color: #8a6d1a; }

.productor-card-acciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.productor-card-acciones .btn-sm {
  margin-left: 0;
  padding-left: 8px;
  padding-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-expandible {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--borde);
  animation: fadeIn 0.25s ease;
}
.panel-expandible.hidden { display: none; }

/* ---------- UNIDADES DE VENTA ALTERNATIVAS ---------- */
.unidades-alt-lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.unidades-alt-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--color-superficie);
  border-radius: 12px;
}
.unidades-alt-fila-edicion { align-items: flex-end; flex-wrap: wrap; }

.unidades-alt-info { display: flex; flex-direction: column; gap: 2px; }
.unidades-alt-info strong { color: var(--color-primario); }
.unidades-alt-info span { font-size: 0.82rem; color: var(--texto-suave); }
.unidades-alt-fila-edicion .unidades-alt-info { flex: 1 1 220px; gap: 8px; }
.unidades-alt-fila-edicion .unidades-alt-info label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--texto);
}
.unidades-alt-fila-edicion input {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--color-borde);
  font-size: 0.9rem;
}

.unidades-alt-acciones { display: flex; gap: 8px; flex-shrink: 0; }
.unidades-alt-acciones .btn-sm { margin-left: 0; padding: 6px 10px; }

.unidad-alt-form {
  padding-top: 14px;
  border-top: 1px solid var(--color-borde);
}
.unidad-alt-factor-ayuda {
  margin: -6px 0 0;
  font-size: 0.78rem;
  color: var(--color-secundario);
}

/* ---------- MODAL CERTIFICACIÓN ---------- */
.modal-certificacion { max-width: 540px; }
.certificacion-qr-bloque {
  text-align: center;
  background: var(--color-superficie);
  border-radius: 16px;
  padding: 20px;
  margin: 14px 0 20px;
}
.certificacion-qr {
  width: 180px; height: 180px;
  object-fit: contain;
  background: white;
  border-radius: 12px;
  padding: 10px;
  box-shadow: var(--sombra);
}
.certificacion-qr-nota { margin-top: 12px; font-size: 0.82rem; }

/* ---------- ESTADO VACÍO CON ÍCONO GRANDE ---------- */
.empty-state-icon {
  display: block;
  font-size: 3.2rem;
  margin-bottom: 10px;
}
.empty-state strong { color: var(--color-primario); }
.empty-state .btn { margin-top: 16px; }

/* ---------- MODALS ---------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(27, 67, 50, 0.35);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}
.modal-overlay.hidden { display: none; }

.modal {
  background: white;
  border-radius: 20px;
  padding: 28px;
  max-width: 480px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  animation: popIn 0.25s ease;
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-close {
  position: absolute; top: 16px; right: 16px;
  background: var(--color-superficie);
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--texto-suave);
  font-size: 0.95rem;
}
.modal-close:hover { background: color-mix(in srgb, var(--color-borde) 14%, transparent); color: var(--color-primario); }

.auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.auth-tab {
  flex: 1; padding: 10px; background: var(--color-superficie);
  border-radius: 10px; font-weight: 600; color: var(--texto-suave);
}
.auth-tab.active { background: var(--color-primario); color: white; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form h3 { margin-bottom: 4px; }
.auth-form.hidden { display: none; }

/* Separador "o continúa con" entre el form tradicional y el botón de Google — línea propia con
   texto centrado encima, sin depender de ningún ícono ni imagen. */
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 2px 0; color: var(--texto-suave); font-size: 0.82rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-borde); }

/* El botón real lo renderiza Google (google.accounts.id.renderButton, ver
   inicializarGoogleSignIn en app.js) dentro de este contenedor — acá solo se centra, ya que el
   ancho lo fija JS al momento de renderizar para que combine con el resto del modal. */
.auth-google-btn { display: flex; justify-content: center; }

.carrito-qty { display: flex; align-items: center; gap: 6px; }
.carrito-qty button {
  width: 26px; height: 26px; border-radius: 50%; background: var(--color-superficie); color: var(--color-primario); font-weight: 700;
}
.carrito-qty span { min-width: 20px; text-align: center; font-weight: 600; }

.carrito-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-top: 2px solid var(--color-superficie); border-bottom: 2px solid var(--color-superficie);
  margin-bottom: 16px; font-size: 1rem;
}
.carrito-total strong { color: var(--color-primario); font-size: 1.25rem; }

/* ---------- CARRITO Y CHECKOUT POR PASOS — rediseño premium ---------- */
/* Criterios del skill ui-ux-pro-max: el progreso siempre visible (paso actual marcado), el resumen y el botón
   principal a la vista mientras se recorre el formulario (columna fija), etiquetas asociadas a sus campos,
   objetivos táctiles >= 44px, foco visible dentro del modal, estado vacío con acción y feedback al enviar.
   Referencia de 21st.dev ("Checkout Block", "Order Confirmation Card"): formulario a la izquierda y
   resumen del pedido a la derecha, y tarjeta de confirmación con siguientes pasos, adaptadas a CSS propio
   (sin React ni Tailwind). El widget de Culqi (paso de tarjeta) es un iframe de terceros: su tamaño lo
   fija Culqi, no esta hoja de estilos. */

/* Cascarón: cabecera fija con el progreso + cuerpo que es lo único que se desplaza. */
.modal.modal-checkout {
  width: min(1120px, 100%); max-width: 1120px; max-height: 92vh; padding: 0; overflow: hidden;
  display: flex; flex-direction: column; border-radius: 28px;
}
.modal-checkout:focus { outline: none; }
.checkout-cabecera { position: relative; flex-shrink: 0; padding: 20px 88px 16px; background: white; border-bottom: 1px solid var(--borde); }
.checkout-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 36px 36px; background: var(--color-superficie); }
.modal-checkout .modal-close {
  top: 50%; right: 24px; transform: translateY(-50%); width: 44px; height: 44px; font-size: 1.15rem;
  display: grid; place-items: center;
}
.modal-checkout .modal-close:focus-visible, .checkout-cuerpo :is(button, input, select, a):focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }

.checkout-stepper { display: flex; align-items: flex-start; justify-content: center; gap: 12px; margin: 0; }
.checkout-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.checkout-step-circle {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--color-superficie); border: 2px solid var(--borde); color: var(--texto-suave);
  font-size: 1rem; font-weight: 700; transition: all 0.25s ease;
}
.checkout-step-label { font-size: 0.85rem; font-weight: 600; color: var(--texto-suave); white-space: nowrap; }
.checkout-step.active .checkout-step-circle {
  background: var(--color-primario); border-color: var(--color-primario); color: white;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-borde) 25%, transparent);
}
.checkout-step.active .checkout-step-label { color: var(--color-primario); }
.checkout-step.completado .checkout-step-circle { background: var(--verde-medio); border-color: var(--verde-medio); color: white; }
.checkout-step-line { width: 72px; height: 3px; margin-top: 18px; border-radius: 2px; background: var(--borde); }

.checkout-panel { display: none; animation: fadeIn 0.3s ease; }
.checkout-panel.active { display: block; }

/* Rejilla: formulario a la izquierda, resumen a la derecha (fijo al recorrer el formulario). */
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.checkout-principal { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.checkout-bloque, .checkout-resumen { padding: 26px 28px; background: white; border: 1px solid var(--borde); border-radius: 22px; box-shadow: var(--sombra); }
.checkout-bloque > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 1.35rem; }
.checkout-bloque > .muted { margin: -8px 0 18px; font-size: 1rem; }
.checkout-conteo { font-family: var(--font-texto); font-size: 1rem; font-weight: 600; color: var(--texto-suave); }
.checkout-resumen { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; padding: 26px; }
.checkout-resumen > h3 { margin: 0; font-size: 1.25rem; }
.checkout-resumen-fila { display: flex; justify-content: space-between; gap: 12px; font-size: 0.98rem; color: var(--texto-suave); }
.checkout-resumen-desglose { display: flex; flex-direction: column; gap: 10px; }
/* Yape apagado por pasar su límite: se ve atenuado y el aviso de abajo dice por qué (no solo el color). */
.metodo-pago-card.deshabilitado { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.4); }
.metodo-pago-card.deshabilitado:hover { transform: none; box-shadow: none; }
.metodo-pago-aviso {
  display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto); font-size: 0.88rem; font-weight: 600; line-height: 1.45;
}
.metodo-pago-aviso i { flex: none; margin-top: 2px; font-size: 1.05rem; }
/* Para quién es el envío (el repartidor), bajo el desglose: ícono y texto, no una cifra suelta más. */
.checkout-envio-nota { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--texto-suave); }
.checkout-envio-nota i { flex: none; margin-top: 2px; color: var(--acento-cosecha); font-size: 1.05rem; }
.checkout-resumen-desglose .checkout-resumen-fila span:last-child { font-weight: 600; color: var(--texto); white-space: nowrap; }
.checkout-resumen-nota {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px;
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto); font-size: 0.88rem; line-height: 1.45;
}
.checkout-resumen-nota i { flex-shrink: 0; margin-top: 1px; font-size: 1.15rem; }
.checkout-resumen .carrito-total { margin: 0; padding: 16px 0 4px; border: 0; border-top: 1px solid var(--borde); font-size: 1rem; color: var(--texto-suave); }
.checkout-resumen .carrito-total strong { font-family: var(--font-titulo); font-size: 2rem; line-height: 1.1; color: var(--color-primario); }
.checkout-resumen .btn { min-height: 58px; border-radius: 18px; font-size: 1.05rem; }
.checkout-resumen .btn-block { width: 100%; }

.checkout-garantias { list-style: none; display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.checkout-garantias li { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; font-weight: 500; color: var(--texto-suave); }
.checkout-garantias i {
  display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha); font-size: 1.15rem;
}

/* Líneas del carrito (paso 1). Ya no hay una lista con scroll propio dentro del modal: se desplaza el cuerpo. */
.carrito-items { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.carrito-item {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto 84px 44px;
  grid-template-areas: "media info qty subtotal remove"; align-items: center; gap: 14px;
  padding: 12px 12px 12px 12px; background: white; border: 1px solid var(--borde); border-radius: 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.carrito-item:hover { border-color: var(--color-borde); box-shadow: var(--sombra); }
/* La columna del carrito mide distinto según el modal (dos columnas en escritorio, una en pantallas medianas): cuando
   es angosta, la línea pasa a dos filas. Antes, con ~450 px, el nombre quedaba con 0 px y la cantidad lo tapaba. */
.carrito-items { container-type: inline-size; }
@container (max-width: 560px) {
  .carrito-item {
    grid-template-columns: 68px minmax(0, 1fr) auto; grid-template-areas: "media info remove" "qty qty subtotal";
    gap: 10px 12px;
  }
  .carrito-item .carrito-qty { justify-self: start; }
  .carrito-item-media { width: 68px; height: 68px; }
}
.carrito-item-media, .checkout-recap-media {
  display: grid; place-items: center; overflow: hidden; background: var(--color-superficie); font-size: 2.1rem;
}
.carrito-item-media { grid-area: media; width: 76px; height: 76px; border-radius: 16px; }
.carrito-item-media img, .checkout-recap-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carrito-item-info { grid-area: info; min-width: 0; }
.carrito-item-info strong { display: block; font-size: 1.1rem; line-height: 1.25; }
.carrito-item-info span { display: block; margin-top: 2px; font-size: 0.9rem; color: var(--texto-suave); }
.carrito-item .carrito-qty { grid-area: qty; gap: 2px; padding: 4px; border-radius: 999px; background: var(--color-superficie); }
.carrito-item .carrito-qty button { width: 44px; height: 44px; font-size: 1.2rem; background: white; transition: background 0.15s ease, transform 0.15s ease; }
.carrito-item .carrito-qty button:hover { background: var(--color-primario); color: white; }
.carrito-item .carrito-qty button:active { transform: scale(0.92); }
.carrito-item .carrito-qty span { min-width: 58px; font-size: 1rem; }
.carrito-item-subtotal { grid-area: subtotal; text-align: right; font-family: var(--font-titulo); font-size: 1.1rem; color: var(--color-primario); }
.carrito-remove {
  grid-area: remove; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: none; color: var(--naranja); font-size: 1.2rem; transition: background 0.15s ease;
}
.carrito-remove:hover { background: #fdeee9; }

/* Datos de entrega */
.checkout-campo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; font-size: 1rem; font-weight: 600; color: var(--texto); }
.checkout-campo input {
  min-height: 54px; padding: 0 18px; font-size: 1.1rem; border-radius: 14px; border: 1.5px solid var(--color-borde);
  background: white; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.checkout-campo input:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primario) 14%, transparent); }
.checkout-campo small { display: block; margin: 0; font-size: 0.88rem; font-weight: 400; line-height: 1.4; }
.modal-checkout .mapa-selector-bloque { margin: 0; }
.modal-checkout .mapa-selector-label { margin-bottom: 10px; font-size: 1rem; }
.modal-checkout .mapa-selector-label .btn { min-height: 44px; padding: 0 18px; font-size: 0.9rem; border: 1.5px solid var(--borde); border-radius: 999px; background: white; }
.modal-checkout .mapa-selector-label .btn:hover { background: var(--color-superficie); }
.modal-checkout .mapa-seleccionable { height: 320px; border-radius: 18px; }
.modal-checkout .mapa-ayuda { margin-top: 10px; font-size: 0.9rem; }

/* Carrito vacío */
.modal-checkout .empty-state { padding: 40px 16px; }

/* Paso 2: resumen del pedido y método de pago */
.checkout-recap { list-style: none; display: flex; flex-direction: column; gap: 12px; max-height: 34vh; overflow-y: auto; padding-right: 4px; }
.checkout-recap-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.checkout-recap-media { width: 56px; height: 56px; border-radius: 14px; font-size: 1.6rem; }
.checkout-recap-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.checkout-recap-texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkout-recap-texto small { color: var(--texto-suave); }
.checkout-recap-precio { font-weight: 700; color: var(--color-primario); }
.checkout-recap-reintento {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px;
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto); font-size: 0.95rem;
}
.checkout-recap-reintento i { font-size: 1.4rem; }
.checkout-actions { display: flex; flex-direction: column; gap: 10px; }

/* Una opción por fila: con tres métodos (y sus descripciones) en columnas el texto se partía palabra por palabra. */
.metodo-pago-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
.metodo-pago-card {
  position: relative; display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 16px 20px;
  background: white; border: 2px solid var(--borde); border-radius: 20px; cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.metodo-pago-card input { position: absolute; opacity: 0; pointer-events: none; }
.metodo-pago-card:hover { border-color: var(--color-borde); }
.metodo-pago-card:has(input:focus-visible) { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }
.metodo-pago-icon {
  display: grid; place-items: center; width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px;
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha); font-size: 1.8rem;
}
.metodo-pago-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.metodo-pago-nombre { font-size: 1.15rem; font-weight: 700; }
.metodo-pago-texto small { font-size: 0.9rem; color: var(--texto-suave); }
.metodo-pago-check {
  display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--borde); color: transparent; font-size: 1rem; transition: all 0.2s ease;
}
.metodo-pago-card.seleccionado {
  border-color: var(--color-primario); background: color-mix(in srgb, var(--color-superficie) 55%, white);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primario) 10%, transparent);
}
.metodo-pago-card.seleccionado .metodo-pago-check { background: var(--color-primario); border-color: var(--color-primario); color: white; }

.checkout-entrega-resumen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 0 0 18px; }
.checkout-entrega-resumen dt { font-size: 0.82rem; font-weight: 600; color: var(--texto-suave); }
.checkout-entrega-resumen dd { margin: 2px 0 0; font-size: 1.05rem; font-weight: 600; }
.checkout-entrega-resumen dd i { color: var(--acento-cosecha); }
#btn-checkout-editar-entrega { min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: 0.92rem; }

/* Paso 3: confirmación */
.checkout-final { max-width: 620px; margin: 0 auto; }
.checkout-confirmacion {
  margin-bottom: 18px; padding: 30px 32px 26px; text-align: center; background: white;
  border: 1px solid var(--borde); border-radius: 26px; box-shadow: var(--sombra);
}
.checkout-exito-icono {
  display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--color-primario); color: white; font-size: 2.4rem;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primario) 12%, transparent);
  animation: checkoutPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.checkout-exito-icono.es-banco { background: var(--acento-cosecha); box-shadow: 0 0 0 8px color-mix(in srgb, var(--acento-cosecha) 14%, transparent); }
.checkout-exito-icono.es-alerta { background: var(--acento-cosecha); box-shadow: 0 0 0 8px color-mix(in srgb, var(--acento-cosecha) 14%, transparent); }
@keyframes checkoutPop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.checkout-confirmacion h3 { margin-bottom: 6px; font-size: 1.85rem; }
.checkout-confirmacion p { margin: 0 0 4px; font-size: 1.05rem; color: var(--texto-suave); }
.checkout-confirmacion strong { color: var(--color-primario); }
.checkout-exito-total {
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: fit-content;
  margin: 16px auto 20px; padding: 12px 36px; border-radius: 18px; background: var(--color-superficie);
}
.checkout-exito-total span { font-size: 0.85rem; color: var(--texto-suave); }
.checkout-exito-total strong { font-family: var(--font-titulo); font-size: 2rem; line-height: 1.1; }
.checkout-exito-total small { font-size: 0.82rem; color: var(--texto-suave); }
.checkout-siguientes { list-style: none; display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--borde); text-align: left; }
.checkout-siguientes li { display: flex; align-items: flex-start; gap: 14px; }
.checkout-siguientes i {
  display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px;
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha); font-size: 1.3rem;
}
.checkout-siguientes strong { display: block; font-size: 1rem; color: var(--texto); }
.checkout-siguientes span { font-size: 0.92rem; color: var(--texto-suave); }
.checkout-final .btn { min-height: 58px; border-radius: 18px; font-size: 1.05rem; }

/* Pantallas medianas y chicas */
@media (max-width: 980px) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr); }
  .checkout-resumen { position: static; }
  .checkout-cuerpo { padding: 22px 24px 28px; }
}
@media (max-width: 700px) {
  #modal-pedido { padding: 0; }
  .modal.modal-checkout { height: 100%; max-height: 100%; border-radius: 0; }
  .checkout-cabecera { padding: 14px 68px 12px 16px; }
  .modal-checkout .modal-close { right: 12px; }
  .checkout-stepper { gap: 8px; }
  .checkout-step-line { width: 28px; }
  .checkout-step-label { font-size: 0.72rem; }
  .checkout-cuerpo { padding: 16px 14px 24px; }
  .checkout-bloque, .checkout-resumen { padding: 20px 18px; border-radius: 20px; }
  .metodo-pago-grid { grid-template-columns: minmax(0, 1fr); }
  .checkout-entrega-resumen { grid-template-columns: minmax(0, 1fr); }
  .checkout-confirmacion { padding: 28px 20px 24px; }
  .carrito-item {
    grid-template-columns: 68px minmax(0, 1fr) auto; grid-template-areas: "media info remove" "qty qty subtotal";
    gap: 10px 12px;
  }
  .carrito-item .carrito-qty { justify-self: start; }
  .carrito-item-media { width: 68px; height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .checkout-exito-icono { animation: none; }
  .carrito-item, .metodo-pago-card, .checkout-step-circle { transition: none; }
}

/* ---------- DETALLE DE PRODUCTO (página propia) ---------- */
/* Barra fija única: "Volver", pestañas de sección y —solo cuando la tarjeta de compra ya no se ve—
   nombre, precio y botón de compra. El fondo llega a los bordes de la pantalla (width:100vw + margen
   calc(50% - 50vw), la misma técnica de sangrado completo de las secciones de video) y el contenido
   sigue alineado con la página. */
.detalle-barra {
  position: sticky; top: 0; z-index: 90;
  width: 100vw; margin: -24px calc(50% - 50vw) 32px;
  padding: 10px max(24px, calc((100vw - 1232px) / 2));
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 20px;
  background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde); box-shadow: var(--sombra);
}
.detalle-volver {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px;
  background: transparent; color: var(--texto); font-weight: 600; font-size: 0.95rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.detalle-volver:hover { background: var(--color-superficie); color: var(--color-primario); }

.detalle-tabs { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.detalle-tabs::-webkit-scrollbar { display: none; }
.detalle-tab {
  flex-shrink: 0; min-height: 44px; padding: 0 20px; border-radius: 999px; background: transparent;
  font-size: 0.95rem; font-weight: 600; color: var(--texto-suave); white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.detalle-tab:hover { background: var(--color-superficie); color: var(--color-primario); }
.detalle-tab.active { background: var(--color-primario); color: white; }

.detalle-barra-compra {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-width: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.detalle-barra.con-compra .detalle-barra-compra { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.detalle-sticky-nombre {
  font-family: var(--font-titulo); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px;
}
.detalle-sticky-precio { font-weight: 700; color: var(--color-primario); white-space: nowrap; }
.detalle-barra-compra .btn { min-height: 44px; padding: 0 20px; white-space: nowrap; }

/* Base de las secciones de video del detalle (solo productos con video); las fotos viven en la galería
   (.detalle-visor / .detalle-miniaturas, más abajo). */
.detalle-hero, .detalle-galeria-item {
  /* height fija (no min-height): con solo min-height, "img { height:100% }" no tiene contra qué
     resolverse y la imagen cae a su alto intrínseco — una foto en vertical estira el contenedor
     mucho más allá de 55vh y desplaza todo lo que viene después (rompe el scroll de las pestañas). */
  height: 55vh;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--verde-pastel);
  display: flex; align-items: center; justify-content: center;
  font-size: 6rem;
  margin-bottom: 24px;
}
.detalle-hero img, .detalle-galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sección de galería con video (ver PRODUCTOS_CON_VIDEO/textosVideoGaleria en app.js). Selector
   combinado (no solo .detalle-video-seccion) para ganarle en especificidad a .detalle-hero/
   .detalle-galeria-item de arriba — misma clase base, esto es su ajuste puntual: más grande (88vh)
   y a sangre completa de verdad. "margin: -24px" solo cancelaba el padding de #app-main, así que en
   cualquier pantalla más ancha que su max-width:1280px seguía asomando el fondo claro de la página
   a los costados — el truco real es "width:100vw + margin calc(50% - 50vw)", que centra el
   elemento respecto al viewport completo sin importar qué tan anidado esté ni cuánto midan sus
   contenedores. El fondo NO es un negro parejo: cada sección trae el suyo por data (ver "fondo" en
   textosVideoGaleria, aplicado inline) para complementar el tono de SU video específico. */
.detalle-hero.detalle-video-seccion, .detalle-galeria-item.detalle-video-seccion {
  height: 88vh;
  border-radius: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* font-size:1rem reinicia la herencia: .detalle-hero/.detalle-galeria-item ponen font-size:6rem
   para el emoji de respaldo cuando no hay foto — el texto superpuesto ahora vive DENTRO de este
   wrap (para posicionarse sobre el video) y sin este reset heredaría ese 6rem gigante. */
.detalle-video-wrap { position: relative; width: 100%; height: 100%; font-size: 1rem; }
.detalle-video { width: 100%; height: 100%; object-fit: cover; display: block; background: transparent; }
/* Círculo chico en la esquina inferior derecha (no centrado — ver historial: se movió de centrado
   a esquina en las 3 secciones de Chirimoya y en el hero de landing, mismo lugar en todas). No debe
   competir con el título/párrafo/degradado/botones superpuestos, que sí van centrados por debajo. */
.detalle-video-replay {
  position: absolute; right: 24px; bottom: 24px;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  color: var(--verde-oscuro);
  border-radius: 50%;
  font-size: 1.05rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  transition: background 0.15s ease, transform 0.15s ease;
  z-index: 3;
}
/* El triángulo de "play" pesa visualmente más a la izquierda de su propio cuadro — un pequeño
   corrimiento a la derecha lo centra ópticamente dentro del círculo (si no, se ve descentrado). */
.detalle-video-replay i { margin-left: 3px; }
.detalle-video-replay:hover { background: white; transform: scale(1.08); }

/* Degradado + texto superpuestos abajo-izquierda (estilo Samsung), no un bloque aparte debajo del
   video. El degradado por defecto es oscuro→transparente (secciones 1 y 2, texto blanco); el
   modificador --claro (sección 3, fondo crema) lo invierte a claro→transparente con texto oscuro —
   nunca negro sobre un fondo claro, ni blanco sobre uno claro (ilegible en ambos casos). */
.detalle-video-degradado {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
  pointer-events: none;
  z-index: 1;
}
.detalle-video-seccion--claro .detalle-video-degradado {
  background: linear-gradient(to top, rgba(245, 240, 232, 0.92), transparent);
}
.detalle-video-texto {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  max-width: 620px;
  padding: 40px clamp(24px, 5vw, 56px) 44px;
  color: white;
}
.detalle-video-seccion--claro .detalle-video-texto { color: var(--texto); }
.detalle-video-etiqueta {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde-claro);
  margin-bottom: 8px;
}
.detalle-video-seccion--claro .detalle-video-etiqueta { color: var(--verde-medio); }
.detalle-video-texto h3 { color: inherit; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; margin-bottom: 10px; }
.detalle-video-texto p { color: inherit; opacity: 0.88; }

.detalle-seccion-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }

/* Scroll-reveal: IntersectionObserver agrega .visible al entrar en el viewport — a diferencia del
   resto de la app, aquí NO aplica animation-delay fijo (estas secciones aparecen según scroll
   real, no al cargar la vista). Ver inicializarScrollRevealDetalle(). */
.detalle-scroll-seccion {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.detalle-scroll-seccion.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .detalle-scroll-seccion { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media (max-width: 560px) {
  .detalle-hero, .detalle-galeria-item { height: 40vh; font-size: 4rem; }
  /* El sangrado completo (width:100vw + margin calc(50% - 50vw)) ya no depende del ancho de
     pantalla — funciona igual en cualquiera, así que acá solo queda el alto (más bajo en móvil) y
     el padding del texto superpuesto, que si no se ve muy apretado en una pantalla angosta. */
  .detalle-hero.detalle-video-seccion, .detalle-galeria-item.detalle-video-seccion { height: 75vh; }
  .detalle-video-replay { width: 40px; height: 40px; font-size: 0.95rem; right: 16px; bottom: 16px; }
  /* Padding derecho más ancho que el resto: en una pantalla angosta el texto ocupa casi todo el
     ancho (no hay max-width:620px de sobra como en desktop), así que sin este espacio extra la
     última línea del párrafo queda debajo del botón de repetir de la esquina inferior derecha —
     válido tanto en Chirimoya como en el hero de landing, los dos llevan el mismo botón ahí. */
  .detalle-video-texto { padding: 28px 72px 32px 20px; }
}

/* ---------- CALIFICACIONES Y RESEÑAS ---------- */
.rating-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
/* Gris por defecto (estrella "vacía"); .estrella-llena la pinta dorada — antes era ★/☆, dos
   caracteres distintos, ahora es el mismo ti-star con el color como única diferencia (ver
   renderEstrellas en app.js). */
.rating-stars { color: var(--borde); font-size: 1rem; letter-spacing: 1px; }
.rating-stars .estrella-llena { color: #f0a500; }
.rating-value { font-weight: 700; color: var(--texto); font-size: 0.92rem; }
.rating-count { font-size: 0.8rem; color: var(--texto-suave); }

.resenas-section { margin-top: 24px; border-top: 1px solid var(--borde); padding-top: 20px; }
.resenas-section h3 { margin-bottom: 12px; }
.resenas-lista { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; max-height: 260px; overflow-y: auto; }
.resena-card { background: var(--color-superficie); border-radius: 12px; padding: 12px 14px; }
.resena-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.resena-usuario { font-weight: 600; font-size: 0.88rem; color: var(--color-primario); }
.resena-header .rating-stars { font-size: 0.85rem; }
.resena-fecha { font-size: 0.74rem; color: var(--texto-suave); margin-top: 2px; }
.resena-comentario { font-size: 0.88rem; margin-top: 6px; color: var(--texto); }

.resena-form { background: white; border: 1.5px solid var(--borde); border-radius: 14px; padding: 16px; }
.resena-form h4 { margin-bottom: 10px; font-size: 0.95rem; color: var(--color-primario); }
.estrellas-selector { display: flex; gap: 4px; margin-bottom: 12px; font-size: 1.7rem; line-height: 1; }
.estrellas-selector button { background: none; color: #dcdcdc; padding: 0; transition: color 0.15s ease, transform 0.15s ease; }
.estrellas-selector button:hover { transform: scale(1.12); }
.estrellas-selector button.activa { color: #f0a500; }
.resena-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--borde);
  font-family: inherit;
  font-size: 0.88rem;
  resize: vertical;
  min-height: 60px;
  margin-bottom: 12px;
  outline: none;
}
.resena-form textarea:focus { border-color: var(--color-borde); }

/* ---------- TOASTS ---------- */
.toast-container {
  position: fixed; top: 20px; right: 20px; z-index: 2000;
  display: flex; flex-direction: column; gap: 10px;
}
.toast {
  background: white;
  border-left: 4px solid var(--color-primario);
  box-shadow: var(--sombra-hover);
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 0.9rem;
  min-width: 240px;
  max-width: 340px;
  animation: slideIn 0.3s ease;
}
.toast.error { border-left-color: var(--naranja); }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---------- FOOTER ---------- */
.footer {
  text-align: center;
  padding: 28px 16px;
  color: var(--texto-suave);
  font-size: 0.85rem;
  border-top: 1px solid var(--borde);
}

.hidden { display: none !important; }

/* ---------- VERIFICAR (PÁGINA PÚBLICA DE CERTIFICACIÓN) ---------- */
/* ---------- VERIFICAR.HTML — página pública del QR, paleta y tipografía de marca. A
   diferencia de los paneles (Productor/Repartidor/Admin), esto es una sola
   columna de lectura centrada a propósito — no un dashboard: la mayoría la abre desde el
   celular al escanear el QR, y un ancho completo no ayuda a leer un timeline lineal. ---------- */
.verificar-topbar { background: var(--color-primario); padding: 16px 20px; }
.verificar-topbar-inner {
  max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: white; font-family: var(--font-titulo); font-weight: 700; font-size: 1.05rem;
}
.verificar-topbar-inner .brand-icon { width: 26px; height: 26px; display: flex; }
.verificar-topbar-inner strong { color: var(--color-fondo-secundario); }
.verificar-topbar-tag {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-family: var(--font-texto); font-weight: 700; font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  background: rgba(255,255,255,0.16); padding: 5px 12px; border-radius: 100px;
}

.verificar-page {
  max-width: 560px;
  margin: 0 auto;
  padding: 32px 20px 64px;
  min-height: 100vh;
  font-family: var(--font-texto);
}

.verificar-cargando {
  text-align: center;
  padding: 96px 16px;
  color: var(--color-secundario);
}
.spinner {
  width: 36px; height: 36px;
  border: 4px solid var(--color-superficie);
  border-top-color: var(--color-primario);
  border-radius: 50%;
  margin: 0 auto 16px;
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.verificar-producto-hero { text-align: center; margin-bottom: 24px; }
.verificar-producto-foto {
  width: 96px; height: 96px; margin: 0 auto 14px;
  border-radius: 50%; overflow: hidden;
  border: 3px solid var(--color-superficie-elevada, white);
  box-shadow: 0 0 0 4px var(--color-superficie), var(--sombra);
  background: var(--color-superficie);
  display: flex; align-items: center; justify-content: center;
}
.verificar-producto-foto img { width: 100%; height: 100%; object-fit: cover; }
.verificar-producto-foto-vacia { font-size: 2.2rem; color: var(--color-primario); }
.verificar-producto-hero h1 { font-size: 1.5rem; margin-bottom: 6px; }
.verificar-producto-productor {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--color-secundario); font-size: 0.92rem; font-weight: 600;
}

/* El "sello" es el elemento con más peso visual de la página — responde a la única pregunta
   que trae a alguien acá. Centrado, ícono grande en círculo, tipografía de marca. */
.verificar-sello {
  text-align: center;
  border-radius: 20px;
  padding: 28px 22px;
  margin-bottom: 32px;
  box-shadow: var(--sombra);
}
.verificar-sello-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  font-size: 2rem; margin-bottom: 14px;
}
.verificar-sello strong { display: block; font-family: var(--font-titulo); font-size: 1.15rem; margin-bottom: 6px; }
.verificar-sello p { font-size: 0.92rem; margin: 0; line-height: 1.45; }
.verificar-sello-meta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; font-size: 0.78rem; font-weight: 700;
  background: rgba(255,255,255,0.6); padding: 6px 14px; border-radius: 100px;
}
.sello-ok { background: var(--color-superficie); border: 1.5px solid color-mix(in srgb, var(--color-primario) 30%, transparent); color: var(--color-primario); }
.sello-ok .verificar-sello-icono { background: var(--color-primario); color: white; }
.sello-error { background: #f8e2dc; border: 1.5px solid #eab6a6; color: #a23b22; }
.sello-error .verificar-sello-icono { background: #a23b22; color: white; }
.sello-neutro { background: #f1f3f5; border: 1.5px solid #d6dbe0; color: #495157; }
.sello-neutro .verificar-sello-icono { background: #8a939c; color: white; }

.timeline-titulo { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin-bottom: 14px; }
.timeline { display: flex; flex-direction: column; margin-bottom: 28px; }
.timeline-item {
  display: flex;
  gap: 14px;
  position: relative;
  padding-bottom: 22px;
}
.timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px; top: 38px; bottom: 0;
  width: 2px;
  background: var(--color-borde);
}
.timeline-marker {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-primario);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--color-fondo-pagina, white);
}
.timeline-content {
  flex: 1;
  min-width: 0;
  background: var(--color-superficie-elevada, white);
  border: 1px solid var(--color-borde);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--sombra);
}
.timeline-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.timeline-header strong { font-family: var(--font-titulo); font-size: 0.92rem; color: var(--color-primario); }
.timeline-indice {
  font-size: 0.7rem; color: var(--color-secundario); background: var(--color-superficie);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.timeline-fecha { display: flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--color-secundario); margin-top: 2px; }
.timeline-datos { font-size: 0.85rem; margin-top: 6px; color: var(--texto); }
.timeline-hash { display: flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--color-secundario); margin-top: 6px; }
.timeline-hash code { background: var(--color-superficie); padding: 2px 6px; border-radius: 6px; font-family: monospace; word-break: break-all; }
.timeline-verificador { display: flex; align-items: center; gap: 5px; font-size: 0.82rem; color: var(--color-secundario); margin: 4px 0 0; }

.pedido-certificado-cta { margin-top: 10px; }
.certificado-pedido { display: flex; flex-direction: column; }
.certificado-pedido-hash { font-size: 0.8rem; color: var(--texto-suave); margin: 0 0 8px; }
.certificado-pedido-hash code { background: var(--color-superficie); padding: 2px 6px; border-radius: 6px; font-family: monospace; word-break: break-all; }
.certificado-producto-linea {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px;
  padding: 8px 0; border-bottom: 1px dashed var(--borde); font-size: 0.85rem;
}
.certificado-producto-linea:last-of-type { border-bottom: none; }
.certificado-producto-linea code { background: var(--color-superficie); padding: 1px 5px; border-radius: 6px; font-family: monospace; }
.certificado-link-cadena { font-size: 0.78rem; color: var(--color-secundario); text-decoration: none; font-weight: 600; white-space: nowrap; }
.certificado-link-cadena:hover { text-decoration: underline; }
.certificado-pedido-nota { margin-top: 8px; font-size: 0.78rem; }

.verificar-nota {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 24px;
  font-size: 0.85rem;
  color: var(--texto);
  line-height: 1.55;
}
.verificar-nota i { font-size: 1.2rem; color: var(--color-primario); flex-shrink: 0; margin-top: 1px; }
.verificar-nota strong { color: var(--color-primario); }
.verificar-footer {
  text-align: center;
  color: var(--color-secundario);
  font-size: 0.8rem;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: white;
    flex-direction: column;
    padding: 12px;
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-link { text-align: left; }
  .nav-categorias { flex-direction: column; gap: 0; width: 100%; }
  .hamburger { display: block; }
  .user-name { font-size: 0.8rem; }

  .nav-cat-panel {
    position: static;
    transform: none;
    width: auto;
    padding-top: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .nav-cat.open .nav-cat-panel { max-height: 700px; overflow-y: auto; } /* un poco más que antes: ahora también entra la columna "Descubre" apilada */
  .nav-cat-panel-inner {
    flex-direction: column; /* apilada: Descubre pasa a ir debajo del grid de productos, no al costado */
    transform: none; box-shadow: none; border-radius: 12px; margin-top: 8px;
  }
  .nav-cat-panel-descubre {
    flex-basis: auto;
    border-left: none;
    border-top: 1px solid var(--borde);
    padding-left: 0;
    padding-top: 14px;
  }
}

@media (max-width: 560px) {
  .navbar-inner { padding: 20px 16px; }
  .brand-text { display: none; }
  #app-main { padding: 16px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .product-card-body { padding: 12px 14px 14px; }
  .product-banner { height: 120px; font-size: 2.6rem; }
  .modal { padding: 20px; }
  .btn-sm { margin-left: 0; }
}

/* ============================================================================
   PANEL DEL PRODUCTOR — rediseño con secciones dedicadas (Inicio / Mis Chacras /
   Borradores / Mis Productos / Gestión Económica). La tipografía (Rubik + Nunito
   Sans) y la paleta --color-* son las globales del sitio.
   ============================================================================ */

.productor-shell { display: flex; flex-direction: column; gap: 22px; }

/* Pestañas de los paneles (productor y admin). Antes, una sola fila con el desborde escondido: la última pestaña
   ("Gestión Económica", y varias del admin) quedaba cortada sin ninguna señal (2026-10-14). ui-ux-pro-max: no recortar
   contenido sin aviso; 21st.dev "Badge Tabs": la activa resaltada como una pastilla, las demás tenues, con su contador.
   En computadora van en las filas que hagan falta, todas a la vista; en el celular, una fila que se desliza con un
   degradado en el borde que avisa que hay más (vigilarDesbordePestanas en app.js). */
.productor-tabs, .admin-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 5px;
  background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 16px;
}
.productor-tab-btn, .admin-tab-btn {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0; min-height: 44px;
  padding: 10px 14px; font-family: var(--font-titulo); font-weight: 700; font-size: 0.92rem;
  color: var(--color-secundario); background: transparent; border: 0; border-radius: 12px; cursor: pointer;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.productor-tab-btn i, .admin-tab-btn i { font-size: 1.1rem; }
.productor-tab-btn:hover, .admin-tab-btn:hover { color: var(--color-primario); background: rgba(255, 255, 255, 0.65); }
.productor-tab-btn.active, .admin-tab-btn.active {
  color: var(--color-primario); background: #fff;
  box-shadow: 0 1px 3px rgba(45, 59, 42, 0.16), 0 0 0 1px rgba(45, 59, 42, 0.08);
}
.productor-tab-btn:focus-visible, .admin-tab-btn:focus-visible { outline: 3px solid rgba(45, 59, 42, 0.35); outline-offset: 2px; }
@media (max-width: 760px) {
  .productor-tabs, .admin-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .productor-tabs::-webkit-scrollbar, .admin-tabs::-webkit-scrollbar { display: none; }
  .productor-tab-btn, .admin-tab-btn { scroll-snap-align: start; padding: 10px 14px; font-size: 0.85rem; }
  .productor-tabs.hay-mas-der, .admin-tabs.hay-mas-der { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .productor-tabs.hay-mas-izq, .admin-tabs.hay-mas-izq { -webkit-mask-image: linear-gradient(to left, #000 82%, transparent); mask-image: linear-gradient(to left, #000 82%, transparent); }
  .productor-tabs.hay-mas-izq.hay-mas-der, .admin-tabs.hay-mas-izq.hay-mas-der {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  }
}

.productor-tab-panel { display: none; }
.productor-tab-panel.active { display: flex; flex-direction: column; gap: 24px; animation: productorFadeUp .35s ease both; }
@keyframes productorFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Inicio: gráfico + tabla junto al resumen ---------- */
.inicio-graficos { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 960px) { .inicio-graficos { grid-template-columns: 1.3fr 1fr; } }
.grafico-card canvas { max-height: 240px; }
.tabla-wrap { overflow-x: auto; }
table.tabla-simple { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
/* Columnas de cifras: a la derecha y con dígitos de ancho fijo, para comparar de un vistazo. */
table.tabla-numerica th.num, table.tabla-numerica td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tabla-simple th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-secundario); padding: 8px 10px; border-bottom: 2px solid var(--color-borde); }
table.tabla-simple td { padding: 10px 10px; border-bottom: 1px solid color-mix(in srgb, var(--color-borde) 40%, transparent); font-weight: 600; }
table.tabla-simple tr:hover td { background: color-mix(in srgb, var(--color-borde) 8%, transparent); }

/* ---------- Mis Chacras: vista dedicada y amplificada ---------- */
.chacras-layout { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 900px) {
  .chacras-layout { flex-direction: row; align-items: flex-start; }
  .chacras-layout > .card-panel { flex: 0 0 360px; position: sticky; top: 16px; }
}
.grid-chacras { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .grid-chacras { grid-template-columns: repeat(2, 1fr); } }
.chacra-card {
  background: var(--blanco); border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--color-borde); box-shadow: var(--sombra);
  transition: transform .25s ease, box-shadow .25s ease;
}
.chacra-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-hover); }
.chacra-card-banner {
  min-height: 56px; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--color-primario) 35%, transparent), transparent 60%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-primario) 12%, var(--color-superficie)) 0 18px, color-mix(in srgb, var(--color-borde) 20%, var(--color-superficie)) 18px 36px);
}
.chacra-card-banner .chacra-codigo-badge {
  font-family: var(--font-titulo); font-weight: 800; font-size: 0.8rem;
  background: var(--color-primario); color: white; padding: 5px 12px; border-radius: 8px;
  box-shadow: var(--sombra);
}
.chacra-siembras {
  font-size: 0.78rem; font-weight: 700; color: var(--color-primario);
  background: rgba(255, 255, 255, 0.88); padding: 4px 10px; border-radius: 999px;
}
.chacra-siembras:empty { display: none; }
.chacra-card-cultivos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; font-size: 0.85rem; }
.chacra-cultivo-chip {
  padding: 4px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: var(--color-superficie); color: var(--color-primario);
}
.chacra-card-body { padding: 18px 18px 20px; }
.chacra-card-body h4 { font-size: 1.05rem; margin: 0 0 8px; color: var(--color-primario); font-family: var(--font-titulo); }
.chacra-card-ubicacion { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--color-secundario); margin-top: 10px; }
.chacra-card-ubicacion i { color: var(--color-primario); }
.chacra-card-mapa-mini { height: 160px; border-radius: 12px; overflow: hidden; border: 1px solid var(--color-borde); background: var(--color-superficie); }
/* H2: la parcela del perfil ofrecida como primera chacra (21st.dev "Empty State"). */
.chacra-del-perfil { display: grid; gap: 14px; padding: 22px; border-radius: var(--radio); background: #fff; border: 1px solid var(--color-borde); box-shadow: var(--sombra); max-width: 560px; }
.chacra-del-perfil-texto { display: flex; gap: 14px; align-items: flex-start; }
.chacra-del-perfil-icono { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--verde-pastel); color: var(--color-primario); font-size: 1.5rem; }
.chacra-del-perfil h4 { margin: 0 0 4px; font-size: 1.1rem; color: var(--color-primario); font-family: var(--font-titulo); }
.chacra-del-perfil p { margin: 0; color: var(--texto-suave); line-height: 1.5; }
.chacra-del-perfil .btn-chacra-del-perfil { justify-self: start; min-height: 48px; display: inline-flex; align-items: center; gap: 8px; }
/* H4: editar / eliminar la chacra; eliminar pide "Sí / No" en la misma tarjeta (21st.dev "Confirmation Button"). */
.chacra-card-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-borde); }
.chacra-card-acciones .btn { min-height: 44px; }
.chacra-confirmar { display: none; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; font-weight: 700; color: #b42318; }
.chacra-confirmar > span { flex: 1 1 100%; }
.chacra-card-acciones.confirmando .btn-editar-chacra,
.chacra-card-acciones.confirmando .btn-borrar-chacra { display: none; }
.chacra-card-acciones.confirmando .chacra-confirmar { display: flex; }
.chacra-confirmar .btn-danger { background: #b42318; color: #fff; }
.form-chacra-acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Borradores: header con progreso + micro-efectos en preview ---------- */
.borradores-lista { display: flex; flex-direction: column; gap: 22px; }
.borrador-card { padding: 0; overflow: hidden; }
.borrador-card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px; background: var(--color-fondo-secundario); margin: 0;
}
.borrador-card-header h4 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; margin: 0; }
.borrador-progreso-wrap { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 700; color: var(--color-secundario); }
.borrador-progreso-barra { width: 84px; height: 6px; border-radius: 100px; background: color-mix(in srgb, var(--color-borde) 35%, transparent); overflow: hidden; }
.borrador-progreso-fill { height: 100%; background: var(--color-primario); border-radius: 100px; transition: width .4s ease; }
.borrador-card-body { padding: 20px; }
.borrador-preview-card .product-card:hover { transform: scale(1.03); }

/* ---------- Mis Productos: barra de stock + zoom de imagen en hover ---------- */
.stock-barra { height: 5px; border-radius: 100px; background: color-mix(in srgb, var(--color-borde) 30%, transparent); overflow: hidden; margin-top: 4px; }
.stock-barra-fill { height: 100%; background: var(--color-primario); border-radius: 100px; }
.stock-barra-fill.low { background: var(--tierra); }
.product-card-media { overflow: hidden; }
.product-banner img { transition: transform .4s ease; }
.product-card:hover .product-banner img { transform: scale(1.08); }

/* ---------- Gestión Económica: vista dedicada con stats + gráficos + tabla ---------- */
.economia-stats { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .economia-stats { grid-template-columns: repeat(3, 1fr); } }
.economia-stat {
  background: var(--blanco); border: 1px solid color-mix(in srgb, var(--color-borde) 35%, transparent); border-radius: var(--radio); padding: 20px;
  box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 10px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.economia-stat:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.economia-stat-cabeza { display: flex; align-items: center; gap: 12px; }
.economia-stat-icono {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%; font-size: 1.15rem;
  background: var(--color-superficie); color: var(--color-primario);
}
.economia-stat-sub { font-size: 0.85rem; color: var(--texto-suave); }
.economia-badge { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.economia-badge.positivo { background: color-mix(in srgb, var(--verde-oscuro) 12%, white); color: var(--verde-oscuro); }
.economia-badge.negativo { background: #fbe9e4; color: #b3401f; }
@media (prefers-reduced-motion: reduce) { .economia-stat, .chacra-card { transition: none; } .economia-stat:hover, .chacra-card:hover { transform: none; } }
.economia-stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-secundario); font-weight: 700; }
.economia-stat-valor { font-family: var(--font-titulo); font-weight: 800; font-size: 1.9rem; color: var(--color-primario); }
.economia-graficos { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 960px) { .economia-graficos { grid-template-columns: 1.4fr 1fr; } }
.grafico-card h4 { font-size: 1rem; display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }

/* Distribución de costos: donut + lista con monto y porcentaje */
.costos-cuerpo { display: grid; grid-template-columns: minmax(140px, 190px) minmax(0, 1fr); gap: 22px; align-items: center; }
.costos-donut { position: relative; width: 100%; max-width: 190px; margin: 0 auto; aspect-ratio: 1; }
.grafico-card .costos-donut canvas { max-height: none; }
.costos-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.costos-leyenda li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 44px; align-items: center; gap: 10px; font-size: 0.9rem; }
.costos-chip { width: 12px; height: 12px; border-radius: 4px; }
.costos-nombre { font-weight: 600; color: var(--texto); }
.costos-monto { font-weight: 700; color: var(--color-primario); font-variant-numeric: tabular-nums; white-space: nowrap; }
.costos-pct { text-align: right; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.costos-leyenda .costos-total { grid-template-columns: minmax(0, 1fr) auto; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--borde); }
@media (max-width: 560px) { .costos-cuerpo { grid-template-columns: 1fr; } }


/* ============================================================================
   AMPLIACIÓN — detalle de producto. Pedido explícito: "muy pequeño, hazlo un poco más grande".
   Va al final a propósito: gana por orden sobre las reglas base de arriba sin tener que tocarlas
   una por una.
   ============================================================================ */

/* ---------- Detalle de producto ---------- */
.detalle-hero, .detalle-galeria-item { height: 62vh; min-height: 340px; }

.detalle-encabezado .pill { font-size: 0.95rem; padding: 8px 16px; }
.btn-favorito-detalle { padding: 10px 20px; font-size: 0.95rem; }
.detalle-cabecera { gap: 12px; margin: 22px 0 28px; }
.detalle-cabecera h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.15; }
.detalle-precio-row .product-price { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.detalle-precio-row .product-stock { font-size: 1rem; }

.detalle-unidad-label { font-size: 1rem; gap: 8px; }
.detalle-unidad-label select { padding: 15px 16px; font-size: 1.05rem; border-radius: 12px; }

.detalle-accion-principal { gap: 18px; margin-bottom: 32px; }
.detalle-accion-principal .btn { padding: 18px 28px; font-size: 1.15rem; }
.detalle-cantidad-selector { padding: 8px 14px; gap: 16px; }
.detalle-cantidad-selector button { width: 46px; height: 46px; font-size: 1.4rem; }
.detalle-cantidad-selector span { min-width: 32px; font-size: 1.3rem; }

.detalle-productor-card { padding: 26px 28px; }
.detalle-productor-icono { width: 64px; height: 64px; font-size: 1.9rem; }
.detalle-productor-nombre { font-size: 1.35rem; }
.detalle-productor-label { font-size: 0.8rem; }
.detalle-productor-ubicacion { font-size: 0.98rem; }
.detalle-productor-card .mapa-mini { height: 260px; }
.detalle-seccion-titulo { font-size: 1.45rem; }

@media (max-width: 560px) {
  .detalle-hero, .detalle-galeria-item { height: 44vh; min-height: 260px; }
  .detalle-accion-principal .btn { padding: 16px 20px; font-size: 1.05rem; }
}

/* Contacto del comprador dentro de la tarjeta de envío (Gestionar Envíos). */
.envio-contacto {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: 12px; padding: 10px 14px; margin-top: 12px;
}
.envio-contacto-nombre { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--color-primario); }
.envio-contacto-llamar { margin-left: 0; text-decoration: none; font-size: 0.95rem; padding: 8px 16px; }

/* ---------- Admin > Productores ---------- */
.admin-buscador {
  display: flex; align-items: center; gap: 10px;
  background: white; border: 1.5px solid var(--color-borde); border-radius: 14px;
  padding: 4px 16px; margin-bottom: 22px; max-width: 560px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-buscador:focus-within { border-color: var(--color-primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 15%, transparent); }
.admin-buscador i { color: var(--color-secundario); font-size: 1.2rem; }
.admin-buscador input { flex: 1; border: none; outline: none; background: transparent; padding: 12px 0; font-size: 1rem; font-family: inherit; }
/* Las tarjetas de una fila miden lo mismo (un nombre largo baja la insignia y las dejaba desiguales) y el mapa queda
   alineado al pie de todas. */
#admin-productores-lista { align-items: stretch; }
.productor-admin-card { display: flex; flex-direction: column; }
.productor-admin-card .perfil-datos-grid { margin-bottom: 12px; }
.productor-admin-card .chacra-card-mapa-mini,
.productor-admin-card .mapa-bloque-neutro { margin-top: auto; }
.productor-admin-tel { color: var(--color-primario); font-weight: 700; text-decoration: none; }
.productor-admin-tel:hover { text-decoration: underline; }
#admin-productores-lista .pedido-card { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
#admin-productores-lista .pedido-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }

/* =====================================================================================
   MIS PEDIDOS — rediseño premium: ancho completo, progreso por hitos, PIN, mapa en vivo.
   Todo va scopeado a #view-mis-pedidos / #pedidos-list: .pedido-card, .btn-sm, .pill y
   .empty-state se comparten con otros paneles y NO deben cambiar de aspecto allá.
   Criterios de diseño (skill ui-ux-pro-max): estilo Organic Biophilic (radios 16-24px, sombras
   naturales), acento "dorado cosecha" de su paleta Agriculture, objetivos táctiles >= 44px,
   estados que no dependen solo del color y reduced-motion respetado. El patrón de nodos de la
   línea de tiempo (hecho sólido / actual con halo pulsante / pendiente tenue) sigue el componente
   "Order History" de 21st.dev, adaptado a CSS propio (el frontend no usa React ni Tailwind).
   ===================================================================================== */
#view-mis-pedidos {
  --mp-acento: #A16207;        /* dorado cosecha — 4.9:1 sobre blanco */
  --mp-acento-texto: #7c4a03;  /* texto sobre fondos dorados suaves — 6:1 */
  --mp-acento-suave: #fbf3e2;
  --mp-rojo: #b3401f;
  --mp-linea: #d6dfd0;
  --mp-radio: 22px;
}

.mp-solo-lectores {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Cabecera con foto ---- */
#view-mis-pedidos .pedidos-hero, #view-notificaciones .notif-hero { padding: 34px 38px; margin-bottom: 26px; align-items: center; box-shadow: 0 18px 40px -22px rgba(27, 67, 50, 0.55); }
#view-mis-pedidos .pedidos-hero h2, #view-notificaciones .notif-hero h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); display: flex; align-items: center; gap: 12px; }
.pedidos-hero-sub { color: rgba(255, 255, 255, 0.88); margin-top: 6px; font-size: 1.02rem; }
#view-mis-pedidos .pedidos-hero .btn, #view-notificaciones .notif-hero .btn { min-height: 46px; padding: 10px 22px; display: inline-flex; align-items: center; gap: 8px; }

/* ---- Resumen (métricas) ---- */
.pedidos-resumen { margin-bottom: 26px; }
.pedidos-resumen:empty { display: none; }
#view-mis-pedidos .resumen-panel { padding: 28px 32px; border-radius: var(--mp-radio); margin-bottom: 0; }
#view-mis-pedidos .resumen-stat-icono { width: 54px; height: 54px; font-size: 1.5rem; }
#view-mis-pedidos .resumen-stat-valor { font-size: clamp(1.5rem, 2.2vw, 2rem); white-space: nowrap; }
#view-mis-pedidos .resumen-stat-destacado .resumen-stat-icono { width: 66px; height: 66px; font-size: 1.8rem; }
#view-mis-pedidos .resumen-stat-destacado .resumen-stat-valor { font-size: clamp(2rem, 3.2vw, 2.8rem); }

#view-mis-pedidos .resumen-destacado-camino {
  background: var(--mp-acento-suave);
  border: 1.5px solid color-mix(in srgb, var(--mp-acento) 35%, white);
  color: var(--mp-acento-texto);
  padding: 14px 18px; min-height: 48px; font-size: 0.96rem; border-radius: 14px;
}
.resumen-destacado-camino > i:first-child { font-size: 1.4rem; flex-shrink: 0; }
.mp-aviso-flecha { margin-left: auto; transition: transform 0.2s ease; }
.resumen-destacado-camino:hover .mp-aviso-flecha { transform: translateX(4px); }
.resumen-destacado-camino:focus-visible { outline: 3px solid var(--mp-acento); outline-offset: 2px; }

/* ---- Filtros + buscador ---- */
.pedidos-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 24px; }
#view-mis-pedidos .pedidos-tabs { margin: 0; gap: 10px; }
#view-mis-pedidos .pedidos-tab { min-height: 46px; padding: 10px 20px; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
#view-mis-pedidos .pedidos-tab:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-primario) 55%, white); outline-offset: 2px; }
.pedidos-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px;
  background: var(--color-superficie); color: var(--color-primario);
  font-size: 0.8rem; font-weight: 700; transition: background 0.2s ease, color 0.2s ease;
}
.pedidos-tab.active .pedidos-tab-count { background: rgba(255, 255, 255, 0.22); color: white; }

#view-mis-pedidos .pedidos-buscador {
  flex: 1 1 340px; max-width: 520px; min-width: 0; margin: 0;
  display: flex; align-items: center; gap: 8px;
  background: white; border: 1.5px solid var(--borde); border-radius: 999px; padding: 4px 4px 4px 18px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#view-mis-pedidos .pedidos-buscador:focus-within { border-color: var(--color-primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 16%, transparent); }
.pedidos-buscador > i { color: var(--color-secundario); font-size: 1.2rem; }
#view-mis-pedidos .pedidos-buscador input { flex: 1; width: 100%; min-width: 0; border: none; outline: none; background: transparent; padding: 12px 4px; font-size: 1rem; border-radius: 0; }
#view-mis-pedidos .pedidos-buscador .btn { min-height: 44px; padding: 10px 24px; border-radius: 999px; }

/* ---- Tarjeta de pedido ---- */
#pedidos-list { gap: 26px; }
#pedidos-list .mp-card {
  position: relative; padding: 0; overflow: hidden;
  border-radius: var(--mp-radio); border: 1px solid var(--borde); background: white; box-shadow: var(--sombra);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
#pedidos-list .mp-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--mp-estado, var(--color-borde)); z-index: 2; }
.mp-card[data-estado="entregado"] { --mp-estado: var(--verde-principal); }
.mp-card[data-estado="en_curso"] { --mp-estado: var(--mp-acento); }
.mp-card[data-estado="pago_rechazado"] { --mp-estado: var(--mp-rojo); }
.mp-card[data-estado="pendiente"] { --mp-estado: #9aa79f; }
@media (hover: hover) {
  #pedidos-list .mp-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); }
  #pedidos-list .mp-card:hover .mp-thumb { transform: translateY(-2px); }
}
#pedidos-list .mp-card:focus { outline: none; }
#pedidos-list .mp-card:focus-visible { outline: 3px solid var(--mp-acento); outline-offset: 3px; }
#pedidos-list .mp-card.mp-resaltado { animation: mpResalte 2s ease; }
@keyframes mpResalte {
  0%, 100% { box-shadow: var(--sombra); }
  25% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mp-acento) 45%, transparent), var(--sombra-hover); }
}

.mp-cabecera { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 28px 32px 22px 38px; }
.mp-thumbs { display: flex; align-items: center; }
.mp-thumb {
  width: 84px; height: 84px; margin-left: -26px; flex-shrink: 0;
  border-radius: 20px; overflow: hidden; border: 3px solid white; background: var(--color-superficie);
  box-shadow: 0 6px 16px rgba(27, 67, 50, 0.18);
  display: flex; align-items: center; justify-content: center; font-size: 2.4rem;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.mp-thumbs .mp-thumb:first-child { margin-left: 0; }
.mp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-thumb-mas { background: var(--color-primario); color: white; font-family: var(--font-titulo); font-weight: 700; font-size: 1.2rem; }

.mp-titulo {
  font-family: var(--font-titulo); font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.25;
  color: var(--color-primario); margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mp-meta { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.mp-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--color-superficie); color: var(--texto-suave); font-size: 0.84rem; font-weight: 600; white-space: nowrap;
}
.mp-chip-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--color-primario); letter-spacing: 0.02em; }

.mp-total { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.mp-total-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-suave); font-weight: 700; }
.mp-total strong { font-family: var(--font-titulo); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; color: var(--color-primario); }
.mp-total .pill { margin-top: 4px; white-space: nowrap; }

/* ---- Progreso por hitos: Pedido → Pago → En camino → Entregado ---- */
.mp-progreso { list-style: none; margin: 0; padding: 6px 32px 28px 38px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mp-paso { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.mp-paso::before { content: ''; position: absolute; top: 21px; right: 50%; width: 100%; height: 4px; border-radius: 4px; background: var(--mp-linea); }
.mp-paso:first-child::before { display: none; }
.mp-paso-hecho::before, .mp-paso-actual::before, .mp-paso-error::before { background: linear-gradient(90deg, var(--color-primario), var(--verde-medio)); }
.mp-paso-nodo {
  position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  background: var(--color-superficie); color: #728178; box-shadow: 0 0 0 6px white;
  transition: background 0.3s ease, color 0.3s ease;
}
.mp-paso-hecho .mp-paso-nodo { background: var(--color-primario); color: white; }
.mp-paso-actual .mp-paso-nodo {
  background: var(--mp-acento-suave); color: var(--mp-acento);
  box-shadow: 0 0 0 6px white, 0 0 0 9px rgba(161, 98, 7, 0.22);
  animation: mpPulso 2s ease-out infinite;
}
.mp-paso-error .mp-paso-nodo { background: #fde8e4; color: var(--mp-rojo); box-shadow: 0 0 0 6px white, 0 0 0 9px rgba(179, 64, 31, 0.16); }
@keyframes mpPulso {
  0% { box-shadow: 0 0 0 6px white, 0 0 0 6px rgba(161, 98, 7, 0.5); }
  100% { box-shadow: 0 0 0 6px white, 0 0 0 20px rgba(161, 98, 7, 0); }
}
.mp-paso-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-paso-texto strong { font-family: var(--font-titulo); font-size: 0.98rem; color: var(--color-primario); }
.mp-paso-texto small { font-size: 0.84rem; color: var(--texto-suave); }
.mp-paso-pendiente .mp-paso-texto strong { color: #6f7f75; }
.mp-paso-hecho .mp-paso-texto small { color: var(--verde-principal); font-weight: 600; }
.mp-paso-actual .mp-paso-texto small { color: var(--mp-acento-texto); font-weight: 700; }
.mp-paso-error .mp-paso-texto small { color: var(--mp-rojo); font-weight: 700; }

/* ---- Cuerpo: productos a la izquierda, acciones/seguimiento a la derecha ---- */
.mp-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--borde); }
.mp-col-items, .mp-col-lateral { padding: 26px 32px 30px 38px; min-width: 0; }
.mp-col-lateral { display: flex; flex-direction: column; gap: 22px; background: color-mix(in srgb, var(--color-superficie) 45%, white); border-top: 1px solid var(--borde); }
@media (min-width: 1000px) {
  .mp-cuerpo-lateral { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .mp-col-lateral { border-top: none; border-left: 1px solid var(--borde); padding: 26px 36px 30px 32px; }
}
@media (min-width: 900px) {
  .mp-cuerpo:not(.mp-cuerpo-lateral) .mp-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
.mp-bloque { display: flex; flex-direction: column; }
.mp-bloque-titulo {
  display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font-family: var(--font-texto); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--texto-suave);
}
.mp-bloque-titulo i { font-size: 1.1rem; color: var(--color-primario); }

.mp-items { list-style: none; margin: 0; padding: 0; }
.mp-item { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--borde); }
.mp-items .mp-item:last-child { border-bottom: none; }
.mp-item-thumb {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 16px; overflow: hidden; background: var(--color-superficie);
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
}
.mp-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mp-item-info strong { font-size: 1.05rem; color: var(--texto); }
.mp-item-info small { font-size: 0.88rem; color: var(--texto-suave); }
.mp-item-total { font-family: var(--font-titulo); font-weight: 700; font-size: 1.05rem; white-space: nowrap; color: var(--color-primario); }

.mp-cobro { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--borde); }
.mp-cobro > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.95rem; color: var(--texto-suave); }
.mp-cobro dd { font-weight: 600; color: var(--texto); white-space: nowrap; }
.mp-cobro > .mp-cobro-total { margin-top: 2px; padding-top: 10px; border-top: 1px dashed var(--borde); font-size: 1.05rem; font-weight: 700; color: var(--texto); }
.mp-cobro > .mp-cobro-total dd { font-family: var(--font-titulo); font-weight: 700; font-size: 1.2rem; color: var(--color-primario); }

.mp-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 24px; margin: 20px 0 0; padding: 18px 20px; background: var(--color-superficie); border-radius: 16px; }
.mp-kv dt { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--texto-suave); }
.mp-kv dd { font-weight: 700; color: var(--texto); font-size: 1rem; word-break: break-word; }
.mp-kv-capital { text-transform: capitalize; }

/* ---- Pago rechazado ---- */
.mp-alerta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff0ee; border: 1.5px solid #f3aa9a; border-radius: 18px; padding: 16px 18px; color: #8a2f1c; }
.mp-alerta > i { font-size: 1.6rem; flex-shrink: 0; }
.mp-alerta > div { flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px; }
.mp-alerta span { font-size: 0.9rem; }
.mp-alerta .btn { min-height: 46px; padding: 10px 22px; margin-left: 0; }
/* Aviso informativo (transferencia en revisión, falta pagar): mismo formato que el de error, en dorado y sin alarma. */
.mp-alerta.mp-alerta-info { background: var(--acento-cosecha-suave); border-color: #e6d3a3; color: var(--acento-cosecha-texto); }

/* ---- Código de entrega (PIN) ---- */
.mp-pin {
  display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; border-radius: 20px;
  background: linear-gradient(135deg, var(--mp-acento-suave), #fffaf0);
  border: 1.5px solid color-mix(in srgb, var(--mp-acento) 30%, white);
}
.mp-pin-cabecera { display: flex; align-items: flex-start; gap: 12px; color: var(--mp-acento-texto); }
.mp-pin-cabecera > i { font-size: 1.6rem; flex-shrink: 0; }
.mp-pin-cabecera strong { display: block; font-family: var(--font-titulo); }
.mp-pin-cabecera span { font-size: 0.9rem; }
.mp-pin-fila { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mp-pin-digitos { display: flex; gap: 10px; }
.mp-pin-digito {
  width: 54px; height: 68px; display: grid; place-items: center; border-radius: 14px; background: white;
  border: 2px solid color-mix(in srgb, var(--mp-acento) 35%, white);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 2rem; font-weight: 800; color: var(--color-primario);
  box-shadow: 0 6px 14px -6px rgba(161, 98, 7, 0.35);
}
.mp-pin .btn-copiar-pin { min-height: 46px; padding: 10px 20px; margin-left: 0; }

/* ---- Seguimiento en vivo (mapa) ---- */
.mp-en-vivo { width: 10px; height: 10px; border-radius: 50%; background: #2fa564; animation: mpVivo 1.8s ease-out infinite; }
@keyframes mpVivo {
  0% { box-shadow: 0 0 0 0 rgba(47, 165, 100, 0.55); }
  100% { box-shadow: 0 0 0 10px rgba(47, 165, 100, 0); }
}
#pedidos-list .mapa-bloque, #pedidos-list .mapa-bloque-neutro { margin-top: 0; }
#pedidos-list .mapa-mini { height: 280px; border-radius: 18px; }
#pedidos-list .ruta-stats { margin-top: 12px; gap: 12px; }
#pedidos-list .ruta-stat { padding: 14px 16px; border-radius: 16px; }
#pedidos-list .ruta-stat strong { font-size: 1.2rem; }

/* ---- Después de la entrega: reseñas y certificado ---- */
#pedidos-list .resena-cta { margin: 0 0 12px; }
#pedidos-list .resena-cta:empty { display: none; }
#pedidos-list .resena-cta .btn,
#pedidos-list .pedido-certificado-cta .btn { min-height: 46px; padding: 10px 20px; margin-left: 0; font-size: 0.95rem; }
#pedidos-list .resena-cta .btn { border-color: var(--mp-acento); color: var(--mp-acento-texto); background: var(--mp-acento-suave); }
#pedidos-list .pedido-certificado-cta { margin-top: 0; }
#pedidos-list .panel-expandible { margin-top: 14px; padding: 18px 20px; background: var(--color-superficie); border-radius: 16px; }

/* ---- Estados vacíos ---- */
#pedidos-empty { padding: 72px 24px; background: white; border: 1.5px dashed var(--color-borde); border-radius: var(--mp-radio); font-size: 1.05rem; }
#pedidos-empty .empty-state-icon {
  width: 104px; height: 104px; margin: 0 auto 18px; display: grid; place-items: center;
  border-radius: 50%; background: var(--color-superficie); color: var(--color-primario); font-size: 2.8rem;
}
#pedidos-empty strong { font-family: var(--font-titulo); font-size: 1.35rem; }
#pedidos-empty .btn { min-height: 48px; padding: 12px 28px; }

/* ---- Skeleton con la forma de la tarjeta ---- */
.mp-skel { pointer-events: none; }
.mp-skel-thumb { width: 84px; height: 84px; border-radius: 20px; }
.mp-skel-lineas { display: flex; flex-direction: column; gap: 12px; }
.mp-skel-total { width: 120px; height: 44px; border-radius: 12px; }
.mp-skel-progreso { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 6px 38px 26px; }
.mp-skel-progreso .skeleton { width: 46px; height: 46px; border-radius: 50%; margin: 0 auto; }
.mp-skel-cuerpo { display: flex; flex-direction: column; gap: 14px; padding: 22px 38px 30px; border-top: 1px solid var(--borde); }

/* ---- Móvil: progreso vertical, cabecera apilada ---- */
@media (max-width: 720px) {
  #view-mis-pedidos .pedidos-hero, #view-notificaciones .notif-hero { padding: 24px 22px; }
  #view-mis-pedidos .resumen-panel { padding: 22px 20px; }
  /* Apilada: fotos arriba y título + chips a todo el ancho (en dos columnas el chip de la fecha se cortaba). */
  .mp-cabecera { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 20px 16px 26px; }
  .mp-chip { white-space: normal; }
  .mp-thumb { width: 60px; height: 60px; border-radius: 16px; margin-left: -18px; font-size: 1.7rem; }
  .mp-total { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; text-align: left; padding-top: 14px; border-top: 1px dashed var(--borde); }
  .mp-col-items, .mp-col-lateral { padding: 22px 20px 24px 26px; }
  .mp-pin-digito { width: 46px; height: 60px; font-size: 1.7rem; }
  #pedidos-list .mapa-mini { height: 220px; }
  #view-mis-pedidos .pedidos-buscador { max-width: none; flex-basis: 100%; }
  .mp-skel-progreso, .mp-skel-cuerpo { padding-left: 26px; padding-right: 20px; }
}
@media (max-width: 640px) {
  .mp-progreso { grid-template-columns: minmax(0, 1fr); padding: 4px 20px 22px 26px; }
  .mp-paso { flex-direction: row; align-items: flex-start; gap: 16px; text-align: left; padding-bottom: 22px; }
  .mp-paso:last-child { padding-bottom: 0; }
  .mp-paso::before { top: calc(23px - 100%); left: 21px; right: auto; width: 4px; height: 100%; }
  .mp-paso-texto { padding-top: 2px; }
}
@media (max-width: 560px) {
  /* Métricas en cuadrícula de 2 columnas ("En curso" ocupa el ancho completo) y filtros en 3 columnas iguales. */
  #view-mis-pedidos .resumen-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  #view-mis-pedidos .resumen-stat { flex: none; min-width: 0; gap: 10px; }
  #view-mis-pedidos .resumen-stat-destacado { grid-column: 1 / -1; }
  #view-mis-pedidos .resumen-stat-icono { width: 44px; height: 44px; font-size: 1.25rem; }
  #view-mis-pedidos .resumen-stat-destacado .resumen-stat-icono { width: 60px; height: 60px; font-size: 1.6rem; }
  #view-mis-pedidos .pedidos-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  #view-mis-pedidos .pedidos-tab { padding: 10px 6px; font-size: 0.86rem; gap: 6px; justify-content: center; white-space: nowrap; }
  .pedidos-tab-count { min-width: 22px; height: 22px; padding: 0 6px; font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  #pedidos-list .mp-card, .mp-thumb, .mp-paso-nodo { transition: none; }
  .mp-paso-actual .mp-paso-nodo, .mp-en-vivo, #pedidos-list .mp-card.mp-resaltado { animation: none; }
}

/* =====================================================================================
   LANDING — rediseño premium (hero con búsqueda, "Cómo funciona", roles, confianza, CTA final).
   Criterios del skill ui-ux-pro-max: patrón "Marketplace" (hero con búsqueda > categorías >
   destacados > confianza > CTA para vender), acento "dorado cosecha" de su paleta Agriculture,
   contraste >= 4.5:1, objetivos táctiles >= 44px, video con control de pausa y reduced-motion.
   Estructura de "Cómo funciona" (pasos numerados con riel punteado) y tarjetas con degradado
   tomadas como referencia de 21st.dev, adaptadas a CSS propio (sin React ni Tailwind).
   ===================================================================================== */
:root {
  --acento-cosecha: #A16207;        /* dorado cosecha — 4.9:1 sobre blanco */
  --acento-cosecha-texto: #7c4a03;  /* texto sobre fondos dorados suaves — 6:1 */
  --acento-cosecha-suave: #fbf3e2;
}

/* ---- Hero: buscador, pausa del video y cifras ---- */
.landing-hero-actions { align-items: stretch; }
.landing-hero-actions .btn-lg { min-height: 56px; display: inline-flex; align-items: center; }
.landing-buscador {
  flex: 1 1 320px; max-width: 460px; min-width: 0; min-height: 56px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 6px 6px 20px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.16); border: 1.5px solid rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: white; font-family: inherit; font-size: 1rem; text-align: left; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.landing-buscador i { font-size: 1.3rem; flex-shrink: 0; }
.landing-buscador-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landing-buscador-accion {
  flex-shrink: 0; padding: 12px 22px; border-radius: 999px;
  background: var(--color-fondo-secundario); color: var(--color-primario); font-weight: 700; font-size: 0.92rem;
}
.landing-buscador:hover { background: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.7); }
.landing-buscador:focus-visible { outline: 3px solid white; outline-offset: 3px; }
@media (hover: hover) { .landing-buscador:hover { transform: translateY(-2px); } }

.landing-video-control i { margin-left: 0; }
.landing-video-control[aria-pressed="true"] i { margin-left: 3px; } /* el triángulo de "play" pesa a la izquierda */
.landing-video-control:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 3px; }

.landing-hero-stats {
  display: inline-flex; flex-wrap: wrap; gap: 0;
  padding: 16px 28px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 20px;
  background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.landing-hero-stats > div + div { margin-left: 28px; padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, 0.24); }

/* ---- Rótulo de sección ---- */
.landing-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}

/* ---- Cómo funciona ---- */
.landing-pasos { margin: 88px 0 8px; text-align: center; }
.landing-pasos h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.landing-pasos-lista { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; }
.landing-paso { position: relative; padding: 0 6px; }
.landing-paso:not(:last-child)::after { /* riel punteado hasta el nodo siguiente */
  content: ''; position: absolute; top: 34px; left: calc(50% + 44px); right: calc(-50% + 24px);
  border-top: 2px dashed color-mix(in srgb, var(--color-borde) 70%, transparent);
}
.landing-paso-nodo {
  position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 20px;
  border-radius: 22px; background: white; border: 1.5px solid var(--borde); box-shadow: var(--sombra);
  font-size: 1.8rem; color: var(--color-primario);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease, color 0.25s ease, box-shadow 0.3s ease;
}
.landing-paso-nodo b {
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--acento-cosecha); color: white;
  font: 700 0.85rem var(--font-titulo); box-shadow: 0 0 0 4px var(--color-superficie);
}
@media (hover: hover) {
  .landing-paso:hover .landing-paso-nodo { transform: translateY(-4px); background: var(--color-primario); color: white; box-shadow: var(--sombra-hover); }
}
.landing-paso h3 { font-size: 1.15rem; margin-bottom: 6px; }
.landing-paso p { color: var(--texto-suave); font-size: 0.95rem; line-height: 1.5; max-width: 28ch; margin: 0 auto; }

/* ---- Roles ---- */
.landing-roles { margin: 88px 0 8px; text-align: center; }
.landing-roles h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin-bottom: 36px; }
.landing-roles-grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px; text-align: left; }
.landing-role-card {
  --rol-a: var(--color-primario); --rol-b: var(--verde-principal);
  display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left;
  border-radius: 26px; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.landing-role-card--productor { --rol-b: var(--acento-cosecha); }
.landing-role-card--repartidor { --rol-b: var(--verde-medio); }
.landing-role-cabecera {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 24px 26px 56px; color: white; background: linear-gradient(135deg, var(--rol-a), var(--rol-b));
}
.landing-role-cabecera::after { /* curva blanca que abre el cuerpo de la tarjeta */
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 28px; background: white; border-radius: 28px 28px 0 0;
}
.landing-role-icon {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0; border-radius: 18px;
  background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.3); color: white; font-size: 1.7rem;
}
.landing-role-tag {
  padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em;
}
.landing-role-cuerpo { display: flex; flex-direction: column; flex: 1; padding: 6px 28px 30px; }
.landing-role-card h3 { font-size: 1.5rem; margin-bottom: 8px; }
.landing-role-card p { min-height: 0; font-size: 1rem; line-height: 1.55; margin-bottom: 18px; }
.landing-role-lista { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; flex: 1; align-content: start; }
.landing-role-lista li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--texto); }
.landing-role-lista i {
  flex-shrink: 0; margin-top: 1px; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--verde-pastel); color: var(--verde-oscuro); font-size: 0.8rem;
}
.landing-role-cta { width: 100%; min-height: 50px; justify-content: center; margin-left: 0; }
@media (hover: hover) {
  .landing-role-card:hover { transform: translateY(-8px); box-shadow: 0 26px 48px -20px rgba(27, 67, 50, 0.35); }
}

/* ---- Confianza ---- */
.landing-confianza { gap: 22px; margin: 56px 0 24px; }
.landing-confianza-item { align-items: center; gap: 18px; padding: 26px; border-radius: 22px; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; }
.landing-confianza-icon { width: 56px; height: 56px; border-radius: 18px; background: var(--acento-cosecha-suave); color: var(--acento-cosecha); font-size: 1.6rem; }
.landing-confianza-item strong { font-size: 1.05rem; font-family: var(--font-titulo); }
.landing-confianza-item p { font-size: 0.92rem; }
@media (hover: hover) { .landing-confianza-item:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); } }

/* ---- Banda final de CTA (solo en el landing; en las demás vistas el pie sigue compacto) ---- */
.footer-ctas-buttons .btn { padding: 8px 16px; font-size: 0.85rem; }
.footer-ctas-sub { display: none; }
main:has(#view-landing.active) + .footer .footer-ctas {
  max-width: min(1180px, calc(100% - 8px)); margin: 8px auto 36px;
  padding: clamp(40px, 7vw, 76px) clamp(22px, 6vw, 72px); border-radius: 30px; color: white;
  background: linear-gradient(120deg, rgba(20, 32, 19, 0.9), rgba(45, 59, 42, 0.5)), url('../assets/hero-valle-andino-1600.jpg') center 62% / cover;
  box-shadow: 0 34px 60px -32px rgba(27, 67, 50, 0.7);
}
main:has(#view-landing.active) + .footer .footer-ctas-title { color: white; font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.1; margin-bottom: 12px; }
main:has(#view-landing.active) + .footer .footer-ctas-sub { display: block; color: rgba(255, 255, 255, 0.9); font-size: 1.08rem; max-width: 52ch; margin: 0 auto 30px; }
main:has(#view-landing.active) + .footer .footer-ctas-buttons { gap: 14px; }
main:has(#view-landing.active) + .footer .footer-ctas-buttons .btn { padding: 15px 30px; font-size: 1rem; min-height: 54px; }
main:has(#view-landing.active) + .footer .footer-ctas-buttons .btn-primary { background: var(--color-fondo-secundario); color: var(--color-primario); }
main:has(#view-landing.active) + .footer .footer-ctas-buttons .btn-primary:hover { background: white; }

/* ---- Móvil ---- */
@media (max-width: 860px) {
  .landing-pasos { text-align: left; }
  .landing-pasos-lista { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 32px; }
  .landing-paso { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 0 18px; padding: 0 0 30px; }
  .landing-paso:last-child { padding-bottom: 0; }
  .landing-paso-nodo { margin: 0; }
  .landing-paso:not(:last-child)::after { top: 82px; bottom: 12px; left: 33px; right: auto; border-top: none; border-left: 2px dashed color-mix(in srgb, var(--color-borde) 70%, transparent); }
  .landing-paso-texto { padding-top: 6px; }
  .landing-paso p { margin: 0; max-width: none; }
  .landing-roles { text-align: left; }
}
@media (max-width: 640px) {
  .landing-buscador { flex-basis: 100%; max-width: none; }
  /* Las 3 cifras en una sola fila de columnas iguales (en flex se partían en dos filas con un divisor suelto). */
  .landing-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; padding: 14px 8px; }
  .landing-hero-stats > div { align-items: center; text-align: center; padding: 0 6px; }
  .landing-hero-stats > div + div { margin-left: 0; padding-left: 6px; }
  .landing-hero-stats strong { font-size: 1.3rem; }
  .landing-hero-stats span { font-size: 0.72rem; }
  .landing-roles-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .landing-buscador, .landing-paso-nodo, .landing-role-card, .landing-confianza-item { transition: none; }
  .landing-buscador:hover, .landing-paso:hover .landing-paso-nodo, .landing-role-card:hover, .landing-confianza-item:hover { transform: none; }
}

/* =====================================================================================
   MODAL DE ACCESO (login / registro) — rediseño premium.
   Dos paneles en escritorio (marca + formularios) y una franja de marca arriba en móvil.
   Criterios del skill ui-ux-pro-max: etiquetas visibles, mostrar/ocultar contraseña, autocomplete
   correcto (gestores de contraseñas y pegado permitidos), errores junto al formulario con
   role="alert", foco visible, objetivos táctiles >= 44px y reduced-motion. Referencia de
   21st.dev: pantalla dividida con panel de marca (sign-in split screen) y selección de tipo de
   cuenta con tarjetas (radio group), adaptadas a CSS propio (sin React ni Tailwind).
   Todo scopeado a #modal-auth: .modal, .auth-tab, .auth-form y .modal-close son compartidos.
   ===================================================================================== */
#modal-auth { padding: clamp(12px, 3vw, 28px); background: rgba(14, 30, 22, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#modal-auth .modal-auth {
  max-width: 1000px; width: 100%; max-height: min(92vh, 800px); padding: 0; overflow: hidden;
  /* La fila se limita al max-height del modal (minmax(0, 1fr)): el formulario, más alto en el registro,
     hace scroll por dentro y el panel de marca no se estira ni queda cortado. */
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); grid-template-rows: minmax(0, 1fr);
  border-radius: 28px; box-shadow: 0 40px 90px -30px rgba(10, 30, 20, 0.6);
}
#modal-auth .modal-close { top: 16px; right: 16px; width: 44px; height: 44px; z-index: 3; font-size: 1.1rem; cursor: pointer; }
#modal-auth .modal-close:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }

/* ---- Panel de marca ---- */
.auth-lado {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: 40px; color: white;
  background: linear-gradient(160deg, rgba(20, 32, 19, 0.9), rgba(45, 59, 42, 0.6)), url('../assets/hero-valle-andino-1600.jpg') 35% center / cover;
}
.auth-lado-marca { display: flex; align-items: center; gap: 12px; font-family: var(--font-titulo); font-size: 1.35rem; color: white; }
.auth-lado-marca strong { font-weight: 800; }
.auth-lado-logo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); }
.auth-lado-logo svg { width: 30px; height: 30px; }
.auth-lado h2 { color: white; font-size: clamp(1.6rem, 2.5vw, 2.15rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 12px; }
.auth-lado p { color: rgba(255, 255, 255, 0.9); font-size: 1.02rem; line-height: 1.55; }
.auth-lado-lista { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.auth-lado-lista li { display: flex; align-items: center; gap: 12px; font-size: 0.96rem; font-weight: 500; }
.auth-lado-lista i {
  flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 1.25rem;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.24);
}
.modal-auth[data-tab="login"] .auth-lado-registro,
.modal-auth[data-tab="registro"] .auth-lado-login { display: none; }

/* ---- Panel del formulario ---- */
.auth-panel { min-width: 0; min-height: 0; padding: 32px 44px 30px; overflow-y: auto; overscroll-behavior: contain; }
.auth-tabs { display: flex; gap: 6px; padding: 5px; margin: 0 56px 26px 0; background: var(--color-superficie); border-radius: 16px; }
.auth-tab {
  flex: 1; min-height: 46px; padding: 10px 14px; border-radius: 12px; font-weight: 700; font-size: 0.95rem;
  color: var(--texto-suave); background: transparent; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.auth-tab:hover { color: var(--color-primario); }
.auth-tab.active { background: white; color: var(--color-primario); box-shadow: 0 6px 16px -8px rgba(27, 67, 50, 0.5); }
.auth-tab:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }

#modal-auth .auth-form { gap: 18px; }
.auth-encabezado h3 { font-size: 1.9rem; margin-bottom: 4px; }
.auth-encabezado p { color: var(--texto-suave); font-size: 1rem; margin: 0; }
.auth-grupo { display: flex; flex-direction: column; gap: 8px; }
.auth-grupo > label { font-size: 0.9rem; font-weight: 700; color: var(--texto); }
.auth-campo { position: relative; display: flex; align-items: center; }
.auth-campo > i:first-child { position: absolute; left: 16px; font-size: 1.25rem; color: var(--color-secundario); pointer-events: none; }
#modal-auth .auth-campo input {
  width: 100%; min-height: 52px; padding: 12px 16px 12px 48px; border-radius: 14px;
  border: 1.5px solid var(--borde); background: white; font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#modal-auth .auth-campo input:hover { border-color: color-mix(in srgb, var(--color-borde) 60%, white); }
#modal-auth .auth-campo input:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primario) 14%, transparent); }
#modal-auth .auth-campo input:user-invalid { border-color: #c0492a; }
.auth-campo:has(.auth-ojo) input { padding-right: 56px; }
.auth-ojo {
  position: absolute; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: none; color: var(--color-secundario); font-size: 1.3rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.auth-ojo:hover { background: var(--color-superficie); color: var(--color-primario); }
.auth-ojo:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 0; }
.auth-ayuda { display: flex; align-items: flex-start; gap: 6px; color: var(--acento-cosecha-texto); font-size: 0.84rem; line-height: 1.4; }
.auth-ayuda i { margin-top: 2px; }

.auth-alerta {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: #fff0ee; border: 1px solid #f3aa9a; color: #8a2f1c; font-size: 0.92rem; font-weight: 600; line-height: 1.4;
}
.auth-alerta i { font-size: 1.2rem; flex-shrink: 0; }

/* ---- Tarjetas de rol (radio group) ---- */
.auth-roles { border: none; margin: 0; padding: 0; min-width: 0; }
.auth-roles legend { padding: 0; margin-bottom: 10px; font-size: 0.9rem; font-weight: 700; color: var(--texto); }
.auth-roles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Con un número impar de roles, el último ocupa la fila entera en vez de dejar un hueco al lado. */
.auth-roles-grid > .auth-rol:last-child:nth-child(odd) { grid-column: 1 / -1; }
.auth-rol { position: relative; display: block; cursor: pointer; }
.auth-rol input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.auth-rol-caja {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; align-content: center;
  min-height: 72px; padding: 10px 14px; border-radius: 16px; background: white; border: 1.5px solid var(--borde);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.auth-rol-caja i {
  grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
  background: var(--color-superficie); color: var(--color-primario); font-size: 1.35rem; transition: background 0.15s ease, color 0.15s ease;
}
.auth-rol-caja strong { font-size: 0.95rem; color: var(--texto); align-self: end; }
.auth-rol-caja small { font-size: 0.78rem; line-height: 1.3; color: var(--texto-suave); align-self: start; }
.auth-rol:hover .auth-rol-caja { border-color: color-mix(in srgb, var(--color-borde) 60%, white); }
.auth-rol input:checked + .auth-rol-caja {
  border-color: var(--color-primario); background: color-mix(in srgb, var(--color-primario) 6%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario) 14%, transparent);
}
.auth-rol input:checked + .auth-rol-caja i { background: var(--color-primario); color: white; }
.auth-rol input:focus-visible + .auth-rol-caja { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }

/* ---- Acciones ---- */
.auth-enviar { min-height: 54px; font-size: 1.05rem; justify-content: center; }
.auth-enviar[disabled] { opacity: 0.8; cursor: progress; }
.auth-enviar.cargando::before {
  content: ''; width: 18px; height: 18px; margin-right: 10px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.4); border-top-color: white; animation: authGiro 0.7s linear infinite;
}
@keyframes authGiro { to { transform: rotate(360deg); } }
#modal-auth .auth-google-btn { min-height: 44px; }
.auth-cambio { text-align: center; color: var(--texto-suave); font-size: 0.95rem; }
.auth-cambio-btn {
  padding: 8px 4px; background: none; color: var(--color-primario); font-weight: 700; font-size: inherit;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 6px;
}
.auth-cambio-btn:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }

/* ---- Móvil: una columna, franja de marca compacta arriba ---- */
@media (max-width: 860px) {
  #modal-auth .modal-auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); max-height: 94vh; border-radius: 24px; }
  .auth-lado { flex-direction: row; align-items: center; gap: 12px; padding: 18px 76px 18px 22px; }
  .auth-lado-cuerpo { display: none; }
  .auth-lado-marca { font-size: 1.2rem; }
  .auth-panel { padding: 22px 22px 26px; }
  .auth-tabs { margin-right: 0; }
  .auth-encabezado h3 { font-size: 1.6rem; }
  #modal-auth .modal-close { top: 13px; right: 14px; }
}
@media (max-width: 420px) {
  .auth-roles-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  #modal-auth .modal-auth, .auth-tab, .auth-rol-caja, .auth-rol-caja i, .auth-campo input, .auth-ojo { animation: none; transition: none; }
  .auth-enviar.cargando::before { animation-duration: 1.6s; }
}

/* =====================================================================================
   CATÁLOGO Y BÚSQUEDA — rediseño premium (menú de categorías + panel de búsqueda).
   Criterios del skill ui-ux-pro-max: en un marketplace la búsqueda es la acción principal (campo
   grande, filtros a la vista, cantidad de resultados anunciada con aria-live, estado vacío que ayuda a
   seguir), objetivos táctiles >= 44px, foco visible, hover que no es el único acceso a la acción y
   reduced-motion. Referencia de 21st.dev: tarjetas de producto con insignias y elevación al pasar el
   cursor, adaptadas a CSS propio (sin React ni Tailwind).
   ===================================================================================== */

/* ---- Tarjeta compacta de producto (menú de categorías y panel de búsqueda) ---- */
.nav-mega-producto { gap: 8px; padding: 10px; min-width: 0; border: 1px solid transparent; border-radius: 18px; cursor: pointer; }
.nav-mega-producto:hover { background: white; border-color: var(--borde); box-shadow: var(--sombra-hover); transform: translateY(-3px); }
.nav-mega-producto:active { transform: translateY(-1px) scale(0.99); }
.nav-mega-producto:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }
.nmp-media { position: relative; display: block; }
.nav-mega-producto-img { border-radius: 14px; aspect-ratio: 4 / 3; }
.nav-mega-producto-img img { transition: transform 0.4s ease; }
.nav-mega-producto:hover .nav-mega-producto-img img { transform: scale(1.06); }
.nmp-insignia {
  position: absolute; top: 8px; left: 8px; padding: 4px 10px; border-radius: 999px;
  background: white; color: var(--texto); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.nmp-insignia--transito { background: #cfe8ff; color: #14538a; }
.nmp-insignia--pocas { background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto); }
.nmp-insignia--agotado { background: #eceeed; color: #555; }
.nav-mega-producto.es-agotado .nav-mega-producto-img { filter: grayscale(0.85); opacity: 0.7; }
.nav-mega-producto-nombre {
  font-size: 0.98rem; font-weight: 700; line-height: 1.25; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nmp-productor { display: none; align-items: center; gap: 6px; min-width: 0; font-size: 0.8rem; color: var(--texto-suave); }
.nmp-productor span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nmp-productor i { flex-shrink: 0; color: var(--verde-principal); }
.search-panel-grid .nmp-productor { display: flex; } /* en el menú de categorías se oculta: ahí todo es de la misma categoría y el espacio es poco */
.nmp-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-mega-producto-precio { font-family: var(--font-titulo); font-size: 1.02rem; font-weight: 700; }
.nav-mega-producto-precio small { font-family: var(--font-texto); font-size: 0.72rem; font-weight: 500; color: var(--texto-suave); }
.nmp-rating { display: inline-flex; align-items: center; gap: 3px; font-size: 0.8rem; font-weight: 700; color: var(--acento-cosecha-texto); }
.nmp-rating i { color: var(--acento-cosecha); font-size: 0.95rem; }

/* ---- Menú de categorías: cabecera con conteo y productos en una fila ---- */
.nav-cat-panel { width: min(900px, 94vw); }
.nav-cat-panel-inner { padding: 22px; border-radius: 22px; }
.nav-cat-cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.nav-cat-cabecera-icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--acento-cosecha-suave); font-size: 1.5rem; flex-shrink: 0; }
.nav-cat-cabecera-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.nav-cat-cabecera-texto strong { font-family: var(--font-titulo); font-size: 1.15rem; color: var(--color-primario); line-height: 1.2; }
.nav-cat-conteo { font-size: 0.82rem; color: var(--texto-suave); }
.nav-cat-vertodo {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 18px; border-radius: 999px;
  background: var(--color-primario); color: white; font-weight: 700; font-size: 0.88rem; cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.nav-cat-vertodo:hover { background: var(--color-primario-hover); }
.nav-cat-vertodo:hover i { transform: translateX(3px); }
.nav-cat-vertodo i { transition: transform 0.2s ease; }
.nav-cat-vertodo:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }
.nav-mega-productos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-height: 0; }

/* ---- Panel de búsqueda ---- */
.search-panel { --search-pad: clamp(20px, 5vw, 48px); width: min(1180px, 100%); padding: 32px var(--search-pad) 40px; border-radius: 0 0 28px 28px; }
.search-panel .modal-close { top: 20px; right: 20px; width: 44px; height: 44px; font-size: 1.1rem; z-index: 2; cursor: pointer; }
.search-panel .modal-close:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }
.search-panel-input-wrap {
  margin: 0 56px 18px 0; padding: 4px 10px 4px 22px; min-height: 64px; border: 1.5px solid var(--borde); border-radius: 20px;
  background: var(--color-superficie); transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.search-panel-input-wrap:focus-within { background: white; border-color: var(--color-primario); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primario) 14%, transparent); }
.search-panel-icon { font-size: 1.6rem; color: var(--color-secundario); }
.search-panel-input { min-width: 0; padding: 12px 0; font-size: 1.35rem; }
.search-panel-limpiar {
  flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: transparent; color: var(--color-secundario); font-size: 1.15rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.search-panel-limpiar:hover { background: color-mix(in srgb, var(--color-borde) 18%, transparent); color: var(--color-primario); }
.search-panel-limpiar:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 0; }

.search-panel-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.search-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 18px; border-radius: 999px;
  border: 1.5px solid var(--borde); background: white; color: var(--texto); font-size: 0.92rem; font-weight: 600; cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.search-chip:hover { border-color: var(--color-borde); background: var(--color-superficie); }
.search-chip.active { background: var(--color-primario); border-color: var(--color-primario); color: white; }
.search-chip:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }

.search-panel-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.search-panel-heading { margin: 0; font-family: var(--font-titulo); font-size: 1.3rem; color: var(--color-primario); }
.search-panel-controles { display: flex; align-items: center; gap: 14px; }
.search-panel-conteo { font-size: 0.9rem; font-weight: 600; color: var(--texto-suave); }
.search-panel-orden select {
  min-height: 44px; padding: 0 40px 0 18px; border-radius: 999px; border: 1.5px solid var(--borde); color: var(--texto);
  font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none;
  background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C5850' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.search-panel-orden select:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }

.search-panel-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.search-panel-vacio { text-align: center; padding: 56px 20px; color: var(--texto-suave); }
.search-vacio-icono { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 16px; border-radius: 50%; background: var(--color-superficie); color: var(--color-primario); font-size: 2.3rem; }
.search-panel-vacio strong { display: block; margin-bottom: 6px; font-family: var(--font-titulo); font-size: 1.25rem; color: var(--color-primario); }
.search-panel-vacio p { margin: 0 0 18px; }
.search-panel-vacio .btn { min-height: 46px; }

/* ---- Móvil ---- */
@media (max-width: 860px) {
  .nav-mega-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-cat-cabecera { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .search-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .search-panel-controles { width: 100%; justify-content: space-between; }
  /* Categorías y búsquedas populares en una sola fila desplazable (a sangre, hasta el borde de la
     pantalla): con 9 categorías, apiladas ocupaban 4 filas y empujaban los resultados fuera de vista. */
  .search-panel-chips, #search-panel-populares-lista {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(var(--search-pad) * -1); padding-inline: var(--search-pad);
  }
  .search-panel-chips::-webkit-scrollbar, #search-panel-populares-lista::-webkit-scrollbar { display: none; }
  .search-panel-chips { padding-block: 2px 8px; margin-bottom: 18px; scroll-snap-type: x proximity; }
  .search-chip { flex-shrink: 0; scroll-snap-align: start; }
  .search-panel-populares { gap: 8px; padding-bottom: 0; border-bottom: none; }
  #search-panel-populares-lista { gap: 8px; padding-bottom: 4px; }
  .search-panel-popular-item {
    flex-shrink: 0; width: auto; min-height: 44px; margin: 0; padding: 8px 16px;
    border: 1.5px solid var(--borde); border-radius: 999px; background: white;
  }
}
@media (max-width: 560px) {
  .search-panel { --search-pad: 16px; padding: 22px var(--search-pad) 30px; }
  .search-panel-input-wrap { margin-right: 52px; min-height: 58px; padding-left: 16px; }
  .search-panel-input { font-size: 1.1rem; }
  .search-panel-icon { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-mega-producto, .nav-mega-producto-img img, .search-chip, .nav-cat-vertodo, .nav-cat-vertodo i { transition: none; }
  .nav-mega-producto:hover, .nav-mega-producto:hover .nav-mega-producto-img img, .nav-cat-vertodo:hover i { transform: none; }
}

/* =====================================================================================
   DETALLE DE PRODUCTO — rediseño premium.
   Criterios del skill ui-ux-pro-max: lo necesario para decidir la compra (foto, precio, stock, cantidad,
   botón) va junto y a la vista, sin bajar; los medios reservan su proporción (aspect-ratio) para que nada
   salte al cargar; miniaturas y flechas son botones y las insignias texto estático; la barra fija no tapa
   el contenido (scroll-margin-top); objetivos táctiles >= 44px, foco visible y reduced-motion.
   Referencia de 21st.dev ("Product Detail Page"): rejilla de dos columnas con galería a la izquierda y ficha
   de compra a la derecha, etiquetas de confianza y fila del vendedor, adaptadas a CSS propio (sin React
   ni Tailwind).
   ===================================================================================== */

.detalle-volver:focus-visible, .detalle-tab:focus-visible, .detalle-productor-mini:focus-visible,
.detalle-miniatura:focus-visible, .detalle-visor:focus-visible, .detalle-visor-nav:focus-visible,
.resena-login .btn:focus-visible, .estrellas-selector button:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }

/* ---- Ficha: galería + tarjeta de compra ---- */
.detalle-principal {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  gap: clamp(24px, 4vw, 56px); align-items: start; margin-bottom: 72px;
}
.detalle-galeria { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.detalle-visor {
  position: relative; display: grid; place-items: center; aspect-ratio: 5 / 4; overflow: hidden;
  border-radius: 28px; background: var(--verde-pastel); box-shadow: var(--sombra);
}
.detalle-visor-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.detalle-visor:hover .detalle-visor-img { transform: scale(1.04); }
.detalle-visor-img.cambio { animation: detalleFoto 0.35s ease; }
@keyframes detalleFoto { from { opacity: 0.35; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.detalle-visor-emoji { font-size: clamp(5rem, 12vw, 9rem); line-height: 1; }
.detalle-visor .nmp-insignia { top: 18px; left: 18px; padding: 7px 16px; font-size: 0.82rem; }

.detalle-visor-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.94); color: var(--color-primario);
  font-size: 1.3rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.detalle-visor-prev { left: 16px; }
.detalle-visor-next { right: 16px; }
.detalle-visor:hover .detalle-visor-nav, .detalle-visor:focus-within .detalle-visor-nav { opacity: 1; }
.detalle-visor-nav:hover { background: white; transform: translateY(-50%) scale(1.06); }
@media (hover: none) { .detalle-visor-nav { opacity: 1; } } /* sin cursor no hay "pasar por encima": las flechas se ven siempre */
.detalle-contador {
  position: absolute; right: 16px; bottom: 16px; padding: 5px 12px; border-radius: 999px;
  background: rgba(28, 43, 36, 0.72); color: white; font-size: 0.8rem; font-weight: 600; backdrop-filter: blur(4px);
}

.detalle-miniaturas { position: relative; display: flex; gap: 12px; overflow-x: auto; padding: 4px; scrollbar-width: thin; }
.detalle-miniatura {
  flex: 0 0 auto; width: 100px; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border-radius: 16px;
  background: var(--verde-pastel); border: 2.5px solid transparent; opacity: 0.72;
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.detalle-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detalle-miniatura:hover { opacity: 1; transform: translateY(-2px); }
.detalle-miniatura.active { opacity: 1; border-color: var(--color-primario); }

/* Tarjeta de compra. */
.detalle-compra {
  display: flex; flex-direction: column; gap: 20px; min-width: 0;
  padding: clamp(22px, 2.4vw, 34px); background: white; border: 1px solid var(--borde);
  border-radius: 28px; box-shadow: var(--sombra); font-size: 1rem;
}
.detalle-compra .btn-favorito-detalle { min-height: 44px; }
.detalle-compra .detalle-cabecera { margin: 0; gap: 10px; }
.detalle-compra .detalle-cabecera h2 { font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1.12; }
.detalle-compra .detalle-precio-row { justify-content: space-between; align-items: center; gap: 10px 16px; margin: 0; }
.detalle-compra .detalle-precio-row .product-price { font-size: clamp(2.2rem, 3.2vw, 3rem); line-height: 1.05; }
.detalle-compra .price-unit { font-size: 0.95rem; }

/* El stock como estado (punto + texto), no solo color. */
.detalle-stock {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: var(--verde-pastel); color: var(--verde-oscuro); font-size: 0.9rem; font-weight: 600;
}
.detalle-compra .detalle-stock { font-size: 0.9rem; }
.detalle-stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-medio); flex-shrink: 0; }
.detalle-compra .detalle-stock.low { background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto); }
.detalle-stock.low::before { background: var(--acento-cosecha); }
.detalle-stock.agotado { background: #eceeed; color: #555; }
.detalle-compra .detalle-stock.transito { background: #e3f0fd; color: #14538a; }
.detalle-stock.transito::before { background: #2b7bc4; }
.detalle-reserva { flex-direction: column; align-items: stretch; gap: 14px; }
.detalle-reserva-texto { margin: 0; color: var(--texto-suave); line-height: 1.5; }
.detalle-reserva-hecha { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 16px; background: #e3f0fd; color: #14538a; }
.detalle-reserva-hecha strong { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.detalle-reserva-hecha span { font-size: 0.92rem; line-height: 1.45; }
.detalle-reserva-icono { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: #fff; font-size: 1.4rem; }
.detalle-reserva-quitar { align-self: flex-start; min-height: 44px; font-size: 0.95rem; }
/* H7: cuánto le interesa al reservar (opcional). */
.detalle-reserva-cantidad { display: grid; gap: 6px; }
.detalle-reserva-cantidad label { font-weight: 700; color: var(--texto); }
.detalle-reserva-campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.detalle-reserva-campos input, .detalle-reserva-campos select { min-height: 48px; font-size: 1.05rem; }
.detalle-reserva-cantidad small { color: var(--texto-suave); line-height: 1.4; }
/* H7: el tipo de comprador no limita lo que se compra. */
.auth-tipo-nota { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; font-size: 0.88rem; line-height: 1.4; color: var(--texto-suave); }
.auth-tipo-nota i { margin-top: 2px; color: var(--color-primario); }
.detalle-sticky-reservado { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #14538a; }
.detalle-stock.agotado::before { background: #888; }

.detalle-compra .detalle-unidad-label { margin: 0; }
.detalle-compra .detalle-unidad-label select { min-height: 52px; }
.detalle-compra .detalle-accion-principal { flex-direction: column; align-items: stretch; gap: 16px; margin: 0; }
.detalle-cantidad-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.detalle-total { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; color: var(--texto-suave); font-size: 0.85rem; text-align: right; }
.detalle-total strong { font-family: var(--font-titulo); font-size: 1.7rem; line-height: 1.1; color: var(--color-primario); white-space: nowrap; }
.detalle-compra .detalle-cantidad-selector { min-height: 62px; align-items: center; }
.detalle-compra .detalle-accion-principal .btn-block { flex: 0 0 auto; width: 100%; min-height: 62px; padding: 0 24px; border-radius: 18px; }

.detalle-confianza { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 2px; }
.detalle-confianza li {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  font-size: 0.8rem; font-weight: 600; color: var(--texto-suave); line-height: 1.25;
}
.detalle-confianza i {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha); font-size: 1.4rem;
}

.detalle-productor-mini {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 18px;
  background: var(--color-superficie); color: var(--texto); text-align: left;
  transition: background 0.2s ease, transform 0.2s ease;
}
.detalle-productor-mini:hover { background: color-mix(in srgb, var(--color-borde) 24%, var(--color-superficie)); transform: translateY(-1px); }
.detalle-productor-mini > .ti-arrow-right { flex-shrink: 0; color: var(--color-primario); font-size: 1.2rem; transition: transform 0.2s ease; }
.detalle-productor-mini:hover > .ti-arrow-right { transform: translateX(3px); }
.detalle-productor-mini-icono {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: white; color: var(--verde-principal); font-size: 1.4rem;
}
.detalle-productor-mini-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.detalle-productor-mini-texto small { font-size: 0.78rem; color: var(--texto-suave); }
.detalle-productor-mini-texto strong { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Secciones: productor + certificación en columnas, reseñas a todo el ancho ---- */
.detalle-secciones { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; align-items: start; }
.detalle-bloque {
  padding: clamp(22px, 2.6vw, 36px); background: white; border: 1px solid var(--borde);
  border-radius: 28px; box-shadow: var(--sombra); min-width: 0;
}
.detalle-bloque--productor { grid-column: span 5; }
.detalle-bloque--certificacion { grid-column: span 7; }
.detalle-bloque--resenas { grid-column: 1 / -1; }
.detalle-bloque .detalle-seccion-titulo { margin-bottom: 22px; }
/* Las tarjetas solo aparecen con fundido: el desplazamiento de 28px del efecto general movía su posición
   y las pestañas terminaban dejando el título medio tapado por la barra fija. */
.detalle-bloque.detalle-scroll-seccion, .detalle-bloque.detalle-scroll-seccion.visible { transform: none; }

.detalle-bloque .detalle-productor-card { padding: 0; margin: 0; background: transparent; border: 0; }
.detalle-bloque .detalle-productor-header { gap: 16px; }
.detalle-bloque .detalle-productor-icono { background: var(--acento-cosecha-suave); color: var(--acento-cosecha); }
.detalle-bloque .detalle-productor-card .mapa-mini { height: 320px; margin-top: 22px; border-radius: 20px; }

.detalle-cert-cabecera {
  display: flex; align-items: center; gap: 22px; padding: 18px; margin-bottom: 26px;
  border-radius: 20px; background: var(--color-superficie);
}
.detalle-cert-cabecera .certificacion-qr-bloque { flex-shrink: 0; margin: 0; padding: 0; background: none; }
.detalle-cert-cabecera .certificacion-qr { width: 132px; height: 132px; }
.detalle-cert-texto { min-width: 0; }
.detalle-cert-texto strong { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: var(--font-titulo); color: var(--color-primario); }
.detalle-cert-texto .muted { margin: 0; }
.detalle-bloque .timeline { margin-bottom: 0; }

/* ---- Reseñas ---- */
.detalle-resenas-grid { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 32px; align-items: start; }
.detalle-resenas-lateral { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.resenas-resumen {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center;
  padding: 20px; border-radius: 20px; background: var(--color-superficie);
}
.resenas-promedio { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.resenas-promedio strong { font-family: var(--font-titulo); font-size: 3.2rem; line-height: 1; color: var(--color-primario); }
.resenas-promedio .rating-stars { font-size: 0.95rem; white-space: nowrap; }
.resenas-barras { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.resenas-barras li { display: grid; grid-template-columns: 10px 14px minmax(0, 1fr) 22px; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--texto-suave); }
.resenas-barras i { color: #f0a500; font-size: 0.85rem; }
.resenas-barra { height: 8px; border-radius: 999px; background: white; overflow: hidden; }
.resenas-barra > span { display: block; height: 100%; border-radius: 999px; background: #f0a500; }
.resenas-barra-n { text-align: right; }

.detalle-resenas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.detalle-resenas-lista .resena-card { padding: 18px 20px; border-radius: 18px; }
.detalle-resenas-lista .resena-header { flex-wrap: nowrap; justify-content: flex-start; gap: 12px; }
.resena-avatar {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-primario); color: white; font-family: var(--font-titulo); font-weight: 700;
}
.resena-quien { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.resena-quien .resena-usuario { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detalle-resenas-lista .resena-comentario { margin-top: 12px; font-size: 0.95rem; line-height: 1.55; }
.resenas-vacio {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 48px 20px; border-radius: 20px; background: var(--color-superficie); color: var(--texto-suave);
}
.resenas-vacio i { font-size: 2.4rem; color: var(--color-primario); }
.resenas-vacio strong { font-family: var(--font-titulo); font-size: 1.15rem; color: var(--color-primario); }
.resenas-vacio p { margin: 0; }

.detalle-resenas-lateral .resena-form { padding: 20px; border: 0; border-radius: 20px; background: var(--color-superficie); }
.detalle-resenas-lateral .resena-form textarea { background: white; min-height: 96px; margin-bottom: 12px; }
.estrellas-selector button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 1.9rem; color: var(--color-borde); }
.estrellas-selector { gap: 2px; margin-left: -6px; }
.resena-login {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; border-radius: 20px;
  background: var(--color-superficie); color: var(--texto-suave);
}
.resena-login > i { font-size: 1.5rem; color: var(--color-primario); }
.resena-login p { margin: 0; }
.resena-login .btn { min-height: 44px; }
.resena-aviso { gap: 6px; }
.resena-aviso strong { color: var(--color-primario); font-size: 1rem; }
.resena-form-nota { display: flex; align-items: flex-start; gap: 6px; margin: -4px 0 8px; font-size: .9rem; color: var(--texto-suave); }
.resena-form-nota i { color: var(--color-primario); margin-top: 2px; }

/* ---- También te puede gustar ---- */
.detalle-relacionados { margin-top: 72px; }
.detalle-relacionados[hidden] { display: none; }
.detalle-relacionados .detalle-seccion-titulo { margin-bottom: 20px; }
.detalle-relacionados-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.detalle-relacionados-grid .nmp-productor { display: flex; }
.detalle-relacionados-grid .nav-mega-producto { padding: 12px; background: white; border-color: var(--borde); box-shadow: var(--sombra); }
.detalle-relacionados-grid .nav-mega-producto:hover { box-shadow: var(--sombra-hover); }

/* ---- Carga ---- */
.detalle-skeleton { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr); gap: clamp(24px, 4vw, 56px); }
.detalle-skeleton-visor { aspect-ratio: 5 / 4; border-radius: 28px; }
.detalle-skeleton-info { display: flex; flex-direction: column; gap: 16px; padding: 34px; border-radius: 28px; background: white; border: 1px solid var(--borde); }

/* ---- Pantallas medianas y chicas ---- */
@media (max-width: 1100px) {
  .detalle-barra { grid-template-columns: auto minmax(0, 1fr); }
  .detalle-tabs { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 1020px) {
  .detalle-principal, .detalle-skeleton { grid-template-columns: minmax(0, 1fr); }
  .detalle-principal { margin-bottom: 48px; }
  .detalle-secciones { grid-template-columns: minmax(0, 1fr); }
  .detalle-bloque--productor, .detalle-bloque--certificacion, .detalle-bloque--resenas { grid-column: 1 / -1; }
  .detalle-relacionados-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detalle-relacionados { margin-top: 48px; }
}
@media (max-width: 760px) {
  .detalle-resenas-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  /* Una sola fila: volver (solo ícono) + pestañas. El botón de compra rápido pasa a una barra inferior,
     donde el pulgar llega sin esfuerzo. Sin backdrop-filter: haría de la barra el bloque contenedor de
     su hijo fijo y lo sacaría de la parte inferior de la pantalla. */
  .detalle-barra { grid-template-columns: auto minmax(0, 1fr); margin: -16px calc(50% - 50vw) 20px; padding: 6px 16px; gap: 0 6px; background: white; backdrop-filter: none; }
  .detalle-volver { width: 44px; padding: 0; justify-content: center; }
  .detalle-volver-texto { display: none; }
  .detalle-tabs { grid-column: 2; grid-row: 1; }
  .detalle-barra-compra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: white; box-shadow: 0 -8px 24px rgba(27, 67, 50, 0.16);
    opacity: 1; transform: translateY(100%); transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .detalle-barra.con-compra .detalle-barra-compra { transform: none; }
  .detalle-barra-compra .btn { flex: 1; max-width: 220px; }
  .detalle-sticky-nombre { display: none; }
  .detalle-sticky-precio { font-size: 1.1rem; }
  #detalle-producto-content { padding-bottom: 76px; }
  .detalle-seccion-titulo { font-size: 1.25rem; }
  .detalle-visor { aspect-ratio: 4 / 3; border-radius: 22px; }
  .detalle-visor .nmp-insignia { top: 12px; left: 12px; }
  .detalle-miniatura { width: 78px; border-radius: 12px; }
  .detalle-compra, .detalle-bloque { padding: 20px; border-radius: 24px; }
  .detalle-confianza { gap: 6px; }
  .detalle-total strong { font-size: 1.5rem; }
  .detalle-cert-cabecera { flex-direction: column; text-align: center; }
  .detalle-bloque .detalle-productor-card .mapa-mini { height: 240px; }
  .resenas-resumen { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .resenas-barras { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .detalle-visor-img, .detalle-miniatura, .detalle-visor-nav, .detalle-productor-mini, .detalle-barra-compra,
  .detalle-productor-mini > .ti-arrow-right { transition: none; }
  .detalle-visor:hover .detalle-visor-img { transform: none; }
  .detalle-visor-img.cambio { animation: none; }
}

/* Campos obligatorios y error en línea bajo un campo (role="alert", además del borde rojo). */
.campo-requerido { color: #b3401f; }
.campo-error { min-height: 1.1em; font-size: 0.8rem; font-weight: 600; line-height: 1.4; color: #b3401f; }

/* ---------- Compra mínima (paso 1 del checkout) ----------
   Aviso ámbar con ícono y el motivo en palabras (no solo el botón apagado): cuánto falta para la compra mínima. */
.checkout-minimo {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto);
  font-size: 0.85rem; font-weight: 600; line-height: 1.4;
}
.checkout-minimo > i { flex: none; font-size: 1.1rem; margin-top: 1px; }

/* ---------- Utilidades de accesibilidad ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.invisible { visibility: hidden; }

/* ---------- ASISTENTE PASO A PASO (siembra y cosecha) ----------
   Pensado para agricultores mayores de 65 años: una pregunta por pantalla en letra grande (1,75rem), texto de 1,1rem,
   campos de 64px, opciones y botones de 56px o más con 12px de separación, y "Paso 2 de 9" con barra segmentada.
   La voz es un añadido: "Escuchar" lee la pregunta y el micrófono dicta, pero todo se puede hacer tocando. En el
   celular ocupa toda la pantalla; en la computadora es un panel ancho centrado. Los estados (escuchando, error, opción
   elegida) llevan ícono y palabras, no solo color. */
body.asistente-abierto { overflow: hidden; }
.asistente-overlay { padding: 24px; }
.asistente {
  display: flex; flex-direction: column; width: 100%; max-width: 760px; max-height: min(92vh, 900px);
  background: #fff; border-radius: 24px; box-shadow: 0 24px 70px rgba(20, 35, 25, 0.32); overflow: hidden;
  animation: popIn 0.25s ease; color: var(--texto);
}
.asistente-cabecera { display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px; }
.asistente-titulo { display: flex; align-items: center; gap: 8px; font-family: var(--font-titulo); font-weight: 700; font-size: 1.05rem; color: var(--color-primario); }
.asistente-titulo-icono {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto); font-size: 1.2rem;
}
.asistente-contador { margin-left: auto; font-size: 0.95rem; font-weight: 700; color: var(--texto-suave); white-space: nowrap; }
.btn-asistente-cerrar {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-superficie); color: var(--texto); font-size: 1.3rem; cursor: pointer; border: 0;
}
.btn-asistente-cerrar:hover { background: var(--color-fondo-secundario); }
.asistente-progreso { display: flex; gap: 6px; padding: 0 20px 14px; }
.asistente-progreso span { flex: 1; height: 8px; border-radius: 999px; background: #e3e8dd; transition: background-color 0.3s; }
.asistente-progreso span.hecho { background: var(--verde-medio); }
.asistente-progreso span.actual { background: var(--acento-cosecha); }

.asistente-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.asistente-cuerpo { flex: 1; overflow-y: auto; padding: 8px 28px 20px; display: flex; flex-direction: column; gap: 16px; }
.asistente-pregunta { margin: 0; font-family: var(--font-titulo); font-size: 1.75rem; line-height: 1.25; color: var(--color-primario); }
.asistente-pregunta:focus { outline: none; }
.asistente-pregunta:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 4px; border-radius: 6px; }
.asistente-voz { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-asistente-escuchar, .btn-asistente-ayuda {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 18px; border-radius: 999px;
  font-size: 1rem; font-weight: 700; cursor: pointer; border: 1.5px solid var(--color-borde); background: #fff; color: var(--color-primario);
}
.btn-asistente-escuchar { background: var(--color-primario); border-color: var(--color-primario); color: #fff; }
.btn-asistente-escuchar i, .btn-asistente-ayuda i { font-size: 1.3rem; }
.btn-asistente-escuchar:hover { background: var(--color-primario-hover); }
.btn-asistente-ayuda:hover { background: var(--color-superficie); }
.asistente-ayuda {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px;
  background: var(--acento-cosecha-suave); border: 1px solid #ecd9ae;
}
.asistente-ayuda > i { flex: none; font-size: 1.5rem; color: var(--acento-cosecha); }
.asistente-ayuda p { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--texto); }
.asistente-contenido { display: flex; flex-direction: column; gap: 12px; }
.asistente-etiqueta { font-size: 1.05rem; font-weight: 700; color: var(--texto); }
.asistente-campo-fila { display: flex; align-items: stretch; gap: 10px; }
.asistente-input {
  flex: 1; min-width: 0; min-height: 64px; padding: 12px 16px; border-radius: 14px; border: 2px solid #b9c8bd;
  font-size: 1.35rem; font-family: var(--font-texto); color: var(--texto); background: #fff; box-sizing: border-box;
}
.asistente-input:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 4px rgba(45, 59, 42, 0.15); }
.asistente-fecha { flex: none; width: 100%; }
.asistente-mic {
  position: relative; flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 76px; min-height: 64px; padding: 6px 10px; border-radius: 14px; border: 2px solid var(--acento-cosecha);
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto); font-weight: 800; font-size: 0.8rem; cursor: pointer;
}
.asistente-mic i { font-size: 1.6rem; }
.asistente-mic:hover { background: #f6e6c2; }
.asistente-mic.escuchando { background: var(--acento-cosecha); color: #fff; }
.asistente-mic.escuchando::after {
  content: ""; position: absolute; inset: -6px; border-radius: 18px; border: 3px solid var(--acento-cosecha);
  animation: asistenteEscucha 1.2s ease-out infinite;
}
@keyframes asistenteEscucha { from { opacity: 0.9; transform: scale(0.96); } to { opacity: 0; transform: scale(1.12); } }

.asistente-sugerencias { display: flex; flex-wrap: wrap; gap: 10px; }
.asistente-chip {
  min-height: 48px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--color-borde);
  background: var(--color-superficie); color: var(--color-primario); font-size: 1.05rem; font-weight: 700; cursor: pointer;
}
.asistente-chip:hover { background: var(--color-fondo-secundario); }
.asistente-atajos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.asistente-atajo {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 16px;
  border-radius: 14px; border: 2px solid #c9d4c4; background: #fff; text-align: left; cursor: pointer; color: var(--texto);
}
.asistente-atajo strong { font-size: 1.15rem; color: var(--color-primario); }
.asistente-atajo small { font-size: 0.85rem; color: var(--texto-suave); }
.asistente-atajo.activo { border-color: var(--color-primario); background: var(--verde-fondo); box-shadow: inset 0 0 0 1px var(--color-primario); }
.asistente-atajo.activo strong::after { content: " \2713"; }
.asistente-fecha-elegida { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--color-primario); min-height: 1.4em; }

.asistente-numero .asistente-paso-num {
  flex: none; display: grid; place-items: center; width: 64px; min-height: 64px; border-radius: 14px;
  border: 2px solid #c9d4c4; background: #fff; font-size: 1.5rem; color: var(--color-primario); cursor: pointer;
}
.asistente-numero .asistente-paso-num:hover { background: var(--color-superficie); }
.asistente-numero-caja { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.asistente-numero-caja .asistente-input { text-align: center; font-weight: 800; padding-left: 44px; padding-right: 64px; }
.asistente-numero-prefijo, .asistente-numero-unidad {
  position: absolute; font-size: 1.05rem; font-weight: 700; color: var(--texto-suave); pointer-events: none;
}
.asistente-numero-prefijo { left: 14px; }
.asistente-numero-unidad { right: 14px; }

.asistente-opciones { display: grid; gap: 12px; }
.asistente-opcion { position: relative; display: block; cursor: pointer; }
.asistente-opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.asistente-opcion-caja {
  display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 16px; border-radius: 16px;
  border: 2px solid #c9d4c4; background: #fff; transition: border-color 0.15s, background-color 0.15s;
}
.asistente-opcion:hover .asistente-opcion-caja { border-color: var(--color-borde); background: var(--verde-fondo); }
.asistente-opcion input:checked + .asistente-opcion-caja { border-color: var(--color-primario); background: var(--verde-fondo); box-shadow: inset 0 0 0 1px var(--color-primario); }
.asistente-opcion input:focus-visible + .asistente-opcion-caja { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }
.asistente-opcion-icono {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--color-superficie); color: var(--color-primario); font-size: 1.6rem;
}
.asistente-opcion-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.asistente-opcion-texto strong { font-size: 1.2rem; color: var(--texto); }
.asistente-opcion-texto small { font-size: 0.95rem; color: var(--texto-suave); }
.asistente-opcion-marca { flex: none; font-size: 1.8rem; color: var(--color-primario); opacity: 0; }
.asistente-opcion input:checked + .asistente-opcion-caja .asistente-opcion-marca { opacity: 1; }

.asistente-nota { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--texto-suave); }
.asistente-error {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 14px;
  background: #fdf1ec; border: 1px solid #f1c9bb; color: #9b3519; font-size: 1.05rem; font-weight: 700; line-height: 1.45;
}
.asistente-error i { flex: none; font-size: 1.4rem; }

.asistente-resumen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.asistente-resumen li {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--verde-fondo); border: 1px solid var(--borde);
}
.asistente-resumen li.es-advertencia { background: #fffaf0; border-color: #e2c27a; }
.asistente-resumen-icono {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: #fff; color: var(--color-primario); font-size: 1.35rem;
}
.asistente-resumen li.es-advertencia .asistente-resumen-icono { color: var(--acento-cosecha); }
.asistente-resumen-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.asistente-resumen-texto small { font-size: 0.9rem; font-weight: 700; color: var(--texto-suave); }
.asistente-resumen-texto strong { font-size: 1.1rem; color: var(--texto); overflow-wrap: anywhere; }
.asistente-cambiar {
  flex: none; min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--color-borde);
  background: #fff; color: var(--color-primario); font-weight: 700; font-size: 0.95rem; cursor: pointer;
}

.asistente-pie {
  display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 18px; border-top: 1px solid var(--borde); background: #fbfcf9;
}
.asistente-voz-lectura { display: flex; align-items: center; gap: 10px; font-size: 0.98rem; font-weight: 600; color: var(--texto-suave); cursor: pointer; }
.asistente-voz-lectura input { width: 22px; height: 22px; accent-color: var(--color-primario); }
.asistente-botones { display: flex; gap: 12px; }
.asistente-botones .btn { min-height: 60px; font-size: 1.15rem; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; }
.btn-asistente-atras { flex: 1; }
.btn-asistente-siguiente { flex: 2; }
.btn-asistente-siguiente.es-final { background: var(--verde-principal); }

@media (max-width: 640px) {
  .asistente-overlay { padding: 0; }
  .asistente { max-width: none; max-height: none; height: 100dvh; border-radius: 0; }
  .asistente-cuerpo { padding: 6px 18px 18px; }
  .asistente-pregunta { font-size: 1.55rem; }
  .asistente-campo-fila { flex-wrap: wrap; }
  .asistente-campo-fila > .asistente-input { flex-basis: 100%; }
  .asistente-campo-fila > .asistente-mic { flex: 1; flex-direction: row; gap: 8px; font-size: 1rem; }
  .asistente-numero { flex-wrap: wrap; }
  .asistente-numero .asistente-numero-caja { flex: 1 1 calc(100% - 156px); }
  .asistente-numero > .asistente-mic { flex: 1 1 100%; flex-direction: row; gap: 8px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .asistente { animation: none; }
  .asistente-mic.escuchando::after { animation: none; opacity: 0.6; }
  .asistente-progreso span, .asistente-opcion-caja { transition: none; }
}

/* El aviso y el bloque de ubicación de siembra/cosecha, a la escala del asistente. */
.asistente .aviso-en-chacra p { font-size: 1.02rem; }
.asistente .aviso-en-chacra strong { font-size: 1.1rem; }
.asistente .evidencia-gps { padding: 16px; gap: 12px; }
.asistente .evidencia-gps-titulo { font-size: 0.98rem; }
.asistente .evidencia-gps-estado { font-size: 0.95rem; padding: 6px 12px; }
.asistente .evidencia-gps-texto { font-size: 1.08rem; }
.asistente .evidencia-gps .btn-gps-tomar { min-height: 56px; font-size: 1.05rem; padding: 10px 20px; }

/* La foto de la cosecha en el asistente: una zona grande para tocar (abre la cámara en el celular). */
.asistente .foto-entrega { flex: none; }
.asistente .foto-entrega-zona { min-height: 120px; padding: 18px 20px; border-width: 3px; }
.asistente .foto-entrega-icono { width: 64px; height: 64px; font-size: 2rem; }
.asistente .foto-entrega-texto strong { font-size: 1.25rem; }
.asistente .foto-entrega-texto small { font-size: 0.95rem; }
.asistente .foto-entrega-previa img { width: 96px; height: 96px; }
.asistente .foto-entrega-botones .btn { min-height: 48px; font-size: 1rem; }
.asistente .foto-entrega-ayuda { font-size: 1rem; }

/* Tarjeta que abre el asistente de siembra (en "Mis siembras"). */
.siembra-cta { display: flex; flex-direction: column; gap: 14px; }
.siembra-cta h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.2rem; }
.siembra-cta p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--texto); }
.siembra-cta-voz { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 700; color: var(--acento-cosecha-texto); }
.siembra-cta .btn { min-height: 60px; font-size: 1.15rem; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }

/* ---------- Pago por transferencia bancaria (checkout, paso 3) ----------
   El monto exacto destacado y cada dato de la cuenta con su botón "Copiar" (44px, con aviso al copiar); la constancia
   usa el mismo selector de foto que la entrega del repartidor, y el número de operación tiene su ayuda visible. */
.checkout-confirmacion.transferencia { text-align: left; }
.checkout-confirmacion.transferencia > h3, .checkout-confirmacion.transferencia > p { text-align: center; }
.transferencia-monto {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin: 16px auto;
  padding: 14px 20px; border-radius: 18px; background: var(--color-superficie); width: fit-content; max-width: 100%;
}
.transferencia-monto span { font-size: 0.9rem; color: var(--texto-suave); }
.transferencia-monto strong { font-family: var(--font-titulo); font-size: 1.9rem; color: var(--color-primario); font-variant-numeric: tabular-nums; }
.transferencia-cuenta { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; padding: 0; }
.transferencia-cuenta > div {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border: 1px solid var(--borde); border-radius: 14px; background: #fff;
}
.transferencia-cuenta dt { font-size: 0.85rem; font-weight: 700; color: var(--texto-suave); }
.transferencia-cuenta dd { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; color: var(--texto); overflow-wrap: anywhere; }
.transferencia-cuenta dd span { font-variant-numeric: tabular-nums; }
.btn-copiar { min-height: 44px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.form-transferencia { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; border-top: 1px solid var(--borde); }
.form-transferencia .foto-entrega { flex: none; }
.form-transferencia .foto-entrega-zona {
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px;
  border: 2px dashed #b9c8bd; border-radius: 14px; background: #fff; cursor: pointer;
}
.form-transferencia .foto-entrega-zona:hover { border-color: var(--color-primario); background: var(--verde-fondo); }
.transferencia-operacion { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--texto); }
.transferencia-operacion input { min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--borde); font-size: 1rem; }
.transferencia-operacion small { font-weight: 500; font-size: 0.82rem; color: var(--texto-suave); }
.transferencia-despues { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 0.88rem; color: var(--texto-suave); }

/* ---------- Panel admin: transferencias por revisar ----------
   Tarjeta de aprobación: lo que se pide (monto, operación, fecha), la evidencia (la constancia, a pedido) y las dos
   salidas. Aprobar pide una confirmación en la misma tarjeta; rechazar exige el motivo que verá el comprador. */
.admin-nota { margin: -4px 0 16px; max-width: 760px; }
.transferencia-card { display: flex; flex-direction: column; gap: 12px; }
.transferencia-card-monto { display: flex; flex-direction: column; gap: 2px; }
.transferencia-card-monto span { font-size: 0.8rem; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.transferencia-card-monto strong { font-family: var(--font-titulo); font-size: 1.6rem; color: var(--color-primario); font-variant-numeric: tabular-nums; }
.transferencia-card .btn-ver-constancia { align-self: flex-start; min-height: 44px; margin: 0; }
.transferencia-constancia img { display: block; width: 100%; max-height: 420px; object-fit: contain; border-radius: 12px; border: 1px solid var(--borde); background: #f6f7f4; }
.transferencia-confirmar { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--acento-cosecha-suave); }
.transferencia-confirmar p { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--acento-cosecha-texto); line-height: 1.45; }
.form-rechazar-transferencia { display: flex; flex-direction: column; gap: 10px; }
.form-rechazar-transferencia label { display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; font-weight: 700; color: var(--texto); }
.form-rechazar-transferencia textarea { padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--borde); font: inherit; font-weight: 400; resize: vertical; }
.transferencia-card .tarjeta-acciones .btn { min-height: 44px; }

/* Sugerencia de la fecha de cosecha (IA o tabla de cultivos) en el asistente de siembra. Criterios de ui-ux-pro-max:
   lo hecho por IA se rotula como tal, esqueleto mientras carga (nada congelado), botón grande >= 56px, contraste
   >= 4.5:1 y reduced-motion. De 21st.dev ("AI Approval"): la propuesta como tarjeta que la persona aprueba, y que
   cambia de estado al elegirla. */
.sugerencia-cosecha {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 18px;
  border: 2px solid #e2c27a; background: linear-gradient(160deg, var(--acento-cosecha-suave), #fff 70%);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sugerencia-cosecha.usada { border-color: var(--color-primario); box-shadow: inset 0 0 0 1px var(--color-primario); background: var(--verde-fondo); }
.sugerencia-cosecha-cabecera { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 800; font-size: 1.05rem; color: var(--acento-cosecha-texto); }
.sugerencia-cosecha-cabecera > i { font-size: 1.5rem; color: var(--acento-cosecha); }
.sugerencia-cosecha-fuente {
  margin-left: auto; padding: 4px 10px; border-radius: 999px; font-size: 0.85rem; font-weight: 700;
  background: #fff; border: 1px solid #e2c27a; color: var(--acento-cosecha-texto);
}
.sugerencia-cosecha-fecha { margin: 0; font-family: var(--font-titulo); font-size: 1.55rem; font-weight: 700; line-height: 1.2; color: var(--color-primario); }
.sugerencia-cosecha-fecha::first-letter { text-transform: uppercase; }
.sugerencia-cosecha-detalle { margin: 0; font-size: 1.08rem; font-weight: 700; color: var(--texto); }
.sugerencia-cosecha-explicacion { margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--texto); }
.sugerencia-cosecha-senal { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(45, 59, 42, 0.07); font-size: 1.05rem; line-height: 1.5; color: var(--texto); }
.sugerencia-cosecha-senal > i { flex: none; margin-top: 3px; font-size: 1.25rem; color: var(--color-primario); }
.sugerencia-cosecha-origen { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--texto-suave); }
.btn-usar-sugerencia {
  align-self: flex-start; min-height: 56px; margin: 4px 0 0; padding: 10px 22px; border-radius: 14px; font-size: 1.12rem;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-usar-sugerencia i { font-size: 1.35rem; }
.sugerencia-cosecha.usada .btn-usar-sugerencia { background: #fff; color: var(--color-primario); border: 2px solid var(--color-primario); box-shadow: none; }
.sugerencia-cosecha.cargando { border-style: dashed; background: #fffdf7; }
.sugerencia-cosecha-esqueleto { display: flex; flex-direction: column; gap: 8px; }
.sugerencia-cosecha-esqueleto span {
  display: block; height: 14px; border-radius: 8px; background: linear-gradient(90deg, #f1e6cc 25%, #faf3e3 50%, #f1e6cc 75%);
  background-size: 200% 100%; animation: sugerencia-cosecha-brillo 1.4s ease-in-out infinite;
}
.sugerencia-cosecha-esqueleto span:first-child { height: 24px; width: 70%; }
.sugerencia-cosecha-esqueleto span:last-child { width: 45%; }
@keyframes sugerencia-cosecha-brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sugerencia-cosecha-sin-dato {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 14px;
  background: var(--color-superficie); font-size: 1.02rem; line-height: 1.5; color: var(--texto);
}
.sugerencia-cosecha-sin-dato i { flex: none; font-size: 1.4rem; color: var(--texto-suave); }
@media (max-width: 640px) {
  .sugerencia-cosecha { padding: 16px; }
  .sugerencia-cosecha-fecha { font-size: 1.35rem; }
  .btn-usar-sugerencia { align-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sugerencia-cosecha { transition: none; }
  .sugerencia-cosecha-esqueleto span { animation: none; }
}

/* ===== Compras por mayor y por menor (observación de la presentación del 2026-10-01) =====
   Criterios de ui-ux-pro-max: opciones como tarjetas grandes para tocar (>= 44px) en vez de un <select>, campos opcionales
   rotulados "(opcional)" y mostrados solo cuando hacen falta (divulgación progresiva), y el estado de la compra dicho con
   texto e ícono, no solo con color. De 21st.dev ("Pricing Tiers List"): las unidades como filas apiladas con precio,
   insignia y detalle. */
.auth-opcional { font-weight: 500; color: var(--texto-suave); }
.auth-tipo-comprador { margin-top: 4px; }
.auth-datos-negocio { display: grid; gap: 12px; margin-top: 12px; }

.detalle-unidades { border: none; margin: 0 0 16px; padding: 0; min-width: 0; display: grid; gap: 10px; }
.detalle-unidades legend { padding: 0; margin-bottom: 10px; font-size: 1rem; font-weight: 700; color: var(--texto); }
.detalle-unidad { position: relative; display: block; cursor: pointer; }
.detalle-unidad input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.detalle-unidad-caja {
  display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 2px solid #d6ddd0; background: #fff;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.detalle-unidad:hover .detalle-unidad-caja { border-color: var(--color-borde); }
.detalle-unidad input:checked + .detalle-unidad-caja { border-color: var(--color-primario); background: var(--verde-fondo); box-shadow: inset 0 0 0 1px var(--color-primario); }
.detalle-unidad input:focus-visible + .detalle-unidad-caja { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }
.detalle-unidad.sin-stock { cursor: not-allowed; }
.detalle-unidad.sin-stock .detalle-unidad-caja { opacity: 0.55; background: var(--color-superficie); }
.detalle-unidad-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.detalle-unidad-nombre { font-size: 1.02rem; color: var(--texto); }
.detalle-unidad-insignia {
  padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; white-space: nowrap;
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto); border: 1px solid #e2c27a;
}
.detalle-unidad-insignia.por-menor { background: var(--color-superficie); color: var(--texto-suave); border-color: transparent; }
.detalle-unidad-precio { font-size: 1.15rem; font-weight: 800; color: var(--color-primario); }
.detalle-unidad-detalle { font-size: 0.86rem; color: var(--texto-suave); }
.detalle-unidad-ahorro { color: #1f6f43; }

.product-por-mayor {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 2px; padding: 3px 10px;
  border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto);
}
.product-por-mayor strong { color: #1f6f43; }

.checkout-tipo-compra {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--color-superficie); color: var(--texto); font-size: 0.88rem; line-height: 1.45;
}
.checkout-tipo-compra > i { flex: none; margin-top: 1px; font-size: 1.35rem; color: var(--color-primario); }
.checkout-tipo-compra strong { display: block; margin-bottom: 2px; font-size: 0.95rem; color: var(--color-primario); }
.checkout-tipo-compra span { color: var(--texto-suave); }
.checkout-tipo-compra.es-por-mayor { background: var(--acento-cosecha-suave); border: 1px solid #e2c27a; }
.checkout-tipo-compra.es-por-mayor > i, .checkout-tipo-compra.es-por-mayor strong { color: var(--acento-cosecha-texto); }

.mp-chip-por-mayor { background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto); }
.mp-cobro-nota { display: block; font-size: 0.78rem; font-weight: 500; color: var(--texto-suave); }

.perfil-como-compras form { display: grid; gap: 16px; }
.perfil-como-compras .btn { justify-self: start; min-height: 48px; }
.perfil-datos-negocio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .perfil-datos-negocio { grid-template-columns: 1fr; } }
.perfil-campo { display: grid; align-content: start; gap: 6px; font-size: 0.92rem; font-weight: 700; color: var(--texto); }
.perfil-campo input, .perfil-campo select { width: 100%; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--color-borde); font-size: 1rem; font-family: inherit; }
.perfil-campo select { min-height: 48px; background-color: white; color: var(--texto); }
.perfil-campo input:focus, .perfil-campo select:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(45, 59, 42, 0.15); }
.perfil-form-error { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fdecec; color: #9b1c1c; font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
  .detalle-unidad-caja { transition: none; }
}

/* RUC verificado en SUNAT (registro y perfil del comprador negocio). */
.auth-ayuda { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.8rem; font-weight: 500; color: var(--texto-suave); }
.auth-ayuda i { color: #1f6f43; font-size: 0.95rem; }
.perfil-ruc-verificado {
  grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px;
  background: #e8f5ee; color: #14532d; font-size: 0.92rem; line-height: 1.45;
}
.perfil-ruc-verificado i { flex: none; font-size: 1.3rem; color: #1f6f43; }

/* ===== Reclamar un RUC (perfil del comprador) y su revisión (panel del admin) =====
   ui-ux-pro-max: instrucciones claras antes de pedir documentos, zonas de subida grandes (>= 44px) que muestran el
   archivo elegido, estado de envío (cargando -> éxito/error) y estados dichos con texto e ícono. 21st.dev ("Identity
   Verification Dialog"): la revisión pone lado a lado lo declarado y la cuenta que tiene el RUC, con los documentos. */
.auth-alerta:has(.auth-alerta-accion), .perfil-form-error:has(.btn) { flex-wrap: wrap; }
.auth-alerta-accion, .perfil-form-error .btn { flex-basis: 100%; margin: 10px 0 0; justify-content: center; }
.btn-link { background: none; border: none; padding: 0; color: var(--color-primario); font-weight: 700; text-decoration: underline; cursor: pointer; font: inherit; }
.reclamo-ruc-invitacion { margin: 18px 0 0; font-size: 0.92rem; color: var(--texto-suave); }
.reclamo-ruc-aviso {
  display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; border-radius: 12px;
  background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto); font-size: 0.92rem; line-height: 1.45;
}
.reclamo-ruc-aviso i { flex: none; font-size: 1.25rem; }

.reclamo-ruc { margin-top: 18px; padding: 20px; border-radius: 16px; border: 2px solid #e2c27a; background: #fffdf7; display: grid; gap: 14px; }
.reclamo-ruc h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.1rem; color: var(--color-primario); }
.reclamo-ruc-intro { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--texto-suave); }
#perfil-form-reclamo { display: grid; gap: 14px; }
.reclamo-ruc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.reclamo-ruc-ancho { grid-column: 1 / -1; }
.perfil-campo textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--color-borde); font: inherit; font-weight: 500; resize: vertical; }
.reclamo-archivos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.reclamo-archivo { position: relative; display: block; cursor: pointer; }
.reclamo-archivo input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.reclamo-archivo-caja {
  display: grid; justify-items: center; gap: 4px; min-height: 120px; padding: 16px; border-radius: 14px; text-align: center;
  border: 2px dashed var(--color-borde); background: #fff; transition: border-color 0.15s, background-color 0.15s;
}
.reclamo-archivo-caja i { font-size: 1.8rem; color: var(--color-primario); }
.reclamo-archivo-caja strong { font-size: 1rem; color: var(--texto); }
.reclamo-archivo-caja small { font-size: 0.82rem; line-height: 1.35; color: var(--texto-suave); overflow-wrap: anywhere; }
.reclamo-archivo:hover .reclamo-archivo-caja { border-color: var(--color-primario); background: var(--verde-fondo); }
.reclamo-archivo input:focus-visible + .reclamo-archivo-caja { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }
.reclamo-archivo.con-archivo .reclamo-archivo-caja { border-style: solid; border-color: #1f6f43; background: #e8f5ee; }
.reclamo-archivo.con-archivo small { color: #14532d; font-weight: 700; }

.reclamos-ruc-lista { margin-top: 18px; }
.reclamos-ruc-lista h4 { margin: 0 0 10px; font-size: 1rem; }
.reclamos-ruc-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reclamo-ruc-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--color-superficie); }
.reclamo-ruc-item > i { flex: none; font-size: 1.3rem; margin-top: 1px; }
.reclamo-ruc-item div { display: grid; gap: 2px; }
.reclamo-ruc-item small { color: var(--texto-suave); }
.reclamo-ruc-item.estado-pendiente > i { color: var(--acento-cosecha); }
.reclamo-ruc-item.estado-aprobado { background: #e8f5ee; }
.reclamo-ruc-item.estado-aprobado > i { color: #1f6f43; }
.reclamo-ruc-item.estado-rechazado { background: #fdecec; }
.reclamo-ruc-item.estado-rechazado > i, .reclamo-ruc-motivo { color: #9b1c1c; }

/* Cada reclamo a todo el ancho: lo declarado y la cuenta que tiene el RUC se comparan lado a lado. */
#reclamos-ruc-lista { grid-template-columns: minmax(0, 1fr); }
.reclamo-card { max-width: none; }
.reclamo-sunat { margin: 0 0 8px; font-size: 0.92rem; }
.reclamo-pista { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; font-size: 0.86rem; }
.reclamo-pista.ok { background: #e8f5ee; color: #14532d; }
.reclamo-pista.alerta { background: #fdecec; color: #9b1c1c; }
.reclamo-cuentas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.reclamo-cuenta { padding: 12px; border-radius: 12px; background: var(--color-superficie); }
.reclamo-cuenta h5 { margin: 0 0 8px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-suave); }
.reclamo-cuenta dl { margin: 0; display: grid; gap: 6px; }
.reclamo-cuenta dt { font-size: 0.74rem; font-weight: 700; color: var(--texto-suave); }
.reclamo-cuenta dd { margin: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.reclamo-mensaje { margin: 0 0 10px; font-size: 0.9rem; font-style: italic; color: var(--texto-suave); }
.reclamo-documentos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.reclamo-pdf { width: 100%; height: 420px; border: 1px solid var(--color-borde); border-radius: 10px; margin-bottom: 6px; }

@media (max-width: 640px) {
  .reclamo-ruc-grid, .reclamo-archivos, .reclamo-cuentas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .reclamo-archivo-caja { transition: none; }
}

/* ===== Compradores lejanos: reglas, opciones agencia/camión, DNI de quien recibe y seguimiento =====
   ui-ux-pro-max: la ayuda en el mismo lugar del checkout (desplegable), opciones como tarjetas con lo que incluyen y por
   qué no aplican, progreso del camión con barra + texto (no solo color), foco visible. 21st.dev: "Radio Group in Card"
   (opciones de envío), "Shipping Info Cards" (reglas con ícono) y "Collapsible Billing Card" (barra de progreso). */
.lejanos-info { margin-top: 14px; display: grid; gap: 10px; }
/* H9: botones de ciudad sobre el mapa del checkout (validación con usuarios del 2026-10-14, C07: "botones claros para
   marcar ciudad"). Botones de verdad con aria-pressed; se acomodan en varias filas en el celular. */
.ciudad-selector-bloque:empty { display: none; }
.ciudad-selector-titulo { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; font-weight: 700; color: var(--texto); }
.ciudad-selector-titulo i { color: var(--color-primario); font-size: 1.15rem; }
.ciudad-selector { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ciudad-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 48px; padding: 8px 14px; border: 1.5px solid var(--color-borde); border-radius: 12px; background: #fff; color: var(--texto); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.ciudad-chip strong { font-size: 0.98rem; }
.ciudad-chip small { font-size: 0.8rem; color: var(--texto-suave); }
.ciudad-chip:hover { border-color: var(--color-primario); }
.ciudad-chip:focus-visible { outline: 3px solid rgba(45, 59, 42, 0.35); outline-offset: 2px; }
.ciudad-chip[aria-pressed="true"] { border-color: var(--color-primario); background: rgba(45, 59, 42, 0.08); box-shadow: inset 0 0 0 1px var(--color-primario); }
.lejanos-tabla th small { display: block; font-weight: 400; color: var(--texto-suave); }
/* H9: qué llevar para recoger en la agencia. */
.mp-recojo-pasos { margin: 0 0 10px; padding-left: 20px; font-size: 0.9rem; line-height: 1.5; }
.mp-recojo-pasos li + li { margin-top: 4px; }
.lejanos-cobertura { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 0.9rem; color: var(--texto); }
.lejanos-cobertura i { color: var(--color-primario); font-size: 1.15rem; margin-top: 1px; }
.lejanos-reglas { border: 1px solid #e2c27a; border-radius: 14px; background: #fffdf7; }
.lejanos-reglas summary { cursor: pointer; padding: 12px 14px; font-weight: 700; color: var(--acento-cosecha-texto); display: flex; gap: 8px; align-items: center; list-style: none; }
.lejanos-reglas summary::-webkit-details-marker { display: none; }
.lejanos-reglas summary::after { content: "\25BE"; margin-left: auto; transition: transform 0.2s; }
.lejanos-reglas[open] summary::after { transform: rotate(180deg); }
.lejanos-reglas summary:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; border-radius: 12px; }
.lejanos-reglas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; padding: 0 14px 12px; }
.lejanos-regla { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid #efe3c4; }
.lejanos-regla > i { flex: none; font-size: 1.4rem; color: var(--acento-cosecha); }
.lejanos-regla div { display: grid; gap: 3px; }
.lejanos-regla strong { font-size: 0.92rem; color: var(--texto); }
.lejanos-regla span { font-size: 0.84rem; line-height: 1.45; color: var(--texto-suave); }
.lejanos-tabla-envoltura { padding: 0 14px 14px; overflow-x: auto; }
.lejanos-tabla { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.lejanos-tabla caption { text-align: left; font-weight: 700; padding-bottom: 6px; color: var(--texto); }
.lejanos-tabla th, .lejanos-tabla td { text-align: left; padding: 8px; border-top: 1px solid #efe3c4; vertical-align: top; }
.lejanos-tabla thead th { color: var(--texto-suave); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; border-top: none; }
.lejanos-tabla th[scope="row"] { font-weight: 800; color: var(--color-primario); }
.lejanos-tabla .btn-link { display: block; font-size: 0.78rem; font-weight: 600; }
.mapa-ayuda.fuera { color: #9b1c1c; }

.opciones-lejanas { display: grid; gap: 10px; margin: 12px 0; }
.opcion-lejana { position: relative; display: block; cursor: pointer; }
.opcion-lejana input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion-lejana-caja { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 2px solid #d6ddd0; background: #fff; transition: border-color 0.15s, background-color 0.15s; }
.opcion-lejana:hover .opcion-lejana-caja { border-color: var(--color-borde); }
.opcion-lejana input:checked + .opcion-lejana-caja { border-color: var(--color-primario); background: var(--verde-fondo); box-shadow: inset 0 0 0 1px var(--color-primario); }
.opcion-lejana input:focus-visible + .opcion-lejana-caja { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }
.opcion-lejana.no-disponible { cursor: not-allowed; }
.opcion-lejana.no-disponible .opcion-lejana-caja { background: var(--color-superficie); opacity: 0.8; }
.opcion-lejana-cabecera { display: flex; align-items: center; gap: 10px; }
.opcion-lejana-icono { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto); font-size: 1.2rem; flex: none; }
.opcion-lejana-cabecera strong { font-size: 1rem; color: var(--texto); }
.opcion-lejana-precio { margin-left: auto; font-weight: 800; color: var(--color-primario); white-space: nowrap; }
.opcion-lejana-detalle { font-size: 0.88rem; line-height: 1.5; color: var(--texto-suave); }
.opcion-lejana-detalle b { color: var(--texto); }
.opcion-lejana-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.opcion-lejana-chips span { padding: 3px 10px; border-radius: 999px; background: var(--color-superficie); font-size: 0.76rem; font-weight: 700; color: var(--texto-suave); }
.opcion-lejana-motivo { display: flex; gap: 6px; align-items: flex-start; font-size: 0.84rem; font-weight: 600; color: #9b1c1c; }
.lejano-nota, .lejano-consejo { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 0.84rem; line-height: 1.45; color: var(--texto-suave); }
.lejano-consejo { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--verde-fondo); color: #14532d; }
.lejano-sin-opcion, .lejano-receptor-error { margin: 0; color: #9b1c1c; font-weight: 600; font-size: 0.88rem; }
.lejano-receptor { margin-top: 6px; display: grid; gap: 8px; }
.lejano-receptor-fila { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.lejano-receptor-fila input { flex: 1 1 140px; }
.lejano-receptor-confirmar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--acento-cosecha-suave); }
.lejano-receptor-confirmar p { margin: 0; }
.lejano-receptor-ok { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: #e8f5ee; color: #14532d; font-size: 0.9rem; }

.checkout-pago-partes { display: grid; gap: 6px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--color-superficie); font-size: 0.86rem; }
.checkout-pago-partes div { display: flex; justify-content: space-between; gap: 10px; }
.checkout-pago-partes dt { color: var(--texto-suave); }
.checkout-pago-partes dd { margin: 0; font-weight: 700; white-space: nowrap; }
.checkout-pago-partes .destacada dt, .checkout-pago-partes .destacada dd { color: var(--color-primario); font-weight: 800; }

.mp-lejano p { margin: 0 0 8px; font-size: 0.9rem; line-height: 1.5; }
.mp-viaje-barra { height: 12px; border-radius: 999px; background: #e3e8dd; overflow: hidden; margin: 4px 0 6px; }
.mp-viaje-barra span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-primario), #4c7a3d); transition: width 0.4s; }
.mp-lejano-pago { display: flex; gap: 8px; align-items: flex-start; color: var(--acento-cosecha-texto); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .opcion-lejana-caja, .mp-viaje-barra span, .lejanos-reglas summary::after { transition: none; }
}

/* ===== Compradores lejanos: panel del repartidor (agencia de carga, camión compartido, documentos y viajes) =====
   Referencias de 21st.dev: "Tracker Card" (etapas del viaje), "API Usage Meter" (barra de carga con la marca de salida),
   "Onboarding Checklist" y "Attachment States" (documentos y su estado). Estados con texto + ícono, no solo color. */
.pill-en_agencia { background: #fdf0d5; color: #7a4b06; }
.pill-en_destino { background: #d5f2ea; color: #0f5e4c; }
.pill-esperando_camion { background: #fff3cd; color: #8a6d1a; }

.envio-lejano-ruta { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 6px 14px; border-radius: 999px; font-size: 0.86rem; font-weight: 600; }
.envio-lejano-ruta i { font-size: 1.05rem; }
.envio-lejano-ruta.agencia { background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto); }
.envio-lejano-ruta.camion { background: var(--verde-pastel); color: var(--color-primario); }

.envio-receptor { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--color-borde); background: #fff; }
.envio-receptor-icono { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--verde-pastel); color: var(--color-primario); font-size: 1.25rem; }
.envio-receptor div { display: grid; gap: 1px; min-width: 0; }
.envio-receptor-etiqueta { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-suave); }
.envio-receptor strong { font-size: 0.98rem; color: var(--texto); overflow-wrap: anywhere; }
.envio-receptor small { font-size: 0.8rem; color: var(--texto-suave); }

.envio-pasos-agencia { list-style: none; counter-reset: paso; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.envio-pasos-agencia li { counter-increment: paso; position: relative; min-height: 28px; padding-left: 40px; font-size: 0.9rem; line-height: 1.5; color: var(--texto-suave); }
.envio-pasos-agencia li::before {
  content: counter(paso); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--color-primario); color: #fff; font-size: 0.85rem; font-weight: 800;
}
.envio-pasos-agencia strong { color: var(--texto); }
.envio-pasos-agencia a { font-weight: 700; color: var(--color-primario); white-space: nowrap; }

.envio-aviso { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 0.88rem; line-height: 1.45; }
.envio-aviso > i { flex: none; font-size: 1.3rem; }
.envio-aviso > div, .envio-aviso > span { flex: 1; min-width: 200px; display: grid; gap: 2px; }
.envio-aviso > span { display: block; }
.envio-aviso strong { font-size: 0.95rem; }
.envio-aviso .btn { align-self: center; }
.envio-aviso.ok { background: #e8f5ee; color: #14532d; }
.envio-aviso.espera { background: #fff3cd; color: #6b5212; }
.envio-aviso.info { background: var(--color-superficie); color: var(--texto); }
.envio-aviso.error { background: #fdecec; color: #9b1c1c; }

.form-despacho-agencia { display: grid; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--borde); }
.form-despacho-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-despacho-campos label { display: grid; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--texto-suave); }
.form-despacho-campos input {
  width: 100%; min-width: 0; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--borde);
  font-size: 1rem; font-family: inherit; color: var(--texto); background: #fff;
}
.form-despacho-campos input:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(45, 59, 42, 0.15); }
.form-despacho-agencia .form-confirmar-entrega-acciones { margin-top: 0; }

/* Mis viajes en camión */
.viajes-section { margin: 0 0 28px; }
.viajes-section .section-header.inner { margin-top: 0; margin-bottom: 14px; }
.viajes-section h3 { display: flex; align-items: center; gap: 8px; }
.viajes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.viaje-card {
  display: grid; gap: 18px; align-content: start; padding: 20px 22px; border-radius: var(--radio); background: #fff;
  border: 1px solid var(--borde); border-left: 5px solid var(--color-primario); box-shadow: var(--sombra);
}
.viaje-cabecera h4 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.15rem; color: var(--color-primario); }
.viaje-cabecera small { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--texto-suave); }
.viaje-etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.viaje-etapas li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 0.78rem; font-weight: 600; color: var(--texto-suave); }
.viaje-etapas li::before { content: ''; position: absolute; top: 8px; right: 50%; width: 100%; height: 3px; background: #e3e8dd; }
.viaje-etapas li:first-child::before { display: none; }
.viaje-etapas li.hecho::before, .viaje-etapas li.actual::before { background: var(--color-primario); }
.viaje-paso-punto { position: relative; z-index: 1; width: 19px; height: 19px; border-radius: 50%; background: #fff; border: 3px solid #cfd8c8; }
.viaje-etapas li.hecho .viaje-paso-punto { background: var(--color-primario); border-color: var(--color-primario); }
.viaje-etapas li.actual { color: var(--color-primario); }
.viaje-etapas li.actual .viaje-paso-punto { border-color: var(--acento-cosecha); background: var(--acento-cosecha-suave); box-shadow: 0 0 0 4px rgba(161, 98, 7, 0.16); }

.viaje-medidor { display: grid; gap: 8px; }
.viaje-medidor-texto { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 0.86rem; color: var(--texto-suave); }
.viaje-medidor-texto strong { font-size: 1.05rem; color: var(--texto); }
.viaje-medidor-barra { position: relative; height: 14px; border-radius: 999px; background: #e3e8dd; }
.viaje-medidor-relleno { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: linear-gradient(90deg, var(--color-primario), #4c7a3d); transition: width 0.4s; }
.viaje-medidor-marca { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--acento-cosecha); }
.viaje-medidor-leyenda { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--texto-suave); }
.viaje-medidor-leyenda::before { content: ''; flex: none; width: 3px; height: 13px; border-radius: 2px; background: var(--acento-cosecha); }

.viaje-envios { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.viaje-envios li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: var(--color-superficie); font-size: 0.88rem; }
.viaje-envio-id { margin-right: auto; font-weight: 700; color: var(--texto); }
.viaje-saldo { padding: 2px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; }
.viaje-saldo.ok { background: #e8f5ee; color: #14532d; }
.viaje-saldo.espera { background: #fff3cd; color: #6b5212; }
.viaje-nota { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--texto-suave); }
.viaje-nota i { flex: none; font-size: 1.1rem; margin-top: 1px; }
.viaje-acciones .btn { width: 100%; min-height: 48px; justify-content: center; font-size: 1rem; }
.viaje-confirmar { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto); }
.viaje-confirmar p { margin: 0; font-size: 0.9rem; line-height: 1.45; font-weight: 600; }
.viaje-confirmar div { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* Viajes largos: documentos del transportista */
.carga-section { margin-top: 28px; }
.carga-panel { display: grid; gap: 16px; }
.unidad-alt-no-permitida { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 0.85rem; color: var(--acento-cosecha-texto); }
/* Mi vehículo: tarjeta corta sobre la de viajes largos, con edición en el lugar (Cambiar → Guardar / Cancelar). */
.vehiculo-panel { display: grid; gap: 12px; margin-bottom: 18px; }
.vehiculo-panel h3 { margin: 0; }
.vehiculo-panel .carga-cabecera p { margin: 2px 0 0; color: var(--texto-suave); }
.vehiculo-panel .btn-editar-vehiculo { margin-left: auto; min-height: 44px; }
.vehiculo-ayuda { margin: 0; font-size: 0.9rem; color: var(--texto-suave); }
.form-vehiculo { display: grid; gap: 12px; padding-top: 4px; border-top: 1px solid var(--borde); }
.form-vehiculo .form-carga-acciones { justify-content: flex-end; gap: 10px; }
.carga-cabecera { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.carga-cabecera-icono { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--verde-pastel); color: var(--color-primario); font-size: 1.5rem; }
.carga-cabecera > div { flex: 1; min-width: 180px; }
.carga-cabecera h3 { margin: 0; font-size: 1.15rem; }
.carga-cabecera p { margin: 2px 0 0; font-size: 0.85rem; color: var(--texto-suave); }
.carga-estado { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; }
.carga-estado.pendiente { background: #fff3cd; color: #6b5212; }
.carga-estado.rechazado { background: #fdecec; color: #9b1c1c; }
.carga-estado.verificado { background: #e8f5ee; color: #14532d; }
.carga-intro { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--texto-suave); }
.carga-requisitos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.carga-requisitos li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--color-superficie); font-size: 0.86rem; font-weight: 600; }
.carga-requisitos i { font-size: 1.3rem; color: var(--color-primario); }
.btn-abrir-carga { justify-self: start; }
.form-carga { display: grid; gap: 14px; padding-top: 14px; border-top: 1px dashed var(--borde); }
.form-carga-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.carga-archivos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reclamo-archivo.con-error .reclamo-archivo-caja { border-color: #b3401f; background: #fdf1ec; }
.reclamo-archivo.con-error small { color: #9b1c1c; font-weight: 700; }
.carga-privacidad { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 0.82rem; color: var(--texto-suave); }
.form-carga-acciones { display: flex; justify-content: flex-end; }
.carga-datos { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.carga-datos div { padding: 10px 12px; border-radius: 12px; background: var(--color-superficie); }
.carga-datos dt { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-suave); }
.carga-datos dd { margin: 2px 0 0; font-weight: 700; color: var(--texto); }

@media (max-width: 640px) {
  .form-despacho-campos, .form-carga-grid, .carga-archivos, .carga-requisitos, .carga-datos { grid-template-columns: 1fr; }
  .viaje-etapas li { font-size: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .viaje-medidor-relleno { transition: none; }
}

/* ===== Compradores lejanos: pestañas del admin (transportistas, viajes y destinos) =====
   ui-ux-pro-max: filtros como botones con aria-pressed, confirmación antes de mover un viaje (avisa a todos sus
   compradores), campos agrupados con su interruptor y los desactivados atenuados. 21st.dev: "Account Settings Fieldset"
   y "Notification Settings Field" (grupos con interruptor y descripción), "Expanded Map" (tarjeta de ubicación). */
.admin-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.admin-filtro {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid var(--color-borde); background: #fff; color: var(--texto-suave); font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.admin-filtro:hover { border-color: var(--color-primario); color: var(--color-primario); }
.admin-filtro.active { background: var(--color-primario); border-color: var(--color-primario); color: #fff; }
.admin-filtro:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }

/* Cada transportista a todo el ancho, como los reclamos: sus datos en una fila y el documento grande al revisarlo. */
#transportistas-lista { grid-template-columns: minmax(0, 1fr); }
.transportista-card { max-width: none; }
.transportista-card .perfil-datos-grid { margin: 12px 0; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.viaje-card-admin .viaje-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.viaje-transportista { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--verde-pastel); }
.viaje-transportista > i { flex: none; font-size: 1.5rem; color: var(--color-primario); }
.viaje-transportista div { display: grid; gap: 2px; }
.viaje-transportista small { color: var(--texto-suave); font-size: 0.82rem; }
.viaje-nota-alerta { padding: 10px 14px; border-radius: 12px; background: #fff3cd; color: #6b5212; }
.form-asignar-viaje { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.form-asignar-viaje label { flex: 1; min-width: 220px; display: grid; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--texto); }
.form-asignar-viaje select { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--borde); font: inherit; font-weight: 500; background: #fff; }

.destinos-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 16px; margin-bottom: 20px; }
.destino-card {
  display: grid; gap: 14px; align-content: start; padding: 20px 22px; border-radius: var(--radio); background: #fff;
  border: 1px solid var(--borde); box-shadow: var(--sombra);
}
.destino-card.destino-oculto { background: #f7f8f5; }
.destino-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.destino-cabecera h4 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.2rem; color: var(--color-primario); }
.destino-cabecera small { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--texto-suave); }
.destino-modalidades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.destino-modalidad { padding: 12px 14px; border-radius: 12px; background: var(--color-superficie); }
.destino-modalidad.apagada { background: #f3f4f1; color: var(--texto-suave); }
.destino-modalidad h5 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 0.9rem; color: var(--texto); }
.destino-modalidad dl { margin: 0; display: grid; gap: 6px; }
.destino-modalidad dl div { display: flex; justify-content: space-between; gap: 10px; font-size: 0.84rem; }
.destino-modalidad dt { color: var(--texto-suave); }
.destino-modalidad dd { margin: 0; font-weight: 700; text-align: right; }
.destino-apagado { margin: 0; font-size: 0.85rem; font-style: italic; }
.destino-ingreso { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--borde); font-size: 0.84rem; color: var(--texto-suave); }
.destino-ingreso b { color: var(--color-primario); }
.destino-nota { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 0.86rem; color: var(--texto-suave); }
.destino-card .tarjeta-acciones { margin-top: 0; }

.form-destino { display: grid; gap: 16px; max-width: none; margin-bottom: 20px; border: 2px solid var(--color-primario); }
.form-destino h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.15rem; }
.form-destino-cuerpo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.form-destino-campos { display: grid; gap: 14px; }
.form-destino-grupo { margin: 0; padding: 14px 16px; border: 1px solid var(--color-borde); border-radius: 14px; display: grid; gap: 12px; min-width: 0; }
.form-destino-grupo legend { padding: 0 6px; font-weight: 800; font-size: 0.92rem; color: var(--color-primario); }
.form-destino-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.form-destino-grid .perfil-campo { font-size: 0.85rem; }
.form-destino-grid .perfil-campo input { padding: 10px 12px; }
.form-destino-grid .perfil-campo small { font-weight: 500; font-size: 0.76rem; }
.form-destino-grupo.apagado .form-destino-grupo-campos { opacity: 0.45; }
.form-destino-grupo-campos input:disabled { cursor: not-allowed; background: #f3f4f1; }
.form-destino-calculo { margin: 0; font-size: 0.88rem; color: var(--texto-suave); }
.form-destino-calculo:empty { display: none; }
.form-destino-calculo b { color: var(--color-primario); }
.form-destino-mapa { position: sticky; top: 90px; display: grid; gap: 8px; }
.form-destino-mapa-titulo { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--texto); }
.mapa-form-destino { height: 380px; border-radius: 14px; border: 1px solid var(--color-borde); overflow: hidden; }
.form-destino-acciones { justify-content: flex-end; margin-top: 0; }

.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.interruptor span { display: grid; gap: 2px; }
.interruptor strong { font-size: 0.9rem; color: var(--texto); }
.interruptor small { font-size: 0.8rem; color: var(--texto-suave); }
.interruptor input {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 46px; height: 28px; margin: 0; border-radius: 999px;
  background: #cfd8c8; cursor: pointer; transition: background-color 0.2s;
}
.interruptor input::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s;
}
.interruptor input:checked { background: var(--color-primario); }
.interruptor input:checked::after { transform: translateX(18px); }
.interruptor input:focus-visible { outline: 3px solid var(--acento-cosecha); outline-offset: 2px; }

.agencia-despacho-admin { margin-top: 4px; }
/* El formulario de una ciudad y el punto de despacho llevan mapa: a todo el ancho (las demás tarjetas del panel miden 560px). */
#view-panel-admin .card-panel.form-destino, #view-panel-admin .card-panel.agencia-despacho-admin { max-width: none; }
.agencia-despacho-admin-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; align-items: stretch; }
.agencia-despacho-admin-texto { display: grid; gap: 12px; align-content: start; }
.agencia-despacho-admin-texto h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.1rem; }
.agencia-despacho-admin-texto p { margin: 0; }
.agencia-despacho-coordenadas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agencia-despacho-admin-texto .btn { justify-self: start; }
.mapa-agencia-despacho { min-height: 280px; border-radius: 14px; border: 1px solid var(--color-borde); overflow: hidden; }

@media (max-width: 900px) {
  .form-destino-cuerpo, .agencia-despacho-admin-cuerpo { grid-template-columns: 1fr; }
  .form-destino-mapa { position: static; }
  .mapa-form-destino { height: 280px; }
}
@media (max-width: 640px) {
  .destino-modalidades { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-filtro, .interruptor input, .interruptor input::after { transition: none; }
}

/* ===== Corregir o anular una siembra planificada (Mi perfil del productor) =====
   ui-ux-pro-max: etiquetas visibles en cada campo, campos grandes para agricultores mayores, confirmación antes de
   anular (no se deshace) y aviso de éxito. 21st.dev "Inline Edit Settings": se edita en la misma tarjeta. */
.produccion-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.produccion-acciones .btn { min-height: 48px; font-size: 1rem; }
.produccion-card .produccion-acciones .btn-completar-cosecha { align-self: auto; }
.form-corregir-siembra { display: grid; gap: 14px; margin-top: 4px; padding: 16px; border-radius: 14px; border: 2px solid var(--color-primario); background: #fff; }
.form-corregir-siembra h5 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; color: var(--color-primario); }
.form-corregir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.form-corregir-grid .perfil-campo input { min-height: 48px; font-size: 1.05rem; }
.form-corregir-nota { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 0.86rem; color: var(--texto-suave); }
.form-corregir-siembra .tarjeta-acciones { justify-content: flex-end; margin-top: 0; }
.anular-siembra-confirmar { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: #fdecec; }
.anular-siembra-confirmar p { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 0.95rem; font-weight: 600; color: #9b1c1c; line-height: 1.45; }
.anular-siembra-confirmar .tarjeta-acciones { justify-content: flex-end; margin-top: 0; }
/* Sobre el fondo rojo claro, el botón de peligro va lleno (el suave de siempre casi no se distinguía). */
.anular-siembra-confirmar .btn-danger { background: #b42318; color: #fff; min-height: 44px; }
.anular-siembra-confirmar .btn-danger:hover { background: #912018; }

/* ===== Recojo de cosechas en la chacra (agricultor, repartidor y admin) =====
   21st.dev: "Radio Group in Card" (opciones con su costo, reusa .opcion-lejana), "AI Approval" (la elegida se despliega)
   y "Task Steps" (pasos del recojo). ui-ux-pro-max: costo visible antes de pedir, botones de 48px, estado con texto. */
.pill-recogido { background: #e8eefc; color: #2b4a8b; }
.pill-en_almacen { background: #fdf0d5; color: #7a4b06; }

.alm-seccion { margin: 0 0 28px; }
.alm-seccion .section-header.inner { margin-top: 0; margin-bottom: 8px; }
.alm-seccion h3 { display: flex; align-items: center; gap: 8px; }
.alm-intro { margin: 0 0 16px; max-width: 760px; }
.alm-lista { display: grid; gap: 16px; }
.alm-card {
  display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 20px; padding: 20px 22px;
  border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra);
  animation: aparecerTarjeta 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.alm-producto { display: grid; gap: 12px; align-content: start; }
.alm-foto { width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--color-superficie); display: grid; place-items: center; font-size: 3rem; }
.alm-foto img { width: 100%; height: 100%; object-fit: cover; }
.alm-producto h4 { margin: 0; font-size: 1.15rem; }
.alm-producto p { margin: 2px 0 8px; color: var(--texto-suave); font-size: 0.9rem; }
.alm-cuerpo { min-width: 0; }
.alm-form { display: grid; gap: 14px; }
.alm-opciones { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.alm-opciones legend { padding: 0; margin-bottom: 10px; font-weight: 800; font-size: 1rem; color: var(--texto); }
.alm-opciones .opcion-lejana-caja { height: 100%; min-height: 96px; }
.alm-detalle { display: grid; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--borde); }
.alm-detalle[data-detalle="productor"] { grid-template-columns: minmax(0, 260px) auto; align-items: end; justify-content: start; }
.alm-detalle .btn { min-height: 48px; font-size: 1rem; }
.alm-recojo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.alm-mapa-bloque { display: grid; gap: 8px; }
.alm-mapa-titulo { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--texto); }
.alm-mapa { height: 280px; border-radius: 14px; border: 1px solid var(--color-borde); overflow: hidden; }
.alm-recojo-campos { display: grid; gap: 12px; }
.alm-recojo-campos .perfil-campo input { min-height: 48px; }
.alm-cotizacion { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--color-superficie); }
.alm-cotizacion:empty { display: none; }
.alm-cotizacion p { margin: 0; }
.alm-cotizacion-datos { margin: 0; display: grid; gap: 4px; }
.alm-cotizacion-datos div { display: flex; justify-content: space-between; gap: 10px; font-size: 0.86rem; }
.alm-cotizacion-datos dt { color: var(--texto-suave); }
.alm-cotizacion-datos dd { margin: 0; font-weight: 700; text-align: right; }
.alm-cotizacion-total { font-size: 1.05rem; padding-top: 6px; border-top: 1px dashed var(--borde); }
.alm-cotizacion-total b { color: var(--color-primario); }
.alm-cotizacion-nota { display: flex; gap: 6px; align-items: flex-start; font-size: 0.82rem; color: var(--texto-suave); }

.alm-estado { display: grid; gap: 14px; }
.alm-pasos { list-style: none; margin: 0; padding: 0; display: grid; }
.alm-pasos li { position: relative; display: flex; gap: 12px; padding-bottom: 14px; color: var(--texto-suave); }
.alm-pasos li:last-child { padding-bottom: 0; }
.alm-pasos li::before { content: ''; position: absolute; left: 11px; top: 26px; bottom: 0; width: 2px; background: #e3e8dd; }
.alm-pasos li:last-child::before { display: none; }
.alm-pasos li.hecho::before { background: var(--color-primario); }
.alm-paso-punto { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 3px solid #cfd8c8; background: #fff; color: #fff; font-size: 0.8rem; }
.alm-pasos li.hecho .alm-paso-punto { background: var(--color-primario); border-color: var(--color-primario); }
.alm-pasos li.actual .alm-paso-punto { border-color: var(--acento-cosecha); background: var(--acento-cosecha-suave); box-shadow: 0 0 0 4px rgba(161, 98, 7, 0.16); }
.alm-pasos li div { display: grid; gap: 2px; padding-top: 2px; }
.alm-pasos li strong { font-size: 0.92rem; }
.alm-pasos li.hecho strong, .alm-pasos li.actual strong { color: var(--texto); }
.alm-pasos li small { font-size: 0.85rem; line-height: 1.45; color: var(--texto-suave); }
.alm-costo { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 0.88rem; color: var(--texto-suave); }
.alm-costo b { color: var(--texto); }
.alm-anular { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.alm-anular-confirmar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: #fdecec; color: #9b1c1c; font-size: 0.88rem; font-weight: 600; }
.alm-anular-confirmar .btn-danger { background: #b42318; color: #fff; }

.alm-admin-llega { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--color-superficie); font-size: 0.88rem; font-weight: 600; color: var(--texto); }
.alm-admin-llega small { flex-basis: 100%; font-weight: 500; color: var(--texto-suave); }
.alm-admin-llega.sin-coordinar { background: #fff3cd; color: #6b5212; }
.alm-admin-llega.lista { background: #e8f5ee; color: #14532d; }
.alm-admin-llega a { color: inherit; font-weight: 700; }
/* H8: transporte contratado por el admin (21st.dev "Appointment Booking Split"; errores junto a su campo). */
.btn-abrir-transporte, .btn-recogido-contratado { margin-top: 10px; min-height: 44px; }
.form-transporte { display: grid; gap: 12px; margin-top: 10px; padding: 14px; border: 1px solid var(--borde); border-radius: 14px; background: #fff; }
.ft-titulo { display: grid; gap: 2px; margin: 0; }
.ft-titulo small { color: var(--texto-suave); font-size: 0.86rem; line-height: 1.4; }
.ft-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.ft-campo { display: grid; gap: 4px; font-size: 0.86rem; font-weight: 700; min-width: 0; }
.ft-campo input { min-height: 44px; font-size: 1rem; }
.ft-campo input[aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12); }
.ft-error { color: #b42318; font-weight: 600; font-size: 0.82rem; line-height: 1.35; }
.ft-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-acciones .btn { min-height: 44px; }
.alm-cotizacion-aviso { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff3cd; color: #6b5212; font-size: 0.92rem; line-height: 1.45; }
.alm-cotizacion-aviso i { font-size: 1.2rem; flex: none; margin-top: 1px; }

.recojos-section { margin: 0 0 28px; padding: 18px 20px; border-radius: var(--radio); background: #f5f9f1; border: 1.5px solid #cfe0c3; }
.recojos-section .section-header.inner { margin-top: 0; margin-bottom: 6px; }
.recojos-section h3 { display: flex; align-items: center; gap: 8px; }
.recojos-intro { margin: 0 0 14px; }
.recojo-referencia { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 0.9rem; color: var(--texto); }

@media (max-width: 860px) {
  .alm-card { grid-template-columns: 1fr; }
  .alm-producto { grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
  .alm-foto { aspect-ratio: 1; font-size: 2rem; }
  .alm-recojo { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .alm-opciones { grid-template-columns: 1fr; }
  .alm-detalle[data-detalle="productor"] { grid-template-columns: 1fr; }
}
.recojo-card a.btn { text-decoration: none; }
.pill-completado { background: var(--verde-pastel); color: var(--verde-oscuro); }
.notif-icon.tipo-recojo_actualizado { background: var(--verde-pastel); color: var(--color-primario); }
.propuesta-plazo { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto); font-size: 0.86rem; font-weight: 600; }

/* ===== Pedidos pagados sin entregar (admin): cancelar y devolver el dinero =====
   21st.dev "Shipment Card" (estado del envío arriba) + "Order Confirmation Card" (filas pago/total). ui-ux-pro-max:
   confirmación en la misma tarjeta para una acción que no se deshace, motivo con etiqueta visible, botones de 44px+. */
.sin-entregar-card.con-alerta { border-left-color: #b45309; }
.sin-entregar-envio { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--verde-pastel); color: var(--color-primario); font-weight: 600; font-size: 0.92rem; line-height: 1.4; }
.sin-entregar-envio.alerta { background: #fff3cd; color: #6b5212; }
.sin-entregar-envio i { font-size: 1.15rem; flex: none; }
.sin-entregar-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 12px 18px; margin: 0; }
.sin-entregar-datos div { display: grid; gap: 2px; min-width: 0; }
.sin-entregar-datos dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--texto-suave); }
.sin-entregar-datos dd { margin: 0; font-size: 0.95rem; overflow-wrap: anywhere; }
.sin-entregar-datos dd strong { font-size: 1.05rem; color: var(--color-primario); }
.sin-entregar-card .viaje-acciones .btn { min-height: 46px; }
.sin-entregar-confirmar { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: #fdecec; }
.sin-entregar-confirmar > p { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 0.92rem; font-weight: 600; color: #9b1c1c; line-height: 1.45; }
.sin-entregar-confirmar > p i { font-size: 1.15rem; flex: none; margin-top: 1px; }
.sin-entregar-confirmar .perfil-campo { display: grid; gap: 6px; }
.sin-entregar-confirmar .perfil-campo > span { font-weight: 700; font-size: 0.9rem; color: var(--texto); }
.sin-entregar-confirmar .perfil-campo small { font-weight: 500; color: var(--texto-suave); }
.sin-entregar-confirmar textarea { width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 10px; border: 1px solid #f0b4ae; background: #fff; font: inherit; font-size: 1rem; resize: vertical; }
.sin-entregar-confirmar textarea:focus-visible { outline: 3px solid rgba(180, 35, 24, 0.25); border-color: #b42318; }
.sin-entregar-confirmar .form-entrega-mensaje:empty { display: none; }
.sin-entregar-confirmar .tarjeta-acciones { justify-content: flex-end; margin-top: 0; }
.sin-entregar-confirmar .btn-danger { background: #b42318; color: #fff; min-height: 44px; }
.sin-entregar-confirmar .btn-danger:hover { background: #912018; }

/* ===== Mis ganancias (agricultor y repartidor) y Pagos por hacer (admin) =====
   21st.dev "Wallet Card" (lo por cobrar, grande) + "Invoice History Table" (movimientos con estado y total al pie).
   ui-ux-pro-max: etiquetas visibles, teclado numérico para celular/CCI, error junto al campo, botones de 44px+, cifras
   alineadas a la derecha con números tabulares. */
.ganancias { display: grid; gap: 18px; }
.ganancias-seccion { margin-top: 28px; }
.ganancias-intro { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--acento-cosecha-suave); color: var(--acento-cosecha-texto); font-size: 0.95rem; line-height: 1.45; }
.ganancias-intro i { font-size: 1.3rem; flex: none; }
@media (min-width: 700px) { .ganancias-stats { grid-template-columns: repeat(var(--columnas, 3), minmax(0, 1fr)); } }
.ganancias-destacada { background: linear-gradient(135deg, var(--color-primario), #3f5a3a); color: #fff; border: none; }
.ganancias-destacada .economia-stat-label, .ganancias-destacada .economia-stat-sub { color: rgba(255, 255, 255, 0.85); }
.ganancias-destacada .economia-stat-valor { color: #fff; font-size: 2.2rem; }
.ganancias-destacada .economia-stat-icono { background: rgba(255, 255, 255, 0.15); color: #fff; }
.ganancias-cuerpo { display: grid; gap: 18px; }
@media (min-width: 960px) { .ganancias-cuerpo { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.ganancias h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 1.05rem; color: var(--color-primario); }
.ganancias-cuenta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ganancias-cuenta-cabeza h4 { margin: 0; }
.ganancias-cuenta.sin-cuenta { border: 2px solid #e0b252; }
.ganancias-medios { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.ganancias-medios li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--color-superficie); }
.ganancias-medios li i { font-size: 1.4rem; color: var(--color-primario); }
.ganancias-medios li div, .ganancias-pagos li div { display: grid; gap: 2px; min-width: 0; }
.ganancias-medios strong { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ganancias-medios span, .ganancias-pagos li span { font-size: 0.85rem; color: var(--texto-suave); }
.ganancias-nota { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 0.88rem; color: var(--texto-suave); }
.ganancias-nota.alerta { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: #fff3cd; color: #6b5212; font-weight: 600; }
.form-cuenta-cobro { display: grid; gap: 16px; }
.form-cuenta-cobro fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin: 0; padding: 14px; border: 1px solid var(--borde); border-radius: 12px; }
.form-cuenta-cobro legend { display: flex; align-items: center; gap: 6px; padding: 0 6px; font-weight: 700; color: var(--color-primario); }
.form-cuenta-cobro legend small { font-weight: 500; color: var(--texto-suave); }
.form-cuenta-cobro .perfil-campo { display: grid; gap: 6px; }
.form-cuenta-cobro .perfil-campo > span { font-size: 0.88rem; font-weight: 700; }
.form-cuenta-cobro input, .form-cuenta-cobro select { min-height: 46px; font-size: 1rem; }
.form-cuenta-cobro [aria-invalid="true"] { border-color: #b42318; outline: 2px solid rgba(180, 35, 24, 0.2); }
.form-cuenta-cobro .form-entrega-mensaje:empty, .pph-form .form-entrega-mensaje:empty { display: none; }
.form-cuenta-cobro .tarjeta-acciones { justify-content: flex-end; margin-top: 0; }
.ganancias-proximos ul, .ganancias-pagos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ganancias-proximos li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--color-superficie); }
.ganancias-proximos li span { display: flex; align-items: center; gap: 8px; }
.ganancias-proximos li.siguiente { background: var(--verde-pastel); font-weight: 700; }
.ganancias-proximos li strong, .tabla-ganancias .num { font-variant-numeric: tabular-nums; }
.tabla-ganancias .num { text-align: right; white-space: nowrap; }
.tabla-ganancias td { vertical-align: top; }
.tabla-ganancias tfoot td { padding: 12px 10px; font-weight: 800; color: var(--color-primario); border-top: 2px solid var(--color-borde); }
.ganancias-desglose { display: block; margin-top: 2px; font-size: 0.78rem; font-weight: 500; color: var(--texto-suave); }
.tabla-ganancias .pill { white-space: nowrap; }
.ganancias-pagos li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-borde) 40%, transparent); }
.ganancias-pagos li:last-child { border-bottom: none; }
.ganancias-pago-icono { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--verde-pastel); color: var(--color-primario); font-size: 1.15rem; }
@media (max-width: 640px) {
  .tabla-ganancias thead { display: none; }
  .tabla-ganancias tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-borde) 40%, transparent); }
  .tabla-ganancias td { padding: 0; border: none; }
  .tabla-ganancias td[data-etiqueta="Detalle"] { grid-column: 1 / -1; order: -1; }
  .tabla-ganancias tfoot tr { border-bottom: none; }
}

.pph-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding: 18px 22px; border-radius: var(--radio); background: linear-gradient(135deg, var(--color-primario), #3f5a3a); color: #fff; box-shadow: var(--sombra); }
.pph-cabecera > div { display: grid; gap: 2px; }
.pph-cabecera-etiqueta { font-size: 0.8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.pph-cabecera strong { font-family: var(--font-titulo); font-size: 2rem; }
.pph-cabecera small { font-size: 0.88rem; opacity: .85; }
.pph-cabecera > i { font-size: 2.6rem; opacity: .5; }
.pph-card.con-pago { border-left-color: var(--acento-cosecha, #A16207); }
.pph-montos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 0; }
.pph-montos div { display: grid; gap: 2px; }
.pph-montos dt { font-size: 0.75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--texto-suave); }
.pph-montos dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.pph-montos .principal dd { font-family: var(--font-titulo); font-size: 1.7rem; color: var(--color-primario); }
.pph-montos small { font-size: 0.8rem; color: var(--texto-suave); }
.pph-medios { display: grid; gap: 8px; }
.pph-medio { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--color-superficie); }
.pph-medio > i { font-size: 1.3rem; color: var(--color-primario); }
.pph-medio > div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.pph-medio span { font-size: 0.8rem; color: var(--texto-suave); }
.pph-medio strong { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pph-medio .btn { min-width: 44px; min-height: 44px; }
.pph-sin-cuenta { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff3cd; color: #6b5212; font-weight: 600; font-size: 0.9rem; }
.pph-card .viaje-acciones .btn { min-height: 46px; }
.pph-form { display: grid; gap: 12px; padding: 16px; border-radius: 14px; border: 2px solid var(--color-primario); background: #fff; }
.pph-metodo { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: none; }
.pph-metodo legend { margin-bottom: 8px; font-weight: 700; font-size: 0.9rem; }
.pph-opcion { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--borde); border-radius: 999px; cursor: pointer; font-weight: 600; }
.pph-opcion:has(input:checked) { border-color: var(--color-primario); background: var(--verde-pastel); color: var(--color-primario); }
.pph-opcion.deshabilitada { opacity: .55; cursor: not-allowed; }
.pph-opcion small { font-weight: 500; }
.pph-adelantar { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; }
.pph-form .perfil-campo { display: grid; gap: 6px; }
.pph-form .perfil-campo > span { font-weight: 700; font-size: 0.88rem; }
.pph-form input[type="text"] { min-height: 46px; font-size: 1rem; }
.pph-ayuda { margin: 0; font-size: 0.85rem; color: var(--acento-cosecha-texto); }
.pph-ayuda:empty { display: none; }
.pph-form .tarjeta-acciones { justify-content: flex-end; margin-top: 0; }
.pph-historial { margin-top: 22px; }

/* ===== Ventas (agricultor y admin) =====
   Skill dataviz: una cifra principal, indicadores con variación (flecha + signo, nunca solo color), columnas finas
   (24px máx., 4px redondeadas arriba) con énfasis en el mes actual, escala secuencial de un solo tono para la tabla
   producto × mes, rejilla de 1px, texto en tinta (nunca del color de la serie) y cifras tabulares solo en columnas.
   21st.dev "Charts & KPI Cards" y "Total Sales Chart" (filtro de periodo en una fila arriba). */
.ventas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; transition: opacity .2s ease; }
.ventas.cargando { opacity: .55; }
.ventas-encabezado { flex-wrap: wrap; gap: 12px; }
.ventas-intro { margin: -4px 0 14px; }
.economia-estimada-titulo { margin-top: 34px; }
.ventas-periodo { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--color-superficie); gap: 4px; }
.ventas-periodo-btn { min-height: 40px; padding: 6px 16px; border: none; border-radius: 999px; background: transparent; font-weight: 700; color: var(--texto-suave); cursor: pointer; }
.ventas-periodo-btn[aria-pressed="true"] { background: #fff; color: var(--color-primario); box-shadow: var(--sombra); }
.ventas-periodo-btn:focus-visible { outline: 3px solid var(--color-primario); outline-offset: 2px; }
.ventas-arriba { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1100px) { .ventas-arriba { grid-template-columns: minmax(280px, 1fr) minmax(0, 2.4fr); align-items: stretch; } }
.ventas-hero { display: grid; gap: 6px; align-content: center; padding: 22px 24px; border-radius: var(--radio); background: linear-gradient(135deg, var(--color-primario), #3f5a3a); color: #fff; box-shadow: var(--sombra); }
.ventas-hero-etiqueta { font-size: 0.82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.ventas-hero-valor { font-family: var(--font-titulo); font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.05; }
.ventas-hero-sub { font-size: 0.9rem; opacity: .9; line-height: 1.45; }
.ventas-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 14px; }
.ventas-kpi { display: grid; gap: 6px; align-content: start; padding: 16px 18px; border-radius: var(--radio); background: #fff; border: 1px solid color-mix(in srgb, var(--color-borde) 35%, transparent); box-shadow: var(--sombra); }
.ventas-kpi-etiqueta { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--texto-suave); }
.ventas-kpi-valor { font-family: var(--font-titulo); font-size: 1.6rem; font-weight: 800; color: var(--color-primario); }
.ventas-kpi-pie { font-size: 0.78rem; color: var(--texto-suave); }
.ventas-delta { display: inline-flex; align-items: center; gap: 4px; align-self: start; width: fit-content; padding: 2px 8px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.ventas-delta span { font-weight: 500; }
.ventas-delta.sube { background: #e5f2e3; color: #1d5a1d; }
.ventas-delta.baja { background: #fbe9e4; color: #9b2c12; }
.ventas-delta.igual, .ventas-delta.sin-dato { background: var(--color-superficie); color: var(--texto-suave); font-weight: 600; }
.ventas-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 1000px) { .ventas-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } .ventas-grid-pares { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ventas-card h5 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.02rem; color: var(--color-primario); }
.ventas-card-sub { margin: 4px 0 14px; font-size: 0.85rem; color: var(--texto-suave); }
.ventas-chart-wrap { position: relative; height: 280px; }
.ventas-detalle { margin-top: 12px; }
.ventas-detalle summary { cursor: pointer; font-weight: 700; color: var(--color-primario); font-size: 0.9rem; min-height: 32px; display: flex; align-items: center; }
.ventas-ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ventas-ranking li { display: grid; gap: 5px; }
.vr-cabeza { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.vr-nombre { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.vr-valor { font-weight: 800; white-space: nowrap; color: var(--color-primario); }
.vr-barra { height: 10px; border-radius: 999px; background: #eef1ec; overflow: hidden; }
.vr-barra span { display: block; height: 100%; border-radius: 999px; background: #3E8E41; }
.ventas-ranking small { font-size: 0.8rem; color: var(--texto-suave); }
.ventas-frases ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.ventas-frases li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.ventas-frases li i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--verde-pastel); color: var(--color-primario); font-size: 1.05rem; }
.ventas-heat { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 0.82rem; }
.ventas-heat th { padding: 6px 8px; font-size: 0.72rem; font-weight: 700; color: var(--texto-suave); text-align: center; white-space: nowrap; }
.ventas-heat tbody th { text-align: left; color: var(--texto); font-size: 0.85rem; max-width: 160px; white-space: normal; }
.ventas-heat td { min-width: 58px; padding: 8px 6px; border-radius: 6px; text-align: center; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ventas-heat td.vh-vacia { background: #f6f7f4; color: #aab2a6; }
.ventas-heat-leyenda { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; font-size: 0.78rem; color: var(--texto-suave); }
.ventas-heat-leyenda span { width: 22px; height: 12px; border-radius: 3px; }
.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; }
@media (prefers-reduced-motion: reduce) { .ventas { transition: none; } }

/* Ventas de la plataforma (admin) y ganancias por mes */
.admin-ventas-encabezado { margin-top: 30px; }
.tabla-mes-a-mes th[scope="row"] { text-align: left; font-weight: 700; white-space: nowrap; }
.tabla-mes-a-mes td, .tabla-mes-a-mes th { white-space: nowrap; }
.ganancias-por-mes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ganancias-por-mes li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.gm-mes { font-size: 0.85rem; font-weight: 700; color: var(--texto-suave); text-transform: capitalize; }
.gm-barra { height: 12px; border-radius: 999px; background: #eef1ec; overflow: hidden; }
.gm-barra span { display: block; height: 100%; border-radius: 999px; background: #C3CDBE; }
.ganancias-por-mes li.actual .gm-barra span { background: #3E8E41; }
.gm-valor { font-weight: 800; color: var(--color-primario); font-variant-numeric: tabular-nums; }
/* El panel admin limita sus .card-panel a 560px (pensado para tarjetas sueltas): las de ventas y el historial de pagos
   ocupan todo el ancho, como el resto de las pantallas nuevas. */
#view-panel-admin .ventas-card, #view-panel-admin .pph-historial { max-width: none; }

/* ===== Etapas y gastos de cada alimento =====
   21st.dev "Process Timeline" (etapas con gasto marcadas con check, la siguiente resaltada, las demás numeradas) y
   "Vertical Titled Stepper". ui-ux-pro-max: etiqueta visible en cada campo, campos grandes (agricultores mayores),
   el total de los jornales a la vista, aviso al guardar y confirmación en el mismo botón antes de borrar. */
.asistente-plantilla { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--verde-pastel); color: var(--color-primario); font-size: 0.95rem; line-height: 1.45; }
.asistente-plantilla:empty { display: none; }
.asistente-plantilla i { font-size: 1.2rem; flex: none; margin-top: 1px; }
.asistente-gastos { display: grid; gap: 14px; }
.ag-etapa { margin: 0; padding: 14px; border: 1px solid var(--borde); border-radius: 14px; background: #fff; }
.ag-etapa legend { padding: 0 6px; font-weight: 800; font-size: 1.05rem; color: var(--color-primario); }
.ag-etapa > p { margin: 0 0 10px; font-size: 0.9rem; color: var(--texto-suave); line-height: 1.4; }
.ag-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; }
.ag-jornales { display: contents; }
/* Mano de obra en peones × días (validación con usuarios del 2026-10-14): el total a la vista, en su propia fila. */
.ag-jornales-total { grid-column: 1 / -1; margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--texto-suave); }
.ag-jornales-total strong { color: var(--color-primario); }
.ag-campo { display: grid; gap: 4px; font-weight: 700; font-size: 0.92rem; }
.ag-entrada { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 12px; border: 2px solid var(--borde); border-radius: 12px; background: #fff; }
.ag-entrada:focus-within { border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(45, 59, 42, 0.15); }
.ag-entrada > span { color: var(--texto-suave); font-weight: 700; }
.ag-campo { min-width: 0; }
.ag-entrada { box-sizing: border-box; width: 100%; min-width: 0; }
.asistente-gastos .ag-entrada input { flex: 1 1 0; width: auto; min-width: 0; border: none; outline: none; box-shadow: none; background: transparent; font-size: 1.15rem; padding: 10px 0; }
/* H3: lo ya anotado de la siembra, arriba de los campos del final (no se vuelve a pedir). */
.ag-ya-registrado { display: grid; gap: 8px; margin-bottom: 4px; padding: 14px 16px; border-radius: 14px; background: var(--verde-pastel); color: var(--color-primario); }
.ag-ya-cabeza { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.02rem; }
.ag-ya-cabeza i { font-size: 1.25rem; }
.ag-ya-cabeza strong { margin-left: auto; font-size: 1.15rem; }
.ag-ya-registrado ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ag-ya-registrado li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.95rem; }
.ag-ya-registrado li span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.ag-ya-registrado p { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--color-primario); }

.etapas-gastos { display: grid; gap: 10px; margin: 6px 0 4px; padding: 16px; border-radius: 14px; background: var(--color-superficie); }
.eg-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.eg-cabeza h5 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; color: var(--color-primario); }
.eg-cabeza strong { font-size: 1.1rem; color: var(--color-primario); }
.eg-ayuda { margin: 0; font-size: 0.86rem; color: var(--texto-suave); }
.eg-linea { list-style: none; margin: 0; padding: 0; display: grid; }
.eg-etapa { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 0; }
.eg-etapa:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 42px; bottom: -10px; width: 2px; background: #d7ddd3; }
.eg-marca { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid #c9d1c4; font-weight: 800; font-size: 0.85rem; color: var(--texto-suave); }
.eg-etapa.hecha .eg-marca { background: #3E8E41; border-color: #3E8E41; color: #fff; }
.eg-etapa.siguiente .eg-marca { border-color: var(--color-primario); color: var(--color-primario); box-shadow: 0 0 0 4px rgba(62, 142, 65, 0.15); }
.eg-texto { display: grid; gap: 2px; min-width: 0; }
.eg-texto strong { font-size: 0.95rem; }
.eg-texto small { font-size: 0.8rem; color: var(--texto-suave); line-height: 1.35; }
.eg-monto { display: grid; justify-items: end; font-weight: 800; color: var(--color-primario); white-space: nowrap; font-variant-numeric: tabular-nums; }
.eg-monto small { font-weight: 500; font-size: 0.75rem; color: var(--texto-suave); }
.eg-etapa .btn-anotar-gasto { min-height: 40px; }
@media (max-width: 560px) {
  .eg-etapa { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .eg-etapa .btn-anotar-gasto { grid-column: 2 / -1; justify-self: start; }
}
.form-gasto { display: grid; gap: 12px; padding: 14px; border-radius: 14px; border: 2px solid var(--color-primario); background: #fff; }
.form-gasto h6 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; color: var(--color-primario); }
.fg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.form-gasto .perfil-campo input, .form-gasto .perfil-campo select { min-height: 48px; font-size: 1rem; }
.form-gasto .perfil-campo small { font-weight: 500; color: var(--texto-suave); }
.fg-total { margin: 0; font-weight: 800; color: var(--color-primario); }
.fg-total:empty { display: none; }
.form-gasto .tarjeta-acciones { justify-content: flex-end; margin-top: 0; }
.eg-detalle summary { cursor: pointer; font-weight: 700; color: var(--color-primario); min-height: 36px; display: flex; align-items: center; }
.eg-lista ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.eg-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #fff; }
.eg-lista li small { display: block; font-size: 0.8rem; color: var(--texto-suave); }
.eg-lista-monto { font-weight: 800; font-variant-numeric: tabular-nums; }
.eg-lista .btn-borrar-gasto { min-width: 44px; min-height: 40px; }

.form-gasto .perfil-campo small { display: inline; }

/* Tipo de producción en la tarjeta (crianza, elaboración, frutal): un chip neutro junto al estado. */
.produccion-card-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.pill-tipo-produccion { background: #eef1f6; color: #3c4a63; }

/* ===== ¿Qué me conviene sembrar? =====
   21st.dev "Financial Score Cards" + "Leaderboard Table"; ui-ux-pro-max: riesgo con ícono y texto (nunca solo color),
   razones a la vista y fuentes al pie; skill dataviz: medidor de un tono (verde) sobre su pista clara. */
.que-sembrar { display: grid; gap: 18px; }
.qs-consejo { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--radio); background: linear-gradient(135deg, var(--color-primario), #3f5a3a); color: #fff; box-shadow: var(--sombra); }
.qs-consejo-icono { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.15); font-size: 1.4rem; }
.qs-consejo strong { font-size: 0.82rem; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.qs-consejo p { margin: 4px 0 6px; font-size: 1.05rem; line-height: 1.5; }
.qs-consejo small { opacity: .8; font-size: 0.8rem; }
/* H5: la frase con la respuesta arriba, grande; el porqué y el resumen de la IA debajo. */
.qs-resumen .qs-resumen-frase { margin: 0; font-size: 1.15rem; line-height: 1.45; font-weight: 700; }
.qs-resumen-motivo { margin-top: 10px; }
.qs-resumen-motivo strong, .qs-resumen-ia strong { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.qs-resumen-motivo ul { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 0.98rem; line-height: 1.45; }
.qs-resumen-ia { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.qs-resumen-ia p { font-size: 0.98rem; }
.qs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.qs-card { display: grid; gap: 14px; align-content: start; padding: 18px 20px; border-radius: var(--radio); background: #fff; border: 1px solid var(--borde); box-shadow: var(--sombra); animation: aparecerTarjeta .35s ease both; }
.qs-card.destacada { border: 2px solid #3E8E41; }
.qs-cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.qs-puesto { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--color-superficie); font-family: var(--font-titulo); font-weight: 800; font-size: 1.15rem; color: var(--color-primario); }
.qs-card.destacada .qs-puesto { background: #3E8E41; color: #fff; }
.qs-cabeza h4 { margin: 0; font-size: 1.2rem; color: var(--color-primario); }
.qs-riesgo { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.qs-riesgo.bajo { background: #e5f2e3; color: #1d5a1d; }
.qs-riesgo.medio { background: #fff3cd; color: #6b5212; }
.qs-riesgo.alto { background: #fbe9e4; color: #9b2c12; }
.qs-puntaje { display: grid; gap: 6px; }
.qs-puntaje-texto { display: flex; align-items: baseline; gap: 6px; }
.qs-puntaje-texto strong { font-family: var(--font-titulo); font-size: 1.8rem; color: var(--color-primario); }
.qs-puntaje-texto span { font-size: 0.88rem; font-weight: 700; color: var(--texto-suave); }
.qs-medidor { height: 10px; border-radius: 999px; background: #e3eedf; overflow: hidden; }
.qs-medidor span { display: block; height: 100%; border-radius: 999px; background: #3E8E41; }
.qs-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qs-datos li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.93rem; line-height: 1.4; }
.qs-datos li > i { flex: none; margin-top: 2px; color: var(--color-primario); font-size: 1.05rem; }
.qs-porque summary, .qs-fuentes summary { cursor: pointer; font-weight: 700; color: var(--color-primario); min-height: 36px; display: flex; align-items: center; }
.qs-porque ul, .qs-fuentes ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 0.88rem; color: var(--texto); line-height: 1.45; }
.qs-sin-datos { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 0.88rem; color: var(--texto-suave); }
.qs-fuentes { padding: 14px 16px; border-radius: 12px; background: var(--color-superficie); }
.qs-fuentes p { margin: 8px 0 0; font-size: 0.86rem; color: var(--texto-suave); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .qs-card { animation: none; } }

/* ===== Registrar siembra: la acción principal del Inicio del agricultor =====
   21st.dev "call to action" + "Icon Link Card"; reglas base de ui-ux-pro-max: una sola acción principal, botón de 56px
   con el verbo, y lo que está en curso a un toque. */
.cta-siembra { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 22px; align-items: center; margin-bottom: 22px;
  padding: 24px 26px; border-radius: var(--radio); background: linear-gradient(135deg, #f2f7ee, #e3eedc); border: 2px solid #3E8E41; box-shadow: var(--sombra); }
.cta-siembra-icono { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: #3E8E41; color: #fff; font-size: 2rem; }
.cta-siembra-texto h3 { margin: 0 0 6px; font-size: 1.35rem; color: var(--color-primario); }
.cta-siembra-texto p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--texto); }
.cta-siembra-voz { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.88rem; font-weight: 700; color: var(--acento-cosecha-texto); }
.cta-siembra-acciones { display: grid; gap: 8px; justify-items: stretch; }
.btn-cta-siembra { min-height: 56px; padding: 0 26px; font-size: 1.1rem; font-weight: 800; white-space: nowrap; }
.cta-siembra-ver { min-height: 44px; }
@media (max-width: 860px) {
  .cta-siembra { grid-template-columns: auto minmax(0, 1fr); }
  .cta-siembra-acciones { grid-column: 1 / -1; }
  .btn-cta-siembra { white-space: normal; }
}
.perfil-siembras-acceso { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; max-width: none; }
.perfil-siembras-acceso p { margin: 4px 0 0; font-size: 0.92rem; color: var(--texto-suave); }
.perfil-siembras-icono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--verde-pastel); color: var(--color-primario); font-size: 1.5rem; }
@media (max-width: 640px) { .perfil-siembras-acceso { grid-template-columns: auto minmax(0, 1fr); } .perfil-siembras-acceso .btn { grid-column: 1 / -1; } }