/* PideQR — estilos del menú (clon del diseño Next.js) */

.pideqr-app {
  --pideqr-brand: #e11d48;
  --pideqr-bg: #f7f6f3;
  --pideqr-fg: #18181b;
  --pideqr-card-bg: #ffffff;
  --pideqr-header-end: #18181b;
  --pideqr-accent-bg: #fff1f2;
  --pideqr-btn-radius: 999px;
  --pideqr-white: #ffffff;
  --pideqr-zinc-50: #fafafa;
  --pideqr-zinc-100: #f4f4f5;
  --pideqr-zinc-200: #e4e4e7;
  --pideqr-zinc-400: #a1a1aa;
  --pideqr-zinc-500: #71717a;
  --pideqr-zinc-600: #52525b;
  --pideqr-zinc-700: #3f3f46;
  --pideqr-zinc-900: #18181b;
  --pideqr-zinc-950: #09090b;
  --pideqr-rose-50: #fff1f2;
  --pideqr-rose-100: #ffe4e6;
  --pideqr-rose-500: #f43f5e;
  --pideqr-rose-600: #e11d48;
  --pideqr-rose-700: #be123c;
  --pideqr-amber-50: #fffbeb;
  --pideqr-amber-100: #fef3c7;
  --pideqr-amber-300: #fcd34d;
  --pideqr-amber-800: #92400e;
  --pideqr-amber-900: #78350f;
  --pideqr-emerald-50: #ecfdf5;
  --pideqr-emerald-500: #10b981;
  --pideqr-emerald-700: #047857;
  --pideqr-green-50: #f0fdf4;
  --pideqr-green-700: #15803d;
  --pideqr-radius-xl: 1rem;
  --pideqr-radius-2xl: 1rem;
  --pideqr-radius-3xl: 1.5rem;
  --pideqr-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --pideqr-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1);
  --pideqr-shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1);
  --pideqr-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);
  --pideqr-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-family: var(--pideqr-font);
  color: var(--pideqr-fg);
  background: var(--pideqr-bg);
  min-height: 100vh;
  position: relative;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#pideqr-root { min-height: inherit; }

.pideqr-status {
  position: sticky;
  top: 0;
  z-index: 100000;
  margin: 0;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  line-height: 1.35;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
.pideqr-status.error { background: #dc2626; color: #fff; }
.pideqr-status.success { background: #059669; color: #fff; }
.pideqr-status.info { background: #2563eb; color: #fff; }

.pideqr-app *, .pideqr-app *::before, .pideqr-app *::after { box-sizing: border-box; }

.pideqr-app button, .pideqr-app input, .pideqr-app textarea, .pideqr-app select {
  font: inherit;
}

.pideqr-no-scrollbar::-webkit-scrollbar { display: none; }
.pideqr-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* En escritorio (puntero fino) mostramos una barra horizontal fina para
   poder desplazar el carrusel y los filtros; en móvil se mantiene oculta
   (se desliza con el dedo). Esto resuelve la 4ª tarjeta "cortada". */
@media (hover: hover) and (pointer: fine) {
  .pideqr-app .pideqr-carousel,
  .pideqr-app .pideqr-chips {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--pideqr-brand) 45%, var(--pideqr-zinc-300)) transparent;
  }
  .pideqr-app .pideqr-chips { padding-bottom: .6rem; }
  .pideqr-app .pideqr-carousel::-webkit-scrollbar,
  .pideqr-app .pideqr-chips::-webkit-scrollbar {
    display: block;
    height: 8px;
  }
  .pideqr-app .pideqr-carousel::-webkit-scrollbar-track,
  .pideqr-app .pideqr-chips::-webkit-scrollbar-track {
    background: transparent;
  }
  .pideqr-app .pideqr-carousel::-webkit-scrollbar-thumb,
  .pideqr-app .pideqr-chips::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--pideqr-brand) 40%, var(--pideqr-zinc-300));
    border-radius: 999px;
  }
  .pideqr-app .pideqr-carousel::-webkit-scrollbar-thumb:hover,
  .pideqr-app .pideqr-chips::-webkit-scrollbar-thumb:hover {
    background: var(--pideqr-brand);
  }
}

@keyframes pideqr-fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pideqr-sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.pideqr-animate-fade { animation: pideqr-fade-in-up .25s ease-out both; }
.pideqr-animate-sheet { animation: pideqr-sheet-up .28s cubic-bezier(.22,1,.36,1) both; }

.pideqr-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 50vh; color: var(--pideqr-zinc-500);
}
.pideqr-spinner {
  width: 40px; height: 40px; border: 3px solid var(--pideqr-zinc-200);
  border-top-color: var(--pideqr-brand); border-radius: 50%;
  animation: pideqr-spin .8s linear infinite; margin-bottom: 12px;
}
@keyframes pideqr-spin { to { transform: rotate(360deg); } }
.pideqr-skeleton {
  background: linear-gradient(90deg, var(--pideqr-zinc-200) 25%, var(--pideqr-zinc-100) 50%, var(--pideqr-zinc-200) 75%);
  background-size: 200% 100%; animation: pideqr-shimmer 1.2s infinite; border-radius: 12px;
}
@keyframes pideqr-shimmer { to { background-position: -200% 0; } }

.pideqr-wrap { min-height: 100%; padding-bottom: 7rem; }

/* Header */
.pideqr-header {
  position: relative; overflow: hidden;
  padding: 1.75rem 1rem 2.5rem; color: #fff;
}
@media (min-width: 640px) {
  .pideqr-header { padding: 2.5rem 1.5rem 3.5rem; }
}
.pideqr-header-glow {
  position: absolute; right: -6rem; top: -6rem;
  width: 18rem; height: 18rem; border-radius: 50%;
  background: rgba(255,255,255,.1); filter: blur(48px);
}
.pideqr-header-inner { position: relative; max-width: 72rem; margin: 0 auto; }
.pideqr-header-row { display: flex; align-items: center; gap: 1rem; }
@media (min-width: 640px) { .pideqr-header-row { gap: 1.25rem; } }
.pideqr-logo {
  flex-shrink: 0; width: 4rem; height: 4rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--pideqr-radius-2xl); background: rgba(255,255,255,.15);
  ring: 1px solid rgba(255,255,255,.3); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
@media (min-width: 640px) {
  .pideqr-logo { width: 5rem; height: 5rem; border-radius: var(--pideqr-radius-3xl); }
}
.pideqr-logo img { width: 100%; height: 100%; object-fit: cover; }
.pideqr-logo svg { width: 2rem; height: 2rem; }
.pideqr-header-text { min-width: 0; }
.pideqr-status-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  margin-bottom: .25rem; padding: .25rem .625rem;
  border-radius: 999px; background: rgba(255,255,255,.15);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.pideqr-header h1 {
  margin: 0; font-size: 1.5rem; font-weight: 900; letter-spacing: -.025em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 640px) { .pideqr-header h1 { font-size: 2.25rem; } }
