/* REF-TILL-COLOURS · registry: docs/03-product/screens.md */
/* Owner dashboard (SPEC-006). One accent, warm neutrals, numbers first. */
/* Colours and type come from brand/tokens.css (IBM Plex, Pablo's palette, 2026-10-07).
   These aliases keep the dashboard's own names. */
:root {
  --paper: var(--bg);
  --ink: var(--fg);
  --faint: var(--surface-2);
  --accent: var(--sea);
  --accent-soft: var(--sea-soft);
  --warn: #8a6100;
  --warn-soft: var(--sun-soft);
  --danger: var(--brick);
  --shadow: 0 1px 2px rgba(35, 61, 77, 0.06), 0 6px 18px rgba(35, 61, 77, 0.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --warn: var(--sun); --shadow: none; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
:where(a) { color: inherit; }
.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }

/* Element defaults for the screens not yet on the design system (sign-in, sign-up, the
   partner panel, subscription). Wrapped in :where() so ds- components always win. */

/* Top bar */
.top { border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 2; }
.top .wrap { display: flex; align-items: center; gap: 1rem; min-height: 3.5rem; flex-wrap: wrap; }
.brand { font-weight: 700; letter-spacing: -0.01em; }
.brand small { display: block; font-weight: 500; color: var(--muted); font-size: 0.75rem; letter-spacing: 0; }
.nav { display: flex; gap: 0.25rem; margin-left: auto; flex-wrap: wrap; }
.nav a, .nav button {
  text-decoration: none; padding: 0.45rem 0.75rem; border-radius: 999px; color: var(--muted);
  font: inherit; font-size: 0.92rem; background: none; border: 0; cursor: pointer;
}
.nav a[aria-current="page"] { background: var(--faint); color: var(--ink); font-weight: 600; }

/* Page */
:where(main) { padding: 1.75rem 0 4rem; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
:where(h1) { font-size: 1.6rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
:where(h2) { font-size: 1.05rem; margin: 2rem 0 0.75rem; letter-spacing: -0.01em; }
.lede { color: var(--muted); margin: 0.35rem 0 0; max-width: 42rem; }
.rule-chip {
  display: inline-flex; gap: 0.4rem; align-items: center; font-size: 0.8rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.7rem; background: var(--surface);
}
.rule-chip b { color: var(--ink); font-weight: 600; }

/* Buttons and forms */
.button {
  display: inline-flex; align-items: center; gap: 0.4rem; border: 0; border-radius: 10px;
  background: var(--ink); color: var(--paper); padding: 0.7rem 1.1rem; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.button.secondary { background: var(--faint); color: var(--ink); }
.button.small { padding: 0.45rem 0.8rem; font-size: 0.9rem; }
:where(label) { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.35rem; }
:where(input[type=text], input[type=email], input[type=number], input[type=date], select) {
  width: 100%; font: inherit; padding: 0.7rem 0.8rem; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}
:where(input:focus-visible, select:focus-visible, .button:focus-visible) { outline: 3px solid var(--accent-soft); outline-offset: 1px; border-color: var(--accent); }
.field { margin-bottom: 1rem; }
.errorlist { list-style: none; padding: 0; margin: 0.35rem 0 0; color: var(--danger); font-size: 0.9rem; }
.form-grid { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* Cards */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; }
.campaigns { display: grid; gap: 0.9rem; }
.campaign { display: grid; gap: 1rem; grid-template-columns: 1fr; text-decoration: none; }
@media (min-width: 46rem) { .campaign { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } }
.campaign:hover { border-color: var(--muted); }
.campaign .name { font-weight: 650; font-size: 1.05rem; }
.meta { color: var(--muted); font-size: 0.85rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.15rem; }
.chip { font-size: 0.75rem; border-radius: 999px; padding: 0.1rem 0.55rem; background: var(--faint); color: var(--ink); }
.chip.provisional { background: var(--warn-soft); color: var(--warn); }
.headline { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.headline small { display: block; font-size: 0.8rem; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-top: 0.2rem; }
.scale { position: relative; height: 6px; border-radius: 999px; background: var(--faint); margin-top: 0.6rem; }
.scale span { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.5rem; }
.stat b { display: block; font-size: 1.15rem; white-space: nowrap; }
.stat span { color: var(--muted); font-size: 0.78rem; }

/* Callouts and tables */
.callout { border-radius: var(--radius); padding: 0.9rem 1.1rem; background: var(--accent-soft); margin-bottom: 1.25rem; }
.callout.neutral { background: var(--faint); }
.table-wrap { overflow-x: auto; }
:where(table) { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
:where(th, td) { text-align: right; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
:where(th:first-child, td:first-child) { text-align: left; }
:where(th) { color: var(--muted); font-weight: 600; font-size: 0.8rem; }
.figures { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.figure { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.figure b { display: block; font-size: 1.5rem; letter-spacing: -0.02em; }
.figure span { color: var(--muted); font-size: 0.82rem; }
.codes { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.codes li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.codes code { font-size: 0.8rem; color: var(--muted); word-break: break-all; }
.note { color: var(--muted); font-size: 0.85rem; }

/* Sign-in */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; }
.auth .panel { width: 100%; max-width: 24rem; padding: 1.75rem; }
.auth h1 { margin-bottom: 0.4rem; }
.code-input { font-size: 1.6rem !important; letter-spacing: 0.4em; text-align: center; }

/* Figures read in IBM Plex Mono: tabular, unambiguous digits; a figure never breaks from its € */
.headline, .figure b, td.num, .num { font-variant-numeric: tabular-nums; }
.headline, .figure b, .stat b, .num { white-space: nowrap; }
.headline small { white-space: normal; }

/* Subscription (billing): plans and trial */
.plans { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; display: grid; gap: 0.5rem; background: var(--surface); }
.plan b.price { font-size: 1.6rem; font-family: var(--font-mono); font-weight: 500; }
.trial { background: var(--sun-soft); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.figure b, td.num, .num { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; }
/* The single primary action per screen */
.button.primary, button.primary { background: var(--action-bg); color: var(--action-fg); border-color: var(--action-bg); }

/* Campaign form: the campaign, then its gift and the gift's conditions. */
.form-section { border: 0; margin: 0 0 1.2rem; padding: 0; min-width: 0; }
.form-section legend { font-weight: 600; font-size: 1.05rem; margin-bottom: .7rem; padding: 0; }
.field .help { display: block; color: var(--muted); font-size: .8rem; margin-top: .25rem; }
.conditions-box { margin-top: 1rem; border: 1px solid var(--line); border-radius: .8rem; padding: .8rem 1rem; background: var(--surface); }
.conditions-box summary { cursor: pointer; font-weight: 600; }
.conditions-box .note { margin: .6rem 0 .9rem; }
.field ul { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.field ul label { font-weight: 400; display: inline-flex; gap: .3rem; align-items: center; }
.cost-note { color: var(--muted); font-size: .82rem; }
.cost-missing { display: inline-block; background: var(--warn-soft); color: var(--warn); border-radius: 999px; padding: .1rem .55rem; font-size: .78rem; font-weight: 600; }
.gift-note { background: var(--warn-soft); border-radius: .8rem; padding: .7rem .9rem; font-size: .9rem; margin-top: .6rem; }

/* ---------- Owner panel on the design system (home A1 «El parte», Pablo 2026-10-08) ----------
   Layout only: every colour, size, radius and space comes from tokens.css; the pieces are the
   ds- components. Matches the panel shown on the website (#ejemplo). */
.panel-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.panel-side { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
.panel-side-foot { margin-top: auto; display: grid; gap: var(--space-1); }
.panel-link { background: none; border: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); font: 500 var(--fs-14)/1.2 var(--font-sans); color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.panel-side .panel-link:hover { color: var(--on-indigo); }
.panel-main { min-width: 0; padding: var(--space-8) var(--space-6) var(--space-16); }
.panel-main .ds-page-head { margin-bottom: var(--space-5); }
.panel-main :where(h2, h3), .ds-card :where(p), .panel-stack > :where(p) { margin: 0; }
.panel-main :where(label) { margin-bottom: 0; }
.panel-tabbar { display: none; }
.panel-subnav { display: none; }
.panel-stack { display: grid; gap: var(--space-5); align-content: start; }
.panel-section { display: grid; gap: var(--space-3); }
.panel-sub { margin: 0; font-size: var(--fs-18); font-weight: 600; letter-spacing: -0.01em; }
.panel-calm { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--surface); color: var(--muted); }
.panel-small { margin: 0; font-size: var(--fs-14); }
.panel-pause { margin-bottom: var(--space-4); }
.panel-pause > div { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; }
.panel-pause p { margin: 0; flex: 1 1 28rem; }
.panel-pause-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.panel-freshness { margin-bottom: var(--space-3); color: var(--muted); }
.panel-fit { justify-self: start; }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-3); align-items: start; }
.panel-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.panel-answer-link { justify-self: start; font-size: var(--fs-14); font-weight: 600; }
.panel-answer-action { justify-self: start; }

/* The home's details, one click down */
.panel-disclosure > summary { cursor: pointer; font-weight: 600; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--surface); list-style-position: inside; }
.panel-more { margin-top: var(--space-4); }
.panel-more-head { display: grid; gap: 2px; }
.panel-chart { width: 100%; height: auto; display: block; }
.panel-chart text { fill: var(--muted); font: 10px var(--font-mono); }
.panel-chart .grid { stroke: var(--line); }
.panel-stackrow { display: grid; gap: var(--space-1); font-size: var(--fs-14); }
.panel-facts { margin: 0; display: grid; gap: var(--space-2); font-size: var(--fs-14); }
.panel-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.panel-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.panel-facts dt { color: var(--muted); }
.panel-staff-notice { margin: var(--space-3) 0; font-size: var(--fs-14); }
.panel-staff-notice summary { cursor: pointer; color: var(--link); font-weight: 600; }
.panel-staff-notice-text { margin-top: var(--space-3); max-width: 44rem; }
.panel-staff-notice-text p { margin: 0 0 var(--space-2); }
.panel-facts dd { margin: 0; text-align: right; }
.panel-facts > .panel-member { flex-wrap: wrap; align-items: center; padding-block: var(--space-1) var(--space-3); }
.panel-member .who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; margin-right: auto; }
.panel-member .who small { flex-basis: 100%; color: var(--muted); font-size: var(--fs-12); }
.panel-member .panel-actions { gap: var(--space-3); }
.panel-member .panel-inline { align-items: center; flex-wrap: nowrap; }

/* Counts as bars on one scale, the figure in text beside them */
.panel-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--fs-14); }
.panel-bars li { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) 3em; gap: var(--space-3); align-items: center; }
.panel-bars b { text-align: right; }
.panel-bar { height: 10px; border-radius: var(--radius-pill); background: var(--data-track); overflow: hidden; }
.panel-bar i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--data-regular); }
.panel-funnel .panel-bar i { background: var(--data-new); }
.panel-funnel li:last-child .panel-bar i { background: var(--data-returning); }

/* Lists of cards: campaigns, regulars, QR codes */
.panel-list { display: grid; gap: var(--space-2); }
.panel-disclosure { background: var(--surface); border-radius: var(--radius-m); }
.panel-disclosure > summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); background: none; }
.panel-disclosure-body { padding: 0 var(--space-4) var(--space-4); }
.panel-timeline { list-style: none; margin: 0; padding: 0 var(--space-4) var(--space-4); display: grid; gap: var(--space-2); font-size: var(--fs-14); }
.panel-timeline li { display: grid; grid-template-columns: 8em 1fr; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.panel-campaign { color: inherit; text-decoration: none; display: grid; gap: var(--space-3); }
.panel-campaign:hover { box-shadow: var(--shadow-card); }
.panel-campaign h2 { margin: 0; font-size: var(--fs-18); font-weight: 600; }
.panel-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--fs-14); color: var(--muted); }
.panel-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.panel-figure b { font: 500 var(--fs-24)/1.1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel-figure span { color: var(--muted); font-size: var(--fs-14); }
.panel-repeat { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--fs-14); }
.panel-repeat-bar { flex: 0 0 140px; height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.panel-repeat-bar i { display: block; height: 100%; border-radius: 5px; background: var(--data-new); }
.panel-codes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.panel-codes li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.panel-qr { width: 96px; height: 96px; padding: var(--space-1); border-radius: var(--radius-s); background: var(--receipt-paper); }
.panel-qr svg { display: block; width: 100%; height: 100%; }
.panel-codes code { font: 500 var(--fs-12)/1.4 var(--font-mono); color: var(--muted); word-break: break-all; }
.panel-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Forms on the design system */
.panel-form { display: grid; gap: var(--space-4); }
.panel-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-4); min-width: 0; }
.panel-form legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--fs-18); font-weight: 600; }
.gift-cost-form .ds-field { max-width: 28rem; }
.panel-fields { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.panel-fields > .ds-field { align-content: start; }
.panel-choice > div, .panel-choice > div > div { display: contents; }
.panel-choice label { font-size: var(--fs-14); }
.panel-inline { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; }
.panel-inline .ds-field { flex: 1 1 12em; }
.panel-pin { width: 6.5em; }
/* A control as tall as a small button, for forms that sit inside a row or a table cell */
.ds-input.is-small { min-height: 36px; padding: 6px var(--space-3); font-size: var(--fs-14); border-radius: var(--radius-s); }
/* Destructive actions inside a list: quiet until hovered, never louder than the row */
.panel-quiet-danger { background: none; border: 0; padding: var(--space-2) 0; color: var(--danger-fg); font: 600 var(--fs-14)/1.2 var(--font-sans); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; cursor: pointer; white-space: nowrap; transition: text-decoration-color var(--duration-fast) var(--ease-out); }
.panel-quiet-danger:hover, .panel-quiet-danger:focus-visible { text-decoration-color: currentColor; }
.panel-void { display: flex; align-items: center; justify-content: flex-end; }
.panel-void summary { list-style: none; }
.panel-void summary::-webkit-details-marker { display: none; }
.panel-void[open] summary { display: none; }
.panel-void form { display: flex; align-items: center; gap: var(--space-2); }
.panel-void .ds-input { width: 13em; }
/* «← Campañas»: the way back to the page above */
.panel-back { display: inline-flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-3); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2); border-radius: var(--radius-pill); color: var(--muted); font: 500 var(--fs-14)/1.2 var(--font-sans); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.panel-back svg { width: 16px; height: 16px; transition: transform var(--duration-base) var(--ease-spring); }
.panel-back:hover { background: var(--surface); color: var(--fg); }
.panel-back:hover svg { transform: translateX(-3px); }
.ds-input[type="color"] { width: 72px; padding: var(--space-1); }
.panel-preview { position: sticky; top: var(--space-4); display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-l); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.panel-preview-cta { padding: var(--space-3); border-radius: var(--radius-m); background: var(--action-bg); color: var(--action-fg); text-align: center; font-weight: 600; }
.panel-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--space-6); align-items: start; }
.panel-pairing { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: var(--space-4); align-items: center; }
.panel-pairing code { display: block; padding: var(--space-2); border-radius: var(--radius-s); background: var(--surface-2); font: 500 var(--fs-14)/1.4 var(--font-mono); word-break: break-all; }
.panel-pairing .panel-qr { width: 176px; height: 176px; }
.ds-table tr.is-voided td { color: var(--muted); text-decoration: line-through; }
.ds-table tr.is-voided td.panel-keep { text-decoration: none; }
.panel-day { margin: var(--space-4) 0 var(--space-2); font-size: var(--fs-14); font-weight: 600; color: var(--muted); }
.panel-pages { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }

@media (max-width: 860px) {
  .panel-shell { grid-template-columns: minmax(0, 1fr); }
  /* The side menu becomes the top bar: the business, its plan and «Salir»; the tab bar navigates. */
  .panel-side { position: static; height: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); overflow: visible; }
  .panel-side > .ds-logo, .panel-side > .ds-nav-group { display: none; }
  .panel-side .business { padding-inline: 0; }
  .panel-side-foot { margin-top: 0; display: flex; align-items: center; }
  .panel-side-foot form:not(:last-child) { display: none; }
  .panel-main { padding: var(--space-5) var(--space-4) calc(var(--space-24) + env(safe-area-inset-bottom, 0px)); }
  .panel-tabbar { display: grid; }
  .panel-main .ds-todo li { grid-template-columns: 28px minmax(0, 1fr); }
  .panel-main .ds-todo li > .ds-btn { grid-column: 2; justify-self: start; padding-inline: 0; min-height: 0; }
  .panel-subnav { display: flex; gap: var(--space-1); margin-bottom: var(--space-4); overflow-x: auto; scrollbar-width: none; }
  .panel-subnav a { flex: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); background: var(--surface); color: var(--muted); font-size: var(--fs-14); font-weight: 500; text-decoration: none; }
  .panel-subnav a[aria-current="page"] { background: var(--indigo); color: var(--on-indigo); font-weight: 600; }
  .panel-two, .panel-pairing { grid-template-columns: minmax(0, 1fr); }
  .panel-preview { position: static; }
}

