/* =========================================================
   ADICTO · WORKSHOP — paper-and-ink editorial mobile UI
   JetBrains Mono + brand red. Mirrors the cliente.html system.
   ========================================================= */
:root {
  --paper:         #f1ead8;
  --paper-light:   #f8f2e1;
  --paper-raised:  #fffbf0;
  --paper-sunken:  #ede5d0;
  --line:          #d4c8ae;
  --line-soft:     #e6ddc9;

  --ink:           #1a1510;
  --ink-2:         #5a5044;
  --ink-3:         #6f6556;
  --ink-4:         #8a7d69;

  --brand-red:     #D94A2B;
  --brand-red-dk:  #B8401F;

  --success:       #556B46;
  --success-bg:    #e9ecdf;
  --danger:        #B8401F;
  --danger-bg:     #f5e4dc;

  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --radius-sm:     6px;
  --radius:        8px;
  --radius-lg:     12px;
  --max-width:     560px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--paper); }
body {
  font-family: var(--font-mono);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
[hidden] { display: none !important; }

/* =========================================================
   PROGRESS BAR
   ========================================================= */
.progress {
  position: sticky; top: 0; left: 0; right: 0;
  height: 3px; background: var(--line-soft);
  z-index: 30;
}
.progress__fill {
  height: 100%; width: 0%;
  background: var(--brand-red);
  transition: width .35s cubic-bezier(0.22, 1, 0.36, 1);
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 20px calc(40px + env(safe-area-inset-bottom, 0px));
}

/* =========================================================
   HEADER
   ========================================================= */
.brand {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.brand-logo {
  width: 23px; height: 23px; flex-shrink: 0;
  object-fit: contain;
  cursor: pointer;
}
.brand-name {
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
  line-height: 1.15;
  min-width: 0;
}
.brand-name__sub {
  display: block; color: var(--ink-4); font-weight: 500;
  letter-spacing: 0.04em; font-size: 8px;
  text-transform: uppercase;
  margin-top: 1px;
  white-space: nowrap;
}
.lang-switch {
  display: inline-flex;
  gap: 2px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
}
.lang-switch button {
  font: inherit; font-family: var(--font-mono);
  font-size: 8px; font-weight: 600;
  letter-spacing: 0.06em;
  width: 21px; height: 20px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--ink-3);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button.active {
  background: var(--ink); color: var(--paper-light);
}

/* New header pill controls (lang cycle + login/initials) */
.hdr-lang, .hdr-account {
  font: inherit; font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 11px; min-width: 38px;
  background: var(--paper-raised); color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.hdr-lang:hover {
  background: var(--ink); color: var(--paper-light); border-color: var(--ink);
}
/* Account button — brand red, matches lang-switch height (30px) so the two
   pills sit on the same baseline; wider so "ENTRAR" reads clearly. */
.hdr-account {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px;
  height: 25px;
  min-width: 68px;
  padding: 0 11px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--brand-red);
  border-color: var(--brand-red);
  background: color-mix(in oklab, var(--brand-red) 6%, var(--paper-raised));
}
.hdr-account svg { width: 11px; height: 11px; flex-shrink: 0; }
.hdr-account:hover {
  background: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
}
.hdr-account--logged {
  background: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
  font-weight: 700;
  gap: 5px;
  min-width: 46px;
  padding: 0 9px 0 4px;
  letter-spacing: 0.05em;
  font-size: 10px;
}
.hdr-account--logged .hdr-account__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  font-size: 9px; font-weight: 800; letter-spacing: 0.02em;
  flex-shrink: 0;
}
.hdr-account--logged .hdr-account__label {
  text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
}
.hdr-account--logged .hdr-account__chev {
  font-size: 11px; line-height: 1; opacity: 0.85;
  transition: transform .15s;
}
.hdr-account--logged:hover .hdr-account__chev { transform: translateX(2px); }
.hdr-account--logged:hover {
  background: var(--brand-red-dk);
  border-color: var(--brand-red-dk);
}
/* Visual breathing room so the language pill sits a touch further from the
   account CTA — the grid gap alone reads cramped once account is wider. */
.brand .lang-switch { margin-right: 5px; }

/* Bike ID strip */
.bike-strip {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 22px;
  padding: 14px 14px;
  background: var(--paper-sunken);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.bike-strip__row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.bike-strip__row--head {
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
}
.bike-strip__label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  min-width: 56px;
}
.bike-strip__value {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
  flex: 1;
  text-align: right;
  word-break: break-all;
}
.bike-strip__value--muted { color: var(--ink-4); font-weight: 500; }
.bike-strip__edit {
  font: inherit; font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: transparent; color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  cursor: pointer;
}
.bike-strip__edit:hover { color: var(--ink); border-color: var(--ink-3); }

.bike-strip__input-row {
  display: flex; gap: 8px;
}
.bike-strip__input-row input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 500;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-light);
  color: var(--ink);
  outline: none;
}
.bike-strip__input-row input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26,21,16,0.08);
}
.bike-strip__input-row button {
  font: inherit; font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0 14px;
  background: var(--ink); color: var(--paper-light);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
}
.bike-strip__actions {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-top: 2px;
}
.bike-strip__photo-btn {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--ink-3); cursor: pointer;
  padding: 6px 10px; border: 1px dashed var(--ink-5);
  border-radius: var(--radius);
  transition: color .15s, border-color .15s;
}
.bike-strip__photo-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.bike-strip__login {
  color: var(--ink-3); text-decoration: none; font-weight: 600;
  transition: color .15s;
}
.bike-strip__login:hover { color: var(--ink); }
.bike-strip__optional {
  font-style: normal; font-weight: 600;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  text-align: right;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
  letter-spacing: 0.06em; margin-left: 4px;
}

/* Hint above input */
.bike-strip__hint {
  margin: 0 0 2px;
  font-size: 11px; color: var(--ink-3);
  line-height: 1.4;
}

/* "Not found" hint shown after failed lookup */
.bike-strip__notfound {
  margin: 6px 0 0;
  padding: 8px 10px;
  font-size: 11px; color: var(--brand-red-dk);
  line-height: 1.4;
  background: rgba(217,119,87,0.08);
  border: 1px dashed var(--brand-red);
  border-radius: var(--radius);
}

/* Login gate (shown when cita previa is selected by anon user) */
.login-gate {
  text-align: center;
  padding: 24px 16px 8px;
}
.login-gate__h {
  font-size: 17px; font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink);
}
.login-gate__lead {
  font-size: 13px; line-height: 1.5;
  color: var(--ink-3);
  margin: 0 0 18px;
}
.login-gate .btn-primary { max-width: 280px; margin: 0 auto; }

/* Loading spinner state on any button */
.is-loading {
  opacity: 0.6;
  cursor: progress !important;
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--paper-light);
  animation: btn-spin 0.7s linear infinite;
  opacity: 0.95;
}
.btn-secondary.is-loading::after { color: var(--ink-2); }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Narrower input + inline scan + apply button */
.bike-strip__input-wrap {
  display: flex; gap: 6px; align-items: stretch;
  height: 36px;
}
.bike-strip__input-wrap input {
  flex: 1; min-width: 0;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0 12px;
  background: var(--paper-light); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
}
.bike-strip__input-wrap input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26,21,16,0.08);
}
.bike-strip__scan-inline {
  width: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-light); color: var(--ink-2);
  border: 1px dashed var(--ink-5); border-radius: var(--radius);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.bike-strip__scan-inline:hover { color: var(--ink); border-color: var(--ink-3); }
.bike-strip__scan-inline svg { width: 20px; height: 20px; }
.bike-strip__apply {
  width: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper-light);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
}
.bike-strip__apply svg { width: 15px; height: 15px; }

/* Picked-bike pill (shown after pick from logged-user list) */
.bike-strip--picked .bike-strip__row { align-items: center; }
.bike-strip__icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper-light);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em;
}
.bike-strip__body { flex: 1; min-width: 0; }
.bike-strip__model {
  margin: 0;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.bike-strip__sub {
  margin: 0;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-4); letter-spacing: 0.1em;
}

/* Bike picker — shown to logged-in users on intro */
.bike-picker { margin-bottom: 22px; }
.bike-picker__head {
  margin: 0 0 10px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4);
}
.bike-picker__list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.bike-picker__item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; text-align: left;
  background: var(--paper-sunken);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.bike-picker__item:hover { border-color: var(--ink-3); background: var(--paper-raised); }