.pideqr-tagline { margin: .25rem 0 0; font-size: .875rem; color: rgba(255,255,255,.8); }
@media (min-width: 640px) { .pideqr-tagline { font-size: 1rem; } }
.pideqr-address { margin: .5rem 0 0; display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: rgba(255,255,255,.65); }
.pideqr-table-badge {
  margin-top: 1.25rem; display: inline-flex; align-items: center; gap: .5rem;
  padding: .625rem 1rem; border-radius: var(--pideqr-radius-2xl);
  background: rgba(255,255,255,.15); font-size: .875rem; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); backdrop-filter: blur(8px);
}

/* Main */
.pideqr-main { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .pideqr-main { padding: 0 1.5rem; } }

.pideqr-alerts { position: relative; z-index: 10; margin-top: 1.25rem; display: grid; gap: .75rem; }
@media (min-width: 640px) { .pideqr-alerts { grid-template-columns: 1fr 1fr; } }
.pideqr-alert {
  padding: .75rem 1rem; border-radius: var(--pideqr-radius-2xl);
  font-size: .875rem; font-weight: 600; box-shadow: var(--pideqr-shadow-sm);
}
.pideqr-alert-closed { background: var(--pideqr-rose-50); color: var(--pideqr-rose-700); box-shadow: inset 0 0 0 1px var(--pideqr-rose-100); }
.pideqr-alert-promo { background: var(--pideqr-amber-50); color: var(--pideqr-amber-900); box-shadow: inset 0 0 0 1px var(--pideqr-amber-100); display: flex; align-items: center; gap: .5rem; }

/* Featured carousel */
.pideqr-featured { padding-top: 1.75rem; }
.pideqr-section-label { font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .2em; color: var(--pideqr-brand); margin: 0; }
.pideqr-section-title { font-size: 1.5rem; font-weight: 900; color: var(--pideqr-zinc-950); margin: 0; }
.pideqr-carousel {
  display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: .75rem -1rem 0; padding: 0 1rem .75rem;
}
@media (min-width: 640px) { .pideqr-carousel { margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; } }
.pideqr-featured-card {
  position: relative; flex-shrink: 0; width: 82vw; max-width: 20rem; height: 13rem;
  border: none; border-radius: var(--pideqr-radius-3xl); overflow: hidden;
  background: var(--pideqr-zinc-900); text-align: left; cursor: pointer;
  scroll-snap-align: start; box-shadow: var(--pideqr-shadow-xl);
}
@media (min-width: 640px) { .pideqr-featured-card { width: 20rem; } }
.pideqr-featured-card img, .pideqr-featured-card .pideqr-food-placeholder { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.pideqr-featured-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.2), transparent);
}
.pideqr-featured-content {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 1.25rem; color: #fff;
}
.pideqr-featured-tag { display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--pideqr-amber-300); }
.pideqr-featured-name { display: block; margin-top: .25rem; font-size: 1.25rem; font-weight: 900; }
.pideqr-featured-price { display: block; margin-top: .25rem; font-weight: 700; }

/* Sticky filters */
.pideqr-sticky {
  position: sticky; top: 0; z-index: 30;
  margin: 1rem -1rem 0; padding: .75rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
  background: color-mix(in srgb, var(--pideqr-bg) 95%, transparent); backdrop-filter: blur(16px);
}
@media (min-width: 640px) { .pideqr-sticky { margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; } }
.pideqr-search {
  max-width: 48rem; margin: 0 auto;
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem; border-radius: var(--pideqr-radius-2xl);
  border: 1px solid var(--pideqr-zinc-200); background: #fff; box-shadow: var(--pideqr-shadow-sm);
}
.pideqr-search svg { flex-shrink: 0; color: var(--pideqr-zinc-400); width: 1rem; height: 1rem; }
.pideqr-search input { flex: 1; border: none; background: transparent; outline: none; font-size: .875rem; }
.pideqr-chips {
  max-width: 64rem; margin: .75rem auto 0;
  display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem;
}
.pideqr-chip {
  flex-shrink: 0; border: 1px solid var(--pideqr-zinc-200); background: #fff;
  border-radius: 999px; padding: .375rem .75rem; font-size: .75rem; font-weight: 700;
  color: var(--pideqr-zinc-600); cursor: pointer; transition: all .15s;
}
.pideqr-chip.active-fav { border-color: var(--pideqr-rose-500); background: var(--pideqr-rose-50); color: var(--pideqr-rose-600); }
.pideqr-chip.active-tag { border-color: var(--pideqr-emerald-500); background: var(--pideqr-emerald-50); color: var(--pideqr-emerald-700); }
.pideqr-chip.active-allergen { border-color: #f59e0b; background: var(--pideqr-amber-50); color: var(--pideqr-amber-800); }
.pideqr-chip.active-cat { color: #fff; border-color: transparent; }
.pideqr-chip.inactive-cat { background: rgba(228,228,231,.7); color: var(--pideqr-zinc-600); border-color: transparent; }

/* Product grid */
.pideqr-products-section { padding-top: 2.5rem; }
.pideqr-products-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.pideqr-count { flex-shrink: 0; font-size: .75rem; font-weight: 500; color: var(--pideqr-zinc-400); }
.pideqr-grid {
  display: grid; gap: .75rem;
}
@media (min-width: 768px) { .pideqr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .pideqr-grid { grid-template-columns: repeat(3, 1fr); } }

.pideqr-card-product {
  position: relative; display: flex; overflow: hidden;
  border-radius: var(--pideqr-radius-3xl); border: 1px solid rgba(0,0,0,.05);
  background: var(--pideqr-card-bg); box-shadow: var(--pideqr-shadow-sm);
  transition: transform .15s, box-shadow .15s; min-height: 8rem;
}
@media (min-width: 768px) {
  .pideqr-card-product { flex-direction: column; min-height: auto; }
}
.pideqr-card-product:hover { transform: translateY(-2px); box-shadow: var(--pideqr-shadow-xl); }
.pideqr-card-product.sold-out { opacity: .6; }
.pideqr-card-btn {
  flex: 1; display: flex; min-width: 0; text-align: left; border: none; background: none; cursor: pointer; padding: 0;
}
@media (max-width: 767px) { .pideqr-card-btn { flex-direction: row; } }
@media (min-width: 768px) { .pideqr-card-btn { flex-direction: column; } }
.pideqr-card-img {
  position: relative; flex-shrink: 0; width: 8rem; height: 8rem; overflow: hidden; background: var(--pideqr-zinc-100);
}
@media (min-width: 768px) { .pideqr-card-img { width: 100%; height: 11rem; } }
.pideqr-card-img img, .pideqr-food-placeholder { width: 100%; height: 100%; object-fit: cover; }
.pideqr-food-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(to bottom right, #fffbeb, #ffe4e6);
  font-size: 2.5rem;
}
.pideqr-badge-rec { position: absolute; left: .75rem; top: .75rem; padding: .25rem .625rem; border-radius: 999px; background: #fbbf24; font-size: 10px; font-weight: 900; text-transform: uppercase; color: #451a03; }
.pideqr-sold-out-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); color: #fff; font-size: .875rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em;
}
.pideqr-card-body { flex: 1; display: flex; flex-direction: column; padding: .875rem 1rem; min-width: 0; }
.pideqr-card-body h3 { margin: 0; font-weight: 700; line-height: 1.25; color: var(--pideqr-zinc-900); }
@media (min-width: 768px) { .pideqr-card-body h3 { font-size: 1.125rem; } }
.pideqr-card-desc { margin: .25rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--pideqr-zinc-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 768px) { .pideqr-card-desc { font-size: .875rem; } }
.pideqr-dietary { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .5rem; }
.pideqr-dietary span { font-size: 10px; font-weight: 600; padding: .125rem .375rem; border-radius: 999px; background: var(--pideqr-zinc-100); color: var(--pideqr-zinc-600); }
.pideqr-card-footer { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; padding-top: .5rem; }
.pideqr-price-main { display: block; font-size: 1rem; font-weight: 900; color: var(--pideqr-zinc-950); }
.pideqr-price-bs { display: block; font-size: 11px; color: var(--pideqr-zinc-400); }
.pideqr-add-btn {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; border: none; color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--pideqr-shadow-md);
  background: var(--pideqr-brand); cursor: pointer;
}
.pideqr-configurable { margin-top: .5rem; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--pideqr-zinc-400); }
.pideqr-fav-btn {
  position: absolute; right: .75rem; top: .75rem; width: 2.25rem; height: 2.25rem;
  border: none; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--pideqr-zinc-500);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--pideqr-shadow-md); backdrop-filter: blur(4px); z-index: 2;
}
.pideqr-fav-btn.active { color: var(--pideqr-rose-500); }