/* ---------- The public example (SCR-EXAMPLE-BAR, SCR-EXAMPLE-DIALOG, SCR-EXAMPLE-CARD, SCR-EXAMPLE-TILL, SCR-EXAMPLE-SIDES, SCR-EXAMPLE-TOUR; SPEC-011) ---------- */
body.is-example { --example-bar-h: 56px; }
.panel-example-bar { position: sticky; top: 0; z-index: 45; min-height: var(--example-bar-h); display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-5); background: var(--sun-soft); color: var(--fg); border-bottom: 1px solid var(--line); }
.panel-example-bar p { margin: 0; font-size: var(--fs-14); min-width: 0; }
.panel-example-bar .dot { display: inline-block; margin-right: var(--space-2); vertical-align: 1px; }
.panel-example-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 2px var(--fg); flex: none; animation: example-pulse 2s var(--ease-out) infinite; }
@keyframes example-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .panel-example-bar .dot { animation: none; } }
.panel-example-bar .sides { display: flex; gap: var(--space-1); margin-left: auto; }
.panel-example-bar .sides a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); color: inherit; font-weight: 600; font-size: var(--fs-14); text-decoration: none; }
.panel-example-bar .sides a:hover, .panel-example-bar .sides a[aria-current] { background: var(--surface); }
.panel-example-bar .leave { margin: 0; }
.panel-example-bar .leave button { background: none; border: 0; color: inherit; font: 500 var(--fs-14)/1.2 var(--font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: var(--space-2); }
body.is-example .panel-side-foot { display: none; }
body.is-example [data-tour] { scroll-margin-top: calc(var(--example-bar-h) + var(--space-4)); }
@media (min-width: 861px) {
  body.is-example .panel-side { top: var(--example-bar-h); height: calc(100dvh - var(--example-bar-h)); }
}
@media (max-width: 860px) {
  body.is-example { --example-bar-h: 96px; }
  .panel-example-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text cta" "sides leave"; gap: var(--space-1) var(--space-2); padding: var(--space-2) var(--space-4); }
  .panel-example-bar .wide { display: none; }
  .panel-example-bar p { grid-area: text; }
  .panel-example-bar .ds-btn { grid-area: cta; }
  .panel-example-bar .sides { grid-area: sides; margin-left: 0; gap: 0; }
  .panel-example-bar .sides a { padding: var(--space-1) var(--space-2); }
  .panel-example-bar .sides a:first-child { padding-left: 0; }
  .panel-example-bar .leave { grid-area: leave; justify-self: end; }
  /* On a phone the tour's card sits above the tab bar, and the piece it explains scrolls under the bar. */
  .tour-card.is-docked { position: fixed; left: var(--space-4); right: var(--space-4); width: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); top: auto !important; }
}

