/* Localis — utilidades responsive mobile-first */

/* Tarjetas interactivas — touch + hover (desktop) */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  }
}

.card-hover:active {
  transform: scale(0.98);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.btn-touch,
a.btn-touch,
button.btn-touch {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 44px;
}

.btn-touch:active {
  transform: scale(0.98);
}

/* Tarjetas de producto — franja de foto de altura fija, sin estirar la card.
   !important: Tailwind CDN (preflight / h-full) no debe romper la simetría. */
.localis-img-producto-wrap {
  width: 100%;
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  aspect-ratio: unset !important;
  overflow: hidden;
  background: #fffefb;
  flex-shrink: 0;
  position: relative;
}

.localis-img-producto-wrap img,
.localis-img-producto {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center;
  display: block;
  padding: 0.4rem;
  box-sizing: border-box;
  background: #fffefb;
}

.card-producto-mobile {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.localis-img-producto-thumb-wrap {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fffefb;
  border: 1px solid #e7e5e4;
}

.localis-img-producto-thumb {
  width: 48px;
  height: 48px;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 3px;
  box-sizing: border-box;
  background: #fffefb;
  flex-shrink: 0;
}

.localis-img-producto-thumb-wrap .localis-img-producto-thumb {
  width: 100%;
  height: 100%;
}

.localis-img-producto-thumb-wrap--lg {
  width: 56px;
  height: 56px;
  border-radius: 0.75rem;
}

.localis-img-producto-thumb-wrap--xl {
  width: 64px;
  height: 64px;
}

.localis-img-producto-wrap--modal {
  width: 100%;
  height: 220px;
  min-height: 220px;
  max-height: 220px;
  background: #fffefb;
  border-bottom: 1px solid #f5f5f4;
}

.localis-img-producto-wrap--vacio {
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  background: #fffefb url('/static/img/placeholder-producto.svg') center / contain no-repeat;
}

.localis-img-producto-wrap--vacio .localis-img-producto:not([src]),
.localis-img-producto-wrap--vacio .localis-img-producto[src*="placeholder-producto"] {
  opacity: 0;
}

.localis-img-producto-thumb--vacio {
  display: inline-block;
  background: #fffefb;
}

img.localis-img-producto-thumb--vacio:not([src]) {
  visibility: hidden;
}

/* Panel comercio — catálogo unificado en tarjetas con imagen grande.
   La grilla es responsiva (2 columnas en móvil, 3-4 en escritorio) vía Tailwind;
   ya no existe la tabla compacta de escritorio. */
.panel-comercio-cards .panel-producto-card {
  min-width: 0;
}

/* =========================================================
   Barra del panel de comercio — enlaces (escritorio)
   ========================================================= */
.nav-comercio-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #d6d3d1;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.nav-comercio-link:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

.nav-comercio-link.is-active {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

.nav-comercio-link.is-active-violet {
  background: rgba(139, 92, 246, 0.20);
  color: #c4b5fd;
}

.nav-comercio-link.is-active-amber {
  background: rgba(245, 158, 11, 0.20);
  color: #fcd34d;
}

.nav-comercio-link.is-active-emerald {
  background: rgba(16, 185, 129, 0.20);
  color: #6ee7b7;
}

.nav-comercio-link--salir {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  font-weight: 600;
}

.nav-comercio-link--salir:hover {
  background: rgba(239, 68, 68, 0.22);
  color: #fca5a5;
}

/* =========================================================
   Barra del panel de comercio — móvil (iconos 44x44 + drawer)
   ========================================================= */
.nav-comercio-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 9999px;
  color: #d6d3d1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.nav-comercio-icon:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.nav-comercio-icon:active {
  transform: scale(0.96);
}

.nav-comercio-icon--salir {
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.22);
}

.nav-comercio-icon--salir:hover {
  background: rgba(239, 68, 68, 0.22);
  color: #fca5a5;
}

.nav-comercio-drawer {
  display: none;
}

.nav-comercio-drawer.abierto {
  display: block;
}

.nav-comercio-drawer__backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(28, 25, 23, 0.55);
  -webkit-tap-highlight-color: transparent;
}

.nav-comercio-drawer__panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 401;
  display: flex;
  flex-direction: column;
  width: min(86vw, 340px);
  height: 100%;
  background: #fff;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.25);
  overflow-y: auto;
  animation: navComercioEntrar 0.18s ease-out;
}

@keyframes navComercioEntrar {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-comercio-drawer__panel {
    animation: none;
  }
}

.nav-comercio-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
  background: #1c1917;
}

.nav-comercio-drawer__head .nav-comercio-icon {
  color: #e7e5e4;
}

.nav-comercio-drawer__user {
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

.nav-comercio-drawer__mail {
  color: #a8a29e;
  font-size: 0.72rem;
}

.nav-comercio-drawer__links {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}

.nav-comercio-drawer__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.6rem 0.75rem;
  border-radius: 0.75rem;
  color: #44403c;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-comercio-drawer__link:hover {
  background: #f5f5f4;
  color: #1c1917;
}

.nav-comercio-drawer__link.is-active {
  background: #fffbeb;
  color: #b45309;
}

.nav-comercio-drawer__foot {
  margin-top: auto;
  padding: 1rem;
  border-top: 1px solid #e7e5e4;
}