.pideqr-empty { padding: 5rem 0; text-align: center; color: var(--pideqr-zinc-500); }
.pideqr-empty svg { width: 2.5rem; height: 2.5rem; color: var(--pideqr-zinc-300); margin: 0 auto; }
.pideqr-empty p { margin: .75rem 0 0; font-weight: 700; }
.pideqr-clear-filters { margin-top: .75rem; border: none; background: none; font-size: .875rem; font-weight: 700; color: var(--pideqr-brand); cursor: pointer; }

.pideqr-footer-note { margin: 3.5rem 0 0; text-align: center; font-size: .75rem; color: var(--pideqr-zinc-400); }

/* Cart FAB */
.pideqr-fab-wrap {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0,0,0,.1), transparent);
  pointer-events: none;
}
.pideqr-fab-wrap .pideqr-fab { pointer-events: auto; }
.pideqr-app.pideqr-cart-open .pideqr-fab-wrap,
.pideqr-app.pideqr-cart-open .pideqr-root > .pideqr-fab-wrap { display: none !important; }
.pideqr-fab-closed { opacity: .92; }
/* Resaltado de campo con error en el checkout (feedback claro en móvil) */
.pideqr-field-error { animation: pideqr-shake .4s ease; }
.pideqr-field-error .pideqr-input,
.pideqr-field-error.pideqr-receipt-upload,
.pideqr-field-error .pideqr-textarea {
  border-color: var(--pideqr-rose-600) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pideqr-rose-600) 22%, transparent);
}
@keyframes pideqr-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.pideqr-fab {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 32rem; margin: 0 auto; padding: 1rem 1.25rem;
  border: none; border-radius: var(--pideqr-btn-radius, var(--pideqr-radius-2xl)); color: #fff; font-weight: 700;
  cursor: pointer; box-shadow: var(--pideqr-shadow-2xl); background: var(--pideqr-brand);
  transition: transform .1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.pideqr-fab:disabled { opacity: .7; cursor: wait; }
.pideqr-fab:active { transform: scale(.99); }
.pideqr-fab-left { display: flex; align-items: center; gap: .5rem; }
.pideqr-fab-count {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: .875rem;
}
.pideqr-fab-right { display: flex; align-items: center; gap: .5rem; }

/* Modal overlay */
.pideqr-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 640px) { .pideqr-overlay { align-items: center; } }
.pideqr-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
}
.pideqr-sheet {
  position: relative; z-index: 10; width: 100%; max-width: 36rem;
  max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: var(--pideqr-radius-3xl) var(--pideqr-radius-3xl) 0 0;
  box-shadow: var(--pideqr-shadow-2xl);
}
@media (min-width: 640px) { .pideqr-sheet { border-radius: var(--pideqr-radius-3xl); max-height: 88vh; } }
.pideqr-sheet-md { max-width: 28rem; }
.pideqr-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem; border-bottom: 1px solid var(--pideqr-zinc-100);
}
.pideqr-sheet-header h2 { margin: 0; font-size: 1.125rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.pideqr-close {
  width: 2.25rem; height: 2.25rem; border: none; border-radius: 50%;
  background: transparent; color: var(--pideqr-zinc-500); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pideqr-close:hover { background: var(--pideqr-zinc-100); }
.pideqr-close-on-img { position: absolute; right: .75rem; top: .75rem; background: rgba(255,255,255,.9); color: var(--pideqr-zinc-700); box-shadow: var(--pideqr-shadow-sm); }

/* Tamaño de los iconos SVG en botones que no lo tenían (la X de cerrar,
   el +, el corazón, etc.). Sin esto el navegador los dibuja a tamaño por
   defecto y la X quedaba fuera del círculo, invisible. */
.pideqr-app .pideqr-close svg,
.pideqr-app .pideqr-add-btn svg,
.pideqr-app .pideqr-fav-btn svg,
.pideqr-app .pideqr-back-btn svg,
.pideqr-app .pideqr-trash svg,
.pideqr-app .pideqr-fab svg,
.pideqr-app .pideqr-btn-primary svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.pideqr-app .pideqr-qty button svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.pideqr-app .pideqr-chip svg,
.pideqr-app .pideqr-sheet-header svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.pideqr-modal-img { position: relative; flex-shrink: 0; height: 14rem; overflow: hidden; background: var(--pideqr-zinc-100); }
@media (min-width: 640px) { .pideqr-modal-img { height: 18rem; } }
/* La imagen del modal debe recortarse a su contenedor (igual que las tarjetas);
   sin esto, el tema la renderiza a tamaño natural y tapa el nombre/descripción. */
.pideqr-modal-img img,
.pideqr-modal-img .pideqr-food-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pideqr-modal-body { flex: 1; overflow-y: auto; padding: 1.25rem; }
.pideqr-modal-body h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.pideqr-modal-desc { margin: .25rem 0 0; font-size: .875rem; color: var(--pideqr-zinc-500); }
.pideqr-allergen-box {
  margin-top: .75rem; padding: .75rem; border-radius: var(--pideqr-radius-xl);
  background: var(--pideqr-amber-50); font-size: .75rem; font-weight: 500; color: var(--pideqr-amber-800);
  box-shadow: inset 0 0 0 1px var(--pideqr-amber-100);
}
.pideqr-option-group { margin-top: 1.25rem; }
.pideqr-option-group > p { margin: 0 0 .5rem; font-size: .875rem; font-weight: 600; color: var(--pideqr-zinc-700); }
.pideqr-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem; margin-bottom: .5rem; border-radius: var(--pideqr-radius-xl);
  border: 1px solid var(--pideqr-zinc-200); font-size: .875rem; cursor: pointer;
}
.pideqr-option.selected { border-color: var(--pideqr-brand); background: var(--pideqr-accent-bg); }
.pideqr-option input { accent-color: var(--pideqr-brand); margin-right: .5rem; }
.pideqr-textarea {
  width: 100%; resize: none; border-radius: var(--pideqr-radius-xl);
  border: 1px solid var(--pideqr-zinc-200); padding: .75rem; font-size: .875rem; outline: none;
}
.pideqr-textarea:focus { border-color: var(--pideqr-brand); }
.pideqr-sheet-footer {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem; border-top: 1px solid var(--pideqr-zinc-100);
}
.pideqr-qty {
  display: flex; align-items: center; gap: .75rem;
  border: 1px solid var(--pideqr-zinc-200); border-radius: 999px; padding: .25rem .5rem;
}
.pideqr-qty button {
  width: 2rem; height: 2rem; border: none; border-radius: 50%; background: transparent;
  color: var(--pideqr-zinc-600); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pideqr-qty button:hover { background: var(--pideqr-zinc-100); }
.pideqr-qty span { width: 1.25rem; text-align: center; font-weight: 600; }
.pideqr-btn-primary {
  flex: 1; border: none; border-radius: var(--pideqr-btn-radius, 999px); padding: .75rem 1rem;
  font-weight: 600; color: #fff; cursor: pointer; background: var(--pideqr-brand);
  box-shadow: var(--pideqr-shadow-md); transition: transform .1s;
}
.pideqr-btn-primary:active { transform: scale(.99); }
.pideqr-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.pideqr-btn-block { width: 100%; max-width: 28rem; margin: 0 auto; display: block; }

/* Cart items */
.pideqr-cart-list { flex: 1; overflow-y: auto; padding: 1rem; }
.pideqr-cart-item {
  display: flex; gap: .75rem; padding: .75rem; margin-bottom: .75rem;
  border-radius: var(--pideqr-radius-2xl); border: 1px solid var(--pideqr-zinc-100);
}
.pideqr-cart-item-img { width: 4rem; height: 4rem; flex-shrink: 0; border-radius: var(--pideqr-radius-xl); overflow: hidden; background: var(--pideqr-zinc-100); }
.pideqr-cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.pideqr-cart-item-img .pideqr-food-placeholder { font-size: 1.5rem; }
.pideqr-cart-item-info { flex: 1; min-width: 0; }
.pideqr-cart-item-info p { margin: 0; }
.pideqr-cart-item-name { font-weight: 600; color: var(--pideqr-zinc-900); }
.pideqr-cart-item-meta { font-size: .75rem; color: var(--pideqr-zinc-500); }
.pideqr-cart-item-note { font-size: .75rem; font-style: italic; color: var(--pideqr-zinc-400); }
.pideqr-cart-item-actions { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.pideqr-trash { border: none; background: none; color: var(--pideqr-zinc-300); cursor: pointer; padding: 0; }
.pideqr-trash:hover { color: var(--pideqr-rose-500); }
.pideqr-cart-subtotal {
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--pideqr-zinc-100);
  background: #fff;
}
.pideqr-cart-subtotal-row { display: flex; justify-content: space-between; margin-bottom: .75rem; }
.pideqr-cart-subtotal-row span:last-child { text-align: right; }
.pideqr-cart-empty { padding: 3rem; text-align: center; color: var(--pideqr-zinc-400); }

/* Checkout */
.pideqr-checkout { max-width: 28rem; margin: 0 auto; padding: 1rem 1rem 7rem; min-height: 100vh; }
.pideqr-checkout-header { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; }
.pideqr-back-btn {
  width: 2.25rem; height: 2.25rem; border: none; border-radius: 50%;
  background: #fff; box-shadow: var(--pideqr-shadow-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pideqr-checkout h1 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.pideqr-section { margin-top: .75rem; }
.pideqr-section > p { margin: 0 0 .5rem; font-size: .875rem; font-weight: 600; color: var(--pideqr-zinc-700); }
.pideqr-type-grid { display: grid; gap: .5rem; grid-template-columns: repeat(3, 1fr); }
.pideqr-type-grid.fixed { grid-template-columns: 1fr; }
.pideqr-type-btn {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .75rem; border-radius: var(--pideqr-radius-xl); border: 1px solid var(--pideqr-zinc-200);
  background: #fff; font-size: .75rem; font-weight: 500; color: var(--pideqr-zinc-600); cursor: pointer;
}
.pideqr-type-btn.active { border-color: transparent; color: #fff; background: var(--pideqr-brand); }
.pideqr-type-btn svg { width: 1.25rem; height: 1.25rem; }
.pideqr-field { margin-bottom: .75rem; }
.pideqr-field label { display: block; margin-bottom: .25rem; font-size: .875rem; font-weight: 500; color: var(--pideqr-zinc-600); }
.pideqr-input {
  width: 100%; border-radius: var(--pideqr-radius-xl); border: 1px solid var(--pideqr-zinc-200);
  background: #fff; padding: .75rem; font-size: .875rem; outline: none;
}
.pideqr-input:focus { border-color: var(--pideqr-brand); }
.pideqr-input.readonly { background: var(--pideqr-zinc-100); font-weight: 700; cursor: not-allowed; }
.pideqr-payment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pideqr-payment-btn {
  padding: .625rem; border-radius: var(--pideqr-radius-xl); border: 1px solid var(--pideqr-zinc-200);
  background: #fff; font-size: .875rem; font-weight: 500; cursor: pointer; display:flex; flex-direction:column; gap:.15rem; text-align:left;
}
.pideqr-payment-btn small { color:var(--pideqr-zinc-500); font-size:.7rem; }
.pideqr-payment-btn.active { border-color: var(--pideqr-brand); background: var(--pideqr-accent-bg); }
.pideqr-payment-details { margin-top: .5rem; padding:.85rem; border-radius:var(--pideqr-radius-xl); background:var(--pideqr-zinc-100); font-size:.75rem; color:var(--pideqr-zinc-600); display:grid; gap:.35rem; white-space:pre-line; }
.pideqr-payment-details strong { color:var(--pideqr-zinc-900); font-size:.8rem; }
.pideqr-receipt-upload { margin-top:.75rem; padding:.9rem; border:1px dashed var(--pideqr-brand); border-radius:var(--pideqr-radius-xl); background:var(--pideqr-accent-bg); display:grid; gap:.7rem; }
.pideqr-receipt-upload > div:first-child { display:grid; gap:.2rem; }
.pideqr-receipt-upload span { font-size:.72rem; color:var(--pideqr-zinc-600); }
.pideqr-receipt-picker { display:flex; justify-content:center; padding:.75rem; border-radius:var(--pideqr-btn-radius); background:var(--pideqr-brand); color:#fff; cursor:pointer; font-weight:700; }
.pideqr-receipt-picker input { position:absolute; opacity:0; pointer-events:none; }
.pideqr-receipt-picker span { color:#fff; }
.pideqr-receipt-selected { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.65rem; border-radius:var(--pideqr-radius-xl); background:#fff; }
.pideqr-receipt-selected button { border:0; background:none; color:var(--pideqr-brand); font-weight:700; cursor:pointer; }
.pideqr-tip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.pideqr-summary {
  margin-top: 1.25rem; padding: 1rem; border-radius: var(--pideqr-radius-2xl);
  border: 1px solid var(--pideqr-zinc-100); background: #fff;
}
.pideqr-summary ul { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.pideqr-summary li { display: flex; justify-content: space-between; color: var(--pideqr-zinc-600); margin-bottom: .25rem; }
.pideqr-summary-totals { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--pideqr-zinc-100); font-size: .875rem; }
.pideqr-summary-totals div { display: flex; justify-content: space-between; color: var(--pideqr-zinc-500); margin-bottom: .25rem; }
.pideqr-summary-totals .total { font-size: 1rem; font-weight: 700; color: var(--pideqr-zinc-900); padding-top: .25rem; }
.pideqr-summary-bs { text-align: right; font-size: .75rem; color: var(--pideqr-zinc-400); }
.pideqr-coupon-applied {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem; border-radius: var(--pideqr-radius-xl); background: var(--pideqr-green-50); font-size: .875rem; color: var(--pideqr-green-700);
}
.pideqr-coupon-row { display: flex; gap: .5rem; }
.pideqr-coupon-row .pideqr-input { flex: 1; }
.pideqr-btn-dark { border: none; border-radius: var(--pideqr-radius-xl); padding: .75rem 1rem; background: var(--pideqr-zinc-900); color: #fff; font-size: .875rem; font-weight: 600; cursor: pointer; }
.pideqr-table-notice {
  margin-bottom: .5rem; display: flex; align-items: center; gap: .5rem;
  padding: .75rem; border-radius: var(--pideqr-radius-xl); background: var(--pideqr-rose-50);
  font-size: .875rem; font-weight: 700; color: var(--pideqr-rose-700);
  box-shadow: inset 0 0 0 1px var(--pideqr-rose-100);
}

/* Selector de tipo de pedido (tarjetas) */
.pideqr-section-title { margin: 0 0 .65rem; font-size: .875rem; font-weight: 700; color: var(--pideqr-zinc-700); }
.pideqr-type-cards { display: grid; gap: .55rem; }
.pideqr-type-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem;
  width: 100%; padding: .85rem 1rem; border-radius: var(--pideqr-radius-xl);
  border: 1.5px solid var(--pideqr-zinc-200); background: #fff; cursor: pointer;
  text-align: left; transition: border-color .2s, box-shadow .2s, transform .15s;
}
.pideqr-type-card:hover:not(:disabled) { border-color: color-mix(in srgb, var(--pideqr-brand) 35%, #fff); box-shadow: var(--pideqr-shadow-sm); }
.pideqr-type-card.active {
  border-color: var(--pideqr-brand); background: var(--pideqr-accent-bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pideqr-brand) 20%, transparent);
}
.pideqr-type-card.is-unavailable {
  opacity: .72; cursor: not-allowed; background: var(--pideqr-zinc-50);
  border-style: dashed; border-color: var(--pideqr-zinc-300);
}
.pideqr-type-card-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--pideqr-zinc-100); color: var(--pideqr-zinc-600);
}
.pideqr-type-card.active .pideqr-type-card-icon { background: var(--pideqr-brand); color: #fff; }
.pideqr-type-card.is-unavailable .pideqr-type-card-icon { background: var(--pideqr-zinc-200); color: var(--pideqr-zinc-400); }
.pideqr-type-card-icon svg { width: 1.25rem; height: 1.25rem; }
.pideqr-type-card-body { display: grid; gap: .15rem; min-width: 0; }
.pideqr-type-card-body strong { font-size: .9rem; color: var(--pideqr-zinc-900); }
.pideqr-type-card-body span { font-size: .72rem; color: var(--pideqr-zinc-500); line-height: 1.35; }
.pideqr-type-card-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.pideqr-type-fee {
  font-size: .72rem; font-weight: 700; color: var(--pideqr-brand);
  padding: .2rem .45rem; border-radius: 999px; background: var(--pideqr-accent-bg);
}
.pideqr-type-eta {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .68rem; font-weight: 600; color: var(--pideqr-zinc-500);
}
.pideqr-type-eta svg { width: .85rem; height: .85rem; }
.pideqr-type-unavailable {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--pideqr-rose-700); background: var(--pideqr-rose-50); padding: .2rem .45rem; border-radius: 999px;
}
.pideqr-delivery-off-notice {
  display: flex; align-items: flex-start; gap: .55rem; margin: .65rem 0 0;
  padding: .75rem .85rem; border-radius: var(--pideqr-radius-xl);
  background: var(--pideqr-zinc-100); color: var(--pideqr-zinc-600); font-size: .78rem; line-height: 1.45;
}
.pideqr-delivery-off-notice svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; margin-top: .1rem; color: var(--pideqr-zinc-400); }

.pideqr-delivery-banner {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  padding: .85rem 1rem; margin-top: .5rem; border: none; border-radius: var(--pideqr-radius-xl);
  background: linear-gradient(135deg, var(--pideqr-accent-bg), #fff 80%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pideqr-brand) 22%, #fff);
  cursor: pointer; text-align: left; transition: transform .15s, box-shadow .15s;
}
.pideqr-delivery-banner:active { transform: scale(.985); }
.pideqr-delivery-banner-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--pideqr-brand); color: #fff;
}
.pideqr-delivery-banner-icon svg { width: 1.25rem; height: 1.25rem; }
.pideqr-delivery-banner-text { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.pideqr-delivery-banner-text strong { font-size: .88rem; color: var(--pideqr-zinc-900); }
.pideqr-delivery-banner-text span { font-size: .72rem; color: var(--pideqr-zinc-600); }
.pideqr-delivery-banner-cta { font-size: .78rem; font-weight: 700; color: var(--pideqr-brand); white-space: nowrap; }

.pideqr-cart-type-block {
  padding: .85rem 1rem 0; border-top: 1px solid var(--pideqr-zinc-100);
}
.pideqr-cart-type-label {
  margin: 0 0 .55rem; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--pideqr-zinc-500);
}
.pideqr-type-cards.is-compact { gap: .45rem; }
.pideqr-type-cards.is-compact .pideqr-type-card { padding: .65rem .75rem; }
.pideqr-type-cards.is-compact .pideqr-type-card-icon { width: 2rem; height: 2rem; border-radius: 10px; }
.pideqr-type-cards.is-compact .pideqr-type-card-body strong { font-size: .82rem; }
.pideqr-type-cards.is-compact .pideqr-delivery-off-notice { margin-top: .45rem; font-size: .72rem; }

/* Panel delivery activo */
.pideqr-delivery-panel {
  margin-top: .75rem; padding: 1rem; border-radius: var(--pideqr-radius-2xl);
  background: linear-gradient(135deg, var(--pideqr-accent-bg), #fff 70%);
  border: 1px solid color-mix(in srgb, var(--pideqr-brand) 18%, #fff);
  display: grid; gap: .75rem;
}
.pideqr-delivery-eta { display: flex; align-items: center; gap: .75rem; }
.pideqr-delivery-eta-icon {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--pideqr-brand); color: #fff; flex-shrink: 0;
}
.pideqr-delivery-eta-icon svg { width: 1.25rem; height: 1.25rem; }
.pideqr-delivery-eta strong { display: block; font-size: .9rem; color: var(--pideqr-zinc-900); }
.pideqr-delivery-eta span { font-size: .72rem; color: var(--pideqr-zinc-500); }
.pideqr-delivery-fee-row { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.pideqr-delivery-fee, .pideqr-delivery-ready {
  padding: .65rem .75rem; border-radius: var(--pideqr-radius-xl); background: #fff;
  border: 1px solid var(--pideqr-zinc-100); display: grid; gap: .15rem;
}
.pideqr-delivery-fee span, .pideqr-delivery-ready span { font-size: .68rem; color: var(--pideqr-zinc-500); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.pideqr-delivery-fee strong, .pideqr-delivery-ready strong { font-size: .95rem; color: var(--pideqr-zinc-900); }
.pideqr-delivery-fee small { font-size: .68rem; color: var(--pideqr-zinc-400); }
.pideqr-delivery-zone {
  display: flex; align-items: flex-start; gap: .4rem; margin: 0; font-size: .75rem; color: var(--pideqr-zinc-600);
}
.pideqr-delivery-zone svg { width: .95rem; height: .95rem; flex-shrink: 0; margin-top: .1rem; }
.pideqr-delivery-min {
  margin: 0; padding: .55rem .65rem; border-radius: 12px;
  background: #fef3c7; color: #92400e; font-size: .75rem; font-weight: 600;
}
.pideqr-pickup-eta {
  display: flex; align-items: center; gap: .45rem; margin-bottom: .65rem;
  padding: .65rem .75rem; border-radius: var(--pideqr-radius-xl);
  background: var(--pideqr-zinc-100); font-size: .78rem; color: var(--pideqr-zinc-600);
}
.pideqr-pickup-eta svg { width: 1rem; height: 1rem; }
.pideqr-summary-eta {
  display: flex; align-items: center; gap: .4rem; margin-bottom: .65rem;
  padding: .55rem .65rem; border-radius: 12px; background: var(--pideqr-accent-bg);
  font-size: .78rem; color: var(--pideqr-zinc-600);
}
.pideqr-summary-eta svg { width: .95rem; height: .95rem; color: var(--pideqr-brand); }
.pideqr-success-eta {
  display: flex; align-items: flex-start; gap: .65rem; width: 100%; max-width: 20rem;
  margin: .5rem 0 1rem; padding: .85rem 1rem; border-radius: var(--pideqr-radius-xl);
  background: var(--pideqr-accent-bg); text-align: left;
}
.pideqr-success-eta svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--pideqr-brand); margin-top: .1rem; }
.pideqr-success-eta strong { display: block; font-size: .9rem; color: var(--pideqr-zinc-900); }
.pideqr-success-eta span { font-size: .75rem; color: var(--pideqr-zinc-500); }

/* Success */
.pideqr-success {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem; text-align: center;
}
.pideqr-success svg { width: 2.25rem; height: 2.25rem; }
.pideqr-success-check {
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #34d399, #10b981); color: #fff;
  box-shadow: 0 14px 30px -12px rgba(16, 185, 129, .7);
  animation: pideqr-pop .4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes pideqr-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.pideqr-success h1 { margin: 1rem 0 0; font-size: 1.5rem; font-weight: 700; }
.pideqr-success p { margin: .25rem 0 0; color: var(--pideqr-zinc-500); }
.pideqr-success .pideqr-btn-primary { margin-top: 1.5rem; max-width: 20rem; text-decoration: none; display: block; text-align: center; }
.pideqr-success .pideqr-btn-whatsapp { margin-top: .75rem; }
.pideqr-btn-whatsapp {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; max-width: 20rem; margin: .75rem auto 0; padding: .85rem 1rem;
  border: none; border-radius: var(--pideqr-btn-radius, 999px);
  background: linear-gradient(135deg, #25d366, #1ebe5d); color: #fff !important;
  font-weight: 700; cursor: pointer; text-decoration: none !important;
  box-shadow: 0 12px 26px -12px rgba(37, 211, 102, .8);
  transition: transform .15s cubic-bezier(.22,1,.36,1), filter .2s ease;
}
.pideqr-btn-whatsapp:hover { transform: translateY(-1px); filter: brightness(1.03); }
.pideqr-btn-whatsapp:active { transform: scale(.99); }
.pideqr-btn-whatsapp svg { width: 1.3rem; height: 1.3rem; flex-shrink: 0; }
.pideqr-success .pideqr-btn-secondary {
  margin-top: .75rem; max-width: 20rem; width: 100%; padding: .75rem 1rem;
  border-radius: var(--pideqr-btn-radius, 999px); border: 2px solid var(--pideqr-brand);
  color: var(--pideqr-brand); background: transparent; font-weight: 600;
  text-decoration: none; display: block; text-align: center;
}
.pideqr-btn-outline {
  margin-top: .75rem; max-width: 20rem; width: 100%; padding: .75rem;
  border-radius: 999px; border: 2px solid var(--pideqr-brand); color: var(--pideqr-brand);
  background: transparent; font-weight: 600; cursor: pointer; text-decoration: none; display: block; text-align: center;
}
.pideqr-link-muted { margin-top: .75rem; font-size: .875rem; color: var(--pideqr-zinc-500); background: none; border: none; cursor: pointer; text-decoration: underline; }

/* Toast */
.pideqr-toast-wrap {
  position: fixed; bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 100001;
  display: flex; flex-direction: column; gap: .5rem; pointer-events: none;
  width: min(92vw, 24rem);
}
.pideqr-toast {
  padding: .875rem 1.25rem; border-radius: var(--pideqr-radius-xl);
  background: var(--pideqr-zinc-900); color: #fff; font-size: .9375rem; font-weight: 700;
  box-shadow: 0 12px 32px rgba(0,0,0,.35); animation: pideqr-fade-in-up .2s ease-out;
  text-align: center;
}
.pideqr-toast.error { background: var(--pideqr-rose-600); }
.pideqr-toast.success { background: #059669; }

/* Hide theme interference */
.pideqr-app img { max-width: none; }

/* ============================================================
   PideQR — Capa Premium Tier 1
   Refinamientos visuales: profundidad, gradientes, micro-interacciones.
   ============================================================ */

.pideqr-app {
  --pideqr-ease: cubic-bezier(.22, 1, .36, 1);
  --pideqr-shadow-brand: 0 12px 30px -10px color-mix(in srgb, var(--pideqr-brand) 55%, transparent);
  --pideqr-shadow-soft: 0 2px 8px -2px rgba(24, 24, 27, .08), 0 8px 24px -12px rgba(24, 24, 27, .12);
  background:
    radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, var(--pideqr-brand) 7%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 5%, color-mix(in srgb, var(--pideqr-header-end) 6%, transparent), transparent 55%),
    var(--pideqr-bg);
  letter-spacing: -.011em;
}

/* Tabular figures for prices */
.pideqr-price-main, .pideqr-price-bs, .pideqr-featured-price,
.pideqr-summary, .pideqr-summary-totals, .pideqr-fab {
  font-variant-numeric: tabular-nums;
}

/* Header: degradado de marca + textura sutil + brillo */
.pideqr-header {
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--pideqr-brand) 92%, #fff 8%), transparent 55%),
    linear-gradient(135deg, var(--pideqr-brand) 0%, color-mix(in srgb, var(--pideqr-brand) 60%, var(--pideqr-header-end)) 55%, var(--pideqr-header-end) 100%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
}
.pideqr-header::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .35;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%);
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}
.pideqr-header-glow { animation: pideqr-float 9s var(--pideqr-ease) infinite alternate; }
@keyframes pideqr-float {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-14px, 18px) scale(1.08); }
}
.pideqr-header h1 { text-shadow: 0 1px 14px rgba(0, 0, 0, .14); }
.pideqr-logo { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 10px 24px -12px rgba(0, 0, 0, .5); }

/* Títulos de sección con acento */
.pideqr-section-title {
  background: linear-gradient(120deg, var(--pideqr-zinc-950), var(--pideqr-zinc-700));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pideqr-section-label { position: relative; padding-left: 1.4rem; }
.pideqr-section-label::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 2px; border-radius: 2px; background: var(--pideqr-brand);
}

/* Featured cards premium */
.pideqr-featured-card {
  box-shadow: var(--pideqr-shadow-soft);
  transition: transform .35s var(--pideqr-ease), box-shadow .35s var(--pideqr-ease);
}
.pideqr-featured-card img, .pideqr-featured-card .pideqr-food-placeholder {
  transition: transform .5s var(--pideqr-ease), opacity .35s ease;
}
.pideqr-featured-card:hover { transform: translateY(-4px); box-shadow: var(--pideqr-shadow-2xl); }
.pideqr-featured-card:hover img { transform: scale(1.06); opacity: .9; }
.pideqr-featured-tag {
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

/* Tarjetas de producto premium */
.pideqr-card-product {
  border-color: rgba(24, 24, 27, .06);
  box-shadow: var(--pideqr-shadow-soft);
  transition: transform .28s var(--pideqr-ease), box-shadow .28s var(--pideqr-ease), border-color .28s ease;
}
.pideqr-card-product::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); opacity: .8;
}
.pideqr-card-product:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--pideqr-brand) 22%, transparent);
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--pideqr-brand) 30%, rgba(0,0,0,.25));
}
.pideqr-card-img img { transition: transform .5s var(--pideqr-ease); }
.pideqr-card-product:hover .pideqr-card-img img { transform: scale(1.07); }