.bike-picker__item .bike-picker__icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper-light);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.bike-picker__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bike-picker__model {
  font-size: 13px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bike-picker__id {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-4); letter-spacing: 0.08em;
}
.bike-picker__item--add {
  border-style: dashed;
}
.bike-picker__item--add .bike-picker__icon {
  background: var(--paper-light); color: var(--ink); border: 1px dashed var(--ink-4);
  font-size: 16px;
}

/* Selected bike — red outline (no fill) */
.bike-picker__item.is-active {
  border-color: var(--brand-red);
  background: var(--paper-sunken);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--brand-red) inset;
}
.bike-picker__item.is-active .bike-picker__icon { background: var(--paper-light); color: var(--ink); }
.bike-picker__item.is-active .bike-picker__model { color: var(--ink); }
.bike-picker__item.is-active .bike-picker__id { color: var(--ink-4); }
/* VIP bike — keep the ★ badge, drop the red outline */
.bike-picker__item.is-vip {
  border-color: var(--line);
  background: var(--paper-sunken);
}
.bike-picker__item.is-vip:hover { border-color: var(--ink-3); }
.bike-picker__item.is-vip.is-active {
  border-color: var(--brand-red);
  background: var(--paper-sunken);
}
.vip-badge {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 7px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--brand-red); color: var(--paper-light);
  flex-shrink: 0;
}
.vip-badge-col { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.vip-until {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--ink-3); white-space: nowrap;
}

/* Inline "Already a customer?" link */
.intro-login-link {
  display: block; margin: 18px 0 4px;
  text-align: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-3); text-decoration: none;
  padding: 12px 0;
  border-top: 1px dashed var(--line);
  transition: color .15s;
}
.intro-login-link:hover { color: var(--ink); }

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
  margin: 0 0 10px;
}
h1 {
  font-size: 26px; line-height: 1.15;
  margin: 0 0 14px; font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
h1.h1--compact {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  font-weight: 600;
  margin: 0 0 10px;
}
h1 .accent { color: var(--brand-red); }
h2.section-h {
  font-size: 18px; line-height: 1.2;
  margin: 0 0 8px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lead {
  color: var(--ink-2); margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* =========================================================
   STEPS — contextual progress
   ========================================================= */
.steps {
  display: flex; align-items: center; gap: 6px;
  font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 20px;
  padding: 10px 12px;
  background: var(--paper-sunken);
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.steps::-webkit-scrollbar { display: none; }
.steps__item {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-4);
  transition: color .2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.steps__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  font-size: 9px; font-weight: 600;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  color: var(--ink-4);
  transition: all .2s;
}
.steps__item.done .steps__num {
  background: var(--ink); color: var(--paper-light);
  border-color: var(--ink);
}
.steps__item.active { color: var(--ink); }
.steps__item.active .steps__num {
  background: var(--brand-red); color: #fff;
  border-color: var(--brand-red);
}
.steps__dot { width: 4px; height: 1px; background: var(--line); flex: 1; min-width: 6px; flex-shrink: 1; }

/* =========================================================
   CARDS
   ========================================================= */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 14px;
  background: var(--paper-raised);
}
.card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line-soft);
}
.card__title {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink);
  margin: 0;
}
.card__idx {
  font-size: 10px; letter-spacing: 0.1em;
  color: var(--ink-4);
}
.card__sub {
  font-size: 12px;
  color: var(--ink-3);
  margin: -6px 0 14px;
  line-height: 1.5;
}

/* =========================================================
   OPTION TILES (mode toggle, repair type, full sub, extras)
   ========================================================= */
.tile-list {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}
.tile-list--2 { grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 380px) { .tile-list--2 { grid-template-columns: 1fr; } }

.tile {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 14px 14px;
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-mono);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, color .15s;
}
.tile:hover { border-color: var(--ink-4); }
.tile.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-light);
}
.tile.is-active .tile__label { color: var(--paper-light); }
.tile.is-active .tile__sub,
.tile.is-active .tile__meta { color: rgba(248,242,225,0.7); }
.tile.is-active .tile__check { background: var(--brand-red); border-color: var(--brand-red); }
.tile.is-active .tile__check::after { opacity: 1; }

.tile__check {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border: 1.5px solid var(--ink-3);
  border-radius: 4px;
  background: var(--paper);
  display: grid; place-items: center;
  transition: all .15s;
  position: relative;
  margin-top: 2px;
}
.tile__check--radio { border-radius: 50%; }
.tile__check::after {
  content: "";
  position: absolute;
  width: 8px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
  transition: opacity .15s;
}
.tile__check--radio::after {
  width: 8px; height: 8px;
  border: 0;
  background: #fff;
  border-radius: 50%;
  transform: none;
}
.tile__body { flex: 1; min-width: 0; }
.tile__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  margin: 0 0 2px;
}
.tile__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.tile__sub {
  font-size: 11.5px;
  color: var(--ink-3);
  margin: 4px 0 0;
  line-height: 1.45;
  display: block;
}
.tile__meta {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.tile__meta strong { color: var(--brand-red); font-weight: 600; }
.tile.is-active .tile__meta strong { color: #ffb39e; }

/* Special big mode tiles (intro screen) */
.mode-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 16px;
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  font-family: var(--font-mono);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, transform .1s;
  width: 100%;
}
.mode-tile:hover { border-color: var(--ink-3); }
.mode-tile:active { transform: scale(0.99); }
.mode-tile + .mode-tile { margin-top: 10px; }
.mode-tile--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-light);
}
.mode-tile__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.mode-tile__label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mode-tile__arrow {
  font-size: 18px;
  color: inherit;
  opacity: 0.7;
}
.mode-tile__hint {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-4);
}
.mode-tile--primary .mode-tile__hint { color: rgba(248,242,225,0.65); }

/* =========================================================
   FORM FIELDS
   ========================================================= */
form .field { margin-bottom: 14px; }
form .field:last-child { margin-bottom: 0; }

label {
  display: flex; align-items: baseline; justify-content: space-between;
  font-weight: 500; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
label .req { color: var(--brand-red); margin-left: 2px; }

input[type=text], input[type=tel], input[type=email], input[type=number], textarea, select {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-light);
  color: var(--ink);
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
textarea {
  min-height: 90px;
  resize: vertical;
  line-height: 1.5;
  font-size: 14px;
}
input::placeholder, textarea::placeholder { color: var(--ink-4); font-weight: 400; }
input:focus, textarea:focus, select:focus {
  border-color: var(--ink); background: #fff;
  box-shadow: 0 0 0 3px rgba(26,21,16,0.08);
}
input.invalid, textarea.invalid {
  border-color: var(--danger); background: var(--danger-bg);
}
.hint {
  font-size: 11px;
  color: var(--ink-4);
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.hint.error { color: var(--danger); font-weight: 500; }
.hint.error::before { content: '→ '; font-weight: 600; }

/* =========================================================
   AUDIO RECORDER
   ========================================================= */
.audio {
  margin-top: 4px;
  padding: 14px;
  background: var(--paper-light);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.audio__row {
  display: flex; align-items: center; gap: 12px;
}
.audio__btn {
  width: 48px; height: 48px;
  flex-shrink: 0;
  background: var(--brand-red);
  border: 1px solid var(--brand-red-dk);
  border-radius: 999px;
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.audio__btn:hover { background: var(--brand-red-dk); }
.audio__btn:active { transform: scale(0.95); }
.audio__btn.is-recording {
  background: var(--danger);
  animation: pulseRec 1.4s ease-in-out infinite;
}
.audio__btn svg { width: 22px; height: 22px; }
@keyframes pulseRec {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184,64,31,0.45); }
  50%       { box-shadow: 0 0 0 10px rgba(184,64,31,0); }
}
.audio__info { flex: 1; min-width: 0; }
.audio__state {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 2px;
}
.audio__timer {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.audio__delete {
  font: inherit; font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 12px;
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.audio__delete:hover { color: var(--danger); border-color: var(--danger); }
.audio audio { display: block; width: 100%; margin-top: 10px; }

/* =========================================================
   CALENDAR / DATE PICKER
   ========================================================= */
.cal {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 6px;     /* room for scrollbar */
}
.cal::-webkit-scrollbar { height: 4px; }
.cal::-webkit-scrollbar-thumb { background: var(--ink-5); border-radius: 999px; }
.cal__day {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 64px;
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 4px;
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-mono);
  text-align: center;
  transition: all .15s;
}
.cal__day:hover { border-color: var(--ink-4); }
.cal__day.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-light);
}
.cal__day.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
}
.cal__day.is-current {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 1px var(--brand-red) inset;
}
.cal__day.is-current.is-active {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}
.cal__day--skeleton {
  opacity: 0.35;
  background: linear-gradient(90deg, var(--paper-sunken) 25%, var(--paper-light) 50%, var(--paper-sunken) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.dots-loading {
  display: inline-block;
  animation: dots 1.2s steps(3, end) infinite;
}
@keyframes dots {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.cal__day-wkd {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 4px;
}
.cal__day.is-active .cal__day-wkd { color: rgba(248,242,225,0.65); }
.cal__day-num {
  font-size: 16px;
  font-weight: 600;
  color: inherit;
  line-height: 1;
}
.cal__day-mo {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  text-transform: uppercase;
  margin-top: 4px;
}
.cal__day.is-active .cal__day-mo { color: rgba(248,242,225,0.65); }

.slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
@media (max-width: 380px) { .slots { grid-template-columns: repeat(2, 1fr); } }
.slot {
  font: inherit; font-family: var(--font-mono);
  padding: 12px 8px;
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: center;
  transition: all .15s;
}
.slot:hover { border-color: var(--ink-4); }
.slot.is-active {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}
.slot.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.no-slots {
  font-size: 12px;
  color: var(--ink-3);
  padding: 12px;
  text-align: center;
  background: var(--paper-sunken);
  border-radius: var(--radius);
  border: 1px dashed var(--line);
}

/* =========================================================
   SUMMARY BLOCK
   ========================================================= */
.summary {
  margin: 14px 0 14px;
  padding: 14px 16px;
  background: var(--paper-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.summary__head {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 10px;
}
.summary__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--ink-2);
}
.summary__row + .summary__row { border-top: 1px dashed var(--line-soft); }
.summary__row strong { color: var(--ink); font-weight: 600; }
.summary__total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between;
}
.summary__total-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.summary__total-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-red);
  letter-spacing: -0.02em;
}
.summary__warn {
  margin: 10px 0 0;
  font-size: 10.5px;  color: var(--ink-4);
  font-style: italic;
}

