/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Light mode */
  --bg:          #d4d4d4;
  --surface:     #ffffff;
  --surface2:    #f5f5f5;
  --border:      #e0e0e0;
  --text:        #1a1a1a;
  --text2:       #666666;
  --text3:       #999999;
  --primary:     #FFA000;
  --primary-dk:  #e08c00;
  --primary-lt:  #fff8e1;
  --green:       #22c55e;
  --red:         #ef4444;
  --qty-bg:      #e2e2e2;
  --shadow:      0 2px 12px rgba(0,0,0,.08);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.12);
  --radius:      14px;
  --radius-sm:   8px;
  --nav-h:       60px;
  --header-h:    56px;
  /* Ancho máximo de la vista de resultados en desktop. El resto del shell es
     mobile-first y sigue a todo lo ancho a propósito — ver el bloque
     "Vista de resultados en desktop" más abajo. */
  --results-max-w: 1240px;
}

[data-theme="dark"] {
  --bg:          #23272c;
  --surface:     #3d4248;
  --surface2:    #484e55;
  --border:      #555b63;
  --text:        #f0f0f0;
  --text2:       #aaaaaa;
  --text3:       #666666;
  --primary:     #FFA000;
  --primary-dk:  #e08c00;
  --primary-lt:  #2a1f00;
  --qty-bg:      #5e6470;
  --shadow:      0 2px 12px rgba(0,0,0,.4);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.6);
}

html { height: 100%; background: var(--bg); }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  min-height: 100%;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 0;
}
body::before,
body::after {
  content: '';
  position: fixed;
  left: -25vw;
  right: -25vw;
  top: 116px;
  height: calc(100vh - 296px);
  z-index: -1;
  pointer-events: none;
  background-size: 300% 100%;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}
body::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1080' preserveAspectRatio='none'><path d='M0,400 C60,320 180,480 240,400 C300,320 420,480 480,400 C540,320 660,480 720,400 C780,320 900,480 960,400 C1020,320 1140,480 1200,400 C1260,320 1380,480 1440,400 L1440,1000 C1380,920 1260,1070 1200,1000 C1140,920 1020,1070 960,1000 C900,920 780,1070 720,1000 C660,920 540,1070 480,1000 C420,920 300,1070 240,1000 C180,920 60,1070 0,1010 Z' fill='rgba(255,255,255,0.35)'/></svg>");
  animation: bg-wave-slow 14s ease-in-out infinite;
}
body::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1080' preserveAspectRatio='none'><path d='M0,460 C60,390 180,530 240,460 C300,390 420,530 480,460 C540,390 660,530 720,460 C780,390 900,530 960,460 C1020,390 1140,530 1200,460 C1260,390 1380,530 1440,460 L1440,990 C1380,920 1260,1048 1200,990 C1140,920 1020,1048 960,990 C900,920 780,1048 720,990 C660,920 540,1048 480,990 C420,920 300,1048 240,990 C180,920 60,1048 0,1000 Z' fill='rgba(0,0,0,0.05)'/><path d='M0,830 C60,780 180,880 240,830 C300,780 420,880 480,830 C540,780 660,880 720,830 C780,780 900,880 960,830 C1020,780 1140,880 1200,830 C1260,780 1380,880 1440,830 L1440,1040 C1380,990 1260,1078 1200,1040 C1140,990 1020,1078 960,1040 C900,990 780,1078 720,1040 C660,990 540,1078 480,1040 C420,990 300,1078 240,1040 C180,990 60,1078 0,1050 Z' fill='rgba(255,255,255,0.18)'/></svg>");
  animation: bg-wave-medium 10s ease-in-out infinite;
}
[data-theme="dark"] body::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1080' preserveAspectRatio='none'><path d='M0,400 C60,320 180,480 240,400 C300,320 420,480 480,400 C540,320 660,480 720,400 C780,320 900,480 960,400 C1020,320 1140,480 1200,400 C1260,320 1380,480 1440,400 L1440,1000 C1380,920 1260,1070 1200,1000 C1140,920 1020,1070 960,1000 C900,920 780,1070 720,1000 C660,920 540,1070 480,1000 C420,920 300,1070 240,1000 C180,920 60,1070 0,1010 Z' fill='rgba(255,255,255,0.04)'/></svg>");
}
[data-theme="dark"] body::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1080' preserveAspectRatio='none'><path d='M0,460 C60,390 180,530 240,460 C300,390 420,530 480,460 C540,390 660,530 720,460 C780,390 900,530 960,460 C1020,390 1140,530 1200,460 C1260,390 1380,530 1440,460 L1440,990 C1380,920 1260,1048 1200,990 C1140,920 1020,1048 960,990 C900,920 780,1048 720,990 C660,920 540,1048 480,990 C420,920 300,1048 240,990 C180,920 60,1048 0,1000 Z' fill='rgba(0,0,0,0.35)'/><path d='M0,830 C60,780 180,880 240,830 C300,780 420,880 480,830 C540,780 660,880 720,830 C780,780 900,880 960,830 C1020,780 1140,880 1200,830 C1260,780 1380,880 1440,830 L1440,1040 C1380,990 1260,1078 1200,1040 C1140,990 1020,1078 960,1040 C900,990 780,1078 720,1040 C660,990 540,1078 480,1040 C420,990 300,1078 240,1040 C180,990 60,1078 0,1050 Z' fill='rgba(0,0,0,0.2)'/></svg>");
}
@keyframes bg-wave-slow {
  0%, 100% { transform: translate3d(-20vw, -20px, 0); }
  50%     { transform: translate3d(20vw, 20px, 0); }
}
@keyframes bg-wave-medium {
  0%, 100% { transform: translate3d(20vw, 20px, 0); }
  50%     { transform: translate3d(-20vw, -20px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

/* ===== Header ===== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  box-shadow: var(--shadow);
}
[data-theme="dark"] .header {
  border-bottom: none;
}
.header-logo {
  font-size: 22px; font-weight: 800;
  background: linear-gradient(135deg, var(--primary), #ff9f1c);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px; flex: 1;
}
.header-logo img { vertical-align: middle; }
.logo-dark  { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark  { display: inline; }
.btn-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface2); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: background .15s, transform .1s;
  color: var(--text); position: relative;
}
.btn-icon:active { transform: scale(.95); }
#btnInstall i { animation: install-pulse 2s ease-in-out infinite; }
@keyframes install-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.badge {
  position: absolute; top: -2px; right: -2px;
  background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; border: 2px solid var(--surface);
  display: none;
}
.badge.visible { display: flex; }

/* ===== Search bar ===== */
.sticky-bars {
  position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 90;
  background: var(--bg);
  transition: transform .25s ease;
}
.sticky-bars.bars-hidden {
  transform: translateY(-100%);
}
.search-wrap {
  padding: 15px 15px 15px;
}
.search-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 50px;
  padding: 10px 16px;
  box-shadow: var(--shadow);
  transition: border-color .2s;
}
.search-box:focus-within { border-color: var(--primary); }
.search-box input {
  flex: 1; border: none; background: transparent;
  font-size: 15px; color: var(--text); outline: none;
}
.search-box input::placeholder { color: var(--text3); }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-icon { display: flex; align-items: center; flex-shrink: 0; }
.search-clear {
  display: flex; align-items: center; flex-shrink: 0;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text); opacity: 0.5; font-size: 16px;
}

/* ===== Categories ===== */
.cats-wrap {
  padding: 0 0 4px;
}
.cats {
  display: flex; gap: 8px;
  overflow-x: auto; padding: 2px 15px 8px;
  scrollbar-width: none;
}
.cats::-webkit-scrollbar { display: none; }
.cat-btn {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 50px;
  background: var(--surface); border: 1.5px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text2);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.cat-btn .cat-img { width: 20px; height: 20px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.cat-btn .cat-ico { font-size: 15px; flex-shrink: 0; width: 1.1em; text-align: center; }
.cat-btn.active {
  background: var(--primary); border-color: var(--primary);
  color: #fff;
}
.cat-btn:active { transform: scale(.94); }

/* ===== Subcategories ===== */
.subcats-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.subcats-wrap.open {
  max-height: 61px;
  padding-bottom: 5px;
}
.subcats {
  display: flex; gap: 6px;
  overflow-x: auto; padding: 0 15px 8px;
  scrollbar-width: none;
}
.subcats::-webkit-scrollbar { display: none; }
.subcat-btn {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 5px;
  padding: 5px 13px; border-radius: 50px;
  background: var(--surface); border: 1.5px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--text2);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.subcat-btn .cat-ico { font-size: 13px; flex-shrink: 0; width: 1.1em; text-align: center; }
.subcat-btn.active {
  background: var(--primary); border-color: var(--primary);
  color: #fff;
}
.subcat-btn:active { transform: scale(.94); }

/* ===== Section title ===== */
.section-title {
  padding: 4px 16px 10px;
  font-size: 18px; font-weight: 700; color: var(--text);
}
.section-title small { font-size: 13px; font-weight: 400; color: var(--text3); margin-left: 6px; }

/* ===== Home view (nuevo) ===== */
#homeView {
  padding: 4px 0 calc(var(--nav-h) + 10px);
}

/* Banner bienvenida */
.home-banner {
  position: relative;
  margin: 6px 15px 18px;
  padding: 18px 18px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--primary), #ff9f1c);
  color: #fff;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}
.home-banner-content { flex: 1; position: relative; z-index: 1; }
.home-banner-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  opacity: .9; text-transform: uppercase;
}
.home-banner-title {
  font-size: 20px; font-weight: 800; line-height: 1.15;
  margin: 4px 0 6px;
  letter-spacing: -.3px;
}
.home-banner-sub {
  font-size: 13px; font-weight: 500;
  opacity: .92;
}
.home-banner-art {
  width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  flex-shrink: 0;
}
.home-banner-art i {
  font-size: 38px; color: #fff;
}

/* Slot banner: banner promocional entre secciones del home (gestionable desde el admin).
   Replica la altura y tipografías del .home-banner de bienvenida (eyebrow + título + subtítulo). */
