/* Extras loaded after styles.css:
   - the bottle ficha: two frosted-glass cards (the bottle with its "bitácora" of facts, and the shop list)
   - sortable / hideable shop details
   - bottles that light up when you point at them (glass tags, faint light pool)
   - the extra filters of the frosted filter panel: "Más filtros", price range, switches */

/* ---------- Ficha: two frosted-glass cards ----------
   Same glass language as the Botellas tab (tokens in styles.css :root, cream inks of .glass). Card 1, the
   bottle: the title, a soft amber lantern glow behind the spinning bottle, an ABV glass medallion and the
   price doubloon (the one gilt accent); below it the menu of facts on a slightly lighter glass layer with a
   wavy top edge. Card 2, where to buy it: chip-style sort / column controls and one glass tile per shop.
   The dialog itself is transparent; a glass pill bar at the foot keeps "Guardar en el cofre" in reach.
   The markup puts .glass on both cards and on the bar (panel look + cream inks); everything here refines it.
   The ::backdrop veil is lighter than the page-wide one so the paused scene shows faintly through the cards.

   Contrast, worst case: the veil is rgba(4, 6, 10, 0.58), so even a pure white pixel behind the cards reaches
   only sRGB 110; this assumes 120. The cards blur it (12px) and carry the 0.82 glass tint:
     card rgb 43 41 47 (sheen at its top, +5 % white); the menu layer and the shop / sort chips add a 7 %
     cream fill; the active chip adds 13 %; a recetario chip sits on the layer (7 % + 7 %).
     ink        cream #fff3d6   card 13.0   layer / chip 10.6   recetario chip 8.6   active chip 8.9
     ink-2      #f2e8d0         card 11.8   layer / chip  9.6   recetario chip 7.8   active chip 8.0
     muted      #f4e0a4         card 11.0   layer / chip  8.9   recetario chip 7.2   active chip 7.5
     link       #f8e3a8         card 11.3   layer / chip  9.2   recetario chip 7.5   active chip 7.7
     price up   #ffb8a8         chip 7.0     price down #b9e39b  chip 8.1
     sepia #1a1007 on the amber #ffb454 pill / bar button / doubloon 10.6:1; on the lighter doubloon stop
     #ffc878 12.3:1; on its darker stop #f0a03c 8.7:1; on the hovered amber button #ffc171 11.7:1.
   With the Botellas margin (backdrop 170) the lowest ink on any chip is still 6.4:1 (muted on the recetario
   chip) and cream stays >= 7.7:1 everywhere, so the numbers above hold with room to spare. */