/* Placeholder con patrón apetitoso */
.pideqr-food-placeholder {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), transparent 45%),
    linear-gradient(135deg, #fff7ed, #ffe4e6 60%, #fee2e2);
  position: relative;
}

/* Badge recomendado dorado */
.pideqr-badge-rec {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  box-shadow: 0 4px 12px -4px rgba(245, 158, 11, .7);
  letter-spacing: .06em;
}

/* Botón agregar con glow */
.pideqr-add-btn {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pideqr-brand) 88%, #fff), var(--pideqr-brand));
  box-shadow: var(--pideqr-shadow-brand);
  transition: transform .18s var(--pideqr-ease), box-shadow .18s ease, filter .18s ease;
}
.pideqr-add-btn:hover { transform: scale(1.1) rotate(90deg); filter: brightness(1.05); }
.pideqr-add-btn:active { transform: scale(.94); }

/* Favorito */
.pideqr-fav-btn { transition: transform .2s var(--pideqr-ease), color .2s ease, background .2s ease; }
.pideqr-fav-btn:hover { transform: scale(1.12); }
.pideqr-fav-btn.active { animation: pideqr-pop .3s var(--pideqr-ease); }
@keyframes pideqr-pop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* Chips refinados */
.pideqr-chip { transition: all .2s var(--pideqr-ease); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.pideqr-chip:hover { transform: translateY(-1px); }
.pideqr-chip.active-cat { box-shadow: var(--pideqr-shadow-brand); }

/* Search refinado */
.pideqr-search { transition: box-shadow .25s ease, border-color .25s ease; }
.pideqr-search:focus-within {
  border-color: color-mix(in srgb, var(--pideqr-brand) 45%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pideqr-brand) 12%, transparent);
}