/* =========================================================
   EXPRESS UPGRADE
   ========================================================= */
.express-offer {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 14px 0 0; padding: 14px 16px;
  border: 1px dashed var(--brand-red);
  border-radius: var(--radius);
  background: rgba(217, 119, 87, 0.04);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.express-offer input { margin: 2px 0 0; accent-color: var(--brand-red); }
.express-offer.is-active {
  background: rgba(217, 119, 87, 0.12);
  border-style: solid;
  border-color: var(--brand-red-dk);
}
.express-offer__title {
  display: block;
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-red-dk);
  margin-bottom: 4px;
}
.express-offer__desc {
  display: block;
  font-size: 12px; line-height: 1.4;
  color: var(--ink-2);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn-primary {
  width: 100%;
  background: var(--brand-red);
  color: var(--paper-light);
  border: 1px solid var(--brand-red-dk);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px;
  cursor: pointer;
  margin-top: 10px;
  transition: background .15s, transform .1s;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
.btn-primary:hover { background: var(--brand-red-dk); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { background: var(--ink-4); border-color: var(--ink-4); cursor: not-allowed; opacity: 0.7; }

.btn-secondary {
  width: 100%;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 13px;
  cursor: pointer;
  margin-top: 10px;
  transition: border-color .15s, color .15s, background .15s;
}
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-light); }

.btn-ghost {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 10px 6px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-ghost:hover { color: var(--ink); }
.btn-ghost--bold {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* =========================================================
   ACCOUNT
   ========================================================= */
.acc-bike {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  background: var(--paper-light);
  overflow: hidden;
  position: relative;
}

/* Swipe-to-delete — red action sits behind the row, swipe left to reveal */
.acc-bike__delete-action {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 96px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  background: var(--brand-red);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  z-index: 0;
}
.acc-bike__delete-action:hover { background: var(--brand-red-dk); }
.acc-bike__delete-action svg { opacity: 0.95; }
.acc-bike__swipe {
  position: relative;
  background: var(--paper-light);
  transform: translateX(0);
  transition: transform .22s ease;
  z-index: 1;
  touch-action: pan-y;
}
.acc-bike.is-swiped .acc-bike__swipe { transform: translateX(-96px); }
.acc-bike.is-open .acc-bike__swipe { background: var(--paper-light); }
.acc-bike__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  cursor: pointer;
  background: var(--paper-light);
  transition: background .15s;
}
.acc-bike__head:hover { background: var(--paper-raised); }
.acc-bike__icon {
  position: relative;
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper-light);
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
/* PRO bikes: red icon + small star chip in the icon's top-right corner */
.acc-bike__icon--pro {
  background: var(--brand-red);
  box-shadow: 0 0 0 2px var(--paper-light), 0 0 0 3px var(--brand-red);
}
.acc-bike__icon--pro::after {
  content: '★';
  position: absolute;
  top: -4px; right: -4px;
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  color: var(--brand-red);
  border-radius: 50%;
  border: 1.5px solid var(--brand-red);
  font-size: 8px;
  font-family: var(--font-body, system-ui);
  line-height: 1;
}

/* Always-visible action strip beneath the bike head — holds Info técnica
   and (later) Cita previa shortcuts. Sits inside .acc-bike__swipe so the
   delete-swipe gesture still works. */
.acc-bike__actions {
  display: flex; gap: 8px;
  padding: 0 14px 12px;
}
.acc-bike__action {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-red);
  padding: 8px 10px;
  background: color-mix(in oklab, var(--brand-red) 6%, var(--paper-raised));
  border: 1px solid color-mix(in oklab, var(--brand-red) 28%, var(--line-soft));
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.acc-bike__action:hover {
  background: var(--brand-red);
  color: #fff;
  border-color: var(--brand-red);
}
/* "Información técnica" — secondary, transparent. Keeps the row balanced
   without competing with the primary Reservar revisión button. */
.acc-bike__action--primary {
  color: var(--ink-3);
  background: transparent;
  border-color: var(--line-soft);
}
.acc-bike__action--primary:hover {
  background: color-mix(in oklab, var(--ink) 4%, transparent);
  color: var(--ink);
  border-color: var(--ink-4);
}
.acc-bike__body { flex: 1; min-width: 0; }
.acc-bike__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 2px;
}
.acc-bike__sub {
  font-size: 10.5px;
  color: var(--ink-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
.acc-bike__arrow {
  font-size: 14px;
  color: var(--ink-3);
  transition: transform .2s;
}
.acc-bike.is-open .acc-bike__arrow { transform: rotate(90deg); }
.acc-bike__history-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-left: 8px;
}
.acc-bike__history-cta-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.acc-bike__history-cta-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--paper-light);
  background: var(--ink-3);
}
.acc-bike__history-cta-count:empty,
.acc-bike__history-cta-count[data-zero] { display: none; }
.acc-bike.is-open .acc-bike__history-cta-label { color: var(--brand-red); }
.acc-bike.is-open .acc-bike__history-cta-count { background: var(--brand-red); }
@media (max-width: 380px) {
  .acc-bike__history-cta-label { display: none; }
}
.acc-bike__history {
  border-top: 1px solid var(--line);
  padding: 14px;
  background: var(--paper-raised);
  display: none;
}
.acc-bike.is-open .acc-bike__history { display: block; }

/* + Add bike — full-width card to match .acc-bike rows */
.acc-bike-add {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  margin-top: 4px;
  border: 1px dashed var(--ink-4);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  text-align: left;
  transition: background .15s ease, border-color .15s ease;
}
.acc-bike-add:hover { background: var(--paper-light); border-color: var(--ink); }
.acc-bike-add__icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px dashed var(--ink-4);
  background: var(--paper-light);
  font-size: 18px; font-weight: 600;
  color: var(--ink);
  flex: 0 0 40px;
}
.acc-bike-add__label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Active reservations — top of account dashboard */
.card--active {
  background: var(--paper-light);
  border-color: var(--brand-red);
  box-shadow: 0 0 0 1px var(--brand-red) inset;
}
.active-list {
  display: flex; flex-direction: column;
  gap: 10px;
}
.active-item {
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.active-item__head {
  display: flex; align-items: baseline; gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}
.active-item__code {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brand-red);
}
.active-item__code-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.active-item__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.active-item__tag--cita {
  color: var(--brand-red);
  background: color-mix(in oklab, var(--brand-red) 8%, transparent);
}
.active-item__tag--drop {
  color: var(--ink-3);
  background: color-mix(in oklab, var(--ink-3) 6%, transparent);}