.nav-comercio-drawer__salir {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 48px;
  border-radius: 9999px;
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.nav-comercio-drawer__salir:active {
  transform: scale(0.98);
}

@media (max-width: 768px) {
  .hero-header {
    min-height: 52vh !important;
    height: auto !important;
    padding-bottom: 2rem;
  }

  .hero-header h2 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  .hero-header p {
    font-size: 0.95rem !important;
  }

  .hero-header nav {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .hero-header nav a.font-display {
    font-size: 1.35rem !important;
  }

  .banner-destacado {
    min-height: 140px;
    padding: 1.25rem !important;
  }

  .banner-destacado h4 {
    font-size: 1.25rem !important;
  }

  /* Barra panel comercio — móvil: una sola fila, sin wrap ni desborde */
  .nav-comercio-top {
    flex-wrap: nowrap;
  }

  .tabla-responsive {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tabla-responsive table {
    min-width: 640px;
  }

  /* Mercado Libre style: 2 productos por fila en móvil */
  .grid-productos-mobile {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }

  .card-producto-mobile .h-40,
  .card-producto-mobile .h-36 {
    height: auto !important;
  }

  .modal-push .panel {
    max-height: 92vh;
    margin: 0.5rem;
  }

  .flash-mobile {
    left: 0.75rem !important;
    right: 0.75rem !important;
    top: 0.75rem !important;
  }

  .flash-mobile > div {
    width: 100%;
  }

  .admin-header-mobile {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.75rem;
    padding: 1rem !important;
  }

  .admin-nav-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .admin-nav-mobile a {
    margin-left: 0 !important;
    font-size: 0.85rem;
  }

  .busqueda-admin {
    flex-direction: column;
  }

  .panel-comercio-meta {
    text-align: center;
  }

  .panel-comercio-csv-form input[type="file"] {
    min-width: 0;
  }

  .panel-comercio .panel-comercio-busqueda {
    font-size: 16px;
  }

  .panel-comercio-form input,
  .panel-comercio-form textarea {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .grid-productos-mobile {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  .card-producto-mobile .p-3 {
    padding: 0.5rem !important;
  }

  .card-producto-mobile h4 {
    font-size: 0.75rem !important;
  }

  .hero-header h2 {
    font-size: 1.5rem !important;
  }

  .comercio-plan-buttons {
    flex-direction: column;
  }

  .comercio-plan-buttons button {
    width: 100%;
  }
}

/* Importador CSV — disclaimer de asociación automática de fotos */
.aviso-csv-imagenes {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  background: #fffbeb;
  border: 1px solid #f5d07a;
  color: #44403c;
}

.aviso-csv-imagenes-icono {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #b45309;
}

.aviso-csv-imagenes p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #57534e;
}

.aviso-csv-imagenes strong {
  color: #78350f;
  font-weight: 700;
}

/* Importador CSV — advertencia de precio de venta (más urgente que la de fotos) */
.aviso-csv-precios {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  background: #fef2f2;
  border: 1px solid #f3b4b4;
  color: #44403c;
}

.aviso-csv-precios-icono {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #b91c1c;
}

.aviso-csv-precios p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #57534e;
}

.aviso-csv-precios strong {
  color: #991b1b;
  font-weight: 700;
}

/* Guía de ayuda / Cómo funciona Localis */
.guia-ayuda-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: rgb(245, 158, 11);
  color: rgb(26, 26, 26);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .guia-ayuda-nav {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .guia-ayuda-indice {
    flex-direction: column;
  }

  .guia-ayuda-indice a {
    width: 100%;
    justify-content: center;
  }

  .guia-ayuda-seccion {
    padding: 1.25rem !important;
  }
}

/* =========================================================
   Estados de carga (loading) en botones que llaman al backend
   ========================================================= */
.localis-btn-cargando {
  position: relative;
  cursor: progress !important;
  pointer-events: none;
  opacity: 0.85;
}

.localis-btn-cargando > * {
  visibility: hidden;
}

.localis-btn-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 1.1rem;
  margin: -0.55rem 0 0 -0.55rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 9999px;
  visibility: visible;
  animation: localis-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .localis-btn-spinner {
    animation-duration: 1.4s;
  }
}

/* =========================================================
   Botón de instalación PWA — llamativo sutil (pulso + degradado)
   ========================================================= */
.pwa-instalar-btn {
  background-image: linear-gradient(120deg, #fff7e6 0%, #ffffff 45%, #ffe9c2 100%);
  border-color: #f5c877;
  animation: localis-pulso 2.4s ease-in-out infinite;
}

.pwa-instalar-btn:hover {
  border-color: #f59e0b;
  color: #b45309;
}

@keyframes localis-pulso {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.38);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
  }
}

/* =========================================================
   Escritorio / laptop (>=768px): centrado y ancho cómodo
   ========================================================= */
@media (min-width: 768px) {
  /* Formularios del comercio: lectura cómoda y centrada */
  .panel-comercio-form {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Catálogo: más aire entre tarjetas en pantallas grandes */
  .grid-productos-mobile {
    gap: 1.5rem;
  }

  /* Avisos flotantes: legibles sin ocupar toda la pantalla */
  .flash-mobile {
    max-width: 480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-instalar-btn {
    animation: none;
  }
}


/* Badge de producto/tienda destacado (Boost) - ligero, sin scripts */
.localis-badge-destacado {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #ede9fe, #f5f3ff);
  color: #6d28d9;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.25);
}


/* Botón compacto de compartir producto (icono de acción rápida, no invasivo) */
.localis-btn-share-producto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid #e7e5e4;
  border-radius: 9999px;
  background: #ffffff;
  color: #57534e;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.localis-btn-share-producto:hover {
  background: #f5f5f4;
  color: #1c1917;
  border-color: #d6d3d1;
}
.localis-btn-share-producto:active { transform: scale(0.94); }
.localis-btn-share-producto svg {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  stroke-width: 2.1;
}

/* Ficha de producto: ancla para el botón de compartir flotante */
.localis-card-producto {
  position: relative;
}

/* El botón de compartir flota en la esquina superior derecha de la tarjeta
   (sobre la imagen) en cualquier tamaño: nunca tapa el precio ni los textos. */
.localis-card-share {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 20;
}