.slot-banner {
  position: relative;
  margin: 6px 15px 18px;
  padding: 18px 18px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg2);
  box-shadow: var(--shadow);
}
/* El primer banner del home (slot "categorias") no lleva separación superior. */
.slot-banner[data-slot="categorias"] {
  margin-top: 0;
}
.slot-banner.is-clickable { cursor: pointer; }
.slot-banner-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.slot-banner-overlay {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}
.slot-banner-content { flex: 1; min-width: 0; }
.slot-banner-art {
  flex-shrink: 0;
  width: 78px; height: 78px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18);
}
.slot-banner-art i { font-size: 34px; color: #fff; }
/* Posición del texto: izq y der ubican el ícono al lado opuesto.
   Centro: oculta el ícono (lo decide el JS) y centra el texto. */
.slot-banner.pos-derecha   .slot-banner-overlay { flex-direction: row-reverse; }
.slot-banner.pos-izquierda .slot-banner-content { text-align: left; }
.slot-banner.pos-centro    .slot-banner-content { text-align: center; }
.slot-banner.pos-derecha   .slot-banner-content { text-align: right; }
/* Círculo del ícono ajustado al color del texto. */
.slot-banner.color-oscuro .slot-banner-art   { background: rgba(0,0,0,.12); }
.slot-banner.color-oscuro .slot-banner-art i { color: #111; }
.slot-banner-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  opacity: .9; text-transform: uppercase;
}
.slot-banner-titulo {
  font-size: 20px; font-weight: 800; line-height: 1.15;
  margin: 4px 0 6px; letter-spacing: -.3px;
}
.slot-banner-sub {
  font-size: 13px; font-weight: 500; opacity: .92;
}
.slot-banner-cta {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.slot-banner.color-claro .slot-banner-eyebrow,
.slot-banner.color-claro .slot-banner-titulo,
.slot-banner.color-claro .slot-banner-sub {
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.slot-banner.color-oscuro .slot-banner-eyebrow,
.slot-banner.color-oscuro .slot-banner-titulo,
.slot-banner.color-oscuro .slot-banner-sub {
  color: #111; text-shadow: 0 1px 2px rgba(255,255,255,.4);
}
.slot-banner.color-claro  .slot-banner-cta { background: #fff; color: #111; }
.slot-banner.color-oscuro .slot-banner-cta { background: #111; color: #fff; }

/* ===== Tarjeta "Pedido en curso" del home =====
   Aparece entre el buscador y el primer banner cuando el cliente tiene un
   pedido con estado distinto a 'entregado' o 'cancelado'. Los márgenes están
   alineados con el gap header→buscador (~15px) para que las separaciones
   queden visualmente equivalentes en todo el inicio. El margin-top negativo
   cancela el padding-top de #homeView; la regla del slot-banner adyacente
   cancela su margin-top para evitar acumulación cuando la tarjeta está
   presente. */
.home-pedido-curso {
  margin: -4px 15px 17px;
  display: flex; flex-direction: column; gap: 10px;
}
.home-pedido-curso + .slot-banner { margin-top: 0; }
.hpc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px 12px;
  cursor: pointer;
  position: relative;
  transition: transform .08s ease;
}
.hpc-card:active { transform: scale(.99); }
.hpc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.hpc-head-left { min-width: 0; }
.hpc-eyebrow {
  font-size: .72rem; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: .04em;
  display: flex; align-items: center; gap: 6px;
}
.hpc-eyebrow i { font-size: .8rem; }
.hpc-num {
  font-size: .75rem; font-weight: 600;
  color: var(--text3);
  opacity: .7;
  letter-spacing: .02em;
}
.hpc-badge {
  font-size: .7rem; font-weight: 700;
  padding: 4px 10px; border-radius: 50px;
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(255, 160, 0, .13);
  color: var(--primary);
}
.hpc-steps {
  margin: 12px 0 14px;
}
.hpc-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  justify-content: space-between; align-items: center;
  font-size: .82rem; color: var(--text2);
  margin-bottom: 8px;
}
.hpc-meta-row { display: inline-flex; align-items: center; gap: 6px; }
.hpc-meta-row i { color: var(--primary); font-size: .8rem; width: 14px; text-align: center; }
.hpc-meta-row.hpc-total { color: var(--text); font-weight: 700; }
.hpc-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.hpc-cta-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .8rem; font-weight: 700; color: var(--primary);
}
.hpc-cta-link i { font-size: .7rem; }

/* Sección genérica del home */
.home-section {
  margin: 0 0 22px;
}
.home-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 15px 10px;
}
.home-section-title {
  font-size: 17px; font-weight: 800; color: var(--text);
  letter-spacing: -.2px;
  display: flex; align-items: center; gap: 8px;
}
.home-section-icon {
  color: var(--primary); font-size: 16px; width: 18px; text-align: center;
}
.home-section-emoji {
  font-size: 18px; line-height: 1;
}
.home-section-link {
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--primary);
  display: flex; align-items: center; gap: 4px;
  padding: 4px 6px; border-radius: 6px;
}
.home-section-link:active { transform: scale(.96); }
.home-section-link i { font-size: 11px; }

/* Categorías populares (círculos) */
.home-cats-circles {
  display: flex; gap: 14px;
  overflow-x: auto;
  /* padding (no gap) en los costados: da los 15px estándar al inicio y al
     final sin que el `gap` de los items se sume al espacio del borde. */
  padding: 4px 15px 6px;
  scrollbar-width: none;
}
.home-cats-circles::-webkit-scrollbar { display: none; }
.home-cat-circle {
  flex-shrink: 0;
  width: 76px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  padding: 0;
}
.home-cat-circle:active { transform: scale(.95); }
.home-cat-circle-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s;
}
.home-cat-circle:active .home-cat-circle-icon { border-color: var(--primary); }
/* Las categorías con `imagen` cargada siguen mostrando la foto; las que no,
   caen en el ícono FA (ver categoriaIconHTML en app.js). */
.home-cat-circle-icon i {
  font-size: 26px; color: var(--primary);
}
.home-cat-circle-icon img {
  width: 40px; height: 40px;
  object-fit: contain;
}
.home-cat-circle-label {
  font-size: 12px; font-weight: 600; color: var(--text);
  text-align: center; line-height: 1.2;
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Carruseles horizontales del home */
.home-carousel {
  display: flex; gap: 12px;
  overflow-x: auto;
  /* padding (no gap) en los costados: 15px estándar al inicio y al final, sin
     que el `gap` entre cards se sume al espacio del borde. */
  margin: 0;
  padding: 4px 15px 12px;
  scrollbar-width: none;
  /* Aislar el paint del carrusel: en Chromium evita que un repaint sobre
     una zona afecte tiles de carruseles vecinos (causa de los blanks y
     botones que desaparecen en devices de alta densidad). */
  contain: paint;
}
/* Centinela invisible al final del carrusel — dispara la próxima página
   cuando entra al viewport del carrusel (scroll infinito horizontal). */
.home-carousel-sentinel {
  flex: 0 0 1px;
  align-self: stretch;
}
.home-carousel::-webkit-scrollbar { display: none; }
.home-carousel .card {
  flex-shrink: 0;
  width: 150px;
}
@media (min-width: 768px) {
  .home-carousel .card { width: 170px; }
}
.home-carousel-empty {
  padding: 20px 15px;
  font-size: 13px; color: var(--text3);
  text-align: center;
  width: 100%;
}
.home-carousel-skel {
  flex-shrink: 0;
  width: 150px;
  height: 240px;
  border-radius: var(--radius);
  background: var(--surface2);
  position: relative;
  overflow: hidden;
}
.home-carousel-skel::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  animation: home-skel-shimmer 1.2s ease-in-out infinite;
}
@keyframes home-skel-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ===== Products grid =====
   En mobile: 2 columnas fijas.
   En desktop: auto-fill con el mismo ancho mínimo del carrusel (170px) para
   mantener parejas las tarjetas con las de "Descubrí más" y los carruseles
   de arriba, en lugar de 4/5/6 columnas fijas que producían cards enormes. */
/* Encabezado de la vista de resultados (H1 de /categoria/<slug>).
   Comparte el padding lateral del grid para alinearse con las tarjetas. */
.results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 15px 2px;
}
.results-h1 {
  font-size: 18px; font-weight: 800; color: var(--text);
  margin: 0;
  line-height: 1.25;
}
.results-count {
  font-size: 12px; color: var(--text3);
  white-space: nowrap;
}

.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 15px;
  padding: 5px 15px 0;
  padding-bottom: calc(var(--nav-h) + 15px);
}
@media (min-width: 768px) {
  .products { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* ===== Vista de resultados en desktop =====
 *
 * El shell del app es mobile-first y no tiene contenedor de ancho máximo: la
 * grilla se estiraba de punta a punta, así que en una pantalla ancha quedaban
 * ~10 columnas de 170px. Con un resultado eso es una tarjeta chica sola arriba
 * a la izquierda y el 85% de la pantalla vacío — que es lo que se lee como "no
 * encontró nada" aunque la búsqueda haya traído justo lo que se pidió.
 *
 * Acá el listado entra en un contenedor centrado y las tarjetas crecen. Se
 * apunta por ID y no por `.products` a propósito: esa clase la reusa el feed
 * "Descubrí más" del home (`.home-descubri-grid`), que queda como está. Lo que
 * cambia son las dos vistas que comparten `#productsGrid` —resultados de
 * búsqueda y listado por categoría— y nada más.
 *
 * El `#resultsHead` lleva el mismo ancho y el mismo padding lateral que la
 * grilla para que el H1 arranque sobre la primera tarjeta y el contador cierre
 * sobre la última. Si cambia uno, cambia el otro. */
@media (min-width: 768px) {
  #resultsHead,
  #productsGrid {
    width: 100%;
    max-width: var(--results-max-w);
    margin-inline: auto;
  }
  #productsGrid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
  }
  #resultsHead { padding-top: 20px; }
  #resultsHead .results-h1 { font-size: 22px; }
}

@media (min-width: 1200px) {
  #productsGrid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

.card {
  background: var(--surface2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
  cursor: pointer;
  border: 1.5px solid transparent;
  position: relative;
  display: flex;
  flex-direction: column;
}
.card:active { transform: scale(.97); }
.card.sin-stock { opacity: .55; pointer-events: none; }
.ribbon-oferta {
  position: absolute;
  top: 18px; left: -56px;
  width: 170px;
  background: #e53935;
  color: #fff;
  font-size: 16px; font-weight: 800;
  text-align: center;
  padding: 4px 0;
  letter-spacing: 1px;
  text-transform: uppercase;
  transform: rotate(-45deg);
  z-index: 3;
  pointer-events: none;
}
/* El badge vive dentro de .card-thumb (overflow:hidden) — queda recortado al área de imagen */
.badge-descuento {
  position: absolute;
  bottom: 7px; left: 7px;
  width: 40px; height: 40px;
  background: #3a3a3a;
  color: #fff;
  font-size: 10px; font-weight: 800;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  letter-spacing: -.3px;
  z-index: 2;
  pointer-events: none;
}
/* Giro pivotante en imágenes de productos en oferta: horario → antihorario → vuelta a 0.
   Cada giro dura ~0.5s y se dispara desde app.js con una pausa aleatoria
   (750-1400ms) entre cada uno. CSS solo define el giro individual.
   Si cambiás la duración, actualizá también SHAKE_DURATION_MS en app.js. */
@keyframes oferta-shake {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(10deg); }
  75%      { transform: rotate(-10deg); }
}
.card-thumb.is-oferta.is-loaded.is-shaking img {
  animation: oferta-shake .5s ease-in-out;
  transform-origin: center center;
}
@media (prefers-reduced-motion: reduce) {
  .card-thumb.is-oferta.is-loaded.is-shaking img { animation: none; transform-origin: unset; }
}
.card-fav-btn {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--primary), #ff9f1c);
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer; color: rgba(255,255,255,.5);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  transition: color .15s, transform .15s;
  /* Promueve a capa GPU dedicada: el gradient + shadow + clipping circular
     son paint-pesados; pre-rasterizarlos evita que durante scroll horizontal
     rápido en Chromium el botón quede sin pintar por presupuesto agotado. */
  will-change: transform;
}
.card-fav-btn:active { transform: scale(.95); }
.card-fav-btn.active { color: rgba(255,255,255,1); }

.card-thumb {
  background: #fff;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  user-select: none;
  border-radius: var(--radius);
  position: relative;
}
.card-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity .4s ease-out;
}
/* El fade-in sólo dispara cuando la card entró al viewport — así el efecto
   se ve siempre, aunque la imagen ya estuviera en caché y haya cargado antes. */