/* FAB premium con pulso */
.pideqr-fab {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pideqr-brand) 85%, #fff), var(--pideqr-brand) 60%, color-mix(in srgb, var(--pideqr-brand) 80%, var(--pideqr-header-end)));
  box-shadow: var(--pideqr-shadow-brand), var(--pideqr-shadow-2xl);
  transition: transform .18s var(--pideqr-ease), box-shadow .25s ease;
}
.pideqr-fab:hover { transform: translateY(-2px); }
.pideqr-fab-count { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }

/* Botón primario con degradado */
.pideqr-btn-primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pideqr-brand) 88%, #fff), var(--pideqr-brand));
  box-shadow: var(--pideqr-shadow-brand);
  transition: transform .15s var(--pideqr-ease), box-shadow .2s ease, filter .2s ease;
}
.pideqr-btn-primary:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.04); }

/* Sheets / modales con entrada suave y borde luminoso */
.pideqr-sheet { box-shadow: 0 -10px 60px -12px rgba(0, 0, 0, .4); }
.pideqr-option { transition: border-color .2s ease, background .2s ease, transform .15s var(--pideqr-ease); }
.pideqr-option:hover { transform: translateX(2px); border-color: color-mix(in srgb, var(--pideqr-brand) 35%, var(--pideqr-zinc-200)); }

