/* ────────────────────────────────────────────────────────────────────────
   ojoalprecio — mobile-first stylesheet
   Aesthetic direction: camelcamelcamel — dense, near-monochrome, sans-serif,
   minimal chrome. The base styles below are tuned for ~360px viewports;
   tablet and desktop refinements live in the (min-width) media queries
   at the bottom.

   Breakpoints (min-width):  640 (sm)   1024 (md)   1280 (lg)
   ──────────────────────────────────────────────────────────────────────── */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* Palette — kept compatible with the previous values so the EJS class
     names continue to make sense. Slightly desaturated for the
     camelcamelcamel feel.                                              */
  --red:        #b53847;   /* warm muted red — internal app actions (Crear alerta, Añadir producto…) */
  --red-hover:  #95212f;   /* a touch darker for hover states */
  --red-light:  #fbeef0;
  --red-border: #ecc7cc;
  /* Amazon Prime blue — reserved for affiliate CTAs (.btn-amazon, .amazon-link)
     so "go to Amazon" reads as a distinct, branded action. */
  --amazon:        #00a8e1;
  --amazon-hover:  #0088b8;
  /* AliExpress brand orange — same purpose as --amazon, distinguishes
     "go to AliExpress" buttons from internal red and Amazon blue. */
  --aliexpress:        #e62e04;
  --aliexpress-hover:  #c22504;
  --green:      #198754;
  --gray-50:    #fafafa;
  --gray-100:   #f3f4f6;
  --gray-200:   #e5e7eb;
  --gray-300:   #d1d5db;
  --gray-400:   #9ca3af;
  --gray-500:   #6b7280;
  --gray-600:   #4b5563;
  --gray-700:   #374151;
  --gray-900:   #111827;
  --white:      #ffffff;

  /* Type scale */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   19px;
  --fs-2xl:  22px;
  --fs-3xl:  26px;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Surfaces — camelcamelcamel-leaning: tighter radii, near-flat */
  --radius:    6px;
  --radius-sm: 3px;
  --shadow:    none;
  --shadow-md: 0 2px 4px rgba(0,0,0,.04);

  /* Layout */
  --bottom-nav-h: 56px;
  --header-h:     52px;
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  font-size: var(--fs-base);
  background: var(--gray-50);
  color: var(--gray-900);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: none; }

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.navbar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 0 var(--sp-4);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--gray-900);
  text-decoration: none;
}
.brand-icon { font-size: 20px; }
.brand-name { letter-spacing: -0.3px; }

.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.navbar-actions::-webkit-scrollbar { display: none; }

.user-email {
  font-size: var(--fs-sm);
  color: var(--gray-500);
  /* Truncate long emails on narrow viewports so the navbar doesn't blow up */
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-email-link {
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-2);
  transition: background .15s, color .15s;
}
.user-email-link:hover {
  background: var(--gray-100);
  color: var(--gray-900);
  text-decoration: none;
}

/* ── Navbar search ───────────────────────────────────────────────────────── */
/* Hidden by default (mobile uses bottom-nav "Buscar"). Tablet+ shows the
   inline form so desktop users have a single entry point on every page
   variant. The input itself uses the design-system .input class — sizing
   here is just container width + margins so the field is prominent without
   crowding brand/actions. */
.navbar-search { display: none; }
@media (min-width: 640px) {
  /* 3-column grid: brand (auto), search column (1fr), actions (auto).
     `auto` lets brand + actions claim their content width FIRST, so the
     search never steals from them — at narrow widths the search shrinks
     instead of overlapping "Ofertas" / "Admin" / user email. The form
     inside is capped at 720px and `margin: 0 auto` keeps it visually
     centered within whatever space its column ends up with. */
  .navbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--sp-4);
  }
  .navbar-brand   { justify-self: start; }
  .navbar-actions { justify-self: end;   }
  .navbar-search {
    display: flex;
    justify-self: stretch;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
  }
  /* Slightly tighter than a form .input — the navbar is shorter than a
     dedicated form context, and the smaller padding keeps the search
     visually balanced with brand + nav-links on the same row. */
  .navbar-search .input { padding: 7px 12px; font-size: var(--fs-md); }
}

/* ── Container ───────────────────────────────────────────────────────────── */
.container,
.container-wide {
  width: 100%;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4);
  flex: 1;
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.page-header { margin-bottom: var(--sp-5); }
.page-header h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.4px; line-height: 1.2; }
.subtitle { color: var(--gray-500); font-size: var(--fs-base); margin-top: var(--sp-1); }