.active-item__bike {
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.active-item__bike em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.06em;
}
.active-item__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.active-item__k {
  margin: 0 0 2px;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.active-item__v {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.active-item__cancel {
  margin-top: 12px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  color: var(--brand-red);
  border: 1px solid var(--brand-red);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.active-item__cancel:hover {
  background: var(--brand-red);
  color: #fff;
}
.active-item__cancel:disabled,
.active-item__cancel.is-loading {
  opacity: 0.55;
  cursor: not-allowed;
}
.active-item__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.active-item__actions .active-item__cancel { margin-top: 0; flex: 1; }
.active-item__reschedule {
  flex: 1;
  padding: 10px 12px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-4);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.active-item__reschedule.is-pro {
  border-color: var(--brand-red);
  color: var(--brand-red);
}
.active-item__reschedule.is-pro:hover {
  background: var(--brand-red);
  color: #fff;
}
.active-item__reschedule.is-pro:hover .vip-only-badge {
  background: #fff;
  color: var(--brand-red);
}
.active-item__reschedule.is-locked {
  opacity: 0.55;
  border-style: dashed;
}
.active-item__reschedule.is-locked:hover {
  opacity: 0.75;
}
.vip-only-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--brand-red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Cooldown banner on intro */
.cooldown-banner {
  margin: 12px 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--brand-red);
  background: color-mix(in oklab, var(--brand-red) 8%, transparent);
  border-radius: var(--radius);
}
.cooldown-banner__h {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-red-dk);
}
.cooldown-banner__date {
  color: var(--brand-red);
  font-weight: 700;
}
.cooldown-banner__lead,
.cooldown-banner__options {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}
.cooldown-banner__bypass {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--brand-red);
  border-radius: var(--radius);
  cursor: pointer;
}
.cooldown-banner__bypass input { margin-top: 2px; accent-color: var(--brand-red); }
.cooldown-banner__bypass-label {
  font-size: 12px;
  line-height: 1.4;
}
.acc-history-empty {
  font-size: 12px;
  color: var(--ink-4);
  text-align: center;
  padding: 6px 0;
}

.rep-item {
  background: var(--paper-light);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.rep-item:last-child { margin-bottom: 0; }
.rep-item__summary {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.rep-item__summary::-webkit-details-marker { display: none; }
.rep-item__summary:hover { background: var(--paper); border-radius: var(--radius); }
.rep-item__code {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-red);
}
.rep-item__date {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-transform: uppercase;
}
.rep-item__total {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.rep-item__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-3);
  background: var(--paper);
  transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.rep-item__toggle svg { width: 10px; height: 10px; }
.rep-item[open] .rep-item__toggle {
  transform: rotate(45deg); /* + → × */
  color: var(--brand-red);
  border-color: var(--brand-red);
}
.rep-item__body {
  padding: 0 14px 14px;
  border-top: 1px dashed var(--line-soft);
  padding-top: 12px;
}
.rep-item__desc {
  font-size: 13px;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.45;
  text-wrap: pretty;
}
.rep-item__articulos {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}
.rep-item__articulos-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 6px;
}
.rep-item__articulos-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rep-item__articulos-list li {
  position: relative;
  padding-left: 14px;
}
.rep-item__articulos-list li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--ink-4);
}
/* ---- Invoice breakdown (replaces flat articulos list) ---- */
.rep-item__invoice {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}
.rep-item__invoice-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 8px;
}
.rep-item__invoice-list {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px dashed var(--line-soft);
}
.rep-item__invoice-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.rep-item__invoice-name {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
  text-wrap: pretty;
  min-width: 0;
}
.rep-item__invoice-qty {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 28px;
}
.rep-item__invoice-qty::before {
  content: "×";
  margin-right: 1px;
  opacity: 0.6;
}
.rep-item__invoice-amount {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 56px;
}
.rep-item__invoice:not(.has-amounts) .rep-item__invoice-amount { display: none; }
.rep-item__invoice:not(.has-amounts) .rep-item__invoice-line {
  grid-template-columns: 1fr auto;
}
.rep-item__invoice-line.is-labor .rep-item__invoice-name {
  font-style: italic;
  color: var(--ink-2);
}
.rep-item__invoice-line.is-labor .rep-item__invoice-name::before {
  content: "✦ ";
  font-style: normal;
  color: var(--brand-red);
  margin-right: 2px;
  font-size: 10px;
  vertical-align: 1px;
}
.rep-item__invoice-total {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0 2px;
  margin-top: 2px;
}
.rep-item__invoice-total-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rep-item__invoice-total-amount {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.rep-audio-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--brand-red);
  background: color-mix(in oklab, var(--brand-red) 8%, transparent);
  color: var(--brand-red);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.rep-audio-link:hover {
  background: color-mix(in oklab, var(--brand-red) 14%, transparent);
}
.rep-audio-link:active {
  transform: scale(0.97);
}
/* Inline audio player for the workshop's voice report — plays in-app instead
   of bouncing the user out to a Google Drive page. */
.rep-audio {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.rep-audio__player {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
}
/* The external-open link becomes a small square icon button next to the player
   — a fallback for the rare case a browser can't decode the file inline. */
.rep-audio-link--ext {
  flex: 0 0 auto;
  margin-top: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  justify-content: center;
  border-radius: 10px;
}
/* "Repaired at X km" — odometer reading at the time of the repair, shown at
   the top of the history item (above the invoice breakdown). */
.rep-item__km {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 6%, transparent);
  color: var(--ink-2, var(--ink));
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.rep-item__km svg { opacity: 0.6; }
/* Invoice (factura) PDF download — solid red so it reads as the primary action */
.rep-invoice-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  margin-right: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--brand-red-dk);
  background: var(--brand-red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.rep-invoice-link:hover { background: var(--brand-red-dk); }
.rep-invoice-link:active { transform: scale(0.97); }
/* Same pill at the top of the bike-tech (Información Técnica) screen */
.bt-factura-link { display: inline-flex; margin: 4px 0 14px; }
/* Muted hint shown when a finished repair has no audio recording yet */
.rep-audio-empty {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  display: inline-flex; align-items: center; gap: 6px;
}
.rep-audio-empty::before {
  content: "—";
  color: var(--ink-4);
  margin-right: 2px;
}
.rep-audio-btn {
  margin-top: 10px;
  font: inherit; font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--ink-2);
  transition: all .15s;
  display: inline-flex; align-items: center; gap: 8px;
}
.rep-audio-btn:hover { border-color: var(--ink); color: var(--ink); background: #fff; }
.rep-audio-btn.is-sent {
  border-color: var(--success);
  color: var(--success);
  background: var(--success-bg);
}

/* Account check (bottom of login) */
.acc-check {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.acc-check__result {
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius);
  font-size: 12.5px;
  line-height: 1.55;
}
.acc-check__result--yes {
  background: var(--success-bg);
  border: 1px solid rgba(85,107,70,0.25);
  color: var(--ink);
}
.acc-check__result--yes strong { color: var(--success); }
.acc-check__result--no {
  background: var(--danger-bg);
  border: 1px solid rgba(184,64,31,0.25);
  color: var(--ink);
}

/* =========================================================
   SUCCESS
   ========================================================= */
.success {
  padding-top: 8px;
}
.success__eyebrow {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--success);
  font-weight: 600;
  margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.success__eyebrow::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-bg);
}
.success__h {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--ink);
}
.success__when {
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 24px;
  padding: 12px 14px;
  background: var(--paper-sunken);
  border-left: 3px solid var(--brand-red);
  border-radius: var(--radius);
}
.success__when strong { color: var(--brand-red); font-weight: 700; }

.success__code {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  margin: 0 0 18px;
  text-align: center;
}
.success__code-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 6px;
}
.success__code-value {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.success__code-value::before { content: 'P'; color: var(--brand-red); }

.success__warn {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: rgba(217, 119, 87, 0.10);
  border: 1px solid var(--brand-red);
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
  text-wrap: pretty;
}

.success__wa {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--success-bg);
  border: 1px solid rgba(85,107,70,0.25);
  border-radius: var(--radius);
  color: var(--success);
  font-size: 12px;
  font-weight: 500;
  margin: 0 0 20px;
}
.success__wa svg { flex-shrink: 0; width: 16px; height: 16px; }