/* Resumen de checkout elevado */
.pideqr-summary { box-shadow: var(--pideqr-shadow-soft); }

/* Tarjetas que aparecen con stagger */
.pideqr-grid > * { animation: pideqr-fade-in-up .4s var(--pideqr-ease) both; }
.pideqr-grid > *:nth-child(1) { animation-delay: .02s; }
.pideqr-grid > *:nth-child(2) { animation-delay: .06s; }
.pideqr-grid > *:nth-child(3) { animation-delay: .1s; }
.pideqr-grid > *:nth-child(4) { animation-delay: .14s; }
.pideqr-grid > *:nth-child(5) { animation-delay: .18s; }
.pideqr-grid > *:nth-child(6) { animation-delay: .22s; }

@media (prefers-reduced-motion: reduce) {
  .pideqr-app *, .pideqr-app *::before, .pideqr-app *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  }
}

/* ============================================================
   Accesibilidad (WCAG) — estados de foco visibles por teclado
   Solo aparece en navegación por teclado (:focus-visible), no
   en clics de ratón, para no ensuciar la estética táctil.
   ============================================================ */
.pideqr-app a:focus-visible,
.pideqr-app button:focus-visible,
.pideqr-app [role="button"]:focus-visible,
.pideqr-app summary:focus-visible {
  outline: 2px solid var(--pideqr-brand);
  outline-offset: 2px;
  border-radius: var(--pideqr-radius-xl);
}