/* ── Card ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
  margin-bottom: var(--sp-4);
}
.card h2 { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--sp-3); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  /* Larger tap target on mobile (≥44px tall) */
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, opacity .15s, transform .1s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary  { background: var(--red); color: var(--white); }
.btn-primary:hover { background: var(--red-hover); text-decoration: none; }
.btn-amazon   { background: var(--amazon); color: var(--white); }
.btn-amazon:hover { background: var(--amazon-hover); color: var(--white); text-decoration: none; }
.btn-aliexpress { background: var(--aliexpress); color: var(--white); }
.btn-aliexpress:hover { background: var(--aliexpress-hover); color: var(--white); text-decoration: none; }

/* ── Marketplace tag (small pill, top of product pages) ─────────────────── */
.marketplace-tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .2px;
}
.marketplace-tag-amazon     { background: #e0f4fb; color: var(--amazon-hover); }
.marketplace-tag-aliexpress { background: #fde6e0; color: var(--aliexpress-hover); }

/* ── Cross-marketplace nudge banner (Amazon page → AE equivalent) ─────── */
.ae-nudge {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-2);
  background: var(--white);
  /* Neutral border — the AE accent color now lives only on the small tag
     and saving %, where it's actually informative. Loud orange border was
     out of place with the camelcamelcamel monochrome direction. */
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--gray-900);
  transition: background .15s, border-color .15s;
}
.ae-nudge:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
  text-decoration: none;
}
.ae-nudge-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
}
.ae-nudge-body { flex: 1; min-width: 0; }
.ae-nudge-headline {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 2px;
}
.ae-nudge-saving {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--aliexpress);
}
.ae-nudge-title {
  font-size: var(--fs-base);
  color: var(--gray-700);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ae-nudge-prices {
  margin-top: 2px;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.ae-nudge-prices strong {
  font-size: var(--fs-lg);
  color: var(--gray-900);
}
.ae-nudge-saving-amount {
  font-size: var(--fs-xs);
  color: var(--gray-500);
}
.ae-nudge-arrow {
  flex-shrink: 0;
  font-size: var(--fs-xl);
  color: var(--aliexpress);
}
.btn-outline  { background: transparent; color: var(--gray-700); border: 1px solid var(--gray-300); }
.btn-outline:hover { background: var(--gray-50); text-decoration: none; }
.btn-ghost    { background: transparent; color: var(--gray-500); }
.btn-ghost:hover { background: var(--gray-100); color: var(--gray-700); text-decoration: none; }
.btn-danger   { background: transparent; color: #dc2626; border: 1px solid var(--red-border); }
.btn-danger:hover { background: var(--red-light); text-decoration: none; }
.btn-sm { min-height: 32px; padding: 6px 12px; font-size: var(--fs-base); }
/* Bump the small-button tap area on phones — 32 px is below Apple's 44 px
   HIG floor and misses are noticeable on the product-card actions row
   ("Ver historial" / "Amazon ↗") and history range pickers. 40 px is a
   compromise that keeps button rows visually distinct from full .btn
   while staying thumb-friendly. Desktop precision is fine at 32 px. */
@media (max-width: 639px) {
  .btn-sm { min-height: 40px; padding: 8px 12px; }
}
.btn-full { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.input {
  width: 100%;
  /* iOS zooms on focus if font-size < 16px; bump on small viewports to avoid */
  font-size: var(--fs-lg);
  padding: 9px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(181, 56, 71, .14);
}
.input-sm { padding: 6px 10px; font-size: var(--fs-base); }

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0; }
.filter-bar .input-sm { height: 34px; }
/* Mobile: 5 filter controls in a flex-wrap row produce a chaotic 2-3
   row mess on 375 px. Stack vertically with full-width children — much
   easier to scan, and the search box stops being the only big element. */
@media (max-width: 639px) {
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar > * { width: 100%; min-width: 0; flex: none; }
  .filter-bar .input-sm { height: 40px; }
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pagination { display: flex; gap: var(--sp-2); justify-content: center; align-items: center; margin-top: var(--sp-5); flex-wrap: wrap; }

.input-group { display: flex; gap: var(--sp-2); }
.input-group .input { flex: 1; }

.input-with-unit { display: flex; align-items: center; }
.input-with-unit .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.unit {
  padding: 6px 10px;
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-base);
  color: var(--gray-500);
}

.form-field { margin-bottom: var(--sp-3); }
.form-field label { display: block; font-size: var(--fs-base); font-weight: 500; margin-bottom: var(--sp-1); color: var(--gray-700); }
.hint { font-size: var(--fs-sm); color: var(--gray-400); margin-top: var(--sp-1); }

/* ── Add card ────────────────────────────────────────────────────────────── */
.add-card { margin-bottom: var(--sp-6); }
.add-form { margin-top: var(--sp-3); }

/* ── Product grid ────────────────────────────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

.product-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
  position: relative;
}
.product-card:hover { border-color: var(--gray-400); box-shadow: var(--shadow-md); }

.product-card-link {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3);
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.product-img-wrap {
  flex-shrink: 0;
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.product-img,
.product-img-placeholder {
  width: 72px;
  height: 72px;
}
.product-img {
  object-fit: contain;
  background: var(--gray-50);
}
.product-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
}

.product-info { flex: 1; min-width: 0; }
.product-name {
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: var(--gray-900);
}
.product-asin { font-size: var(--fs-xs); color: var(--gray-400); margin-top: var(--sp-1); }
.product-error { font-size: var(--fs-xs); color: #dc2626; margin-top: var(--sp-1); }

.product-prices {
  padding: var(--sp-3) var(--sp-3);
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
}
.price-current { font-size: var(--fs-xl); font-weight: 700; color: var(--red); }
.price-range { display: flex; gap: var(--sp-3); margin-top: var(--sp-1); }
.price-min { font-size: var(--fs-sm); color: var(--green); }
.price-max { font-size: var(--fs-sm); color: var(--gray-400); }
.price-checks { font-size: var(--fs-xs); color: var(--gray-400); margin-top: 2px; }
.price-pending { font-size: var(--fs-base); color: var(--gray-400); font-style: italic; }

.product-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-top: 1px solid var(--gray-100);
  flex-wrap: wrap;
}

/* ── Product detail ──────────────────────────────────────────────────────── */
.back-link { margin-bottom: var(--sp-4); font-size: var(--fs-md); }
.back-link a { color: var(--gray-500); text-decoration: none; }
.back-link a:hover { color: var(--gray-900); text-decoration: none; }

.product-header {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.product-detail-img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--gray-50);
  flex-shrink: 0;
}
.product-header-info { flex: 1; min-width: 0; }
.product-header-info h1 {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--sp-1);
  line-height: 1.3;
  /* Amazon titles often run 150+ chars ("Brand Model Color Size Pack of N
     Eco-friendly Long Marketing Tail"). Clamp to 4 lines on mobile to
     keep the header card scannable; full text remains accessible via the
     link target and the title attribute. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.amazon-link {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--amazon);
}
.amazon-link:hover { color: var(--amazon-hover); text-decoration: underline; }

.price-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  width: 100%;
}
.stat-box {
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  text-align: center;
  background: var(--white);
}
.stat-label { font-size: var(--fs-xs); color: var(--gray-400); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.stat-value { font-size: var(--fs-xl); font-weight: 700; }
.stat-current { background: var(--red-light); border-color: var(--red-border); }
.stat-current .stat-value { color: var(--red); }
.stat-box-link { text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s; display: block; }
.stat-box-link:hover { border-color: var(--gray-400); box-shadow: var(--shadow-md); text-decoration: none; }
.product-title-link { color: inherit; text-decoration: none; }
.product-title-link:hover { text-decoration: none; opacity: .8; }
.product-img-link { display: block; line-height: 0; border-radius: var(--radius-sm); overflow: hidden; transition: opacity .15s; }
.product-img-link:hover { opacity: .88; text-decoration: none; }
.stat-min .stat-value { color: var(--green); }
.stat-max .stat-value { color: var(--gray-500); }
.stat-checks .stat-value { color: var(--gray-700); }

/* ── Chart ───────────────────────────────────────────────────────────────── */
.chart-wrap { height: 220px; position: relative; }

/* Segmented range picker above price-history charts. Buttons are flat with
   a 1px divider; the active one gets the marketplace's brand colour and a
   filled background to read as "selected" rather than hover.            */
.chart-range-bar {
  display: inline-flex;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--sp-2);
  background: var(--white);
}
.chart-range-bar button {
  appearance: none;
  background: transparent;
  border: none;
  border-left: 1px solid var(--gray-200);
  padding: 6px 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.chart-range-bar button:first-child { border-left: none; }
.chart-range-bar button:hover { background: var(--gray-50); }
.chart-range-bar button.active {
  background: var(--gray-100);
  color: var(--gray-900);
  font-weight: 600;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.toolbar { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-4); flex-wrap: wrap; }

/* ── Table ───────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.price-table th { text-align: left; font-weight: 600; color: var(--gray-500); padding: var(--sp-2) var(--sp-3); border-bottom: 2px solid var(--gray-200); }
.price-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--gray-100); }
.price-table tr:last-child td { border-bottom: none; }
.price-cell { font-weight: 600; color: var(--red); }

/* ── Alerts section ──────────────────────────────────────────────────────── */
.alert-form { margin-bottom: var(--sp-4); }
.alert-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.alert-inputs .form-field { margin-bottom: 0; }
.alert-submit { width: 100%; }

.alerts-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.alert-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  font-size: var(--fs-base);
}
.alert-active  { background: #f0fdf4; border-color: #bbf7d0; }
.alert-triggered { background: var(--gray-50); }
.alert-info { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.alert-threshold { font-weight: 700; font-size: var(--fs-md); color: var(--red); }
.alert-email { color: var(--gray-500); }
.alert-actions { display: flex; gap: var(--sp-2); }

.alert-badge {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 500;
}
.badge-active { background: #dcfce7; color: #166534; }
.badge-triggered { background: var(--gray-200); color: var(--gray-500); }

/* ── Alert box ───────────────────────────────────────────────────────────── */
.alert-box {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  margin-bottom: var(--sp-3);
}
.alert-error { background: var(--red-light); border: 1px solid var(--red-border); color: #9b1c1c; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  color: var(--gray-400);
}
.empty-icon { font-size: 44px; margin-bottom: var(--sp-3); }
.empty-state h3 { font-size: var(--fs-lg); font-weight: 600; color: var(--gray-700); margin-bottom: var(--sp-1); }
.empty-state p { font-size: var(--fs-md); }

/* ── Auth page ───────────────────────────────────────────────────────────── */
body.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--sp-4);
}
.auth-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: var(--sp-6) var(--sp-4);
  width: 100%;
  max-width: 400px;
}
.auth-logo {
  text-align: center;
  margin-bottom: var(--sp-5);
}
.brand-icon-lg { font-size: 44px; display: block; margin-bottom: var(--sp-1); }
.auth-logo h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.5px; }
.auth-logo p { font-size: var(--fs-md); color: var(--gray-400); margin-top: var(--sp-1); }
.auth-form { margin-top: var(--sp-4); }
.auth-alt { text-align: center; font-size: var(--fs-base); color: var(--gray-500); margin-top: var(--sp-4); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer {
  text-align: center;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--gray-400);
  border-top: 1px solid var(--gray-200);
  background: var(--white);
}