.card-thumb.is-loaded.is-viewport img { opacity: 1; transform: scale(1); }
/* Estado de error: el handler en JS reemplaza el <img> por <i class="fa-image">. */
.card-thumb.is-error {
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-thumb.is-error i {
  font-size: 32px;
  color: var(--text3);
  opacity: .55;
}
/* Flash de brillo al agregar/quitar del carrito */
.card-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  clip-path: inset(0 round 14px);
  background: linear-gradient(
    108deg,
    rgba(255,255,255,0) 33%,
    rgba(255,255,255,0.45) 44%,
    rgba(255,255,255,0.63) 50%,
    rgba(255,255,255,0.45) 56%,
    rgba(255,255,255,0) 67%
  );
  transform: translateX(-180%);
  opacity: 0;
}
@keyframes cart-add-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); }
  65%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
@keyframes cart-flash {
  0%   { transform: translateX(-180%); opacity: 1; }
  100% { transform: translateX(180%);  opacity: 1; }
}
@keyframes cart-remove-flash {
  0%   { transform: translateX(180%);  opacity: 1; }
  100% { transform: translateX(-180%); opacity: 1; }
}
.card-thumb.is-cart-pop > img {
  animation: cart-add-pop .38s cubic-bezier(0.22, 1.35, 0.36, 1);
}
.card-thumb.is-cart-pop::after {
  animation: cart-flash 0.9s ease-out forwards;
}
.card-thumb.is-cart-remove::after {
  animation: cart-remove-flash 0.9s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  .card-thumb img { transition: none; transform: none; }
  .card-thumb.is-cart-pop > img { animation: none; }
  .card-thumb.is-cart-pop::after { animation: none; }
  .card-thumb.is-cart-remove::after { animation: none; }
}
.card-body { padding: 5px; background: var(--surface2); flex: 1; display: flex; flex-direction: column; }
.card-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  line-height: 1.35; letter-spacing: -.1px;
  margin: 2px 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
  /* reserva 2 líneas para que los precios queden alineados entre cards */
  min-height: calc(13px * 1.35 * 2);
}
.card-unit { font-size: 11px; color: var(--text3); margin-bottom: 6px; }
.card-footer { display: flex; align-items: center; justify-content: space-between; }
.card-price-wrap {
  display: flex; align-items: baseline; justify-content: flex-end;
  gap: 6px; flex-wrap: wrap;
  margin-top: auto; margin-bottom: 8px;
}
.card-price {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 19px; font-weight: 800; color: var(--primary);
  line-height: 1; letter-spacing: -.4px;
  margin-top: auto; margin-bottom: 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.card-price-wrap .card-price { margin: 0; }
.card-price-cur {
  font-size: .65em; font-weight: 700;
  opacity: .7;
  margin-right: 1px;
  vertical-align: top;
  position: relative; top: .2em;
}
.card-price-old {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 12px; font-weight: 600;
  color: var(--text2);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.card-add-btn {
  width: 100%; height: 40px; padding: 0 6px; box-sizing: border-box;
  background: linear-gradient(135deg, var(--primary), #ff9f1c);
  border: none; border-radius: 50px;
  font-size: 12px; font-weight: 700; color: #fff;
  cursor: pointer; transition: transform .1s;
  display: flex; align-items: center; justify-content: center;
}
.card-add-btn:active { transform: scale(.97); }

.card-qty-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: 40px; padding: 4px; box-sizing: border-box;
  background: var(--qty-bg);
  border: 1px solid var(--border); border-radius: 50px;
}
.card-qty-btn {
  width: 36px; height: 30px; border-radius: 50px; border: none;
  background: var(--primary); color: #fff;
  font-size: 18px; font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, transform .1s;
}
.card-qty-btn:active { transform: scale(.95); background: var(--primary-dk); }
.card-qty-btn:disabled { opacity: .4; pointer-events: none; }
.card-qty-label {
  flex: 1; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--text2);
}

.btn-add {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); border: none;
  color: #fff; font-size: 20px; font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, transform .1s;
  box-shadow: 0 3px 8px rgba(255,160,0,.35);
}
.btn-add:active { transform: scale(.88); background: var(--primary-dk); }

.card-qty-wrap {
  display: flex; align-items: center; gap: 6px;
}
.qty-label {
  width: 24px; text-align: center;
  font-size: 14px; font-weight: 700; color: var(--text);
}
.btn-minus {
  width: 28px; height: 28px; border-radius: 50%;
  background: #d0d0d0; border: none;
  color: #111; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s;
}
.btn-minus:active { background: var(--border); }

.stock-tag {
  position: absolute; top: 8px; right: 8px;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px;
}

/* ===== Empty state ===== */
.empty {
  grid-column: 1 / -1;
  text-align: center; padding: 60px 20px;
  color: var(--text3);
}
.empty-icon { margin-bottom: 16px; display: flex; justify-content: center; }
.empty p { font-size: 15px; }

.empty--search,
.empty--no-products { color: var(--text2); }
.empty--search .empty-icon,
.empty--no-products .empty-icon { margin-bottom: 28px; }
.empty--search .empty-icon i,
.empty--no-products .empty-icon i { font-size: 72px; }
.empty--search p,
.empty--no-products p { font-size: 17px; font-weight: 500; max-width: 320px; margin: 0 auto; line-height: 1.5; }

/* ===== Cart Drawer ===== */
.overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
  backdrop-filter: blur(2px);
}
.overlay.open { opacity: 1; pointer-events: all; }

.cart-drawer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 201;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  box-shadow: var(--shadow-lg);
  max-height: 92vh;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
.cart-drawer.open { transform: translateY(0); }
/* En desktop limitamos el ancho del drawer (carrito y notificaciones) y lo
   centramos, para que coincida con el ancho del modal de producto. */
@media (min-width: 768px) {
  .cart-drawer {
    max-width: 480px;
    margin: 0 auto;
  }
}

.drawer-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--border); margin: 12px auto 4px;
}
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.drawer-title { font-size: 18px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 6px; }
.drawer-header-actions {
  display: flex; align-items: center; gap: 8px;
}
.btn-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface2); border: none;
  font-size: 16px; cursor: pointer; color: var(--text2);
  display: flex; align-items: center; justify-content: center;
}
.btn-clear-cart {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface2); border: none;
  font-size: 14px; cursor: pointer; color: var(--text2);
  display: flex; align-items: center; justify-content: center;
}
.confirm-modal-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.confirm-modal-overlay.visible { opacity: 1; pointer-events: all; }
.confirm-modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 24px 20px 20px;
  width: min(320px, calc(100vw - 40px));
  transform: scale(.92);
  transition: transform .2s cubic-bezier(0.22, 1.35, 0.36, 1);
}
.confirm-modal-overlay.visible .confirm-modal { transform: scale(1); }
/* Ícono grande de los confirm-modal informativos (mantenimiento, stock
   insuficiente, producto no disponible). Reemplaza al emoji suelto que antes
   iba con estilos inline. */
