:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.logo{
    width: 100px;
    color: aliceblue;
    position: absolute;
    inset: 8% 0% 0% 0%;
    margin: auto;
    justify-items: center;
}
.contenedor{
  width: 100vw;
  height: 75vh;
  min-height: 75vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: transparent;
  margin: 0;
  padding: 0;
}
.BtAG{
    width: 147px;
    height: 50px;
    background-color: aliceblue;
    border-color: aqua;
    color: #6c00c5;
    border-radius: 10px;
}
.opciones{
    display: block;
}
.busqueda{
    width: 100%;
    height: 7%;
    position: relative;
    top: -6%;
    justify-content: center;
}

/* ── MarketPet Panel ── */
.marketpet-panel {
  position: fixed;
  inset: 0;
  background: linear-gradient(160deg, #45b5ff 0%, #6c00c5 100%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header: dos filas en móvil, una fila en desktop */
.marketpet-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 8px;
  padding: 12px 14px 10px;
  background: rgba(0,0,0,0.28);
  flex-shrink: 0;
}
.marketpet-titulo {
  grid-column: 1;
  grid-row: 1;
  color: #fff;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 1px;
  align-self: center;
}
.marketpet-cerrar {
  grid-column: 2;
  grid-row: 1;
  background: rgba(255,255,255,0.18);
  border: none;
  color: #fff;
  font-size: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.marketpet-controles {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.marketpet-buscar {
  flex: 1;
  min-width: 0;
  padding: 9px 14px;
  border-radius: 22px;
  border: none;
  font-size: 15px;
  outline: none;
  background: rgba(255,255,255,0.93);
  color: #333;
}
.gps-status {
  color: #a0ffdd;
  font-size: 0.72rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Grid: 2 col en móvil, 3 en tablet, 4 en desktop */
.marketpet-grid {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 10px 80px; /* 80px para no quedar bajo el nav */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-content: start;
}
.marketpet-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(255,255,255,0.85);
  padding: 50px 0;
  font-size: 1rem;
}

/* ── Product Card ── */
.mp-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,0.18);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s, box-shadow 0.12s;
  will-change: transform;
}
.mp-card:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.mp-card-img-wrap {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f0f0f0;
}
.mp-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-card-noimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: 12px;
}
.mp-card-body { padding: 9px 10px 11px; }
.mp-card-nombre {
  font-weight: 700;
  font-size: 13px;
  color: #222;
  margin: 0 0 3px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}
.mp-card-precio { font-size: 14px; font-weight: 800; color: #6c00c5; margin: 0 0 2px; }
.mp-card-marca { font-size: 11px; color: #999; margin: 0 0 2px; }
.mp-card-emp { font-size: 11px; color: #00ba8f; margin: 0 0 2px; font-weight: 600; }
.mp-card-dist { font-size: 11px; color: #666; margin: 0; }

/* ── Modal Detalle — bottom-sheet en móvil ── */
.mp-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
  align-items: flex-end; /* ancla abajo en móvil */
  justify-content: center;
}
.mp-modal[style*="flex"] { display: flex !important; }
.mp-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.mp-modal-content {
  position: relative;
  background: #fff;
  border-radius: 22px 22px 0 0;
  width: 100%;
  max-height: 88dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.25);
  z-index: 1;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mp-modal-cerrar {
  position: absolute;
  top: 12px;
  right: 14px;
  background: #f0f0f0;
  border: none;
  color: #444;
  font-size: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.mp-modal-img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 22px 22px 0 0;
  display: block;
}
.mp-modal-body { padding: 16px 18px 24px; }
.mp-modal-body h3 { margin: 0 0 8px; font-size: 1.1rem; color: #222; padding-right: 36px; }
.mp-modal-precio { font-size: 1.25rem; font-weight: 800; color: #6c00c5; margin: 0 0 5px; }
.mp-modal-marca { color: #888; font-size: 13px; margin: 0 0 6px; }
.mp-modal-desc { color: #444; font-size: 14px; margin: 0 0 10px; line-height: 1.55; }
.mp-modal-emp { color: #00ba8f; font-weight: 700; font-size: 13px; margin: 8px 0 4px; }
.mp-modal-dist { color: #555; font-size: 13px; margin: 0; }
.mp-modal-vars { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.mp-var-chip {
  background: #f0e6ff;
  color: #6c00c5;
  border-radius: 12px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
}
  .btnMarketpet {
      width: 160px;
      height: 110px;
      background-color: aliceblue;
      border-color: aqua;
      color: #6c00c5;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 16px;
      transition: background 0.2s;
  }

 .btnMarketpet .icono-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2px;
  }
  

/* ── Tablet / Desktop overrides ── */
@media (min-width: 480px) {
  .marketpet-grid {
    grid-template-columns: repeat(3, 1fr);
    padding: 14px 14px 80px;
    gap: 12px;
  }
  .mp-card-nombre { font-size: 14px; }
}
@media (min-width: 700px) {
  .marketpet-header {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
    align-items: center;
    padding: 14px 20px;
  }
  .marketpet-titulo { grid-column: 1; grid-row: 1; }
  .marketpet-controles { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .marketpet-cerrar { grid-column: 3; grid-row: 1; }
  .marketpet-grid {
    grid-template-columns: repeat(4, 1fr);
    padding: 16px 20px 40px;
    gap: 14px;
  }
  /* Modal centrado en desktop */
  .mp-modal { align-items: center; }
  .mp-modal-content {
    border-radius: 18px;
    max-width: 440px;
    width: 92vw;
    max-height: 86vh;
    padding-bottom: 0;
  }
  .mp-modal-img { max-height: 240px; border-radius: 18px 18px 0 0; }
  .mp-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.22); }
  .mp-card:active { transform: translateY(-3px); }
}