/* ── HTMX spinner ────────────────────────────────────────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }
.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--gray-200);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Stats bar (dashboard) ───────────────────────────────────────────────── */
.stats-bar {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.stat-pill {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: var(--fs-base);
}
.stat-pill-value { font-weight: 700; font-size: var(--fs-md); color: var(--gray-900); }
.stat-pill-label { color: var(--gray-500); }
.stat-pill-green { border-color: #bbf7d0; background: #f0fdf4; }
.stat-pill-green .stat-pill-value { color: var(--green); }
.stat-pill-warn  { border-color: #fed7aa; background: #fff7ed; }
.stat-pill-warn  .stat-pill-value { color: #c2410c; }

/* ── Sparkline ───────────────────────────────────────────────────────────── */
.sparkline {
  display: block;
  width: 80px;
  height: 28px;
  margin: var(--sp-1) 0;
  overflow: visible;
}

/* ── Trend badges ────────────────────────────────────────────────────────── */
.price-row { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.trend-down { font-size: var(--fs-sm); font-weight: 600; color: var(--green); }
.trend-up   { font-size: var(--fs-sm); font-weight: 600; color: var(--red); }
.trend-neutral { font-size: var(--fs-sm); color: var(--gray-400); }

/* ── Badges (sale tier / at-min / unavailable) ───────────────────────────── */
/* Inline pill is the default: works in the price-stats card, history table
   row, or anywhere else the badge appears as a tag rather than an image
   overlay. The overlay treatment (full-width strip pinned to the bottom of
   a product image) is opt-in via the `.product-img-wrap` ancestor.       */
.badge-low,
.badge-sale,
.badge-unavailable,
[class*="badge-tier-"] {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .3px;
  color: #fff;
  vertical-align: middle;
}

/* Strong — these need to grab attention. Per the camelcamelcamel aesthetic
   the user wants, all sale badges share the same red accent — the tier
   *name* in the badge text ("Super Oferta" / "Mega Oferta" / etc.) carries
   the differentiation. Rainbow per-tier hues were noise without info gain. */
.badge-sale,
[class*="badge-tier-"]    { background: rgba(181, 56, 71, 0.92); }

/* Pastel — informational, not a call to action */
.badge-low         { background: rgba(167, 220, 196, 0.95); color: #14532d; }
.badge-unavailable { background: rgba(203, 213, 225, 0.95); color: #475569; text-transform: uppercase; letter-spacing: .4px; }

/* Overlay variant — only inside the product card image wrap, where the
   wrap is `position: relative` and the badge stretches across its bottom. */
.product-img-wrap .badge-low,
.product-img-wrap .badge-sale,
.product-img-wrap .badge-unavailable,
.product-img-wrap [class*="badge-tier-"] {
  display: block;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  border-radius: 0;
  /* Bumped 9 → 11 px: the overlay sits on a 100+ px image and the old
     size was unreadable at arm's length on phones. */
  padding: 4px 6px;
  font-size: 11px;
  letter-spacing: .25px;
  text-align: center;
}

/* ── Public tag ──────────────────────────────────────────────────────────── */
.public-tag {
  display: inline-block;
  background: #ecfdf5;
  color: #15803d;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 20px;
  letter-spacing: .2px;
}
.public-toggle-wrap { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; flex-wrap: wrap; }
.btn-active-green { border-color: var(--green); color: var(--green); }
.hint-link { font-size: var(--fs-sm); color: var(--gray-500); }
.hint-link:hover { color: var(--gray-900); }

/* ── Alert type tabs ─────────────────────────────────────────────────────── */
.alert-type-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--sp-3);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.alert-type-tab {
  flex: 1;
  display: flex;
  cursor: pointer;
}
.alert-type-tab input[type="radio"] { display: none; }
.alert-type-tab span {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--gray-500);
  border-right: 1px solid var(--gray-200);
  transition: background .15s, color .15s;
}
.alert-type-tab:last-child span { border-right: none; }
.alert-type-tab input:checked + span {
  background: var(--red);
  color: #fff;
}
/* 4-tab alert form: slightly smaller text */
.alert-type-tabs .alert-type-tab span { font-size: var(--fs-sm); padding: 8px 2px; }

/* Mobile: stack the 4 tabs as a 2×2 grid so labels like "Vuelta en stock"
   (~95 px at fs-sm) don't truncate inside ~85 px slots. Each tab also
   gets the 44 px touch height Apple HIG asks for. */
@media (max-width: 639px) {
  .alert-type-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    border: none;
    overflow: visible;
  }
  .alert-type-tabs .alert-type-tab span {
    border: 1px solid var(--gray-200);
    border-right: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 12px 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .alert-type-tabs .alert-type-tab input:checked + span {
    border-color: var(--red);
  }
}

/* ── CTA bar (public product page) ───────────────────────────────────────── */
.cta-bar {
  display: flex;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-5);
  flex-wrap: wrap;
}
.cta-bar .btn { flex: 1; min-width: 140px; }

/* ── Admin tables: sort + multi-select ───────────────────────────────────── */
.sortable-col { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-col::after { content: ' ⇅'; opacity: 0.3; font-size: 11px; }
.sortable-col.sort-asc::after  { content: ' ↑'; opacity: 1; }
.sortable-col.sort-desc::after { content: ' ↓'; opacity: 1; }
th.select-col { width: 32px; text-align: center; }
th.select-col input,
td .row-select { cursor: pointer; transform: scale(1.1); }
.bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.bulk-bar.bulk-bar-active { background: var(--white); border-color: var(--gray-400); }
.bulk-bar [data-bulk-count] { font-size: var(--fs-sm); color: var(--gray-700); min-width: 110px; font-weight: 500; }

/* ── Admin dropdown menu (grouped admin navbar) ──────────────────────────── */
.admin-menu { position: relative; display: inline-block; }
.admin-menu-trigger {
  appearance: none;
  background: transparent;
  border: none;
  padding: 4px 10px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-family: inherit;
  white-space: nowrap;
  transition: background .15s;
}
.admin-menu-trigger:hover         { background: var(--gray-100); }
.admin-menu-trigger-active        { background: var(--gray-100); color: var(--gray-900); }
.admin-menu-panel {
  /* fixed (not absolute) because .navbar-actions has overflow-x:auto, which
     computes overflow-y to auto too — that clips absolutely-positioned
     children that fall outside the navbar height. position:fixed escapes
     all ancestor scroll contexts. Inline top/left set by JS at open time. */
  position: fixed;
  min-width: 190px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  padding: 4px;
  display: flex;
  flex-direction: column;
  z-index: 200;
}
.admin-menu-panel[hidden] { display: none; }
.admin-menu-item {
  display: block;
  padding: 7px 12px;
  font-size: var(--fs-base);
  color: var(--gray-700);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.admin-menu-item:hover            { background: var(--gray-50); text-decoration: none; color: var(--gray-900); }
.admin-menu-item-active           { background: var(--gray-100); color: var(--gray-900); font-weight: 600; }

/* ── Nav link ────────────────────────────────────────────────────────────── */
.nav-link {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--gray-700);
  text-decoration: none;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  transition: background .15s;
  white-space: nowrap;
}
.nav-link:hover { background: var(--gray-100); text-decoration: none; }
.nav-link-active { background: var(--gray-100); }

/* ── Stat sublabel (tracking start date) ─────────────────────────────────── */
.stat-sublabel {
  font-size: 10px;
  color: var(--gray-400);
  margin-top: 2px;
  letter-spacing: .2px;
}

/* ── Categories ──────────────────────────────────────────────────────────── */
.category-tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--green);
  background: #f0fdf9;
  border: 1px solid #a7f3d0;
  border-radius: 20px;
  padding: 1px 8px;
  margin-top: var(--sp-1);
  letter-spacing: .2px;
}

/* ── Bulk selection (admin) ──────────────────────────────────────────────── */
.product-select-label {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 5;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.product-select-label input[type=checkbox] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--red);
}
.product-card.bulk-selected {
  outline: 2px solid var(--red);
  outline-offset: -2px;
  background: #fff8f8;
}
.bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
  font-size: var(--fs-base);
}
.category-wrap { margin-top: var(--sp-3); }
.category-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: var(--sp-1);
}
.category-form .input-group-sm { gap: var(--sp-1); }
.category-section { margin-bottom: var(--sp-8); }
.category-section-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--gray-200);
}
.category-nav {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-1);
  /* Fade-out on the right edge as a visual hint that the nav scrolls — the
     scrollbar is hidden on mobile and users were missing the off-screen
     categories. mask only, no extra DOM. */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.category-nav::-webkit-scrollbar { display: none; }