/* «Así lo ven los demás»: the two other sides, on the example's summary */
.panel-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.panel-side-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-4); color: inherit; text-decoration: none; }
.panel-side-card img { width: 64px; height: 64px; }
.panel-side-card b { display: block; font-size: var(--fs-16); }
.panel-side-card span { color: var(--muted); font-size: var(--fs-14); }
.panel-side-card:hover b { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .panel-sides { grid-template-columns: minmax(0, 1fr); } }

/* The phones of «Mira la tarjeta» and «Mira la caja» */
.panel-phones { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-5); align-items: flex-start; }
.panel-phones figure { margin: 0; display: grid; gap: var(--space-3); justify-items: center; max-width: 250px; }
.panel-phones figcaption { font-size: var(--fs-14); color: var(--muted); text-align: center; text-wrap: balance; }
.panel-phones figcaption b { display: block; color: var(--fg); font-size: var(--fs-16); margin-bottom: 2px; }
.panel-phones .ds-phone .body { padding: 10px 12px; overflow: hidden; }
/* The panel's older global .top, .brand and .field rules must not reach the pass or the sidebar. */
.panel-phones .ds-pass .top { background: none; border: 0; position: static; }
.panel-phones .ds-pass .brand { font-weight: 600; }
.panel-phones .ds-pass .field { margin: 0; }
.ds-side .business { display: block; font-size: inherit; }
.panel-offer { display: grid; gap: 10px; }
.panel-offer .panel-preview-cta { margin-top: 2px; }
.till-screen { flex: 1; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 18px 14px 24px; text-align: center; font-family: var(--font-sans); }
.till-screen .icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; }
.till-screen .icon svg { width: 34px; height: 34px; }
.till-screen h3 { margin: 0; font-size: 22px; line-height: 1.1; font-weight: 700; }
.till-screen .big { margin: 0; font-size: 18px; font-weight: 600; }
.till-screen .note { margin: 0; font-size: 14px; font-weight: 600; color: inherit; border-radius: 12px; padding: 8px 10px; }
.till-screen .next { margin-top: 6px; width: 100%; border-radius: 12px; padding: 11px; font-weight: 600; font-size: 14px; background: var(--indigo); color: #fff; }
.till-screen.is-scan { background: #101a21; color: #fff; }
.till-screen.is-scan .frame { width: 150px; height: 150px; border: 3px solid var(--sun); border-radius: 18px; display: grid; place-items: center; color: #fff; }
.till-screen.is-scan .frame svg { width: 96px; height: 96px; opacity: 0.85; }
.till-screen.is-ok { background: var(--olive); color: var(--indigo); }
.till-screen.is-ok .icon { background: var(--indigo); color: var(--olive); }
.till-screen.is-ok .note { background: rgba(35, 61, 77, 0.1); }
.till-screen.is-visit { background: var(--sea); color: #fff; }
.till-screen.is-visit .icon { background: #fff; color: var(--sea); }
.till-screen.is-visit .note { background: rgba(255, 255, 255, 0.16); }
.till-screen.is-visit .next { background: var(--indigo); }
.panel-example-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5); }
.panel-example-cta p { margin: 0; max-width: 46ch; }

/* The tour: one spotlight that glides from piece to piece, and a card that fades between steps */
.tour-spot { position: absolute; z-index: 40; border-radius: var(--radius-l); box-shadow: 0 0 0 3px var(--sun), 0 0 0 9999px rgba(16, 26, 33, 0.42); pointer-events: none; opacity: 0;
  transition: top 320ms var(--ease-out), left 320ms var(--ease-out), width 320ms var(--ease-out), height 320ms var(--ease-out), opacity 200ms var(--ease-out); }
.tour-spot.is-in { opacity: 1; }
.tour-card { position: absolute; z-index: 42; width: min(340px, calc(100vw - 32px)); padding: var(--space-4); background: var(--surface); color: var(--fg); border: 2px solid var(--button-ink); border-radius: var(--radius-m); box-shadow: 3px 3px 0 var(--button-ink); display: grid; gap: var(--space-2); outline: none;
  opacity: 0; transform: translateY(6px); transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
.tour-card.is-in { opacity: 1; transform: none; }
.tour-card h3 { margin: 0; font-size: var(--fs-18); }
.tour-card p { margin: 0 0 var(--space-1); font-size: var(--fs-14); color: var(--muted); }
.tour-card .row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.tour-card .step { font: 500 var(--fs-12)/1 var(--font-mono); color: var(--muted); }
.tour-card .skip { background: none; border: 0; padding: var(--space-2) 0; color: var(--link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-size: var(--fs-14); }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-card { transition: none; } }
/* SCR-EXAMPLE-DIALOG: «Esto es un ejemplo», asked whenever something would be saved */
.panel-example-dialog { width: min(420px, calc(100vw - 32px)); padding: var(--space-6); border: 2px solid var(--button-ink); border-radius: var(--radius-l); background: var(--surface); color: var(--fg); box-shadow: 4px 4px 0 var(--button-ink); }
.panel-example-dialog:focus { outline: none; }
.panel-example-dialog::backdrop { background: rgba(16, 26, 33, 0.42); }
.panel-example-dialog[open] { animation: example-dialog-in 180ms var(--ease-out); }
@keyframes example-dialog-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .panel-example-dialog[open] { animation: none; } }
.panel-example-dialog h2 { margin: 0 0 var(--space-2); font-size: var(--fs-20); }
.panel-example-dialog p { margin: 0 0 var(--space-5); color: var(--muted); }
.panel-example-dialog .row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.panel-example-dialog form { margin: 0; }

/* SCR-EXAMPLE-EDITOR: «Pruébalo con tu negocio» beside the phones */
.panel-example-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--space-6); align-items: start; }
.panel-example-editor { position: sticky; top: calc(var(--example-bar-h, 0px) + var(--space-4)); }
.panel-example-editor h2 { margin: 0; font-size: var(--fs-20); }
.panel-example-editor .ds-file { box-sizing: border-box; min-width: 0; overflow: hidden; }
.panel-phones.is-compact figure { max-width: 196px; }
.panel-example-editor .panel-colour { padding: 4px; height: 48px; cursor: pointer; }
@media (max-width: 1180px) { .panel-example-layout { grid-template-columns: minmax(0, 1fr); } .panel-example-editor { position: static; } }
.panel-phones .ds-pass .brand .pass-logo { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; flex: none; }

/* SCR-PANEL-CAMPAIGN: the image a campaign puts on the card (SPEC-013), cropped as each wallet does */
.panel-card-image { display: grid; gap: var(--space-4); }
.panel-card-image-views { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-4); align-items: end; max-width: 560px; }
.panel-card-image-views figure { margin: 0; display: grid; gap: var(--space-2); }
.panel-card-image-views figcaption { font-size: var(--fs-12); color: var(--muted); }
.panel-card-image-views .crop { border-radius: var(--radius-m); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.panel-card-image-views .crop.is-apple { aspect-ratio: 375 / 144; }
.panel-card-image-views .crop.is-google { aspect-ratio: 1032 / 812; }
.panel-card-image-views img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* SCR-EXAMPLE-CARD: the real card in the example (SPEC-013), and where it is designed. */
.example-pass { border-radius: 12px; overflow: hidden; background: var(--p-bg); color: var(--p-fg); font-family: -apple-system, system-ui, sans-serif; box-shadow: 0 10px 24px -14px rgba(0,0,0,.5); }
.example-pass .head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; }
.example-pass .logo { height: 26px; max-width: 70px; object-fit: contain; }
.example-pass .name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.example-pass small { display: block; font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--p-label); }
.example-pass .count { text-align: right; }
.example-pass .count b { font-size: 16px; font-weight: 500; }
.example-pass .strip { display: block; width: 100%; height: auto; }
.example-pass .fields { padding: 8px 10px; }
.example-pass .fields b { font-size: 14px; font-weight: 500; }
.example-pass .qr { margin: 2px auto 12px; width: 104px; background: #fff; color: #111; border-radius: 8px; padding: 7px 7px 5px; display: grid; justify-items: center; gap: 3px; }
.example-pass .qr svg { width: 88px; height: 88px; }
.example-pass .qr span { font: 500 9px/1 var(--font-mono); letter-spacing: .12em; }
.panel-example-design { display: grid; gap: var(--space-3); align-content: start; }
.panel-example-design h2 { margin: 0; font-size: var(--fs-20, 20px); }
.panel-example-design p { margin: 0; color: var(--muted); }
.panel-example-design ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.panel-example-design .hint { font-size: var(--fs-12); }

/* SCR-PANEL-SPECIAL-DATES: one card per Fecha especial */
.special-date { display: grid; gap: var(--space-3); }
.special-date-head { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.special-date-head > div { flex: 1 1 12rem; min-width: 0; }
.special-date-head h2 { margin: 0; }
.special-date-head p { margin: 0; }
.special-date-image { width: 160px; max-width: 40%; height: auto; border-radius: var(--radius-m); object-fit: cover; }
.special-date p { margin: 0; }
.special-date details ul { margin: var(--space-2) 0 0; padding-left: 1.2em; }
.special-date-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.special-date-actions form { margin: 0; }

/* «Cuándo vienen» (SCR-PANEL-CUSTOMERS): weekday × band, shade against the busiest cell */
.panel-when-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.panel-when-head h2 { margin: 0; font-size: var(--fs-20); }
.panel-when-scroll { overflow-x: auto; }
.panel-when { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 3px; font: 600 var(--fs-14)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.panel-when thead th { font: 600 var(--fs-14)/1.2 var(--font-sans); text-align: center; padding-bottom: var(--space-1); }
.panel-when thead small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.panel-when tbody th { font: 600 var(--fs-14)/1 var(--font-sans); text-align: left; padding-right: var(--space-1); }
.panel-when thead td { width: 2.6rem; background: none; }
@media (max-width: 30rem) { .panel-when thead small { display: none; } .panel-when thead th { font-size: 13px; } }
.panel-when abbr { text-decoration: none; }
.panel-when td { height: 2.5rem; text-align: center; border-radius: 4px; color: var(--heat-ink-0); background: var(--heat-0); }
.panel-when td.is-3, .panel-when td.is-4 { color: var(--heat-ink); }
.panel-when td.is-1 { background: var(--heat-1); } .panel-when td.is-2 { background: var(--heat-2); }
.panel-when td.is-3 { background: var(--heat-3); } .panel-when td.is-4 { background: var(--heat-4); }
.panel-when td.is-few, .panel-when-legend i.is-few { background: repeating-linear-gradient(135deg, var(--line) 0 3px, transparent 3px 7px); }
.panel-when td.is-none, .panel-when-legend i.is-none { background: transparent; border: 1px dashed var(--line); }
.panel-when-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: center; }
.panel-when-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }
:root { --heat-0: #eef3f5; --heat-1: #fdf0c8; --heat-2: #fbdc85; --heat-3: #f6bf3c; --heat-4: #e8a92a; --heat-ink: #233d4d; --heat-ink-0: #233d4d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --heat-0: #213a4a; --heat-1: #4a4a2c; --heat-2: #7c6a2a; --heat-3: #c99a26; --heat-4: #fcca46; --heat-ink: #142632; --heat-ink-0: #eaf1f3; }
}
:root[data-theme="dark"] { --heat-0: #213a4a; --heat-1: #4a4a2c; --heat-2: #7c6a2a; --heat-3: #c99a26; --heat-4: #fcca46; --heat-ink: #142632; --heat-ink-0: #eaf1f3; }
.panel-when td.is-flagged { outline: 2px solid var(--ink); outline-offset: -2px; }
.panel-idea { display: grid; gap: var(--space-2); border-top: 1px solid var(--line); padding-top: var(--space-4); }
.panel-idea h3, .panel-reading h3 { margin: 0; font-size: var(--fs-16, 16px); font-weight: 600; }
.panel-idea p, .panel-reading p { margin: 0; }
.panel-idea-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.panel-idea-actions form { margin: 0; }
.panel-reading { display: grid; gap: var(--space-1); padding-block: var(--space-3); border-top: 1px solid var(--line); }
.panel-reading:first-child { border-top: 0; padding-top: 0; }
.panel-reading h3 small { font-weight: 400; font-size: var(--fs-14); }

/* «Avisos» (SCR-PANEL-NOTICES): one row per notice */
.panel-notice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding-block: var(--space-3); border-top: 1px solid var(--line); }
.panel-notice:first-child { border-top: 0; }
.panel-notice > div { flex: 1 1 16rem; min-width: 0; }
.panel-notice h3 { margin: 0; font-size: var(--fs-16, 16px); font-weight: 600; }
.panel-notice p { margin: 0; }
.panel-notice form { margin: 0; }

/* «Tu tarjeta, cerca del local» (SCR-PANEL-TEAM): a line under the venue when locating fails */
.panel-error { color: var(--danger-fg); font-size: var(--fs-12); flex-basis: 100%; }
.panel-actions form { margin: 0; }