.success__cal {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  gap: 8px;
  text-decoration: none;
  margin-top: 0 !important;
}
.success__cal svg { flex-shrink: 0; }

/* =========================================================
   REMINDER (WhatsApp — success view, Cita Previa only)
   ========================================================= */
.reminder {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
}
.reminder__head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 4px;
}
.reminder__head svg { flex-shrink: 0; color: var(--brand-red); }
.reminder__sub {
  margin: 0 0 12px;
  font-size: 11.5px; line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}
.reminder__row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.reminder__row input[type="range"] {
  flex: 1; min-width: 0;
  accent-color: var(--brand-red);
  height: 4px;
  cursor: pointer;
}
.reminder__row input[type="range"]:disabled { cursor: not-allowed; opacity: 0.55; }
.reminder__value {
  flex-shrink: 0;
  min-width: 92px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.reminder .btn-secondary { width: 100%; margin: 0; }
.reminder .btn-secondary:disabled {
  opacity: 0.65;
  cursor: default;
  color: var(--brand-red);
  border-color: var(--brand-red);
}

/* =========================================================
   TOAST
   ========================================================= */
.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--paper-light);
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 6px 20px rgba(26,21,16,0.25);
}
.toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================================================
   UTIL
   ========================================================= */
.divider {
  height: 1px;
  background: var(--line);
  margin: 22px 0;
}
.muted { color: var(--ink-3); }
.text-center { text-align: center; }

/* =========================================================
   PHOTO UPLOADER
   ========================================================= */
.photos {
  display: flex; flex-direction: column; gap: 10px;
}
.photos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 380px) { .photos__grid { grid-template-columns: repeat(2, 1fr); } }
.photos__item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-sunken);
}
.photos__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.photos__remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(26,21,16,0.8);
  color: var(--paper-light);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  line-height: 1;
  padding: 0;
}
.photos__remove:hover { background: var(--brand-red); }
.photos__name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3px 6px;
  background: linear-gradient(0deg, rgba(26,21,16,0.85), transparent);
  color: var(--paper-light);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-align: left;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photos__add {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--paper-light);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: border-color .15s, color .15s;
  align-self: flex-start;
}
.photos__add:hover { border-color: var(--ink); color: var(--ink); }
.photos__add svg { width: 18px; height: 18px; }

/* =========================================================
   CITA RULES + AGREEMENT
   ========================================================= */