/* Controles circulares: el anillo sigue la forma del botón */
.pideqr-app .pideqr-add-btn:focus-visible,
.pideqr-app .pideqr-fav-btn:focus-visible,
.pideqr-app .pideqr-close:focus-visible,
.pideqr-app .pideqr-back-btn:focus-visible,
.pideqr-app .pideqr-qty button:focus-visible {
  outline-offset: 3px;
  border-radius: 50%;
}

/* Chips, pastillas y opciones */
.pideqr-app .pideqr-chip:focus-visible,
.pideqr-app .pideqr-fab:focus-visible,
.pideqr-app .pideqr-btn-primary:focus-visible {
  outline-offset: 3px;
  border-radius: var(--pideqr-btn-radius, var(--pideqr-radius-2xl));
}

/* Campos de texto: anillo difuso de marca en lugar de outline duro */
.pideqr-app input:focus-visible,
.pideqr-app textarea:focus-visible,
.pideqr-app select:focus-visible {
  outline: none;
  border-color: var(--pideqr-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pideqr-brand) 18%, transparent);
}

/* Búsqueda: el contenedor ya reacciona con :focus-within; reforzamos
   que el input interno no muestre un doble anillo. */
.pideqr-app .pideqr-search input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ============================================================
   Blindaje contra el tema activo (GeneratePress, etc.)
   Muchos temas aplican un fondo a `button:hover/:focus`. Como las
   tarjetas y los filtros del menú son <button> sin fondo de hover
   propio, ese color del tema se filtraba y los ennegrecía. Aquí
   fijamos el fondo de cada botón en hover/focus (mayor especificidad
   que el tema) para que el menú mantenga SIEMPRE su propio estilo.
   ============================================================ */