.confirm-modal-icon {
  text-align: center; line-height: 1; margin-bottom: 12px;
  font-size: 40px; color: var(--primary);
}
.confirm-modal-title {
  font-size: 16px; font-weight: 700; color: var(--text);
  margin-bottom: 8px;
}
.confirm-modal-body {
  font-size: 14px; color: var(--text2);
  margin-bottom: 20px; line-height: 1.5;
}
.confirm-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
}
.confirm-btn {
  padding: 9px 20px; border-radius: 50px; border: none;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.confirm-btn:active { transform: scale(.96); }
.confirm-btn-cancel { background: var(--surface2); color: var(--text2); }
.confirm-btn-danger { background: var(--primary); color: #fff; }

.cart-items { flex: 1; overflow-y: auto; padding: 12px 16px; }
.cart-empty {
  text-align: center; padding: 40px; color: var(--text3);
}
.cart-empty .empty-icon { display: flex; justify-content: center; margin-bottom: 8px; }

/* ===== Notifications drawer ===== */
.btn-link-mini {
  background: transparent; border: none; color: var(--primary);
  font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 8px;
}
.btn-link-mini:active { opacity: .6; }
.notif-row {
  display: flex; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .15s;
}
.notif-row:active { background: var(--surface2); }
.notif-dot {
  flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%;
  background: transparent; margin-top: 6px;
}
.notif-row.notif-unread .notif-dot { background: var(--primary); }
.notif-row.notif-unread .notif-titulo { font-weight: 700; }
.notif-body { flex: 1; min-width: 0; }
.notif-titulo { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.notif-cuerpo { font-size: 13px; color: var(--text2); line-height: 1.4; margin-bottom: 6px; }
.notif-fecha  { font-size: 11px; color: var(--text3); }

.cart-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  animation: slideIn .2s ease;
}
.cart-item:last-child { border-bottom: none; }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.ci-img { width: 44px; height: 44px; object-fit: cover; flex-shrink: 0; border-radius: 8px; }
.ci-info { flex: 1; }
.ci-name { font-size: 14px; font-weight: 600; color: var(--text); }
.ci-price { font-size: 12px; color: var(--text3); margin-top: 1px; }
.ci-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ci-qty {
  width: 28px; height: 28px; border-radius: 50%;
  background: #555; border: none;
  font-size: 13px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .ci-qty { background: #2a2e33; }
.ci-btn {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); border: none;
  font-size: 16px; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ci-subtotal { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 2px; }

.cart-footer { padding: 12px 16px 20px; border-top: 1px solid var(--border); }
#cartEmptyFooter { border-top: none; }
.cart-total-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.total-label { font-size: 15px; color: var(--text2); }
.total-amount { font-size: 24px; font-weight: 800; color: var(--text); }
.total-amount small { font-size: 13px; font-weight: 400; color: var(--text3); }

.btn-checkout {
  width: 100%; padding: 16px;
  background: linear-gradient(135deg, var(--primary), #ff9f1c);
  border: none; border-radius: 50px;
  font-size: 16px; font-weight: 700; color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .1s;
}
.btn-checkout:active { transform: scale(.97); }
.btn-checkout:disabled { opacity: .5; pointer-events: none; }
.btn-ver-carrito { background: var(--qty-bg); color: var(--text2); box-shadow: none; }
.btn-ver-carrito:active { box-shadow: none; }

/* ===== Checkout Modal ===== */
.modal-wrap {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.modal-wrap.open { opacity: 1; pointer-events: all; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
}
.modal {
  position: relative; z-index: 1;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  width: 100%; max-height: 95vh;
  overflow-y: auto; padding: 0 20px 30px;
  transform: translateY(40px);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
.modal-wrap.open .modal { transform: translateY(0); }

.modal-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 12px auto 16px; }
.modal-title { font-size: 20px; font-weight: 800; margin-bottom: 20px; color: var(--text); }
.modal .product-modal-close { position: absolute; top: 14px; right: 16px; z-index: 2; }

/* En estos modales queremos que el botón X quede alineado con el título
 * (misma línea visual) en vez de flotar sobre el handle. Bajamos el X
 * y agregamos padding-right al título para que el texto no choque con el X. */
#checkoutModal .product-modal-close,
#elegirDireccionUbicacionModal .product-modal-close { top: 30px; }
#checkoutModal .modal-title,
#elegirDireccionUbicacionModal .modal-title { padding-right: 40px; }

/* ===== Modal Confirmación ===== */
.modal-confirm-wrap {
  align-items: center; justify-content: center; z-index: 400;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
}
.modal-confirm {
  border-radius: 20px;
  width: calc(100% - 32px);
  max-width: 360px;
  padding: 20px 20px 24px;
  transform: translateY(0);
  max-height: none; overflow: visible;
}
.confirm-msg {
  font-size: 1rem; color: var(--text); text-align: center;
  line-height: 1.5; margin: 16px 0 24px;
}
.confirm-btns { display: flex; gap: 10px; }
.confirm-btns .confirm-btn-cancel {
  flex: 1; padding: 12px; border: 1.5px solid var(--border);
  border-radius: 10px; background: none; color: var(--text);
  font-size: .95rem; cursor: pointer;
}
.confirm-btns .confirm-btn-ok {
  flex: 1; padding: 12px; border: none; border-radius: 10px;
  background: var(--primary); color: #fff;
  font-size: .95rem; font-weight: 700; cursor: pointer;
}

.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
.form-group input, .form-group textarea {
  width: 100%; padding: 13px 16px;
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: 15px; color: var(--text);
  outline: none; transition: border-color .2s;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--primary); }
.form-group textarea { resize: none; height: 80px; }

/* ===== Map modal ===== */
.map-modal-wrap {
  position: fixed; inset: 0; z-index: 350;
  display: none; flex-direction: column;
}
.map-modal-wrap.open { display: flex; }
.map-modal {
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  background: var(--surface);
}
.map-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.map-modal-title { font-size: 1rem; font-weight: 700; color: var(--text); }
.map-modal-body {
  flex: 1; position: relative; overflow: hidden;
  min-height: 0;
}
#mapContainer { width: 100%; height: 100%; }
#onboardingMapContainer { width: 100%; height: 100%; }
.map-modal-intro {
  padding: 10px 16px 12px;
  font-size: .85rem; color: var(--text2); line-height: 1.4;
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  /* Naranja del brand (#FFA000) atenuado para destacar el bloque de ayuda
     sin competir con el ícono del mismo color. La sombra inferior reemplaza
     el border-bottom para dar sensación de "card flotante" sobre el mapa,
     en línea con la del input de dirección. */
  background: rgba(255, 160, 0, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  position: relative;
  z-index: 1;
}
.map-modal-intro-icon {
  color: var(--primary);
  font-size: 1rem;
  flex-shrink: 0;
}
.map-pin-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -100%);
  pointer-events: none; z-index: 500;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
}
.map-address-overlay {
  position: absolute; top: 12px; left: 12px; right: 12px;
  z-index: 500;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.map-address-overlay i { color: var(--primary); font-size: .95rem; flex-shrink: 0; }
.map-address-overlay input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  font-size: .9rem; color: var(--text);
}
.map-address-clear {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2); color: var(--text2);
  border: none; border-radius: 50%;
  font-size: .75rem; cursor: pointer; padding: 0;
  transition: background .15s, color .15s;
}
.map-address-clear:hover { background: var(--border); color: var(--text); }
.map-address-clear:active { transform: scale(.92); }
/* Dropdown de sugerencias del Places Autocomplete debe quedar por encima
   del modal del mapa (z-index 350) y de los pines (z-index 500).
   El posicionamiento (top/left/width) se setea por JS — ver repositionPac
   en app.js — porque Google lo calcula contra el <input> crudo en vez de
   contra el chip overlay. */
.pac-container {
  z-index: 1000;
  margin-top: 0 !important;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 6px 12px rgba(0,0,0,.18);
  font-family: inherit;
  background: var(--surface);
  overflow: hidden;
}
.pac-item {
  padding: 8px 14px;
  cursor: pointer;
  color: var(--text);
  border-top: 1px solid var(--border);
}
.pac-item:first-child { border-top: none; }
.pac-item:hover, .pac-item-selected { background: var(--surface2); }
.pac-item-query { color: var(--text); }
/* Oculta el badge "Powered by Google" del pie del dropdown. La atribución
   de Places la satisface el mapa visible inmediatamente debajo (mismo
   modal), por lo que ocultar el badge cumple con los TOS de Google. */
.pac-container::after { content: none !important; }
.map-modal-footer {
  padding: 12px 16px 16px;
  display: flex; flex-direction: column; gap: 10px;
  flex-shrink: 0;
  background: var(--surface);
  /* Sombra hacia arriba (offset Y negativo) — espejo de la que tiene
     .map-modal-intro: refuerza la sensación de footer flotante sobre el
     mapa, y reemplaza el border-top que ya no aporta. */
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .18);
  position: relative;
  z-index: 1;
}
.map-gps-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 16px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: 50px;
  font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background .15s, transform .1s;
}
.map-gps-btn:hover { background: var(--border); }
.map-gps-btn:active { transform: scale(.97); }
.map-gps-btn:disabled { opacity: .5; pointer-events: none; }
/* Dentro del footer del modal "Ajustar ubicación" (#mapModal) el botón
   "Mi ubicación GPS" comparte fila con Cancelar / Aceptar. Igualamos
   dimensiones para que no haya saltos de altura entre los tres. */
.map-modal-footer .map-gps-btn {
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
}
/* "Confirmar ubicación" arranca atenuado mientras el cliente no movió el
   mapa: data-moved=0. El listener 'idle' le saca esta clase apenas detecta
   un pan, un autocomplete o el setCenter del GPS del splash. */
.btn-checkout.is-pending {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
}
.map-footer-actions { display: flex; gap: 10px; }
.map-footer-actions .btn-checkout { flex: 1; margin: 0; }

/* "Iniciar sesión" del #bienvenidaModal es la opción minoritaria (la
   mayoría de los visitantes son nuevos): la renderizamos como link de
   texto subdued en vez de un segundo botón, para que la jerarquía visual
   refleje la importancia real de cada acción. */
.onb-welcome-link {
  margin-top: 14px;
  background: none;
  border: none;
  padding: 6px 4px;
  font: inherit;
  font-size: .9rem;
  color: var(--text2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.onb-welcome-link:hover { color: var(--text); }
.onb-welcome-link:active { transform: scale(.97); }

/* ===== Fuera de zona modal ===== */
.fuera-zona-modal {
  padding: 28px 22px 24px;
  overflow-y: auto;
  justify-content: flex-start;
}
.fuera-zona-modal .fz-step {
  max-width: 420px;
  width: 100%;
  margin: 24px auto 0;
}
.fuera-zona-modal .fz-icon {
  font-size: 56px;
  text-align: center;
  color: var(--primary);
  margin-bottom: 14px;
}
.fuera-zona-modal .fz-icon-ok { color: #22c55e; }
.fuera-zona-modal .fz-title {
  font-size: 1.25rem; font-weight: 800; color: var(--text);
  text-align: center; margin: 0 0 10px;
}
.fuera-zona-modal .fz-text {
  font-size: .95rem; color: var(--text2);
  text-align: center; line-height: 1.5;
  margin: 0 0 22px;
}
.fuera-zona-modal .form-group { margin-bottom: 14px; }
.fuera-zona-modal .btn-checkout { margin-top: 4px; }

/* ===== Map info modal =====
   Modal corto y bloqueante para informarle al usuario sobre el uso del mapa
   (precisión baja, permiso denegado, etc.). Reemplaza toasts que el cliente
   no llega a ver cuando está enfocado en el mapa. z-index por encima del
   map-modal-wrap (350) para montarse encima sin tapar el botón de cerrar. */
.map-info-wrap {
  display: none;
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0, 0, 0, 0.5);
  align-items: center; justify-content: center;
  padding: 20px;
}
.map-info-wrap.open { display: flex; }
.map-info {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 26px 22px 20px;
  max-width: 340px;
  width: 100%;
  text-align: center;
}
.map-info-icon {
  font-size: 48px;
  color: var(--primary);
  margin-bottom: 10px;
  line-height: 1;
}
.map-info-icon.is-warning { color: #f59e0b; }
.map-info-icon.is-ok { color: #22c55e; }
.map-info-title {
  font-size: 1.15rem; font-weight: 800; color: var(--text);
  margin: 0 0 8px;
}
.map-info-text {
  font-size: .95rem; color: var(--text2);
  line-height: 1.45;
  margin: 0 0 18px;
}
.map-info .btn-checkout { width: 100%; margin: 0; }

/* ===== Bienvenida (pre-prompt) modal =====
   Pantalla inicial con el logo de Repo, mensaje y dos botones agrupados
   en una tarjeta centrada. Respeta el tema (claro/oscuro). */
.bienvenida-modal {
  /* Doble capa: un overlay del color de fondo al 50% encima de la imagen
     para que el mapa quede atenuado (visualmente equivale a opacity: 0.5
     sobre la imagen) y la tarjeta central destaque mejor. */
  background:
    linear-gradient(rgba(128, 128, 128, 0.5), rgba(128, 128, 128, 0.5)),
    url('../img/fondo_mapa.webp') no-repeat center center;
  background-color: #808080;
  /* En mobile (< 768px) la imagen queda en tamaño natural — no la achicamos,
     se ve un recorte central a resolución plena. El overlay siempre cubre el
     viewport completo para mantener el efecto de atenuación parejo. */
  background-size: cover, auto;
  padding: 28px 22px 24px;
  justify-content: center;
  align-items: center;
}
[data-theme="dark"] .bienvenida-modal {
  background:
    linear-gradient(rgba(35, 39, 44, 0.5), rgba(35, 39, 44, 0.5)),
    url('../img/fondo_mapa.webp') no-repeat center center;
  background-color: var(--bg);
  background-size: cover, auto;
}
/* A partir de tablet/laptop la imagen sí se escala con cover para no dejar
   franjas del color de fondo asomando alrededor del recorte natural. */
@media (min-width: 768px) {
  .bienvenida-modal,
  [data-theme="dark"] .bienvenida-modal {
    background-size: cover;
  }
}

.bienvenida-modal .fz-step {
  max-width: 380px;
  width: 100%;
  margin: 0;
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}
.bienvenida-modal .bienvenida-logo {
  width: 50%;
  max-width: 180px;
  height: auto;
  margin: 0 0 20px;
}
/* logo-light/logo-dark conmutan según [data-theme]; con display:block evitamos
   el hueco fantasma del <img> oculto (que sigue siendo inline por defecto). */
.bienvenida-modal .bienvenida-logo.logo-light { display: block; }
[data-theme="dark"] .bienvenida-modal .bienvenida-logo.logo-dark { display: block; }

.bienvenida-modal .fz-text {
  font-size: 1rem;
  color: var(--text2);
  text-align: center;
  line-height: 1.55;
  margin: 0 0 32px;
  max-width: 300px;
}
/* La tarjeta tiene `align-items: center`, lo que shrinkea hijos no-full-width.
   Forzamos el form-group a ocupar todo el ancho para que el input y los OTP
   boxes no queden colapsados. */
.bienvenida-modal .form-group { width: 100%; margin-bottom: 14px; }

/* ===== Geolocation prompt ===== */
.geo-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
  padding: 20px;
}
.geo-overlay.show { display: flex; opacity: 1; pointer-events: all; }

.geo-card {
  background: var(--surface); border-radius: 20px;
  padding: 32px 24px 24px; text-align: center;
  max-width: 340px; width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
  transform: scale(.95) translateY(20px);
  transition: transform .3s;
}
.geo-overlay.show .geo-card { transform: scale(1) translateY(0); }

.geo-icon { font-size: 2.6rem; line-height: 1; margin-bottom: 14px; color: var(--primary); }
.geo-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.geo-desc { font-size: .82rem; color: var(--text2); line-height: 1.5; margin-bottom: 20px; }

.geo-buttons { display: flex; flex-direction: column; gap: 8px; }
.geo-btn {
  width: 100%; padding: 12px; border: none; border-radius: 12px;
  font-size: .92rem; font-weight: 600; cursor: pointer;
  transition: background .15s, transform .1s;
}
.geo-btn:active { transform: scale(.97); }
.geo-btn-primary { background: var(--primary); color: #fff; }
.geo-btn-primary:hover { background: #e55a26; }
.geo-btn-secondary { background: var(--surface2); color: var(--text2); }
.geo-btn-secondary:hover { background: var(--border); }

.order-summary {
  background: var(--surface2); border-radius: var(--radius);
  padding: 14px; margin-bottom: 20px;
}
.order-summary h3 { font-size: 14px; color: var(--text2); margin-bottom: 10px; }
.summary-line { display: flex; justify-content: space-between; font-size: 13px; color: var(--text2); margin-bottom: 4px; }
.summary-total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 800; color: var(--text); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

/* ===== Confirmation screen ===== */
.confirm-screen {
  display: none; flex-direction: column; align-items: center;
  text-align: center; padding: 20px 0 10px;
}
.confirm-screen.show { display: flex; }
.confirm-icon { margin-bottom: 16px; animation: popIn .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }
.confirm-title { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.confirm-num { font-size: 28px; font-weight: 900; color: var(--primary); margin-bottom: 6px; letter-spacing: 1px; }
.confirm-sub { font-size: 14px; color: var(--text2); margin-bottom: 24px; }
.btn-nuevo {
  padding: 14px 32px; background: var(--primary);
  border: none; border-radius: 50px;
  font-size: 15px; font-weight: 700; color: #fff;
  cursor: pointer; box-shadow: 0 4px 16px rgba(255,160,0,.35);
}

/* ===== Bottom nav ===== */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 8px;
}
.nav-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0; border: none; background: transparent;
  cursor: pointer; color: var(--text3);
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
  transition: color .15s;
  position: relative;
}
.nav-tab .nav-icon { display: flex; justify-content: center; }
.nav-tab .nav-icon i { font-size: 22px; }
.nav-tab.active { color: var(--primary); }

/* ===== Feedback visual de error en cajas OTP =====
 * En lugar de un mensaje de texto, se sacuden las cajas en rojo: borde y texto
 * en rojo + animación de shake. Luego el JS las vacía y vuelve al estado normal.
 * Esto evita mensajes que obstruyen el layout y reflows que rompen el foco. */
.otp-boxes.otp-error .otp-box {
  border-color: var(--red) !important;
  color: var(--red);
  background: rgba(239, 68, 68, 0.08);
}
.otp-boxes.otp-error {
  animation: otpShake 0.45s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes otpShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* ===== Toast ===== */
.toast {
  position: fixed; bottom: calc(var(--nav-h) + 16px); left: 50%; z-index: 500;
  transform: translateX(-50%) translateY(20px);
  background: var(--text); color: var(--surface);
  padding: 12px 24px; border-radius: 50px;
  font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: all .25s;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Ícono opcional del toast (showToast(..., { icon })). Va inline al principio
   del mensaje, también en la variante multilínea. */
.toast-icon { margin-right: 8px; }

/* Variante multilínea: pasa de pill compacta a tarjeta y respeta los saltos
   de línea del mensaje. Se usa al tocar el ícono de cambiar ubicación para
   mostrar la dirección actualmente seleccionada. */
.toast.toast-multiline {
  white-space: pre-line;
  border-radius: 16px;
  text-align: center;
  max-width: 86vw;
  line-height: 1.4;
  padding: 14px 22px;
}

/* Cuando el modal del mapa está abierto, el toast se reposiciona arriba.
   Si no, se solapa con el botón "Detectar mi ubicación actual" que vive en
   la barra inferior del modal y lo tapa justo cuando el cliente lo está
   por tocar de nuevo. Usamos :has() para detectar el estado del modal
   sin necesidad de agregar una clase al body desde JS. */
body:has(#onboardingMapModal.map-modal-wrap.open) .toast,
body.otp-modal-open .toast {
  top: calc(env(safe-area-inset-top, 0px) + 20px) !important;
  bottom: auto !important;
  transform: translateX(-50%) translateY(-20px);
  z-index: 1000;
}
body:has(#onboardingMapModal.map-modal-wrap.open) .toast.show,
body.otp-modal-open .toast.show {
  transform: translateX(-50%) translateY(0);
}

/* Variante centrada: ancla el toast al medio de la pantalla, anulando tanto
   la posición default (abajo) como los overrides para modales abiertos
   (arriba). Pensada para feedback bloqueante que requiere atención inmediata
   — ej. validación al intentar confirmar sin haber movido el mapa. */
.toast.toast-center {
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, calc(-50% + 20px)) !important;
}
.toast.toast-center.show {
  transform: translate(-50%, -50%) !important;
}

/* ===== Pedidos section ===== */
#pedidosSection {
  padding: calc(var(--header-h) + 10px) 10px calc(var(--nav-h) + 10px);
}
.pcard {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.pcard-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 12px;
}
.pcard-num   { font-weight: 700; font-size: .95rem; }
.pcard-fecha { font-size: .78rem; color: var(--text2); margin-top: 2px; }
.pcard-estado {
  font-size: .7rem; font-weight: 700; padding: 4px 10px;
  border-radius: 50px; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.pcard-estado-pendiente  { background: #dbeafe; color: #1d4ed8; }
.pcard-estado-preparando { background: #fef3c7; color: #92400e; }
.pcard-estado-listo      { background: #d1fae5; color: #065f46; }
.pcard-estado-entregado  { background: #dcfce7; color: #15803d; }
.pcard-estado-cancelado  { background: #fee2e2; color: #991b1b; }
.pcard-items { border-top: 1px solid var(--border); padding-top: 10px; margin-bottom: 10px; }
.pcard-item  {
  display: flex; justify-content: space-between;
  font-size: .84rem; color: var(--text2); padding: 3px 0;
}
.pcard-item span { font-weight: 600; color: var(--text); }
.pcard-foot    { border-top: 1px solid var(--border); padding-top: 10px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.pcard-total   { font-weight: 700; font-size: 1rem; color: var(--primary); }
.pcard-pago    { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pcard-metodo  { font-size: .72rem; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.pcard-metodo-mp { background: #e8f4fd; color: #009ee3; }
.pcard-metodo-ef { background: #e8f8ed; color: #28a745; }
.pcard-pago-estado  { font-size: .72rem; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
.pcard-pago-aprobado  { background: #d1fae5; color: #059669; }
.pcard-pago-pendiente { background: #fef3c7; color: #d97706; }

/* ===== Perfil section ===== */
#perfilSection {
  padding: 0 10px calc(var(--nav-h) + 10px);
}

.perfil-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px 20px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.perfil-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #ff9f1c);
  color: #fff; font-size: 26px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 20px;
}

.perfil-info {
  width: 100%;
  display: flex; flex-direction: column; gap: 10px;
}

.perfil-nombre {
  font-size: 20px; font-weight: 800; color: var(--text);
  margin-bottom: 4px;
}

.perfil-fila {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2); border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px; color: var(--text2);
  text-align: left;
  min-width: 0;
}
.perfil-fila > span:last-child {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Ancho fijo: correo y teléfono arrancan alineados aunque el glifo FA de cada
   uno tenga distinto ancho natural. */
.perfil-icono {
  font-size: 15px; flex-shrink: 0;
  width: 18px; text-align: center; color: var(--text2);
}

.perfil-btn-edit {
  display: flex; align-items: center; justify-content: center;
  width: 100%; margin-top: 4px; padding: 12px 18px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: 50px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .15s, transform .1s;
  box-shadow: none;
  background-image: none;
}
.perfil-btn-logout {
  width: 100%; margin-top: -6px;
}

.perfil-section-title {
  width: 100%;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  color: var(--text2); letter-spacing: .04em;
  margin: 18px 0 2px; padding: 0 2px;
  text-align: left;
}
.perfil-section-title--row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.dir-add-btn {
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: 50px;
  padding: 4px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; text-transform: none; letter-spacing: 0;
}
.dir-add-btn:active { background: var(--border); }

.dir-lista {
  width: 100%;
  display: flex; flex-direction: column; gap: 8px;
  margin-top: -6px; margin-bottom: 8px;
}
.dir-empty {
  font-size: 13px; color: var(--text2); text-align: center;
  padding: 14px; border: 1px dashed var(--border); border-radius: 12px;
}

.dir-card {
  width: 100%;
  background: var(--surface2); border: none;
  border-radius: 12px; padding: 12px 14px;
  text-align: left;
}
.dir-card-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
/* Ícono FA6 del tipo de dirección (casa / trabajo / otra): ancho fijo para que
   el texto arranque siempre en la misma columna, pase lo que pase con el glifo. */
.dir-card-icon {
  font-size: 16px; color: var(--primary);
  width: 20px; text-align: center; flex-shrink: 0;
}
.dir-card-etiqueta {
  font-size: 14px; font-weight: 700; color: var(--text);
}
.dir-principal-badge {
  margin-left: auto;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--primary); background: transparent;
  border: 1px solid var(--primary); border-radius: 50px;
  padding: 2px 8px;
}
.dir-card-dir   { font-size: 13px; color: var(--text); line-height: 1.4; }
.dir-card-lugar { font-size: 12px; color: var(--text2); margin-top: 2px; }
.dir-card-actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--border);
}
.dir-btn-text {
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--primary);
  padding: 0;
}
.dir-btn-text:active { opacity: .7; }
.dir-btn-danger { color: #dc2626; }

/* Selector de direcciones en Perfil (combobox) */
.dir-select {
  width: 100%;
  position: relative;
  display: flex; flex-direction: column;
}
.dir-select-trigger {
  width: 100%;
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
  cursor: pointer; text-align: left;
}
.dir-select.open .dir-select-trigger {
  border-color: var(--primary);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.dir-select-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.dir-select-chevron {
  color: var(--text2); font-size: 12px;
  align-self: center;
  transition: transform .2s ease;
}
.dir-select.open .dir-select-chevron { transform: rotate(180deg); }

.dir-select-panel {
  display: none;
  background: var(--surface); border: 1.5px solid var(--primary);
  border-top: none;
  border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
  max-height: 260px; overflow-y: auto;
}
.dir-select.open .dir-select-panel { display: block; }

.dir-opt {
  width: 100%;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  background: transparent; border: none; cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.dir-opt:last-child { border-bottom: none; }
.dir-opt:active { background: var(--surface2); }
.dir-opt--activa { background: rgba(255, 160, 0, 0.08); }
.dir-opt-icon {
  font-size: 16px; color: var(--primary);
  width: 20px; text-align: center; flex-shrink: 0;
}
.dir-opt-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.dir-opt-etiqueta { font-size: 14px; font-weight: 700; color: var(--text); }
.dir-opt-dir   { font-size: 13px; color: var(--text); line-height: 1.4; }
.dir-opt-lugar { font-size: 12px; color: var(--text2); }
.dir-opt-check {
  color: var(--primary); font-weight: 700; align-self: center;
}

.dir-select-actions {
  display: flex; flex-wrap: wrap; gap: 16px;
  padding: 8px 4px 0;
}

.check-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text); cursor: pointer;
}
.check-row input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--primary);
}

/* Selector de direcciones en checkout */
.co-dir-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; margin-bottom: 8px;
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: 12px; cursor: pointer;
}
.co-dir-option input[type="radio"] {
  margin-top: 3px; accent-color: var(--primary);
}
/* Dirección elegida: borde primary + fondo apenas teñido. Lo usan por igual el
   paso "¿Dónde lo recibís?" del checkout y el selector "Elegir dirección", así
   que la selección se lee igual en los dos lados, sin depender del texto. */
.co-dir-option--active {
  border-color: var(--primary);
  background: rgba(255, 160, 0, 0.08);
}
/* Variante <button> del .co-dir-option (selector de ubicación desde el header). */
.co-dir-option.co-dir-option-btn {
  width: 100%; text-align: left; font-family: inherit; color: inherit;
  appearance: none; -webkit-appearance: none;
}
.co-dir-option.co-dir-option-btn:hover { border-color: var(--primary); }
.co-dir-icon {
  font-size: 17px; color: var(--primary); flex-shrink: 0;
  width: 22px; text-align: center; margin-top: 1px;
}
.co-dir-text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
}
.co-dir-etiqueta { font-size: 14px; font-weight: 700; color: var(--text); }
.co-dir-principal { font-size: 11px; color: var(--primary); font-weight: 600; }
.co-dir-dir   { font-size: 13px; color: var(--text); }
.co-dir-lugar { font-size: 12px; color: var(--text2); }
.co-dir-zona {
  font-size: 12px; font-weight: 600; color: var(--primary);
  margin-top: 2px;
}
.co-dir-zona.co-dir-zona--off { color: var(--text2); font-weight: 500; font-style: italic; }
/* Tarjeta de alta: misma caja que una dirección guardada, pero con borde
   punteado y el "+" a la derecha para que se lea como acción y no como una
   opción más de la lista. */
.co-dir-option--add {
  align-items: center;
  border-style: dashed; background: transparent;
}
.co-dir-option--add .co-dir-etiqueta { color: var(--text2); }
.co-dir-add-plus {
  flex-shrink: 0; font-size: 14px; color: var(--primary);
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.co-dir-option--add:hover .co-dir-etiqueta { color: var(--text); }
.perfil-empty {
  text-align: center; padding: 60px 20px;
  color: var(--text3);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.perfil-empty-icon { margin-bottom: 4px; }
.perfil-empty p    { font-size: 15px; font-weight: 600; color: var(--text2); }
.perfil-empty small { font-size: 13px; }

.perfil-geo-link {
  color: var(--primary); font-weight: 600; font-size: 13px;
  text-decoration: none;
}
.perfil-geo-link:hover { text-decoration: underline; }

.perfil-btn-ubic {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 8px 16px;
  border: none; border-radius: 50px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s, transform .1s;
}
.perfil-btn-ubic:active { transform: scale(.95); }
.perfil-btn-ubic--detectar {
  background: var(--primary); color: #fff;
}
.perfil-btn-ubic--detectar:hover { background: var(--primary-dk); }
.perfil-btn-ubic--quitar {
  background: var(--surface2); color: var(--text2);
  border: 1px solid var(--border);
}
.perfil-btn-ubic--quitar:hover { background: var(--surface3, var(--surface2)); }

.perfil-geo-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2); border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.perfil-geo-status {
  flex: 1; display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text2);
}
/* Semáforo del pin: verde = ubicación marcada, gris = todavía falta.
   Reemplaza a los círculos 🟢 / ⚪. */
.perfil-geo-ico { font-size: 14px; }
.perfil-geo-ico--ok   { color: #22c55e; }
.perfil-geo-ico--pend { color: var(--text3, var(--text2)); }
.perfil-geo-btn {
  flex-shrink: 0; padding: 7px 16px;
  background: var(--primary); color: #fff;
  border: none; border-radius: 50px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s, transform .1s;
}
.perfil-geo-btn:active  { transform: scale(.95); }
.perfil-geo-btn:hover   { background: var(--primary-dk); }
.perfil-geo-btn:disabled { opacity: .5; pointer-events: none; }

/* ===== Loading spinner ===== */
.spinner {
  grid-column: 1 / -1;
  display: flex; justify-content: center; padding: 40px;
  color: var(--text3);
}
.spin {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Spinner de "cargando más" para el scroll infinito (más chico que el inicial). */
.spinner-load-more { padding: 20px; }
.spinner-load-more .spin { width: 24px; height: 24px; border-width: 2px; }

/* Centinela invisible al final del grid; ocupa toda la fila y dispara IntersectionObserver. */
.products-sentinel { grid-column: 1 / -1; height: 1px; }

/* "Descubrí más" — feed vertical infinito al final del home.
   Anula el padding-bottom de `.products` porque `#homeView` ya reserva el
   espacio para la bottom-nav. Sin esto, la última fila queda con doble margen. */
.home-descubri-section { margin-bottom: 0; }
.home-descubri-grid { padding-bottom: 0; }
.home-descubri-sentinel { height: 1px; width: 100%; }

/* Skeleton de cards (shimmer) mientras carga la primera página.
   Sin título arriba — el título recién aparece con contenido real. Reusa la
   animación @keyframes home-skel-shimmer ya definida para los carruseles. */
.home-descubri-skel {
  height: 240px;
  border-radius: var(--radius);
  background: var(--surface2);
  position: relative;
  overflow: hidden;
}
.home-descubri-skel::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  animation: home-skel-shimmer 1.2s ease-in-out infinite;
}

/* CTA "Mejor, decinos qué buscás" — aparece cuando se agota el feed
   "Descubrí más". Misma paleta que las cards de productos (fondo
   `--surface2`, sombra sutil), sin glow naranja. El acento de marca
   queda solo en el botón de envío. margin-top grande para separar
   bien la tarjeta de la última fila de productos. */
.home-cta-busquedas {
  margin: 40px 12px 28px;
  padding: 22px 20px;
  border-radius: 16px;
  background: var(--surface2);
  color: var(--text);
  box-shadow: var(--shadow);
}
.home-cta-busquedas-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
}
.home-cta-busquedas-icon {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.home-cta-busquedas-body { flex: 1; min-width: 0; }
.home-cta-busquedas-title { font-weight: 800; font-size: 1rem; line-height: 1.25; margin-bottom: 2px; color: var(--text); }
.home-cta-busquedas-sub   { font-size: .85rem; line-height: 1.3; color: var(--text2); }

/* Buscador embebido: input + botón redondo con flecha. El input toma
   el color superficial del propio app para integrarse con la tarjeta. */
.home-cta-busquedas-form {
  display: flex; align-items: stretch; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 4px 4px 16px;
}
.home-cta-busquedas-input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: inherit; font-size: .95rem;
  color: var(--text);
  padding: 8px 0;
}
.home-cta-busquedas-input::placeholder { color: var(--muted); }
.home-cta-busquedas-btn {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%; border: none; cursor: pointer;
  background: var(--primary); color: #fff;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s ease, background .15s ease;
}
.home-cta-busquedas-btn:active { transform: scale(.94); }
.home-cta-busquedas-btn:disabled { opacity: .6; cursor: not-allowed; }

.home-cta-busquedas-feedback {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .88rem;
  line-height: 1.35;
  text-align: center;
  color: var(--text);
}
.home-cta-busquedas-feedback strong { font-weight: 700; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ===== Product Detail Modal ===== */
.product-modal { max-width: none; padding: 0 4px 24px; }
/* En desktop limitamos el ancho del modal y hacemos que la foto se adapte a
   la altura disponible: sin esto, aspect-ratio 1/1 hace crecer la imagen y
   empuja los botones (Agregar al carrito / Volver) fuera del viewport. */
@media (min-width: 768px) {
  .product-modal {
    max-width: 480px;
    height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .product-modal .modal-handle { flex-shrink: 0; }
  .product-modal .product-detail-img {
    aspect-ratio: auto;
    flex: 1 1 0;
    min-height: 0;
  }
  .product-modal .product-detail-body { flex-shrink: 0; }
}
.product-detail-img {
  margin: 4px 0 12px;
  background: #ffffff;
  border-radius: var(--radius);
  display: flex; justify-content: center; align-items: center;
  padding: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
}
/* Listón "Oferta" del modal. Reusa `.ribbon-oferta` del listado —el mismo
   rojo, la misma rotación de 45°— y sólo lo reescala: aquel está medido para
   la tarjeta de ~145 px y sobre la foto del modal quedaría como una marca
   diminuta en la esquina. Mismos números que `.ficha-ribbon` en producto.css,
   porque las dos fotos son del mismo tamaño.
   El `overflow:hidden` de `.product-detail-img` es el que lo recorta en
   diagonal contra el borde, igual que en la tarjeta. */
.pd-ribbon {
  top: 30px; left: -62px;
  width: 210px;
  font-size: 15px;
  padding: 5px 0;
}
/* Círculo del descuento del modal. Reusa `.badge-descuento` del listado —el
   mismo círculo oscuro con el porcentaje en blanco— y sólo lo reescala, por lo
   mismo que el listón: aquel mide 40 px sobre una tarjeta de ~145 y acá
   quedaría como una mota. Mismos números que `.ficha-descuento` en
   producto.css, porque las dos fotos son del mismo tamaño.

   El `[hidden]` necesita la regla de abajo: `.badge-descuento` declara
   `display:flex`, y una regla de autor le gana al `[hidden] { display:none }`
   de la hoja del navegador. Sin esto, el badge quedaría visible y vacío en
   todos los productos sin descuento. */
.pd-descuento {
  bottom: 10px; left: 10px;
  width: 56px; height: 56px;
  font-size: 15px;
}
.pd-descuento[hidden] {
  display: none;
}
.pd-fav-btn {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--primary), #ff9f1c);
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; cursor: pointer; color: rgba(255,255,255,.5);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  transition: color .15s, transform .15s;
}
.pd-fav-btn:active { transform: scale(.95); }
.pd-fav-btn.active { color: rgba(255,255,255,1); }
.pd-share-btn {
  position: absolute; bottom: 10px; right: 10px;
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--primary), #ff9f1c);
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; cursor: pointer; color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  transition: transform .15s;
}
.pd-share-btn:active { transform: scale(.95); }
.product-detail-img img {
  width: 100%; height: 100%; object-fit: contain;
  cursor: zoom-in;
}

/* ===== Image Lightbox (ampliación foto producto) ===== */
.img-lightbox {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0, 0, 0, .88);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .2s;
}
.img-lightbox.open {
  display: flex;
  opacity: 1;
}
.img-lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.img-lightbox-close {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: #fff;
  color: #111;
  border: none;
  border-radius: 50px;
  padding: 12px 32px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.img-lightbox-close:active { transform: translateX(-50%) scale(.97); }
.product-detail-body { padding: 0 12px; }
/* Es un `<h1>` (ver index.php): hay que anular el font-size y los márgenes
   que le pone la hoja del navegador para que quede igual que cuando era un
   `<div>`. */
.product-detail-name {
  font-size: 20px; font-weight: 700; color: var(--text);
  margin: 0 0 4px;
  line-height: 1.3;
}
.product-detail-unit {
  font-size: 14px; color: var(--text2); margin-bottom: 8px;
}
.product-detail-price {
  font-size: 22px; font-weight: 800; color: var(--primary);
  margin-bottom: 6px;
}
.product-detail-stock {
  font-size: 13px; margin-bottom: 16px;
}
.product-detail-stock.in-stock { color: var(--green); }
.product-detail-stock.out-stock { color: var(--red); }

.product-detail-actions {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 120px; justify-content: flex-end;
}
.pd-qty-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 7px 6px;
  background: var(--qty-bg);
  border: 1px solid var(--border); border-radius: 50px;
}
.pd-qty-btn {
  width: 80px; height: 36px; border-radius: 50px; border: none;
  background: var(--primary); color: #fff;
  font-size: 20px; font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, transform .1s;
}
.pd-qty-btn:active { transform: scale(.95); background: var(--primary-dk); }
.pd-qty-label {
  flex: 1; text-align: center;
  font-size: 18px; font-weight: 700; color: var(--text2);
}
.btn-back {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 18px;
  background: var(--qty-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 50px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn-back:active { transform: scale(.97); }
.btn-back:hover { background: var(--border); }

/* ===== Modal detalle pedido ===== */
.ped-modal-backdrop {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.5); align-items: flex-end; justify-content: center;
}
.ped-modal-backdrop.open { display: flex; }
.ped-modal {
  background: var(--surface); border-radius: 20px 20px 0 0;
  width: 100%; max-width: 540px; max-height: 88vh;
  display: flex; flex-direction: column;
  animation: slideUp .25s ease;
}
.ped-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 20px 12px; border-bottom: 1px solid var(--border);
}
.ped-modal-num  { font-size: 1.2rem; font-weight: 800; color: var(--text); }
.ped-modal-fecha { font-size: .8rem; color: var(--text3); margin-top: 2px; }
.ped-modal-body { overflow-y: auto; padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 16px; }
.pm-badge { display: inline-block; padding: 5px 14px; border-radius: 50px; font-weight: 700; font-size: .85rem; }
.pm-steps { display: flex; align-items: flex-start; gap: 0; }
.pm-step  { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.pm-step-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; z-index: 1; }
.pm-step-dot.done    { background: #22c55e; color: #fff; }
.pm-step-dot.active  { background: #f59e0b; color: #fff; box-shadow: 0 0 0 4px #fef3c7; }
.pm-step-dot.pending { background: var(--border); color: var(--text3); }
.pm-step-label { font-size: .6rem; color: var(--text3); margin-top: 5px; text-align: center; }
.pm-step-line { position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; z-index: 0; }
.pm-step-line.done    { background: #22c55e; }
.pm-step-line.pending { background: var(--border); }
.pm-estado-wrap { text-align: center; }
.pm-section { display: flex; flex-direction: column; gap: 0; }
.pm-section-title { font-size: .72rem; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.pm-item-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pm-item-row:last-child { border-bottom: none; }
.pm-item-nombre { font-size: .9rem; color: var(--text); font-weight: 500; }
.pm-item-cant   { font-size: .78rem; color: var(--text3); }
.pm-item-precio { font-size: .9rem; font-weight: 600; color: var(--text); }
.pm-total-row { display: flex; justify-content: space-between; padding-top: 12px; font-weight: 800; font-size: 1.05rem; color: var(--text); }
.pm-pago-row  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Tarjetas dentro del modal de detalle: el body ya usa gap, así que anulamos el margin-bottom */
.ped-modal-body .pm-card { margin-bottom: 0; }
.pm-productos-card { padding: 12px 16px 4px; }
.pm-card-titulo {
  font-size: 11px; font-weight: 600; color: var(--text2);
  text-transform: uppercase; letter-spacing: .04em;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0 8px;
}
.pm-card-titulo i { color: var(--primary); font-size: 14px; }

/* ===== Checkout confirm step ===== */
.co-user-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px;
}
.co-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800; flex-shrink: 0;
}
.co-user-info { display: flex; flex-direction: column; gap: 4px; }
.co-user-name { font-size: 15px; font-weight: 700; color: var(--text); }
.co-user-detail { font-size: 13px; color: var(--text2); display: flex; align-items: center; gap: 6px; }
.co-detail-icon { font-size: 11px; color: var(--text3); }
.co-section-label { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.co-address {
  font-size: 14px; color: var(--text); background: var(--surface2);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 11px 14px; margin-bottom: 18px;
}
.co-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.co-item { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.co-item-name { color: var(--text); }
.co-item-qty { color: var(--text3); font-size: 12px; }
.co-item-price { font-weight: 600; color: var(--text); }
.co-total-row {
  display: flex; justify-content: space-between;
  font-size: 16px; font-weight: 800; color: var(--text);
  border-top: 1.5px solid var(--border); padding-top: 10px; margin-bottom: 20px;
}

/* ===== Método de pago ===== */
.co-pago-options { display: flex; gap: 10px; margin-bottom: 16px; }
.co-pago-opt {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 8px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text2); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.co-pago-opt i { font-size: 22px; }
.co-pago-opt.active {
  border-color: var(--primary); color: var(--primary);
  background: rgba(255,160,0,.08);
}

/* ===== OTP Login ===== */
.otp-sub { font-size: 14px; color: var(--text2); margin-bottom: 20px; line-height: 1.5; }
.otp-sub strong { color: var(--text); }

/* Saludo del modal de bienvenida post-login (reemplaza al 👋). */
.bienvenida-icon {
  font-size: 54px; line-height: 1; margin: 4px 0 10px;
  color: var(--primary);
}
.otp-actions { display: flex; gap: 10px; margin-top: 10px; }
.otp-actions .btn-checkout { flex: 1 1 0; padding: 14px 8px; font-size: 14px; }
.btn-checkout-secondary {
  background: var(--border);
  color: var(--text2);
  margin-top: 10px;
}

/* ===== Ingreso con Google =====
   Alternativa al OTP por correo, presente en los tres puntos de ingreso
   del cliente (checkout, login inicial y modal de login). El botón respeta
   el branding de Google: fondo claro con borde gris y logo a la izquierda,
   más la variante oscura oficial para el tema dark. Los colores van
   hardcodeados a propósito — son los de la marca Google, no los nuestros. */
.auth-sep {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 12px;
  font-size: 13px; color: var(--text3);
}
.auth-sep::before, .auth-sep::after {
  content: ''; flex: 1 1 0; height: 1px; background: var(--border);
}
.btn-google {
  width: 100%; padding: 14px;
  background: #fff; color: #1f1f1f;
  border: 1px solid #747775; border-radius: 50px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .15s, transform .1s;
}
.btn-google:hover  { background: #f7f8f8; }
.btn-google:active { transform: scale(.97); }
.btn-google svg    { width: 18px; height: 18px; flex-shrink: 0; }
[data-theme="dark"] .btn-google {
  background: #131314; color: #e3e3e3; border-color: #8e918f;
}
[data-theme="dark"] .btn-google:hover { background: #1e1f20; }
.otp-boxes {
  display: flex; justify-content: center; gap: 8px;
  margin: 8px 0 20px;
}
.otp-box {
  width: 44px; height: 54px;
  text-align: center;
  font-size: 22px; font-weight: 700;
  color: var(--text);
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  outline: none;
  caret-color: var(--primary);
  transition: border-color .15s, transform .1s;
  -moz-appearance: textfield;
  appearance: textfield;
}
.otp-box::-webkit-outer-spin-button,
.otp-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.otp-box:focus { border-color: var(--primary); transform: scale(1.05); }
.otp-box:not(:placeholder-shown) { border-color: var(--primary); }
@media (max-width: 360px) {
  .otp-boxes { gap: 6px; }
  .otp-box { width: 38px; height: 48px; font-size: 20px; }
}
.perfil-login-btn { margin-top: 20px; width: 100%; }

/* ===== Botón cancelar pedido (modal detalle) ===== */
.btn-continuar-pago {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 14px; margin-bottom: 0; padding: 12px 18px;
  background: #009ee3; color: #fff;
  border: none; border-radius: 50px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.btn-continuar-pago:active { background: #0082c0; }
.btn-continuar-pago:disabled { opacity: .6; cursor: default; }
.btn-cancelar-pedido {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 4px; padding: 12px 18px;
  background: transparent; color: var(--red);
  border: 1px solid var(--red); border-radius: 50px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.btn-cancelar-pedido:active { background: rgba(239,68,68,.08); }
.btn-cancelar-pedido:disabled { opacity: .6; cursor: default; }

/* ===== Toggle switch (Configuración) ===== */
.toggle-row {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  margin-bottom: 8px;
}
.toggle-label { font-size: .9rem; font-weight: 600; color: var(--text); }
.toggle-switch { display: flex; align-items: center; cursor: pointer; }
.toggle-switch input { display: none; }
.toggle-track {
  width: 44px; height: 24px; border-radius: 12px;
  background: var(--border); position: relative; transition: background .2s;
}
.toggle-switch input:checked + .toggle-track { background: var(--primary); }
.toggle-switch input:disabled + .toggle-track { opacity: .5; }
.toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-track .toggle-thumb { transform: translateX(20px); }

/* Bajada de una .toggle-row: explica qué hace la opción elegida. */
.toggle-hint {
  font-size: .78rem; color: var(--text2); line-height: 1.35;
  padding: 0 4px 10px; margin-top: -4px;
}

/* ===== Banner iOS: instalar PWA ===== */
/* ===== Checkout: paso resumen ===== */
.co-resumen {
  display: flex; flex-direction: column; gap: 0;
  border: 1.5px solid var(--border); border-radius: 14px;
  overflow: hidden; margin-bottom: 16px;
}
.co-resumen-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.co-resumen-row:last-child { border-bottom: none; }
.co-resumen-icon {
  font-size: 17px; color: var(--primary);
  flex-shrink: 0; width: 22px; text-align: center; padding-top: 1px;
}
.co-resumen-content {
  display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
}
.co-resumen-label {
  font-size: 11px; font-weight: 600; color: var(--text2);
  text-transform: uppercase; letter-spacing: .04em;
}
.co-resumen-valor {
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.co-resumen-detalles-btn {
  flex-shrink: 0; align-self: center;
  padding: 5px 12px; border-radius: 50px;
  border: 1.5px solid var(--primary); background: transparent;
  color: var(--primary); font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s;
}
.co-resumen-detalles-btn:active { background: rgba(255,160,0,.12); }
.co-resumen-pago {
  border: 1.5px solid var(--border); border-radius: 14px;
  padding: 4px 16px;
  margin-bottom: 16px;
}
.co-resumen-desglose {
  margin-bottom: 0;
}
#envioInfoIcon {
  color: var(--primary); cursor: pointer;
  font-size: 13px; vertical-align: middle; margin-left: 5px;
}
.envio-desglos-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--text2);
}
.envio-desglos-row span:last-child { font-weight: 600; color: var(--text); }
.envio-desglos-row.total {
  border-bottom: none; padding-top: 12px; margin-top: 4px;
  font-size: 15px; font-weight: 700; color: var(--text);
}
.envio-desglos-row.total span:last-child { font-size: 18px; color: var(--primary); }
.co-resumen-desglose-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 4px;
  font-size: 13px; color: var(--text2);
  border-top: 1px solid var(--border);
}
.co-resumen-desglose-row:first-child { border-top: none; }
.co-resumen-desglose-row span:last-child { font-weight: 600; color: var(--text); }
.co-desglose-icon {
  color: var(--primary);
  width: 18px; text-align: center;
  margin-right: 8px;
}
.co-resumen-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 4px; margin-bottom: 0;
  font-size: 15px; font-weight: 700; color: var(--text);
  border-top: 1.5px solid var(--border);
}
.co-resumen-total span:last-child { font-size: 22px; color: var(--primary); }

/* ===== Selector de etiqueta de dirección (Casa / Trabajo / Otra) ===== */
.etq-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.etq-opt {
  flex: 1; padding: 10px 8px; border-radius: 50px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text2); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  min-width: 90px; white-space: nowrap;
}
.etq-opt.active {
  border-color: var(--primary); color: var(--primary);
  background: rgba(255,160,0,.08);
}
.etq-input { margin-top: 8px; }

/* ===== Checkout: paso horario de entrega ===== */
.co-horario-fechas {
  display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
}
.co-horario-fecha-btn {
  flex: 1; padding: 10px 8px; border-radius: 50px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text2); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  min-width: 80px;
}
.co-horario-fecha-btn.active {
  border-color: var(--primary); color: var(--primary);
  background: rgba(255,160,0,.08);
}
.co-horario-fecha-btn.disabled,
.co-horario-fecha-btn:disabled {
  opacity: .5; cursor: not-allowed;
  background: #f0f0f0; color: #999; border-color: #ddd;
}
.co-propina { margin: 14px 0 17px; }
.co-propina-titulo {
  font-size: .92rem; font-weight: 600; color: var(--text);
  margin-bottom: 8px;
}
.co-propina-opts { gap: 6px; margin-bottom: 8px; flex-wrap: nowrap; }
.co-propina-btn {
  flex: 1 1 0;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 700;
  min-width: 0;
}
.co-horario-franjas {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px;
}
.co-horario-franja {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 14px;
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text2); font-size: 14px; cursor: pointer; text-align: left;
  transition: border-color .15s, color .15s, background .15s;
  width: 100%;
}
.co-horario-franja.active {
  border-color: var(--primary); color: var(--text);
  background: rgba(255,160,0,.08);
}
.co-horario-franja.disabled,
.co-horario-franja:disabled {
  opacity: .5; cursor: not-allowed;
  background: #f0f0f0; border-color: #ddd;
}
.co-horario-franja.disabled .co-horario-franja-icon,
.co-horario-franja:disabled .co-horario-franja-icon { color: #aaa; }
.co-horario-franja.disabled .co-horario-franja-titulo,
.co-horario-franja:disabled .co-horario-franja-titulo,
.co-horario-franja.disabled .co-horario-franja-sub,
.co-horario-franja:disabled .co-horario-franja-sub { color: #999; }
.co-horario-franja-icon {
  font-size: 20px; color: var(--primary); flex-shrink: 0;
  width: 28px; text-align: center;
}
.co-horario-franja.active .co-horario-franja-icon { color: var(--primary); }
.co-horario-franja-texto { display: flex; flex-direction: column; gap: 2px; }
.co-horario-franja-titulo { font-weight: 700; font-size: 14px; color: var(--text); }
.co-horario-franja-sub { font-size: 12px; color: var(--text2); }

.pwa-installed-screen {
  display: none; position: fixed; inset: 0; z-index: 3000;
  background: var(--surface); color: var(--text);
  flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 24px; text-align: center;
}
.pwa-installed-screen.open { display: flex; }
.pwa-installed-screen img { height: 60px; width: auto; margin-bottom: 28px; }
.pwa-installed-title {
  font-size: 1.4rem; font-weight: 700; margin-bottom: 14px;
}
.pwa-installed-text {
  font-size: .95rem; color: var(--text2); line-height: 1.5;
  margin: 0 0 12px; max-width: 320px;
}
.pwa-installed-text b { color: var(--primary); }

.ios-install-backdrop {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.55);
  align-items: center; justify-content: center;
  padding: 16px;
}
.ios-install-backdrop.open { display: flex; animation: fadeIn .2s ease-out; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.ios-install-card {
  position: relative;
  background: var(--surface); color: var(--text);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
  max-width: 380px; width: 100%;
  box-shadow: var(--shadow-lg);
}
.ios-install-close {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: none; color: var(--text2);
  cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.ios-install-close:active { background: rgba(0,0,0,.06); }
.ios-install-icon {
  font-size: 34px; color: var(--primary);
  text-align: center; margin-bottom: 8px;
}
.ios-install-title {
  font-size: 1.05rem; font-weight: 700;
  text-align: center; margin-bottom: 8px;
}
.ios-install-text {
  font-size: .85rem; color: var(--text2);
  text-align: center; margin-bottom: 12px; line-height: 1.4;
}
.ios-install-steps {
  padding-left: 20px; font-size: .85rem; color: var(--text);
}
.ios-install-steps li { margin-bottom: 6px; }
.ios-install-steps b { color: var(--primary); }

/* ===== Splash de arranque =====
   Cubre la chrome de la app entre el primer paint y el final del init
   (cuando ya resolvimos zona/depósito y pintamos el home). Evita el flicker
   de "ver categorías + banners → modal te tapa" para invitados sin cache.
   El html.booting se setea inline en el <head> y se quita al final del
   DOMContentLoaded en app.js (removeClass('booting') sobre <html>). */
#bootSplash {
  display: none;
  position: fixed; inset: 0;
  /* z-index 150 = arriba de header (100) y navbar, abajo de TODOS los modales
     (.modal-wrap 300, .map-modal-wrap 350, .modal-overlay 400, .map-info-wrap
     600, version-update 1100). Así el splash tapa la chrome sin necesidad de
     visibility:hidden, y los modales (bienvenida/mapa) abren naturalmente por
     encima — el usuario puede confirmar la ubicación sin esperar a que se quite
     el splash. El splash se quita al final del init en app.js. */
  z-index: 150;
  background: var(--bg);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 24px;
}
html.booting #bootSplash { display: flex; }

#bootSplash .boot-logo {
  height: 36px; width: auto;
}
/* logo-light/logo-dark conmutan vía [data-theme] (regla global, línea 114). */
#bootSplash .boot-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: bootSpin .7s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #bootSplash .boot-spinner { animation: none; }
}

/* =====================================================================
   SEO: enlaces rastreables y contenido renderizado en servidor
   =====================================================================
   La app es una SPA sin `<a href>`: toda la navegación era por JS, así que
   Google sólo descubría productos por el sitemap y los priorizaba poco.
   Ahora las tarjetas, chips de categoría, "Ver todo", breadcrumbs y
   relacionados son enlaces reales a /producto/… y /categoria/…; el click lo
   intercepta la SPA (interceptarLinksInternos en app.js) y sigue abriendo el
   modal / filtrando sin recargar.

   Estas reglas sólo neutralizan el estilo de link del navegador en los
   elementos que pasaron de <button> a <a>: el aspecto no cambia. */

.cat-btn,
.subcat-btn,
.home-cat-circle,
.home-section-link,
.card-link {
  text-decoration: none;
  font-family: inherit;
}
.home-cat-circle { color: inherit; }

/* Enlace estirado sobre la tarjeta de producto. Va último en el DOM y por
   encima de la imagen (z-index 3, la imagen usa 1); los controles de la
   tarjeta suben a 4 para seguir recibiendo sus propios clicks. */
.card-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}
.card-fav-btn { z-index: 4; }
.card-add-btn,
.card-qty-row { position: relative; z-index: 4; }

/* El overlay de "nueva versión disponible" arranca vacío y con [hidden] para
   que su texto no esté en el HTML inicial (Google lo leía como contenido de
   la página). La regla base le pone display:flex, que gana al hidden del
   navegador, así que hace falta ser explícito. */
.confirm-modal-overlay[hidden] { display: none; }

/* ── Bloque renderizado en servidor (lib/seo.php) ─────────────────────
   Es lo que ve un crawler que no ejecuta JS y el usuario mientras el JS no
   arrancó. app.js lo elimina al inicio de su DOMContentLoaded, así que en
   uso normal se ve una fracción de segundo: va como capa fija sobre la
   chrome para no empujar el layout ni provocar salto al desaparecer. */
.seo-content {
  position: fixed;
  inset: 0;
  z-index: 140;
  overflow-y: auto;
  background: var(--bg);
  color: var(--text);
  padding: 20px 16px 40px;
  font-size: 14px;
  line-height: 1.55;
}
/* La home no pinta nada visible: su bloque es sólo el H1 y el nav de
   categorías para el crawler. */
.seo-content--home { position: static; inset: auto; padding: 0; background: none; }

/* Contenido presente para lectores de pantalla y crawlers, fuera de la vista.
   No es cloaking: los mismos destinos están como círculos de categoría en el
   home, esto es su equivalente en enlaces. */
.seo-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.seo-content a { color: var(--primary); }

.seo-breadcrumb ol {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 14px; padding: 0;
  font-size: 12px; color: var(--text3);
}
.seo-breadcrumb li + li::before { content: '›'; margin-right: 6px; color: var(--text3); }

.seo-producto-img {
  display: block;
  width: min(280px, 70vw); height: auto;
  margin: 0 auto 16px;
  background: #fff;
  border-radius: var(--radius);
}
.seo-producto-h1,
.seo-categoria-h1 {
  font-size: 20px; font-weight: 800; line-height: 1.25;
  margin: 0 0 8px;
}
.seo-producto-pres,
.seo-categoria-sub { margin: 0 0 8px; color: var(--text2); }
.seo-producto-precio { margin: 0 0 6px; font-size: 20px; }
.seo-producto-precio s { color: var(--text3); font-size: 15px; margin-right: 6px; }
.seo-producto-off { color: var(--red); font-weight: 700; font-size: 14px; }
.seo-producto-stock,
.seo-producto-cat { margin: 0 0 6px; color: var(--text2); font-size: 13px; }

.seo-relacionados h2 { font-size: 16px; font-weight: 700; margin: 24px 0 12px; }

.seo-subcats ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 16px; padding: 0;
}
.seo-subcats a {
  display: inline-block;
  padding: 6px 13px; border-radius: 50px;
  background: var(--surface); border: 1.5px solid var(--border);
  font-size: 12px; font-weight: 600; text-decoration: none;
}

.seo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.seo-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px;
  background: var(--surface2);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
}
.seo-card-img {
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius);
}
.seo-card-name { font-size: 13px; font-weight: 600; }
.seo-card-pres { font-size: 11px; color: var(--text3); }
.seo-card-price { font-size: 14px; font-weight: 700; color: var(--primary); }
.seo-card-price s { color: var(--text3); font-weight: 400; font-size: 12px; }

.seo-paginacion ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 20px 0 0; padding: 0;
  font-size: 13px;
}
.seo-paginacion a,
.seo-paginacion span {
  display: inline-block; min-width: 32px;
  padding: 6px 10px; border-radius: 8px;
  border: 1.5px solid var(--border);
  text-align: center; text-decoration: none;
}
.seo-paginacion span[aria-current] {
  background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700;
}
.seo-categoria-vacia { color: var(--text3); }