.card--rules {
  background: var(--paper-sunken);
  border-color: var(--line);
}
.rules {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rules li {
  position: relative;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.rules li::before {
  content: '→';
  position: absolute;
  left: 0; top: 0;
  color: var(--brand-red);
  font-weight: 700;
}
.agree {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.agree:hover { border-color: var(--ink-4); }
.agree input { position: absolute; opacity: 0; pointer-events: none; }
.agree__box {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 1.5px solid var(--ink-3);
  border-radius: 4px;
  background: var(--paper);
  position: relative;
  transition: all .15s;
}
.agree__box.is-checked {
  background: var(--brand-red);
  border-color: var(--brand-red);
}
.agree__box.is-checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 2px;
  width: 7px; height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.agree__label {
  font-size: 9px;
  line-height: 1.4;
  color: var(--ink-3);
  font-weight: 500;
  text-wrap: pretty;
  letter-spacing: 0.01em;
}

/* =========================================================
   MEDIA ROW — audio + photo side by side, slim row
   ========================================================= */
.media {
  margin-top: 4px;
}
.media__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.media-btn {
  display: flex; flex-direction: row;
  align-items: center; justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-2);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color .15s, color .15s, background .15s, transform .1s;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-btn:hover { border-color: var(--ink); color: var(--ink); }
.media-btn:active { transform: scale(0.98); }
.media-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.media-btn__label {
  display: inline-block;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.media-btn.is-recording {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  animation: pulseRec 1.4s ease-in-out infinite;
}

/* Account-login inline blurb — "Accede a tu cuenta · ¿No recuerdas…" */
.acc-login-blurb {
  margin: 4px 0 14px;
  padding: 10px 12px;
  background: var(--paper-sunken);
  border-radius: var(--radius);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-3);
  text-wrap: pretty;
  letter-spacing: 0.01em;
}
.acc-login-blurb strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* Login intro — register / check guidance above the form */
.acc-login-intro {
  margin: 4px 0 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.acc-login-intro p {
  margin: 0;
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.acc-login-intro a {
  color: var(--brand-red);
  font-weight: 700;
  text-decoration: none;
  word-break: break-word;
}
.acc-login-intro a:hover { text-decoration: underline; }

/* Intro app value-prop (non-logged) */
.app-promo {
  margin-bottom: 14px;
  padding: 14px 16px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.app-promo__text {
  margin: 0 0 10px;
  font-size: 13px; line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.app-promo__more {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-red);
  text-decoration: none;
}
.app-promo__more:hover { text-decoration: underline; }

/* App-info feature list ("Para qué sirve la app") */
.app-feats {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 6px;
}
.app-feat {
  display: flex; gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.app-feat__n {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--brand-red);
  padding-top: 1px;
}
.app-feat__body { display: flex; flex-direction: column; gap: 4px; }
.app-feat__h {
  margin: 0;
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.app-feat__p {
  margin: 0;
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* =========================================================
   PRO MODAL
   ========================================================= */
.pro-modal {
  position: fixed;
  inset: 0;
  background: rgba(26, 21, 16, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: pro-fade-in 0.18s ease-out;
}
@keyframes pro-fade-in { from { opacity: 0; } to { opacity: 1; } }
.pro-modal__card {
  background: var(--paper-light);
  border-radius: var(--radius);
  border: 1px solid var(--brand-red);
  padding: 28px 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 18px 50px rgba(26, 21, 16, 0.30);
  animation: pro-pop 0.22s ease-out;
}
@keyframes pro-pop {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.pro-modal__badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--brand-red);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 18px;
}
.pro-modal__body {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.pro-modal__ok {
  width: auto;
  padding: 10px 36px;
}
.pro-modal__link {
  display: block;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-red);
  text-decoration: underline;
  text-transform: uppercase;
}
.pro-modal__link:hover { color: var(--brand-red-dk); }

/* =========================================================
   PRO INFO SCREEN
   ========================================================= */
.pro-info {
  max-width: 600px;
}
.pro-info__h {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
  font-size: 28px;
  letter-spacing: -0.01em;
}
.pro-info__h-text {
  display: inline;
}
.pro-info__badge {
  display: inline-block;
  padding: 5px 14px;
  background: var(--brand-red);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  vertical-align: middle;
}
.pro-info__section {
  margin-bottom: 24px;
  padding: 18px 18px 14px;
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pro-info__section-h {
  margin: 0 0 12px;
  font-size: 13px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pro-info__list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}
.pro-info__list li { margin-bottom: 6px; }
.pro-info__list li:last-child { margin-bottom: 0; }
.pro-info__subh {
  margin: 18px 0 8px;
  font-size: 13px; font-weight: 700; color: var(--ink);
  letter-spacing: 0.01em;
}
.pro-info__section .pro-info__subh:first-of-type { margin-top: 4px; }
.pro-info__note {
  margin: 8px 0 0;
  font-size: 12px; line-height: 1.5; color: var(--ink-3);
  text-wrap: pretty;
}
.pro-info__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

/* PRO link on intro screen */
.pro-info-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px dashed var(--brand-red);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  transition: background .15s ease;
}
.pro-info-link:hover {
  background: color-mix(in oklab, var(--brand-red) 6%, transparent);
}
.pro-info-link__badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 4px 10px;
  background: var(--brand-red);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.pro-info-link__text {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pro-info-link__arrow {
  color: var(--brand-red);
  font-weight: 600;
}

/* =========================================================
   LOCKED HISTORY (non-PRO bike)
   ---------------------------------------------------------
   Date + CODPAR + Total stay readable. The body (articulos +
   audio link) is blurred. The PRO notice sits above and is
   not blurred.
   ========================================================= */
.rep-item.is-locked .rep-item__body {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}
.rep-item__pro-notice {
  display: none;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 0;
  border-top: 1px dashed var(--brand-red);
  background: color-mix(in oklab, var(--brand-red) 8%, transparent);
}
.rep-item.is-locked[open] .rep-item__pro-notice { display: flex; }
.rep-item__pro-badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 4px 10px;
  background: var(--brand-red);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.rep-item__pro-notice p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}
.rep-item__pro-notice a {
  color: var(--brand-red);
  font-weight: 700;
  text-decoration: underline;
}

/* =========================================================
   STRAVA INTEGRATION
   ========================================================= */
:root {
  --strava-orange: #fc5200;
  --strava-orange-dk: #e34800;
}

/* Account-level connect banner (shown once, above the bike list) */
.strava-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  margin: 0 0 14px;
  background: color-mix(in oklab, var(--strava-orange) 8%, var(--paper-light));
  border: 1px solid color-mix(in oklab, var(--strava-orange) 35%, var(--line));
  border-radius: var(--radius);
}
.strava-banner__icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  background: var(--paper);
  border: 1px solid var(--strava-orange);
  border-radius: 8px;
  display: grid; place-items: center;
}
.strava-banner__body { flex: 1; min-width: 0; }
.strava-banner__h {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--strava-orange);
}
.strava-banner__sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3);
  text-wrap: pretty;
}
.strava-banner__btn {
  flex-shrink: 0;
  width: auto;
  padding: 9px 14px;
  white-space: nowrap;
}
/* Override .strava-btn { width: 100% } via more specific selector */
.strava-banner > .strava-banner__btn { width: auto; }
@media (max-width: 520px) {
  .strava-banner { flex-direction: column; align-items: stretch; }
  .strava-banner > .strava-banner__btn { width: 100%; }
}

/* per-bike block (sits between .acc-bike__head and .acc-bike__history) */
.acc-bike__strava {
  border-top: 1px dashed var(--line);
  padding: 12px 14px;
  background: var(--paper-light);
}
.acc-bike__strava--empty,
.acc-bike__strava--unlinked {
  display: flex;
}

/* Strava-orange branded button */
.strava-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.strava-btn--primary {
  background: var(--strava-orange);
  border: 1px solid var(--strava-orange-dk);
  color: #fff;
}
.strava-btn--primary:hover { background: var(--strava-orange-dk); }
.strava-btn--ghost {
  background: transparent;
  border: 1px dashed var(--strava-orange);
  color: var(--strava-orange);
}
.strava-btn--ghost:hover {
  background: color-mix(in oklab, var(--strava-orange) 6%, transparent);
}
.strava-btn .strava-logo,
.strava-btn svg {
  flex-shrink: 0;
}
.strava-btn__arrow {
  margin-left: auto;
  opacity: 0.7;
}

/* Logo */
.strava-logo { color: var(--strava-orange); }
.strava-btn--primary .strava-logo { color: #fff; }

/* linked-state card */
.acc-bike__strava--linked {
  display: block;
}
.strava-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.strava-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: var(--strava-orange);
  color: #fff;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.strava-card__badge .strava-logo { color: #fff; }
.strava-card__synced {
  flex: 1;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.strava-card__refresh {
  width: 28px; height: 28px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 6px;
  color: var(--ink-3);
  display: grid; place-items: center;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.strava-card__refresh svg { width: 14px; height: 14px; }
.strava-card__refresh:hover { color: var(--strava-orange); border-color: var(--strava-orange); }
.strava-card__refresh:disabled { opacity: 0.5; cursor: not-allowed; }
.strava-card__refresh.is-spinning svg { animation: stravaSpin 0.9s linear infinite; }
@keyframes stravaSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* LOG OUT — disconnect Strava account, sits next to refresh */
.strava-card__logout {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px;
  padding: 0 9px;
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: color .15s, border-color .15s, background .15s;
}
.strava-card__logout svg { width: 11px; height: 11px; opacity: .7; }
.strava-card__logout:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: color-mix(in oklab, var(--danger) 6%, transparent);
}

/* Stat row */
.strava-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.acc-bike__strava--linked:has(.strava-stat--since) .strava-card__stats {
  grid-template-columns: 1fr 1fr;
}
.strava-card__stats:has(:nth-child(2)) {
  /* two-column when we have both stats */
}
.acc-bike__strava--linked .strava-card__stats > .strava-stat:only-child {
  grid-column: 1 / -1;
}
.strava-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.strava-stat__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  text-transform: uppercase;
}
.strava-stat__value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.strava-stat__unit {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.strava-stat--since .strava-stat__value { color: var(--strava-orange); }
.acc-bike__strava--linked.is-soon .strava-stat--since .strava-stat__value { color: #c47a00; }
.acc-bike__strava--linked.is-due  .strava-stat--since .strava-stat__value { color: var(--danger); }

/* Hover state on stat — surface the pencil icon */
.strava-stat--since {
  position: relative;
  cursor: default;
}
.strava-stat__edit-btn {
  position: absolute;
  top: 6px; right: 6px;
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  color: var(--ink-4);
  cursor: pointer;
  display: grid; place-items: center;
  transition: color .15s, border-color .15s, background .15s;
}
.strava-stat__edit-btn svg { width: 12px; height: 12px; }
.strava-stat__edit-btn:hover {
  color: var(--strava-orange);
  border-color: color-mix(in oklab, var(--strava-orange) 30%, transparent);
  background: color-mix(in oklab, var(--strava-orange) 6%, transparent);
}
.strava-stat__edit-btn:active { transform: scale(0.94); }

/* Inline editor — expands the "since" stat to span both columns */
.strava-stat--since.is-editing {
  grid-column: 1 / -1;
  background: var(--paper-raised);
  border-color: var(--brand-red);
  gap: 8px;
  padding: 12px 14px 14px;
}
.strava-stat__edit-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}
.strava-stat__edit-input {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  width: 130px;
  outline: none;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.strava-stat__edit-input::-webkit-outer-spin-button,
.strava-stat__edit-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.strava-stat__edit-input:focus {
  border-color: var(--brand-red);
  background: #fff;
}
.strava-stat__edit-unit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.strava-stat__edit-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-3);
  text-wrap: pretty;
}
.strava-stat__edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.strava-stat__edit-cancel,
.strava-stat__edit-save {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-light);
  color: var(--ink-2);
  cursor: pointer;
}
.strava-stat__edit-cancel:hover { border-color: var(--ink-3); color: var(--ink); }
.strava-stat__edit-save {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
  margin-left: auto;
}
.strava-stat__edit-save:hover { background: var(--brand-red-dk); border-color: var(--brand-red-dk); }
.strava-stat__edit-save:active { transform: scale(0.97); }

/* Progress bar */
.strava-card__progress {
  margin-bottom: 12px;
}
.strava-card__progress-bar {
  position: relative;
  height: 6px;
  background: var(--line-soft);
  border-radius: 999px;
  overflow: hidden;
}
.strava-card__progress-fill {
  height: 100%;
  background: var(--strava-orange);
  border-radius: 999px;
  transition: width .3s ease;
}
.acc-bike__strava--linked.is-ok   .strava-card__progress-fill { background: #4a9d6c; }
.acc-bike__strava--linked.is-soon .strava-card__progress-fill { background: #c47a00; }
.acc-bike__strava--linked.is-due  .strava-card__progress-fill { background: var(--danger); }
.strava-card__progress-tick {
  position: absolute;
  top: -2px;
  width: 1px;
  height: 10px;
  background: var(--ink-4);
  opacity: 0.45;
}
.strava-card__threshold {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.acc-bike__strava--linked.is-soon .strava-card__threshold { color: #c47a00; }
.acc-bike__strava--linked.is-due  .strava-card__threshold { color: var(--danger); font-weight: 600; }

/* Last service line */
.strava-card__last {
  margin: 0 0 12px;
  font-size: 11px;
  color: var(--ink-4);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Threshold text + inline edit pencil */
.strava-card__threshold {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.strava-card__threshold-msg { flex: 1; min-width: 0; }
/* Inline ETA next to the threshold message: "≈ 2 días · 30/05".
   Quieter than the main copy — sits in the same line, dimmer. */
.strava-card__eta {
  display: inline;
  color: var(--ink-4);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.acc-bike__strava--linked.is-soon .strava-card__eta { color: color-mix(in oklab, #c47a00 80%, var(--ink-3)); }
.acc-bike__strava--linked.is-due  .strava-card__eta { color: color-mix(in oklab, var(--danger) 80%, var(--ink-3)); }
.strava-card__threshold-edit {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  color: var(--ink-4);
  cursor: pointer;
  display: grid; place-items: center;
  transition: color .15s, border-color .15s, background .15s;
}
.strava-card__threshold-edit svg { width: 12px; height: 12px; }
.strava-card__threshold-edit:hover {
  color: var(--strava-orange);
  border-color: color-mix(in oklab, var(--strava-orange) 30%, transparent);
  background: color-mix(in oklab, var(--strava-orange) 6%, transparent);
}

/* Inline interval editor (appears under progress bar) */
.strava-card__interval-edit {
  margin-top: 10px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--strava-orange);
  border-radius: 8px;
}
.strava-card__interval-label {
  display: block;
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--strava-orange);
}
.strava-card__interval-row {
  display: flex; align-items: center; gap: 8px;
}
.strava-card__interval-input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-light);
}
.strava-card__interval-input:focus {
  outline: none;
  border-color: var(--strava-orange);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--strava-orange) 18%, transparent);
}
.strava-card__interval-unit {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.strava-card__interval-presets {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 10px 0 0;
}
.strava-card__interval-preset {
  flex: 1; min-width: 56px;
  padding: 6px 8px;
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.strava-card__interval-preset:hover {
  border-color: var(--strava-orange);
  color: var(--strava-orange);
}
.strava-card__interval-preset.is-active {
  background: var(--strava-orange);
  border-color: var(--strava-orange-dk);
  color: #fff;
}
.strava-card__interval-actions {
  display: flex; gap: 8px;
  margin-top: 12px;
}
.strava-card__interval-cancel,
.strava-card__interval-save {
  flex: 1;
  padding: 9px 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.strava-card__interval-cancel {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-3);
}
.strava-card__interval-cancel:hover { border-color: var(--ink-3); color: var(--ink); }
.strava-card__interval-save {
  background: var(--strava-orange);
  border: 1px solid var(--strava-orange-dk);
  color: #fff;
}
.strava-card__interval-save:hover { background: var(--strava-orange-dk); }

/* Action row at bottom */
.strava-card__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.strava-card__book {
  flex: 1;
  padding: 10px 14px;
  background: var(--strava-orange);
  border: 1px solid var(--strava-orange-dk);
  color: #fff;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
.strava-card__book:hover { background: var(--strava-orange-dk); }
.strava-card__unlink {
  background: transparent;
  border: none;
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 4px;
  text-decoration: underline;
}
.strava-card__unlink:hover { color: var(--danger); }
/* Tech-info entry point — moved to .acc-bike__actions, always visible */
.strava-card__techinfo { display: none; }

/* =========================================================
   BIKE TECH INFO SCREEN
   ========================================================= */
.tech-head {
  position: relative;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.tech-head__row {
  display: flex; align-items: center; gap: 12px;
}
.tech-head__icon {
  width: 46px; height: 46px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-red); color: #fff;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-weight: 800; font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tech-head__title {
  margin: 0;
  font-size: 19px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
  text-wrap: balance;
}
.tech-head__sub {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
}
.tech-head__lead {
  margin: 12px 0 0;
  font-size: 12px; color: var(--ink-3);
  line-height: 1.5;
}
.tech-saved-indicator {
  position: absolute;
  top: 0; right: 0;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--success);
  background: var(--success-bg);
  border: 1px solid color-mix(in oklab, var(--success) 40%, transparent);
  padding: 4px 8px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: none;
}
.tech-saved-indicator.is-on {
  animation: techSavedFlash 1.6s ease-out;
}
@keyframes techSavedFlash {
  0%   { opacity: 0;  transform: translateY(-4px); }
  10%  { opacity: 1;  transform: translateY(0); }
  70%  { opacity: 1;  transform: translateY(0); }
  100% { opacity: 0;  transform: translateY(-2px); }
}

.tech-card { padding: 16px; margin-bottom: 14px; }
.tech-card:last-of-type { margin-bottom: 30px; }

.tech-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tech-row {
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.tech-row:last-child { border-bottom: 0; }
.tech-row__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.3;
  margin: 0;
}
.tech-row__label--editable {
  /* Custom-field label rendered as an editable input */
  font: inherit;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  border: 1px dashed transparent;
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  outline: none;
  margin: 0;
  min-width: 0;
  width: 100%;
}
.tech-row__label--editable:hover,
.tech-row__label--editable:focus {
  border-color: var(--line);
  background: var(--paper-light);
  color: var(--ink);
}
.tech-row__field {
  position: relative;
  display: flex; align-items: center;
  gap: 8px;
  min-width: 0;
}
.tech-row__field--split {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 8px;
}
.tech-row__field--inner { gap: 4px; }
.tech-row__field--narrow .tech-row__input { text-align: right; }
.tech-row__input {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 36px 8px 10px;   /* room for pencil */
  width: 100%;
  min-width: 0;
  outline: none;
  transition: border-color .15s, background .15s;
}
.tech-row__field--inner .tech-row__input { padding-right: 10px; }
.tech-row__input::placeholder { color: var(--ink-4); font-weight: 500; letter-spacing: 0.04em; }
.tech-row__input:hover { border-color: var(--ink-4); }
.tech-row__input:focus {
  border-color: var(--brand-red);
  background: #fff;
}
.tech-row__suffix {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  flex-shrink: 0;
}
.tech-row__edit {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink-4);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
  pointer-events: auto;
}
.tech-row__edit svg { width: 12px; height: 12px; }
.tech-row__edit:hover {
  color: var(--brand-red);
  border-color: var(--brand-red);
  background: color-mix(in oklab, var(--brand-red) 6%, transparent);
}
.tech-row:focus-within .tech-row__edit {
  color: var(--brand-red);
}
/* When field has a suffix, the pencil sits in front of it */
.tech-row__field:has(.tech-row__suffix) .tech-row__edit { right: 38px; }

/* Custom row — label input takes the left column */
.tech-row--custom { grid-template-columns: minmax(120px, 38%) 1fr; }

/* Comment textarea */
.tech-comment-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 8px;
}
.tech-comment {
  width: 100%;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  resize: vertical;
  min-height: 110px;
  outline: none;
  transition: border-color .15s, background .15s;
}
.tech-comment::placeholder { color: var(--ink-4); }
.tech-comment:focus {
  border-color: var(--brand-red);
  background: #fff;
}

/* Narrow screens — stack label above input */
@media (max-width: 420px) {
  .tech-row,
  .tech-row--custom { grid-template-columns: 1fr; gap: 6px; }
  .tech-head__title { font-size: 17px; }
}

/* Modal: pick a Strava bike (link or import) */
.strava-modal {
  position: fixed;
  inset: 0;
  background: rgba(26, 21, 16, 0.55);
  display: grid; place-items: center;
  z-index: 9999;
  padding: 20px;
  animation: stravaFadeIn .15s ease-out;
}
@keyframes stravaFadeIn { from { opacity: 0; } to { opacity: 1; } }
.strava-modal__card {
  width: 100%; max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  animation: stravaPopIn .22s cubic-bezier(.2,.7,.2,1.05);
}
@keyframes stravaPopIn {
  from { transform: scale(.93); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.strava-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.strava-modal__close {
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  background: var(--paper-light);
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  color: var(--ink-3);
}
.strava-modal__close:hover { color: var(--ink); border-color: var(--ink-3); }
.strava-modal__h {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.strava-modal__sub {
  margin: 0 0 18px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.45;
  text-wrap: pretty;
}
.strava-modal__empty {
  margin: 16px 0;
  padding: 16px;
  background: var(--paper-light);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
  text-wrap: pretty;
}
.strava-modal__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.strava-modal__bike {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, transform .1s;
}
.strava-modal__bike:hover {
  border-color: var(--strava-orange);
  background: color-mix(in oklab, var(--strava-orange) 4%, var(--paper-light));
}
.strava-modal__bike:active { transform: scale(0.99); }
.strava-modal__bike.is-loading { opacity: 0.6; pointer-events: none; }
.strava-modal__bike-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  background: var(--strava-orange);
  color: #fff;
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.strava-modal__bike-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.strava-modal__bike-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.strava-modal__bike-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.strava-modal__bike-km {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--strava-orange);
  letter-spacing: 0.04em;
}

/* Add Bike screen: Strava import CTA + selected-from-strava chip */
.add-bike-strava-cta {
  margin-bottom: 18px;
}
.add-bike-strava-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 18px;
  background: color-mix(in oklab, var(--strava-orange) 8%, var(--paper-light));
  border: 1px solid var(--strava-orange);
  border-radius: var(--radius);
}
.add-bike-strava-chip__name {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.add-bike-strava-chip__km {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--strava-orange);
  letter-spacing: 0.04em;
}
.add-bike-strava-chip__clear {
  width: 22px; height: 22px;
  border: 1px solid var(--strava-orange);
  background: transparent;
  border-radius: 50%;
  font-size: 14px;
  color: var(--strava-orange);
  cursor: pointer;
  display: grid; place-items: center;
}
.add-bike-strava-chip__clear:hover {
  background: var(--strava-orange);
  color: #fff;
}

/* =========================================================
   Intro: links row (PRO + Sobre nuestro taller) — #11
   ========================================================= */
.intro-links-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.intro-links-row .pro-info-link { margin: 0; flex: none; min-width: 0; padding: 12px 12px; gap: 8px; }
.intro-links-row .pro-info-link__text { font-size: 10px; letter-spacing: 0.05em; line-height: 1.3; }
.intro-links-row .pro-info-link__arrow { display: inline; flex-shrink: 0; }
.pro-info-link__icon { flex-shrink: 0; display: inline-flex; align-items: center; color: var(--brand-red); }
.pro-info-link--taller { border-style: solid; border-color: var(--line); }
.pro-info-link--taller:hover { background: var(--paper-sunken); border-color: var(--ink-3); }
.pro-info-link--links { border-style: solid; border-color: var(--line); }
.pro-info-link--links:hover { background: var(--paper-sunken); border-color: var(--ink-3); }
@media (max-width: 360px) { .intro-links-row { grid-template-columns: 1fr; } }

/* =========================================================
   Intro: install-as-app CTA (PWA)
   ========================================================= */
.install-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  padding: 11px 14px;
  background: var(--paper-raised);
  border: 1px dashed var(--brand-red);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: background .15s, border-color .15s, transform .1s;
}
.install-cta:hover {
  background: color-mix(in oklab, var(--brand-red) 6%, var(--paper-raised));
  border-style: solid;
}
.install-cta:active { transform: translateY(1px); }
.install-cta__icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-red); color: #fff;
  border-radius: 9px;
}
.install-cta__text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.install-cta__label {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.03em; color: var(--ink);
}
.install-cta__hint { font-size: 11px; color: var(--ink-3); }
.install-cta__arrow { flex-shrink: 0; color: var(--brand-red); font-weight: 700; font-size: 16px; }

/* iOS "Add to Home Screen" instruction sheet (reuses .pro-modal overlay) */
.install-sheet__card { max-width: 340px; text-align: left; }
.install-sheet__icon {
  width: 46px; height: 46px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-red); color: #fff; border-radius: 12px;
}
.install-sheet__title { margin: 0 0 6px; font-size: 18px; text-align: center; letter-spacing: -0.01em; }
.install-sheet__intro { margin: 0 0 16px; font-size: 12px; color: var(--ink-2); text-align: center; }
.install-sheet__steps { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.install-sheet__steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.install-sheet__steps b { font-weight: 700; }
.install-sheet__num {
  flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-red); color: #fff; border-radius: 50%;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
.install-sheet__share { display: inline-flex; vertical-align: -3px; color: var(--brand-red); margin: 0 1px; }
.install-sheet__note { margin: 0 0 18px; font-size: 11px; color: var(--ink-4); text-align: center; }
.install-sheet__ok { width: 100%; }

/* =========================================================
   Magic-login splash (shown while a ?tel&id link logs you in)
   ========================================================= */
.magic-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 90% at 30% 20%, var(--paper-raised) 0%, var(--paper) 55%, var(--paper-sunken) 100%);
  animation: magic-in .25s ease both;
}
.magic-overlay.is-leaving { animation: magic-out .3s ease both; }
@keyframes magic-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes magic-out { from { opacity: 1; } to { opacity: 0; } }
.magic-overlay__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 32px;
  text-align: center;
}
.magic-overlay__spinner {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid color-mix(in oklab, var(--brand-red) 22%, transparent);
  border-top-color: var(--brand-red);
  animation: magic-spin .8s linear infinite;
}
@keyframes magic-spin { to { transform: rotate(360deg); } }
.magic-overlay__title {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.magic-overlay__sub {
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* Budget mode tile — dashed so it reads as the lighter-weight third option */
.mode-tile--budget { border-style: dashed; }

/* =========================================================
   Pedir presupuesto — contact-method checkboxes — #11
   ========================================================= */
.budget-method__head {
  margin: 18px 0 10px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4);
}
.budget-methods { display: flex; flex-direction: column; gap: 8px; }
.budget-method {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: var(--paper-sunken);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.budget-method:hover { border-color: var(--ink-3); }
.budget-method.is-on { border-color: var(--brand-red); background: color-mix(in oklab, var(--brand-red) 6%, var(--paper-sunken)); }
.budget-method input { position: absolute; opacity: 0; pointer-events: none; }
.budget-method__box {
  flex-shrink: 0; width: 18px; height: 18px;
  border: 1.5px solid var(--ink-4); border-radius: 5px;
  position: relative; transition: border-color .15s, background .15s;
}
.budget-method.is-on .budget-method__box { background: var(--brand-red); border-color: var(--brand-red); }
.budget-method.is-on .budget-method__box::after {
  content: ''; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.budget-method__label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); }

/* =========================================================
   Sobre nuestro taller (about + FAQ) — #11
   ========================================================= */
.taller-info { margin-top: 6px; }
.taller-info__h { font-size: 24px; font-weight: 700; margin: 0 0 18px; }
.taller-info__section-h {
  margin: 0 0 12px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-red);
}
.taller-info__about { margin-bottom: 28px; }
.taller-info__p { margin: 0 0 12px; font-size: 13px; line-height: 1.65; color: var(--ink-2); }
.taller-info__faq { margin-bottom: 22px; }
.taller-faq { border-bottom: 1px solid var(--line-soft); }
.taller-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4;
}
.taller-faq__q::-webkit-details-marker { display: none; }
.taller-faq__toggle { flex-shrink: 0; color: var(--brand-red); transition: transform .2s; }
.taller-faq[open] .taller-faq__toggle { transform: rotate(45deg); }
.taller-faq__a { margin: 0 0 16px; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }
.taller-info__wa {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  padding: 12px 18px; margin-top: 6px;
  background: var(--ink); color: var(--paper-light);
  border-radius: var(--radius); text-decoration: none;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
}
.taller-info__wa svg { flex-shrink: 0; }
.taller-info__wa:hover { background: var(--brand-red); }