/* Tarjeta de producto: el <button> nunca toma fondo del tema */
.pideqr-app .pideqr-card-btn,
.pideqr-app .pideqr-card-btn:hover,
.pideqr-app .pideqr-card-btn:focus,
.pideqr-app .pideqr-card-btn:active {
  background: transparent;
  color: inherit;
}

/* Chips de filtro: inactivos blancos; activos conservan su color */
.pideqr-app .pideqr-chip:hover,
.pideqr-app .pideqr-chip:focus {
  background-color: #fff;
  color: var(--pideqr-zinc-600);
}
.pideqr-app .pideqr-chip.inactive-cat:hover,
.pideqr-app .pideqr-chip.inactive-cat:focus {
  background-color: rgba(228, 228, 231, .7);
  color: var(--pideqr-zinc-600);
}
.pideqr-app .pideqr-chip.active-fav:hover,
.pideqr-app .pideqr-chip.active-fav:focus {
  background: var(--pideqr-rose-50);
  color: var(--pideqr-rose-600);
}
.pideqr-app .pideqr-chip.active-tag:hover,
.pideqr-app .pideqr-chip.active-tag:focus {
  background: var(--pideqr-emerald-50);
  color: var(--pideqr-emerald-700);
}
.pideqr-app .pideqr-chip.active-allergen:hover,
.pideqr-app .pideqr-chip.active-allergen:focus {
  background: var(--pideqr-amber-50);
  color: var(--pideqr-amber-800);
}
.pideqr-app .pideqr-chip.active-cat:hover,
.pideqr-app .pideqr-chip.active-cat:focus {
  color: #fff; /* el fondo de marca lo fija el style inline */
}

/* Botones de tipo de pedido y de pago */
.pideqr-app .pideqr-type-btn:hover,
.pideqr-app .pideqr-type-btn:focus {
  background: #fff;
  color: var(--pideqr-zinc-600);
}
.pideqr-app .pideqr-type-btn.active:hover,
.pideqr-app .pideqr-type-btn.active:focus {
  background: var(--pideqr-brand);
  color: #fff;
}
.pideqr-app .pideqr-payment-btn:hover,
.pideqr-app .pideqr-payment-btn:focus {
  background: #fff;
}
.pideqr-app .pideqr-payment-btn.active:hover,
.pideqr-app .pideqr-payment-btn.active:focus {
  background: var(--pideqr-accent-bg);
}

/* Botones rellenos de marca: mantienen su color (no el del tema) */
.pideqr-app .pideqr-add-btn:hover,
.pideqr-app .pideqr-add-btn:focus {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pideqr-brand) 88%, #fff), var(--pideqr-brand));
}
.pideqr-app .pideqr-fab:hover,
.pideqr-app .pideqr-fab:focus {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pideqr-brand) 85%, #fff), var(--pideqr-brand) 60%, color-mix(in srgb, var(--pideqr-brand) 80%, var(--pideqr-header-end)));
}
.pideqr-app .pideqr-btn-primary:hover,
.pideqr-app .pideqr-btn-primary:focus {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pideqr-brand) 88%, #fff), var(--pideqr-brand));
}
.pideqr-app .pideqr-btn-dark:hover,
.pideqr-app .pideqr-btn-dark:focus {
  background: var(--pideqr-zinc-900);
  color: #fff;
}

/* Botones circulares / sutiles: su propio fondo en hover/focus */
.pideqr-app .pideqr-fav-btn:hover,
.pideqr-app .pideqr-fav-btn:focus { background: rgba(255, 255, 255, .95); }
.pideqr-app .pideqr-back-btn:hover,
.pideqr-app .pideqr-back-btn:focus { background: #fff; }
.pideqr-app .pideqr-close:hover,
.pideqr-app .pideqr-close:focus { background: var(--pideqr-zinc-100); }
.pideqr-app .pideqr-qty button:hover,
.pideqr-app .pideqr-qty button:focus { background: var(--pideqr-zinc-100); }
.pideqr-app .pideqr-trash:hover,
.pideqr-app .pideqr-trash:focus,
.pideqr-app .pideqr-clear-filters:hover,
.pideqr-app .pideqr-clear-filters:focus,
.pideqr-app .pideqr-link-muted:hover,
.pideqr-app .pideqr-link-muted:focus { background: transparent; }

/* Enlaces <a> que actúan como botones (pantalla de éxito): el tema no debe
   cambiarles el color del texto ni añadir subrayado en hover/focus. */
.pideqr-app a.pideqr-btn-primary,
.pideqr-app a.pideqr-btn-primary:hover,
.pideqr-app a.pideqr-btn-primary:focus {
  color: #fff;
  text-decoration: none;
}
.pideqr-app a.pideqr-btn-secondary,
.pideqr-app a.pideqr-btn-secondary:hover,
.pideqr-app a.pideqr-btn-secondary:focus,
.pideqr-app a.pideqr-btn-outline,
.pideqr-app a.pideqr-btn-outline:hover,
.pideqr-app a.pideqr-btn-outline:focus {
  color: var(--pideqr-brand);
  text-decoration: none;
}