:root {
  --price-up: #ffb8a8;     /* a price that went up, on glass */
  --price-down: #b9e39b;   /* a price that went down, on glass */
}
.ficha {
  color-scheme: dark;
  width: min(1180px, calc(100vw - 32px));
  max-width: none;   /* the browser default (100% - 38px) would leave a wide margin on phones */
  max-height: calc(100dvh - 32px);
  color: var(--glass-cream);
  background: transparent;
  border-radius: 28px;
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-line-hi) transparent;
}
/* a lighter veil than the page-wide one: the paused scene shows faintly through the frosted cards */
.ficha::backdrop { background: rgba(4, 6, 10, 0.58); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* the round X scrolls away with the top of the cards (sticky, it covered the shop list);
   "Cerrar" in the sticky glass bar stays in reach */
.ficha-close { position: absolute; top: 0; right: 0; --focus: var(--glass-amber); }
@media (min-width: 761px) {
  .ficha-grid > .fc-bottle { align-self: start; }   /* natural height: no empty glass beside a long list */
  .ficha-grid > .fc-bottle.stick { position: sticky; top: 14px; }
}
.ficha-close button {
  margin: 26px 28px 0 0;
  width: 48px;
  height: 48px;
  color: var(--glass-cream);
  background: var(--glass-sheen), var(--glass-tint);
  border: 1px solid var(--glass-line-hi);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  backdrop-filter: blur(12px) saturate(1.25);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ficha-close button:hover { background: var(--glass-chip-on); border-color: var(--glass-amber-line); }
.ficha-close button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ficha-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 22px;
  padding: 14px 14px 0;
  align-items: stretch;
}
.fc {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  overflow: clip;
  border-radius: var(--glass-r-panel);
  color: var(--ink);
  box-shadow: var(--glass-shadow), 0 22px 50px -14px rgba(0, 0, 0, 0.5);
}
.fc p { overflow-wrap: anywhere; }

/* ----- card 1, top: the bottle in a lantern glow ----- */
.fc-top { position: relative; z-index: 2; padding: 24px 30px 0; }
.fc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fc-head p, .ficha .fc-head .kicker {
  margin: 0;
  font: 700 17px/1.3 var(--f-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.ficha .fc-top h2 {
  margin: 14px auto 0;
  max-width: 17ch;
  text-align: center;
  font: 400 clamp(34px, 3.6vw, 50px)/1.04 var(--f-sc);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.fc-stage {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  margin: 0 0 -76px;   /* the bottle hangs over the wavy edge of the menu layer */
}
.fc-stage::before {   /* the lantern glow: it fades out before the title above and the facts below */
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3% 16% -3%;
  background: radial-gradient(closest-side, rgba(255, 190, 100, 0.42), rgba(255, 176, 80, 0.16) 62%, transparent);
  pointer-events: none;
  animation: ficha-flicker 5.5s ease-in-out infinite alternate;
}
@keyframes ficha-flicker {
  0% { opacity: 0.78; }
  45% { opacity: 1; }
  100% { opacity: 0.88; }
}
.ficha .ficha-bottle {
  grid-column: 2;
  grid-row: 1;
  height: 440px;
  padding: 0;
  border-radius: 0;
  background: none;
  --px: 3.5;
}
.ficha .ficha-bottle img, .ficha .ficha-bottle svg { filter: drop-shadow(0 14px 10px rgba(0, 0, 0, 0.5)); }
.coin {
  grid-row: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  width: 120px;
  height: 120px;
  margin-top: 26px;
  border-radius: 50%;
  text-align: center;
  white-space: nowrap;
}
.coin b { font: 700 24px/1.05 var(--f-text); font-variant-numeric: lining-nums tabular-nums; }
.coin small { font: 700 17px/1.1 var(--f-text); letter-spacing: 0.06em; text-transform: uppercase; }
/* ABV: a glass circle with a hairline ring and cream text */
.medal {
  grid-column: 1;
  justify-self: start;
  color: var(--ink);
  background: var(--glass-chip-on);
  border: 1px solid var(--glass-line-hi);
  box-shadow: 0 0 0 5px var(--glass-chip), 0 10px 22px rgba(0, 0, 0, 0.3);
}
/* price: the one gilt accent, a flat amber disc with a thin darker ring */
.doubloon {
  grid-column: 3;
  justify-self: end;
  color: var(--sepia);
  background: radial-gradient(circle at 34% 26%, #ffc878, var(--party-amber) 58%, #f0a03c);
  box-shadow: inset 0 0 0 2px rgba(96, 52, 4, 0.55), 0 0 0 5px rgba(255, 180, 84, 0.16), 0 10px 22px rgba(0, 0, 0, 0.35);
}

/* ----- card 1, bottom: the menu, on a slightly lighter glass layer ----- */
.fc-paper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 92px 30px 28px;
  color: var(--ink);
  background: var(--glass-chip);
  /* wavy top edge (percentages stretch the curve to any width) */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 48' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C110 4 230 4 340 22 S560 46 700 30 S900 6 1000 18 V48 H0Z'/%3E%3C/svg%3E") top left / 100% 48px no-repeat, linear-gradient(#000, #000) bottom left / 100% calc(100% - 47px) no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 48' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C110 4 230 4 340 22 S560 46 700 30 S900 6 1000 18 V48 H0Z'/%3E%3C/svg%3E") top left / 100% 48px no-repeat, linear-gradient(#000, #000) bottom left / 100% calc(100% - 47px) no-repeat;
}
.menu-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 28px; }
.menu-cols:has(> .menu-col:empty) { grid-template-columns: minmax(0, 1fr); }
.menu-col { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.menu-col:empty { display: none; }
.menu-col:not(:empty) ~ .menu-col:not(:empty) { padding-left: 28px; border-left: 1px solid var(--glass-line); margin-left: -1px; }
.menu-sec h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding-bottom: 6px;
  font: 700 17px/1.2 var(--f-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--glass-line);
}
.menu-sec h3::before {   /* small amber four-point star */
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--glass-amber);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.log-facts { margin: 0; }
.log-facts > div { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; }
.log-facts dt { order: 1; flex: none; font: 700 17px/1.3 var(--f-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.log-facts > div::after { content: ""; order: 2; flex: 1 1 16px; min-width: 16px; border-bottom: 2px dotted var(--glass-line-hi); }
.log-facts dd { order: 3; flex: 0 1 auto; max-width: 68%; margin: 0; text-align: right; font: 700 18px/1.3 var(--f-text); color: var(--ink); overflow-wrap: anywhere; }
.fc-paper .summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; max-width: none; }
.fc-paper .sum-price { font: 700 40px/1.05 var(--f-text); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.fc-paper .sum-size { font-size: 18px; color: var(--ink-2); }
.fc-paper .sum-at { flex-basis: 100%; font-size: 18px; color: var(--ink-2); }
.fc-paper .sum-at strong { font: 700 22px/1.25 var(--f-text); color: var(--ink); }
.fc-paper .sum-best { flex-basis: 100%; font-size: 17px; font-style: italic; color: var(--ink-2); }
.log-drinks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.log-drinks li { padding: 3px 14px; border: 1px solid var(--glass-line); border-radius: var(--glass-r-ctl); font: 400 17px/1.4 var(--f-text); color: var(--ink); background: var(--glass-chip); }
.menu-extra { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--glass-line); }
.menu-extra p { margin: 6px 0; max-width: 72ch; font-size: 17px; line-height: 1.5; color: var(--ink); }
.menu-extra p b { font-weight: 700; }
.menu-extra .log-fact { font-style: italic; }
.menu-extra .log-fact b { font-style: normal; }
.log-src { margin-top: 8px; font-size: 17px; color: var(--ink-2); }
.log-src summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.log-src ul { margin: 0 0 4px; padding-left: 20px; }
.log-src li { padding: 2px 0; }
.log-src a { display: inline-block; min-height: 32px; line-height: 32px; color: var(--link); overflow-wrap: anywhere; }

/* ----- card 2: where to buy it ----- */
.fc-shops { padding: 24px 26px 28px; }
.fc-stars { display: flex; align-items: center; gap: 10px; height: 22px; margin: 4px 0 8px; }
.fc-stars span { width: 14px; height: 14px; background: var(--muted); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.fc-stars span:nth-child(2), .fc-stars span:nth-child(4) { width: 18px; height: 18px; }
.fc-stars span:nth-child(3) { width: 22px; height: 22px; background: var(--glass-amber); }
.fc-shops h3 {
  margin: 0 0 16px;
  font: 400 clamp(30px, 3vw, 38px)/1.05 var(--f-sc);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--link);
}
/* the signature highlight: solid amber, dark sepia ink */
.pill-hi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 18px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1.25;
  color: var(--sepia);
  background: var(--glass-amber);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 20px rgba(0, 0, 0, 0.3);
}
.pill-hi b { font-weight: 700; overflow-wrap: anywhere; }
.pill-hi-price { flex: none; font: 700 24px/1 var(--f-text); font-variant-numeric: lining-nums tabular-nums; }
.shop-tools { display: grid; gap: 8px; margin-bottom: 16px; }
.tool-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tool-label { flex-basis: 100%; margin: 4px 0 -2px; font: 700 17px/1.2 var(--f-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
/* sort buttons and column toggles: the same chips as the shelf picker (.cat-chip) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--glass-line);
  border-radius: var(--glass-r-ctl);
  font: 400 17px/1 var(--f-text);
  color: var(--ink);
  background: var(--glass-chip);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.pill:hover { background: var(--glass-chip-hover); border-color: var(--glass-line-hi); }
.pill[aria-pressed="true"], .pill:has(input:checked) { font-weight: 700; background: var(--glass-chip-on); border-color: var(--glass-amber-line); box-shadow: inset 0 0 0 1px rgba(255, 180, 84, 0.25); }
.pill input { width: 20px; height: 20px; margin: 0; accent-color: var(--glass-amber); }
.pill:focus-visible, .pill:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.shops { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.shop {
  padding: 12px 18px 10px;
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background: var(--glass-chip);
}
.shop.best { border-color: var(--glass-amber-line); box-shadow: inset 0 0 0 1px rgba(255, 180, 84, 0.25); }
.shop-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px 14px; }
.shop-who { min-width: 0; }
.shop-name { font: 700 19px/1.35 var(--f-text); color: var(--ink); overflow-wrap: anywhere; }
.fc-shops .store-sub { display: block; font-size: 17px; line-height: 1.35; color: var(--ink-2); }
.shop-price { flex: none; max-width: 48%; text-align: right; font: 700 24px/1.2 var(--f-text); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.shop-bar { display: block; height: 4px; margin: 10px 0 8px; overflow: hidden; border-radius: 999px; background: var(--glass-chip-on); }
.shop-bar i { display: block; height: 100%; width: calc(var(--fill) * 100%); border-radius: inherit; background: var(--glass-amber); }
.shop-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font-size: 17px; line-height: 1.4; color: var(--ink-2); }
.shop-perl { font-variant-numeric: lining-nums tabular-nums; }
.fc-shops .links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--link); white-space: nowrap; margin-right: 0; }
/* helpers drawn for parchment, re-inked for glass */
.fc-shops .trend { font-size: 17px; }
.fc-shops .trend.up { color: var(--price-up); }
.fc-shops .trend.down { color: var(--price-down); }
.fc-shops .mark { margin-left: 8px; padding: 0 8px; border: 1px solid var(--glass-line-hi); border-radius: var(--glass-r-tag); font-size: 17px; color: var(--ink); background: transparent; box-shadow: none; }
.fc-shops .mark.best { border-color: var(--glass-amber-line); }
.fc-shops .zone { padding: 0 8px; border: 1px solid var(--glass-line-hi); border-radius: var(--glass-r-tag); font-size: 17px; color: var(--ink); background: transparent; transform: none; }
.fc-shops abbr.guess { margin-left: 2px; color: var(--link); text-decoration: none; cursor: help; }
.fc-shops .verdict, .fc-shops .verdict.super {
  max-width: none;
  margin: 18px 0 0;
  padding: 12px 18px;
  border: 1px solid var(--glass-line);
  border-left: 3px solid var(--glass-line-hi);
  border-radius: 12px;
  font-size: 17px;
  color: var(--ink);
  background: var(--glass-chip);
}
.fc-shops .verdict.distri { border-left-color: var(--glass-amber); }

/* ----- the sticky glass bar ----- */
.ficha-actions {
  position: sticky;
  bottom: 14px;
  z-index: 5;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 14px 14px;
  padding: 8px 8px 8px 30px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--glass-sheen), var(--glass-tint);
  box-shadow: var(--glass-shadow), 0 10px 28px rgba(0, 0, 0, 0.4);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ficha-actions, .ficha-close button { background: var(--glass-sheen), var(--glass-tint-flat); }
}
.bar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 18px/1.3 var(--f-text); letter-spacing: 0.04em; color: var(--ink); }
/* primary: solid amber pill, sepia ink; on ("En el cofre"): amber hairline on a lit glass fill */
.ficha-actions .btn {
  flex: none;
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid var(--glass-amber);
  border-radius: 999px;
  font-size: 18px;
  color: var(--sepia);
  text-shadow: none;
  background: var(--glass-amber);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.ficha-actions .btn:hover { color: var(--sepia); background: #ffc171; border-color: #ffc171; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.ficha-actions .btn.on, .ficha-actions .btn.on:hover { color: var(--ink); background: var(--glass-chip-on); border-color: var(--glass-amber-line); box-shadow: inset 0 0 0 1px rgba(255, 180, 84, 0.25); }
.bar-close { flex: none; margin: 0; }
.bar-close button {
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--glass-line-hi);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 700 18px/1 var(--f-text);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.bar-close button:hover { background: var(--glass-chip-hover); border-color: var(--glass-amber-line); }
.bar-close button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ----- phone: one column, nearly full screen ----- */
@media (max-width: 760px) {
  .ficha { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 22px; }
  .ficha-close button { margin: 14px 14px 0 0; }
  .ficha-grid { grid-template-columns: 1fr; gap: 14px; padding: 8px 8px 0; }
  .fc-top { padding: 18px 16px 0; }
  .fc-head { padding-right: 56px; }
  .fc-head p, .ficha .fc-head .kicker { font-size: 16px; letter-spacing: 0.08em; }
  .ficha .fc-top h2 { margin-top: 20px; font-size: 32px; }
  .fc-stage { margin: 4px 0 -48px; }
  .ficha .ficha-bottle { height: 240px; --px: 2.1; }
  .coin { width: 96px; height: 96px; margin-top: 14px; }
  .coin b { font-size: 20px; }
  .coin small { font-size: 16px; }
  .fc-paper { padding: 76px 18px 22px; }
  .menu-cols, .menu-cols:has(> .menu-col:empty) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .menu-col:not(:empty) ~ .menu-col:not(:empty) { padding-left: 0; border-left: 0; margin-left: 0; }
  .menu-sec h3 { font-size: 17px; }
  .log-facts dt { font-size: 16px; }
  .log-facts dd { font-size: 17px; }
  .fc-paper .sum-price { font-size: 36px; }
  .menu-extra p, .log-src { font-size: 16px; }
  .log-drinks li { font-size: 16px; }
  .fc-shops { padding: 20px 16px 22px; }
  .fc-shops h3 { font-size: 30px; padding-right: 56px; }
  .pill-hi { padding: 12px 18px; font-size: 17px; }
  .pill-hi-price { font-size: 22px; }
  .tool-label { font-size: 16px; }
  .pill { padding: 0 14px; font-size: 16px; }
  .shop { padding: 12px 14px 8px; }
  .shop-name { font-size: 18px; }
  .fc-shops .store-sub, .shop-meta, .fc-shops .trend, .fc-shops .mark, .fc-shops .zone, .fc-paper .sum-best { font-size: 16px; }
  .shop-price { font-size: 22px; }
  .fc-shops .links a { min-height: 44px; padding-inline: 2px; }
  .fc-shops .verdict, .fc-shops .verdict.super { font-size: 16px; }
  .ficha-actions { margin: 12px 8px calc(8px + env(safe-area-inset-bottom, 0px)); padding: 6px; bottom: 8px; }
  .bar-name { display: none; }
  .ficha-actions { gap: 8px; }
  .ficha-actions .btn { flex: 1 1 auto; padding: 0 14px; font-size: 17px; }
  .bar-close button { padding: 0 18px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-stage::before { animation: none; }
  .pill, .ficha-close button, .bar-close button { transition: none; }
}

/* ---------- Bottles that light up when you point at them ----------
   A faint pool of light (.slot::after) appears behind the bottle, the bottle lifts and glows, the
   neighbours dim, the glass tag gets an amber hairline. .bottle-wrap::before is the GlareHover streak
   (bits.css), masked by the sprite PNG so it only crosses the glass. */
.bottle-wrap img, .bottle-wrap svg { transition: filter 0.25s ease, opacity 0.35s; }
.slot::after { transition: opacity 0.3s ease; }
.slot .tag { transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; }

.bottle-wrap.glare-hover {
  --gh-angle: -45deg;
  --gh-rgba: rgba(255, 250, 230, 0.65);
  --gh-size: 250%;
  --gh-duration: 650ms;
  display: flex;
  place-items: initial;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
}
.bottle-wrap.glare-hover::before {
  inset: 10px 0 0 0;
  z-index: 3;
  pointer-events: none;
  -webkit-mask: var(--glass) center bottom / auto calc(var(--h) * var(--px) * 1px) no-repeat;
  mask: var(--glass) center bottom / auto calc(var(--h) * var(--px) * 1px) no-repeat;
}
.bottle-wrap.glare-hover:not([style*="--glass"])::before { display: none; }
.slot:not(.empty):focus-visible .bottle-wrap.glare-hover::before { background-position: 100% 100%, 0 0; }

@media (hover: hover) {
  .shelf:hover .slot:not(:hover):not(.empty) .bottle-wrap img,
  .shelf:hover .slot:not(:hover):not(.empty) .bottle-wrap svg { filter: brightness(0.7) saturate(0.85); }
  .slot:not(.empty):hover::after { opacity: 1; }
  .slot:not(.empty):hover .bottle-wrap img,
  .slot:not(.empty):hover .bottle-wrap svg {
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 18px rgba(255, 196, 120, 0.5)) brightness(1.08) saturate(1.05);
  }
  .slot:not(.empty):hover .tag {
    transform: translateY(-2px);
    background: var(--glass-chip-hover);
    border-color: var(--glass-amber-line);
  }
}
.slot:not(.empty):focus-visible::after { opacity: 1; }
.slot:not(.empty):focus-visible .bottle-wrap img { filter: drop-shadow(0 0 18px rgba(255, 196, 120, 0.5)) brightness(1.08); }
.slot:not(.empty):focus-visible .tag { background: var(--glass-chip-hover); border-color: var(--glass-amber-line); }

@media (prefers-reduced-motion: reduce) {
  .bottle-wrap img, .bottle-wrap svg, .slot::after, .slot .tag { transition: none; }
}

/* Pixel-art sprites (tools/pixelart.py): crisp pixels and one scale per shelf,
   so every bottle keeps the same pixel size. --h is the sprite's native height. */
.slot { --px: 1.4; }
.bottle-wrap img.px, .ficha-bottle img.px {
  opacity: 1;
  image-rendering: pixelated;
  width: auto;
  height: calc(var(--h) * var(--px) * 1px);
  max-height: 100%;
}
@media (max-width: 760px) {
  .slot { --px: 1.2; }
}
/* Sprites are drawn at about one sprite pixel per screen pixel on the shelf (125 %
   zoom). Where that means shrinking (100 % zoom) or an uneven blow-up (the ficha),
   smooth scaling looks cleaner than nearest-neighbour, which drops or doubles rows. */
.ficha-bottle img.px { image-rendering: auto; }
@media (max-resolution: 1.15dppx) {
  .bottle-wrap img.px { image-rendering: auto; }
}

/* ---------- Recetario: filter chips ---------- */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
@media (max-width: 760px) {
  /* one swipeable row instead of seven wrapped ones, so the first recipe shows on the first screen */
  .chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 -14px; padding: 2px 14px 8px; -webkit-overflow-scrolling: touch; }
  .chip { flex: none; scroll-snap-align: start; }
}
.chip {
  min-height: 44px;
  padding: 0 16px;
  font: 400 17px/1 var(--f-text);
  color: var(--ink);
  background: rgba(255, 238, 200, 0.42);
  border: 1.5px solid rgba(50, 26, 6, 0.62);
  border-radius: 4px;
  cursor: pointer;
}
.chip small { margin-left: 4px; font-size: 17px; color: var(--muted); }
.chip:hover { border-color: var(--ink); background: rgba(255, 230, 175, 0.62); text-shadow: 0 0 8px rgba(255, 226, 160, 0.9); }
.chip[aria-pressed="true"] { color: var(--cream); font-weight: 700; text-shadow: none; background: radial-gradient(ellipse 80% 120% at 35% 25%, #8e2414 0, var(--wax) 55%, var(--wax-dark) 100%); border-color: #2a0703; }
.chip[aria-pressed="true"] small { color: var(--cream); }
.chip:focus-visible { outline: 3px solid var(--wax-ink); outline-offset: 2px; }
#recipes > .empty-note { grid-column: 1 / -1; }

/* ---------- La carta: the map drawn as an old nautical chart ---------- */
.z-centro { --zc: #f2b765; }
.z-este { --zc: #9fd3e6; }
.z-norte { --zc: #c7d18e; }
.z-oeste { --zc: #ecaaa0; }
.z-afueras { --zc: #c9b89c; }
.z-envio { --zc: #d4b8e2; }
.z-super { --zc: #a9c1f5; }
.z-varios { --zc: #e8d9a0; }

.map-sheet {
  background-blend-mode: normal;
  background:
    radial-gradient(ellipse 120% 110% at 50% 50%, transparent 82%, rgba(84, 38, 6, 0.4) 92%, rgba(46, 18, 3, 0.75) 100%),
    var(--lamp),
    linear-gradient(170deg, rgba(234, 206, 150, 0.6), rgba(222, 190, 132, 0.64)),
    var(--tex-paper) center / cover,
    var(--paper);
  box-shadow: 0 0 0 1px var(--paper-edge), inset 0 0 40px 6px rgba(52, 22, 3, 0.5), var(--shadow-night);
}
.map-sheet .hint, .map-sheet .legend-note, .map-sheet .rate, .map-sheet .dir, .map-sheet .legend small { color: var(--ink); }
.map-sheet .link-btn, .map-sheet .link-chalk { color: var(--link); }
.map-chips { margin: 0 0 14px; }
.map-wrap { max-width: 1040px; margin: 0 auto; overflow-x: auto; overscroll-behavior-x: contain; }
.map-wrap:focus-visible { outline: 3px solid var(--wax-ink); outline-offset: 2px; }
.map-wrap #map { max-width: none; }
#map { display: block; width: 100%; height: auto; color: #2a1a0c; }
#map path, #map line, #map circle, #map rect { vector-effect: non-scaling-stroke; }
#map text { font-family: var(--body); stroke: rgba(226, 204, 158, 0.82); stroke-width: 0.2em; stroke-linejoin: round; paint-order: stroke fill; }
#map .sea { fill: rgba(70, 104, 124, 0.24); }
#map .rhumb { fill: none; stroke: rgba(42, 26, 12, 0.1); stroke-width: 0.8px; }
#map .contour { fill: none; stroke: #27475a; stroke-width: 1px; }
#map .contour.c1 { stroke-dasharray: 2 5; opacity: 0.6; }
#map .contour.c2 { stroke-dasharray: 9 6; opacity: 0.32; }
#map .hatch { fill: none; stroke: rgba(42, 26, 12, 0.62); stroke-width: 1px; }
#map .coast { fill: none; stroke: #2a1a0c; stroke-width: 2.6px; stroke-linejoin: round; }
#map .coast2 { fill: none; stroke: rgba(42, 26, 12, 0.78); stroke-width: 1px; }
#map .avenue { fill: none; stroke: rgba(42, 26, 12, 0.55); stroke-width: 1.3px; stroke-dasharray: 7 5; }
#map .barrio { font-family: var(--caps); fill: #3f2d17; text-anchor: middle; }
#map .zone-label { font-family: var(--caps); fill: #2a1a0c; text-anchor: middle; }
#map .avenue-label { font-style: italic; fill: #3f2d17; text-anchor: middle; }
#map .sounding { font-style: italic; fill: #1b3345; text-anchor: middle; }
#map .sea-label { font-family: var(--display); font-style: italic; fill: #1b3345; }
#map .sea-label.small { font-family: var(--body); }
#map .frame { fill: none; stroke: #2a1a0c; }
#map .frame.o { stroke-width: 2.6px; }
#map .frame.i { stroke-width: 1px; }
#map .frame-ticks { fill: #2a1a0c; }
#map .scale rect { stroke: #2a1a0c; stroke-width: 1px; }
#map .scale rect.dk { fill: #2a1a0c; }
#map .scale rect.lt { fill: #efe2bf; }
#map .scale text, #map .cartouche text { fill: #2a1a0c; text-anchor: middle; stroke: none; }
#map .ring { fill: none; stroke: #2a1a0c; stroke-width: 1.4px; }
#map .ring.thin { stroke-width: 0.8px; }
#map .rticks { fill: none; stroke: #2a1a0c; stroke-width: 0.8px; }
#map .rose .dk { fill: #2a1a0c; stroke: #2a1a0c; stroke-width: 0.6px; }
#map .rose .lt { fill: #f1e4c0; stroke: #2a1a0c; stroke-width: 0.8px; }
#map .rose .hub { fill: #9a4d16; stroke: #2a1a0c; stroke-width: 1px; }
#map .rose .fleur { fill: #2a1a0c; stroke: none; }
#map .wind text { font-family: var(--caps); font-weight: 700; fill: #2a1a0c; text-anchor: middle; dominant-baseline: central; stroke: none; }
#map .c-fill { fill: rgba(245, 232, 200, 0.95); stroke: #2a1a0c; stroke-width: 1.8px; }
#map .c-line { fill: none; stroke: #2a1a0c; stroke-width: 0.9px; }
#map .c-dot { fill: #2a1a0c; }
#map .c-cap { font-family: var(--caps); fill: #3f2d17; }
#map .c-name { font-family: var(--display); }

#map .pin { cursor: pointer; outline: none; }
#map .pin .hit { fill: transparent; stroke: none; }
#map .pin .halo { display: none; fill: none; stroke: #c4661a; stroke-width: 3px; }
#map .pin:hover .halo, #map .pin.hot .halo, #map .pin.picked .halo, #map .pin:focus-visible .halo { display: inline; }
#map .pin .badge { fill: var(--zc); stroke: #2a1a0c; stroke-width: 1.8px; }
#map .pin.picked .badge { stroke-width: 3.2px; }
#map .pin text { font-weight: 800; fill: #1c130b; text-anchor: middle; dominant-baseline: central; stroke: none; }
#map .pin .spot { fill: none; stroke: #7a1f0f; stroke-width: 2.6px; stroke-linecap: round; }
#map .pin .stem { stroke: #2a1a0c; stroke-width: 1.3px; }
#map .pin .arrow { fill: #7a1f0f; stroke: #2a1a0c; stroke-width: 1px; }

.legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px 22px; margin-top: 16px; font-size: 17px; color: var(--ink); }
.legend-zone h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font: 700 17px/1.2 var(--f-text); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); }
.legend-zone .sw { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--zc); border: 1.5px solid #2a1a0c; }
.legend-zone .sw.away { background: #7a1f0f; }
.legend-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 4px 8px; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-radius: 4px; cursor: pointer; }
.legend-row:hover, .legend-row.hot { background: rgba(255, 220, 150, 0.38); }
.legend-row.picked { background: rgba(255, 214, 140, 0.3); box-shadow: inset 0 0 0 2px var(--wax-ink); }
.legend-row:focus-visible { outline: 3px solid var(--wax-ink); outline-offset: 1px; }
.legend .dir { font-size: 17px; color: var(--ink); }
.legend .rate, .legend small { color: var(--ink); }
.legend .num, .board .num { flex: none; display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 4px; border-radius: 14px; font-weight: 800; font-size: 17px; color: #1c130b; background: var(--zc, #f2b765); box-shadow: 0 0 0 1.5px #2a1a0c; }
.board .num { box-shadow: 0 0 0 1.5px #050302; }
.legend-note { margin: 10px 0 0; font-size: 17px; color: var(--ink); }

.board { transition: box-shadow 0.25s ease; }
.board.hot { box-shadow: inset 0 0 0 1px rgba(201, 164, 92, 0.5), 0 0 0 2px var(--gold), 0 0 24px rgba(255, 196, 120, 0.4), var(--shadow-night); }
.board.picked { outline: 3px solid var(--gold-link); outline-offset: 3px; box-shadow: inset 0 0 0 1px rgba(201, 164, 92, 0.5), 0 0 30px 4px rgba(255, 196, 120, 0.4), var(--shadow-night); }
.board:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

@media (max-width: 760px) {
  .map-sheet { padding: 22px 8px 12px; box-shadow: 0 0 0 1px var(--paper-edge), inset 0 0 20px 3px rgba(52, 22, 3, 0.5), var(--shadow-night); }
  .map-sheet h2, .map-sheet .hint { padding-inline: 12px; }
  .map-chips { margin-inline: -8px; padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .board { transition: none; }
}

/* ---------- Order, location, extra filters and offer marks ----------
   They sit on the frosted filter panel (.counter-note.glass): cream ink, light gilt captions.
   The panel is a 4-column grid; the shelf chips take the first row, the summary line the last. */
.order-note { grid-column: 1 / -1; margin: 0; font-size: 17px; line-height: 1.35; color: var(--ink-2); }
.order-note[hidden] { display: none; }

.more-filters { grid-column: 1 / -1; }
.more-filters > summary { width: fit-content; font: 700 17px/1.2 var(--f-text); color: var(--link); }
.more-filters > summary:hover { color: var(--glass-cream); }
.more-filters > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--glass-r-ctl); }
/* how many extra filters are on: a small amber pill, dark ink (10:1) */
.more-count {
  display: inline-block;
  min-width: 24px;
  padding: 1px 8px;
  border-radius: 12px;
  text-align: center;
  font: 700 17px/1.3 var(--f-text);
  color: var(--sepia);
  background: var(--glass-amber);
}
.more-count[hidden] { display: none; }
.more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 18px;
  align-items: end;
  padding: 8px 0 6px;
}
.check { display: flex; align-items: center; gap: 10px; min-height: 46px; font: 700 17px/1.2 var(--f-text); color: var(--ink); cursor: pointer; }
.check input { width: 24px; height: 24px; accent-color: var(--gold); }
.check span { text-transform: none; letter-spacing: 0; font-size: 17px; color: var(--ink); }
.more-grid select:disabled { opacity: 1; color: var(--muted); }

.tag-meta { display: block; margin-top: 3px; font: 700 17px/1.2 var(--f-text); color: var(--ink-2); overflow-wrap: anywhere; }
.tag-deals { display: block; margin-top: 4px; }
.deal {
  display: inline-block;
  margin: 2px 2px 0 0;
  padding: 1px 8px;
  border-radius: 10px;
  font: 700 17px/1.25 var(--f-text);
  color: #f6f0d6;
  background: #2f4a14;
  vertical-align: 1px;
}
.deal.low { background: #14405a; }
.price-idx { font-size: 17px; }

@media (max-width: 760px) {
  .field-where { grid-column: 1 / -1; }
  .more-grid { grid-template-columns: 1fr 1fr; }
  .more-grid .btn { grid-column: 1 / -1; }
  .tag-meta, .deal, .price-idx { font-size: 16px; }
}

/* field captions reach the readable minimum (17 px on desktop, 16 px on phones) */
.counter-note .field > span { font-size: 17px; letter-spacing: 0.08em; }
@media (max-width: 760px) { .counter-note .field > span { font-size: 16px; } }

/* ---------- Las Jodas: posters pasted on a lantern-lit wall ---------- */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.jodas-sheet { width: min(860px, 100%); margin: 0 auto; padding: 26px 28px 22px; text-align: center; }
.jodas-sheet h2 { margin: 0 0 6px; font: 400 44px/1.05 var(--f-display); color: var(--ink); }
.jodas-sheet .hint { margin: 0 auto 16px; max-width: 56ch; }
.joda-meta { margin: 12px auto 0; max-width: 70ch; font-size: 17px; color: var(--ink-2); }
.joda-previa { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(42, 28, 17, 0.35); }
.joda-previa span { max-width: 38ch; font-size: 17px; text-align: left; color: var(--ink-2); }

.joda-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 28px; align-items: stretch; }
.joda { display: flex; flex-direction: column; min-width: 0; }
.joda-flyer {
  margin: 14px 14px 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #140b05;
  box-shadow: 0 0 0 1.5px var(--paper-edge), 0 3px 8px rgba(30, 12, 2, 0.5);
  transform: rotate(-0.6deg);
}
.joda-flyer img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: sepia(0.2) brightness(0.93) contrast(1.04); }
.joda-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 20px 20px; min-width: 0; }
.joda-flags { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; }
.joda-flag {
  padding: 0 8px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  font: 700 16px/1.35 var(--f-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wax-ink);
  background: rgba(255, 240, 210, 0.22);
  transform: rotate(-1.5deg);
}
.joda-flag.f-hoy { color: var(--cream); background: radial-gradient(ellipse 80% 120% at 35% 25%, #8e2414 0, var(--wax) 55%, var(--wax-dark) 100%); border-color: #2a0703; }
.joda-flag.f-nuevo { color: var(--sea-ink); }
.joda h3 { margin: 2px 0 0; font: 400 30px/1.08 var(--f-display); color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
.joda-when { margin: 0; font: 700 18px/1.3 var(--f-text); color: var(--ink); }
.joda-when time { display: inline-block; }
.joda-when time::first-letter { text-transform: uppercase; }
.joda-where { margin: 0; font-size: 17px; color: var(--ink-2); overflow-wrap: anywhere; }
.joda-where b { display: block; font-size: 18px; color: var(--ink); }
.joda-where span { display: block; font-style: italic; }
.joda-lots { flex: 1; list-style: none; margin: 8px 0 8px; padding: 8px 0 0; border-top: 1px solid rgba(42, 28, 17, 0.35); }
.joda-lots li { display: flex; gap: 6px; align-items: baseline; padding: 3px 0; font-size: 17px; }
.joda-lots .dots { flex: 1; min-width: 12px; border-bottom: 1px dotted rgba(42, 28, 17, 0.55); transform: translateY(-4px); }
.joda-lots .amt { white-space: nowrap; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.joda-nolots { flex: 1; margin: 8px 0; padding-top: 8px; border-top: 1px solid rgba(42, 28, 17, 0.35); font-size: 17px; font-style: italic; color: var(--ink-2); }
.joda-buy { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; margin-top: 4px; text-align: center; text-decoration: none; white-space: normal; }
.joda-empty { grid-column: 1 / -1; width: min(640px, 100%); margin: 0 auto; padding: 26px 28px; text-align: center; }
.joda-empty h3 { margin: 0 0 6px; font: 400 32px/1.1 var(--f-display); color: var(--gold-hi); }
.joda-empty p { margin: 4px auto 14px; max-width: 46ch; font-size: 18px; }
.joda-empty p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .jodas-sheet { padding: 22px 16px 18px; }
  .jodas-sheet h2 { font-size: 36px; }
  .joda h3 { font-size: 28px; }
  .joda-body { padding: 12px 16px 18px; }
  .joda-buy { align-self: stretch; }
  .joda-previa span { text-align: center; }
  .joda-meta, .joda-previa span, .joda-where, .joda-lots li, .joda-nolots { font-size: 16px; }
  .joda-where b { font-size: 17px; }
}

/* ---------- Mandanos tu lista: a dialog on dark oiled wood ---------- */
.lista { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 6px; overflow: auto; }
.lista::backdrop { background: var(--night-veil); backdrop-filter: blur(2px); }
.lista-form, .lista-ok { display: grid; gap: 14px; padding: 28px clamp(18px, 4vw, 34px) 26px; }
.lista-form[hidden], .lista-ok[hidden] { display: none; }
.lista h2 { margin: 0; font: 400 38px/1.05 var(--f-display); color: var(--gold-hi); }
.lista .hint { margin: 0; color: var(--bone); }
.lista .field > span { font-size: 17px; letter-spacing: 0.04em; }
.lista .field textarea {
  width: 100%;
  min-height: 150px;
  padding: 8px 10px;
  font: 400 17px/1.4 var(--f-text);
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: 4px;
  resize: vertical;
}
.lista .field textarea::placeholder { color: var(--placeholder); opacity: 1; }
.lista .field input[type="file"] { padding: 6px 8px; cursor: pointer; }
.lista .field input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 7px 14px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  font: 700 17px/1.1 var(--f-text);
  color: var(--plate-ink);
  background: var(--plate);
  box-shadow: 0 0 0 1px var(--plate-rim), 0 0 0 2px var(--plate-edge);
}
.lista-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lista-msg { min-height: 1.5em; margin: 0; font-size: 17px; color: var(--ink-2); }
.lista-msg.bad { font-weight: 700; color: #ffb9a6; }
.lista-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.lista-ok p { margin: 0; font-size: 18px; }
.lista-ok .btn { justify-self: start; }
.btn:disabled { opacity: 0.7; cursor: progress; }
@media (max-width: 760px) {
  .lista h2 { font-size: 32px; }
  .lista .field > span { font-size: 16px; }
  .lista-actions .btn { flex: 1 1 140px; }
}
.joda-flag { font-size: 17px; }
#joda-chips .chip small { font-size: 17px; }

/* ---------- QA fixes (2026-09-30 night) ---------- */
@media (max-width: 760px) {
  /* zone and other selects: a little less padding so "Todo Montevideo" fits; long values get an ellipsis */
  /* the zone names are long ('Centro y Ciudad Vieja'): that field gets the whole row, the short ones share rows */
  .counter-note { grid-auto-flow: row dense; }
  .counter-note .field:has(#reach), .counter-note .field:has(#order) { grid-column: 1 / -1; }
  .counter-note .field select { font-size: 16px; padding: 8px 36px 8px 12px; text-overflow: ellipsis; white-space: nowrap; }
}
.pan-hint { display: none; margin: 6px 0 0; font-size: 16px; }
.map-wrap.pans + .pan-hint { display: block; }
/* phones may keep the legend at 16 px */
@media (max-width: 760px) { .legend-zone h4 { font-size: 16px; } .legend .num, .board .num { font-size: 16px; } }
/* ---------- Night-out touches: warm party accents, used sparingly ----------
   Never behind text: they colour graphics only (slider fill, switch glow, the stamp ring). Text keeps the bone / gilt inks. */
:root {
  --party-amber: #ffb454;
  --party-magenta: #ff6fb5;
  --party-cyan: #6fe7f5;
  --party-glow: 0 0 12px rgba(255, 140, 90, 0.5);
}

/* Ring that spreads from the "Guardar en el cofre" stamp (animated by motion.js) */
.btn { position: relative; }
.stamp-ring {
  position: absolute;
  inset: -3px;
  border: 2px solid var(--party-amber);
  border-radius: inherit;
  box-shadow: 0 0 10px rgba(255, 111, 181, 0.55);
  opacity: 0;
  pointer-events: none;
}
/* The ficha opens over a soft veil (not under reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .ficha[open]::backdrop { animation: veil-in 0.35s ease-out; }
}
@keyframes veil-in { from { opacity: 0; } }

/* ---------- Price range and switches in "Más filtros" ----------
   Base pieces from Uiverse.io (MIT), rebuilt in frosted glass; see img/CREDITS.md.
   They sit on the filter panel, so they use the cream inks of .glass: a thin light track, an amber fill,
   glass thumbs, pale switches that turn amber when on. */
.price-range, .switches { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.price-range legend, .switches legend {
  padding: 0;
  margin-bottom: 8px;
  font: 700 17px/1.2 var(--f-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.pr-vals { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px 18px; }
.pr-val input { min-height: 46px; }

/* Double slider. Base for the thumb and its hover halo: "Slider" by satisshTechie, Uiverse.io (MIT),
   https://github.com/uiverse-io/galaxy/blob/main/Inputs/satisshTechie_sharp-hound-14.html
   Reworked: two inputs over one track, glass colours, 28px thumbs, keyboard ring. */
.pr-slider {
  --thumb: 28px;
  --lo: 0;
  --hi: 1;
  position: relative;
  height: 48px;
  margin-top: 6px;
  max-width: 640px;
}
.pr-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255, 244, 220, 0.3);
}
.pr-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--lo) * (100% - var(--thumb)) + var(--thumb) / 2);
  right: calc((1 - var(--hi)) * (100% - var(--thumb)) + var(--thumb) / 2);
  border-radius: 999px;
  background: var(--glass-amber);
}
.pr-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;   /* only the thumbs take the pointer, so both can be grabbed */
  touch-action: pan-y;    /* a sideways drag moves the thumb, a vertical one still scrolls the page */
  cursor: pointer;
}
.pr-thumb:focus { outline: none; }
.pr-thumb::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
.pr-thumb::-moz-range-track { height: 100%; background: transparent; border: 0; }
.pr-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((48px - var(--thumb)) / 2);
  border-radius: 50%;
  border: 1.5px solid rgba(255, 244, 220, 0.85);
  background: rgba(255, 248, 230, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  cursor: grab;
  transition: box-shadow 0.25s ease;
}
.pr-thumb::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  border: 1.5px solid rgba(255, 244, 220, 0.85);
  background: rgba(255, 248, 230, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
  cursor: grab;
  transition: box-shadow 0.25s ease;
}
.pr-thumb:hover::-webkit-slider-thumb, .pr-thumb:active::-webkit-slider-thumb { box-shadow: 0 0 0 7px rgba(255, 180, 84, 0.25), 0 2px 8px rgba(0, 0, 0, 0.45); cursor: grabbing; }
.pr-thumb:hover::-moz-range-thumb, .pr-thumb:active::-moz-range-thumb { box-shadow: 0 0 0 7px rgba(255, 180, 84, 0.25), 0 2px 8px rgba(0, 0, 0, 0.45); cursor: grabbing; }
.pr-thumb:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--focus), 0 0 0 6px rgba(12, 10, 18, 0.9); }
.pr-thumb:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--focus), 0 0 0 6px rgba(12, 10, 18, 0.9); }
.pr-text { margin: 0; font-size: 17px; line-height: 1.3; color: var(--ink-2); }
.pr-text.is-bad { color: #ffb4d4; }
.pr-vals input[aria-invalid="true"] { border-color: #ff8fc2; }

/* Switches. Base: "switch" by AnthonyPreite, Uiverse.io (MIT),
   https://github.com/uiverse-io/galaxy/blob/main/Toggle-switches/AnthonyPreite_neat-bat-64.html
   A pale hairline track with a cream knob that slides; amber fill and knob when on.
   The state is also read from the knob position, not only from the colour. */
.switches { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.switches legend { float: left; width: 100%; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 46px; cursor: pointer; font: 700 17px/1.2 var(--f-text); color: var(--ink); }
.switch-input { position: absolute; opacity: 0; width: 60px; height: 34px; margin: 0; cursor: pointer; }
.switch-track {
  position: relative;
  flex: none;
  width: 60px;
  height: 34px;
  border-radius: 34px;
  background: var(--glass-chip);
  box-shadow: inset 0 0 0 1px var(--glass-line-hi);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.switch-track::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e6dcc4;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, background 0.3s ease;
}
.switch-input:checked + .switch-track {
  background: rgba(255, 180, 84, 0.28);
  box-shadow: inset 0 0 0 1px var(--glass-amber);
}
.switch-input:checked + .switch-track::before {
  transform: translateX(26px);
  background: var(--glass-amber);
}
.switch-input:focus-visible + .switch-track { outline: 3px solid var(--focus); outline-offset: 3px; }
.switch:hover .switch-text { color: var(--glass-cream); }

@media (max-width: 760px) {
  .price-range legend, .switches legend { font-size: 16px; }
  .pr-vals { grid-template-columns: 1fr 1fr; }
  .switches { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .switch-track, .switch-track::before, .pr-thumb::-webkit-slider-thumb, .pr-thumb::-moz-range-thumb { transition: none; }
}