.category-nav-link {
  font-size: var(--fs-base);
  font-weight: 600;
  font-family: inherit;
  color: var(--gray-700);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  padding: 4px 14px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
/* ── Telegram promo banner (monochrome, low-noise) ───────────────────── */
.telegram-promo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--gray-900);
  font-size: var(--fs-base);
  transition: background .15s, border-color .15s;
}
.telegram-promo:hover {
  background: var(--white);
  border-color: var(--gray-400);
  text-decoration: none;
}
.telegram-promo-icon {
  font-size: 16px;
  color: var(--gray-500);
  flex-shrink: 0;
}
.telegram-promo-text { flex: 1; min-width: 0; }
.telegram-promo-cta {
  font-weight: 600;
  white-space: nowrap;
  color: var(--gray-700);
  font-size: var(--fs-sm);
}

.category-nav-link:hover,
.category-nav-link.active {
  background: var(--gray-900);
  color: #fff;
  border-color: var(--gray-900);
}
a.category-tag { text-decoration: none; cursor: pointer; }
a.category-tag:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* ── Availability (out of stock) ─────────────────────────────────────────── */
.price-unavailable {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--gray-500);
  padding: 2px 0;
}
.stat-pill-gray {
  background: var(--gray-100);
  color: var(--gray-700);
  border-color: var(--gray-200);
}
.alert-box.alert-unavailable {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  font-size: var(--fs-md);
  margin-top: var(--sp-2);
}