/* =========================================================
   Enlaces útiles (PRO info) — external reference tools
   ========================================================= */
.useful-links { display: flex; flex-direction: column; gap: 8px; }
.useful-link {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--paper-sunken);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.useful-link:hover { border-color: var(--ink-3); background: var(--paper-light); }
.useful-link__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.useful-link__text {
  font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3;
}
.useful-link__desc {
  font-size: 11.5px; font-weight: 400; color: var(--ink-2); line-height: 1.4;
}
.useful-link__arrow {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  color: var(--brand-red);
}

/* =========================================================
   Sobre nuestro taller — photo gallery
   ========================================================= */
.taller-info__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 28px;
}
.taller-shot {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-sunken);
  aspect-ratio: 4 / 3;
}
.taller-shot--wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.taller-shot--tall { aspect-ratio: 3 / 4; }
.taller-shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}

/* WhatsApp + Contacts side by side */
.taller-info__cta-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-top: 6px;
}
.taller-info__cta-row .taller-info__wa,
.taller-info__cta-row .taller-info__contacts {
  flex: 1 1 0; min-width: 0; margin-top: 0; margin-left: 0;
}

/* Contacts button — ghost twin of the WhatsApp CTA */
.taller-info__contacts {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  padding: 12px 18px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius); text-decoration: none;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  transition: background .15s, color .15s, border-color .15s;
}
.taller-info__contacts-icon { flex-shrink: 0; display: inline-flex; color: var(--brand-red); }
.taller-info__contacts-arrow { font-size: 14px; }
.taller-info__contacts:hover { background: var(--ink); color: var(--paper-light); border-color: var(--ink); }
.taller-info__contacts:hover .taller-info__contacts-icon { color: var(--paper-light); }
@media (max-width: 380px) {
  .taller-info__contacts { margin-left: 0; margin-top: 12px; }
}

/* =========================================================
   APP FOOTER — copyright + version, every screen
   ========================================================= */
.app-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: var(--max-width);
  margin: 28px auto 0;
  padding: 22px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  text-align: center;
}
.app-footer__dot { color: var(--line); }
.app-footer__ver { color: var(--ink-3); font-weight: 600; }