/* ── Price history table ─────────────────────────────────────────────────── */
.history-table-card { margin-top: var(--sp-5); }
.history-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.history-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.history-table th { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 2px solid var(--gray-200); color: var(--gray-500); font-weight: 600; white-space: nowrap; }
.history-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.history-table tr:last-child td { border-bottom: none; }
.history-table .price-cell { font-weight: 600; white-space: nowrap; }
.row-min { background: #f0fdf4; }
.row-min td { color: #166534; }
.row-max { background: #fff7ed; }
.row-max td { color: #9a3412; }
.badge-min-inline { display: inline-block; margin-left: var(--sp-1); background: #d1fae5; color: #166534; font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 1px 5px; border-radius: 20px; letter-spacing: .4px; vertical-align: middle; }
.badge-max-inline { display: inline-block; margin-left: var(--sp-1); background: #ffedd5; color: #9a3412; font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 1px 5px; border-radius: 20px; letter-spacing: .4px; vertical-align: middle; }
.delta-down { color: #16a34a; font-weight: 500; }
.delta-up   { color: #dc2626; font-weight: 500; }
.delta-flat { color: var(--gray-400); }
.table-note { font-size: var(--fs-sm); color: var(--gray-400); margin-top: var(--sp-2); text-align: center; }

/* ── Stat sublabels (current vs min) ─────────────────────────────────────── */
.stat-above-min { color: #dc2626; }
.stat-at-min    { color: #16a34a; font-weight: 600; }

/* ── Admin category links ────────────────────────────────────────────────── */
.category-link-admin { color: inherit; text-decoration: none; }
.category-link-admin:hover { color: var(--red); text-decoration: underline; }


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  RESPONSIVE — refinements layered on top of the mobile base above      ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

/* ── 640px+ : small tablet portrait ──────────────────────────────────────── */
@media (min-width: 640px) {
  body { font-size: var(--fs-md); }
  .container       { max-width: 720px; padding: var(--sp-5) var(--sp-5); }
  .container-wide  { max-width: 1400px; padding: var(--sp-5) var(--sp-5); }
  .navbar          { padding: 0 var(--sp-5); height: 56px; }
  :root            { --header-h: 56px; }
  .page-header h1  { font-size: var(--fs-3xl); }
  .product-grid    { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .product-header  { flex-direction: row; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5); }
  .product-detail-img { width: 120px; height: 120px; }
  .price-stats     { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .alert-inputs    { flex-direction: row; align-items: flex-end; }
  .alert-inputs .form-field { flex: 1; min-width: 160px; }
  .alert-submit    { width: auto; align-self: flex-end; }
  .alert-item      { flex-direction: row; align-items: center; justify-content: space-between; }
  .cta-bar .btn    { flex: 0 0 auto; min-width: 0; }
  .user-email      { max-width: 220px; }
  .chart-wrap      { height: 260px; }
}

/* ── 1024px+ : desktop ────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .container       { max-width: 960px; padding: var(--sp-6) var(--sp-5); }
  .container-wide  { padding: var(--sp-6) var(--sp-8); }
  .navbar          { padding: 0 var(--sp-6); }
  .card            { padding: var(--sp-5); }
  .product-header  { padding: var(--sp-6); }
  .product-header-info h1 { font-size: var(--fs-2xl); }
  .chart-wrap      { height: 280px; }
}

/* ── 1280px+ : wide desktop ──────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .container-wide  { padding-left: var(--sp-8); padding-right: var(--sp-8); }
}

/* ── 1536px+ : 1080p-and-up monitors get more grid columns ──────────────── */
/* The old cap of 1400px was leaving empty bands on the sides of 1080p+ and
   capping the product grid at ~4 columns. Lift the cap so a 1080p screen
   sees 6 columns, a 1440p screen sees 7-8, and a 4K screen sees ~9. */
@media (min-width: 1536px) {
  .container-wide  { max-width: 1760px; padding-left: var(--sp-8); padding-right: var(--sp-8); }
}

@media (min-width: 1920px) {
  .container-wide  { max-width: 2200px; }
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  PWA APP HOME (/m)                                                     ║
   ╚════════════════════════════════════════════════════════════════════════╝ */
/* Tighter top spacing than .container default — in standalone mode there
   is no browser chrome above, so the page header lands flush with the
   navbar. The 4px instead of var(--sp-4) on top keeps content close to
   the navbar like a native app feed. */
.app-home-main { padding-top: var(--sp-3); }

/* Hero card — one dominant deal. Whole card is a tap target. */
.app-hero {
  display: block;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  margin-bottom: var(--sp-4);
  text-decoration: none;
  color: var(--gray-900);
  transition: border-color .15s, transform .15s;
}
.app-hero:hover { border-color: var(--gray-400); text-decoration: none; }
.app-hero:active { transform: scale(0.99); }
.app-hero-tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: var(--sp-2);
}
.app-hero-img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-3);
}
.app-hero-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.app-hero-title { font-size: var(--fs-md); font-weight: 500; line-height: 1.3; margin: 0; }
.app-hero-prices { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.app-hero-price  { font-size: var(--fs-2xl); font-weight: 700; color: var(--gray-900); }
.app-hero-saving { font-size: var(--fs-md); font-weight: 700; color: var(--red); }
.app-hero-was    { font-size: var(--fs-sm); color: var(--gray-500); text-decoration: line-through; }

/* Runners-up — 2×2 grid of compact cards below the hero. */
.app-section-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--gray-700);
  margin: var(--sp-4) 0 var(--sp-2);
}
.app-runners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.app-runner {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--gray-900);
  overflow: hidden;
  transition: border-color .15s;
}
.app-runner:hover { border-color: var(--gray-400); text-decoration: none; }
.app-runner-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--gray-50);
}
.app-runner-body { padding: var(--sp-2); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.app-runner-title { font-size: var(--fs-sm); line-height: 1.25; margin: 0; }
.app-runner-prices { display: flex; align-items: baseline; gap: 6px; margin-top: auto; }
.app-runner-prices strong { font-size: var(--fs-md); font-weight: 700; }
.app-runner-saving { font-size: var(--fs-xs); font-weight: 600; color: var(--red); }

/* Wide CTA below the grid */
.app-cta-wide {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: var(--sp-4);
}

/* Activity / signup card */
.app-activity {
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.app-activity-label {
  font-size: var(--fs-xs);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: var(--sp-2);
}
.app-activity-body { font-size: var(--fs-md); color: var(--gray-700); margin: 0; }
.app-activity-cta { display: inline-block; margin-top: var(--sp-3); }

/* On desktop the app-home still works (Chrome shows install prompt from
   here on laptops too) but doesn't need to dominate the viewport. Cap
   container width so the hero doesn't stretch comically wide. */
@media (min-width: 640px) {
  .app-home-main { max-width: 720px; margin: 0 auto; }
  .app-hero-img  { max-height: 320px; }
  .app-runners   { grid-template-columns: repeat(4, 1fr); }
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  BOTTOM NAV — persistent app-style navigation, mobile only             ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

/* Reserve space at the bottom of body content on mobile so sticky-positioned
   page elements (and the very last line of content) don't sit underneath the
   bar. Combined with `env(safe-area-inset-bottom)` for iPhone notch devices. */
body:has(.bottom-nav) {
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-h);
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 110;
  /* Subtle elevation — no heavy shadow per camelcamelcamel feel */
  box-shadow: 0 -1px 2px rgba(0,0,0,.04);
}

.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: var(--fs-xs);
  color: var(--gray-500);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.bn-item:hover { color: var(--gray-700); text-decoration: none; }
.bn-active     { color: var(--red); }
.bn-icon       { font-size: 20px; line-height: 1; }
.bn-label      { font-weight: 500; letter-spacing: .1px; }

/* Hide on tablets and up — desktop has the top navbar */
@media (min-width: 640px) {
  .bottom-nav { display: none; }
  body:has(.bottom-nav) { padding-bottom: 0; }
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  TABLE → CARD ON MOBILE — opt-in via `.table-card-mobile` on <table>   ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

/* On viewports <640px, every <td> stacks vertically inside a "card" row
   and shows its column header inline via `data-label` attribute. <thead>
   is hidden because the per-cell labels carry the same info. Empty cells
   (no data-label) collapse to nothing.

   The wrapping <table-wrap> loses its horizontal scroll for these tables
   since the layout no longer needs it.                                  */
@media (max-width: 639px) {
  .table-card-mobile,
  .table-card-mobile thead,
  .table-card-mobile tbody,
  .table-card-mobile tr,
  .table-card-mobile td {
    display: block;
    width: 100%;
  }

  .table-card-mobile thead { display: none; }

  .table-card-mobile tr {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-2);
  }

  .table-card-mobile td {
    border: none !important;
    padding: 4px 0 !important;
    font-size: var(--fs-base);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    text-align: right;
  }

  .table-card-mobile td:empty { display: none; }

  .table-card-mobile td[data-label]::before {
    content: attr(data-label);
    color: var(--gray-500);
    font-weight: 600;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .4px;
    flex-shrink: 0;
    text-align: left;
  }

  /* The wrap-around table-wrap doesn't need horizontal scroll for these */
  .table-wrap:has(.table-card-mobile) { overflow-x: visible; }
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  STICKY CTA — product page "Comprar en Amazon", mobile only            ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

/* On mobile (/p/:asin) we pin the CTA bar to the very bottom and hide the
   bottom-nav for this page. Conversion > navigation on the page that exists
   to convert — bottom-nav cedes its 60px to the affiliate CTA. On ≥640px
   the bar stays in normal flow and the bottom-nav is already hidden by the
   media query above. */
@media (max-width: 639px) {
  .product-page .bottom-nav { display: none; }

  .cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -1px 2px rgba(0,0,0,.04);
    z-index: 110;
    gap: var(--sp-2);
  }
  .cta-bar .btn {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    /* Defensive: even with .cta-price hidden, allow wrap so a long
       label in a future change can't clip again. line-height tight
       so the two-row case (if it ever happens) stays compact. */
    white-space: normal;
    line-height: 1.15;
    font-size: var(--fs-md);
    padding: 8px 10px;
    text-align: center;
  }
  /* Price segment of the CTA — already shown prominently in the
     "Precio actual" card above. Hide it on phones so the button
     label stays one line ("Comprar en Amazon.es") instead of being
     truncated mid-word in a 175 px flex slot. */
  .cta-bar .cta-price { display: none; }

  /* Reserve room for the sticky CTA at the bottom of the page. Overrides
     the generic body:has(.bottom-nav) rule on .product-page since the
     bottom-nav is hidden here and only the CTA consumes space. */
  body.product-page,
  body.product-page:has(.bottom-nav) {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}