/* Deep Slate / Luxury Ink — mismo sistema visual que login.css/agent-config.css */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Cal Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/cal-sans@latest/latin-400-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --bg: #f7f9fc;
  --panel: #ffffff;
  --panel-muted: #f0f1f4;
  --text: #0d0f12;
  --text-soft: #4a5159;
  --muted: #767e89;
  --line: #e4e8ee;
  --line-strong: #cbd0da;
  /* Paleta de la tienda: negro + celeste brillante.
     --primary es RELLENO y siempre lleva --on-primary encima; el celeste brillante no tiene
     contraste suficiente como texto sobre blanco (2.7:1), por eso el texto usa --primary-strong. */
  --primary: #0b1220;
  --on-primary: #ffffff;
  --primary-strong: #0b6ea8;
  --primary-soft: #eaf8fe;
  --accent: #35c3f0;
  --danger: #b42318;
  --danger-soft: #fff0ee;
  --success: #0f7a4b;
  --success-soft: #eafff3;
  --shadow: 0 24px 70px rgba(13, 15, 18, 0.14);
  --radius: 12px;
  --font-display: "Cal Sans", "Aptos Display", "Segoe UI Variable Display", sans-serif;
  --font-body: "Inter", "Aptos", "Segoe UI Variable Text", "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080a0d;
  --panel: #0f1117;
  --panel-muted: #161922;
  --text: #eef2ff;
  --text-soft: #b4bccb;
  --muted: #828b9b;
  --line: #1e2330;
  --line-strong: #2c3344;
  --primary: #35c3f0;
  --on-primary: #0b1220;
  --primary-strong: #68d5f7;
  --primary-soft: rgba(53, 195, 240, 0.16);
  --accent: #35c3f0;
  --danger: #ffb4ab;
  --danger-soft: rgba(255, 180, 171, 0.12);
  --success: #7fe3b4;
  --success-soft: rgba(127, 227, 180, 0.12);
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  background: var(--bg);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background:
    radial-gradient(1100px 520px at 12% -10%, color-mix(in srgb, var(--primary-soft) 55%, transparent), transparent 60%),
    radial-gradient(900px 460px at 100% 0%, color-mix(in srgb, var(--primary-soft) 35%, transparent), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  text-rendering: geometricPrecision;
}

button,
input,
select {
  font: inherit;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 3px;
}

/* Bug real: varias clases de aca abajo (.wizard-step, .field, .book-button) fijan su propio
   "display", que empata en especificidad con la regla nativa `[hidden]{display:none}` del
   navegador — y como esta hoja de estilos se carga despues, gana la clase y el elemento
   "hidden" se sigue viendo. Con esta regla (mayor especificidad) el atributo hidden SIEMPRE
   gana, sin importar que mas le pongamos a la clase despues. */
[hidden] {
  display: none !important;
}

/* ---------- Top bar ---------- */

.book-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 2px solid var(--accent);
}

.book-topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  display: grid;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--radius);
  /* Fijo en celeste + tinta, no atado al tema: es el unico golpe de color de marca que se ve
     apenas entras, y en modo claro la pagina quedaba entera en blanco y negro. */
  background: var(--accent);
  color: #0b1220;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 850;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 38%, transparent);
}

.book-topbar-text {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.book-topbar-title {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 750;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.book-topbar-subtitle {
  overflow: hidden;
  color: var(--text-soft);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- Theme toggle (mismo patron que el panel admin) ---------- */

.theme-toggle {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 32px;
  border: none;
  border-radius: 999px;
  padding: 2px;
  background: var(--panel-muted);
  cursor: pointer;
}

.theme-track {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.theme-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: color 160ms ease;
}

.theme-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

:root[data-theme="dark"] .theme-thumb {
  transform: translateX(28px);
}

:root:not([data-theme="dark"]) .theme-icon-sun,
:root[data-theme="dark"] .theme-icon-moon {
  color: var(--primary-strong);
}

/* ---------- Layout: el shell ocupa el resto del viewport y CENTRA la tarjeta, asi si el
   contenido es mas chico que la pantalla no queda un bloque vacio pegado abajo. ---------- */

.book-shell {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 18px;
  overflow-y: auto;
}

.book-card,
.landing-card {
  display: grid;
  gap: 18px;
  width: min(100%, 520px);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 2);
  padding: 26px;
  background: color-mix(in srgb, var(--panel) 97%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

/* ---------- Vista: bienvenida ---------- */

.landing-card {
  justify-items: center;
  text-align: center;
}

/* El PNG del logo tiene fondo blanco real (no transparente, a pesar de que el formato soporta
   canal alfa) — en vez de pelearla, se lo trata a proposito como una placa blanca circular. Se ve
   bien en claro y oscuro, y no hay bug de "cuadrado blanco roto" flotando sobre el fondo oscuro.
   object-fit:contain (no cover) porque el logo real ocupa casi todo el ancho de su lienzo — un
   recorte circular a lo bruto (cover) cortaria el texto "ESTRELLA" en los bordes. */
.landing-logo-frame {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.landing-logo {
  display: block;
  width: 84%;
  height: 84%;
  object-fit: contain;
}

.landing-tagline {
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
}

.landing-actions {
  display: grid;
  gap: 10px;
  width: 100%;
}

.landing-socials {
  display: flex;
  gap: 12px;
}

.landing-social-link {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  transition: border-color 150ms ease, color 150ms ease;
}

.landing-social-link:hover {
  border-color: var(--accent);
  color: var(--primary-strong);
}

.landing-social-link svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-website {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.landing-website:hover {
  color: var(--primary-strong);
}

/* ---------- Vista: mis reservas ---------- */

.reservations-hint {
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
}

.reservations-form {
  display: grid;
  gap: 14px;
}

.reservations-list {
  display: grid;
  gap: 10px;
}

.reservation-item {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.reservation-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 750;
}

.reservation-item-meta {
  color: var(--text-soft);
  font-size: 13px;
}

.reservation-badge {
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.reservation-badge.status-confirmed {
  background: var(--success-soft);
  color: var(--success);
}

.reservation-badge.status-cancelled {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Retiro a domicilio todavía sin día asignado: no es un "confirmado" (mentiría, el equipo todavía
   no le puso fecha) ni un "cancelado". Es un estado propio: está anotado y en curso. */
.reservation-badge.status-pending {
  background: var(--primary-soft);
  color: var(--primary-strong);
}

/* Mis reservas es SOLO de consulta (decision del dueño 2026-07-20): no hay boton de cancelar
   aca, si el cliente necesita cancelar o reprogramar se lo dirige a escribir por WhatsApp en vez
   de ofrecer una accion que despues termina generando un doble manejo del turno. */
.reservations-cancel-note {
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 13px;
  text-align: center;
}

.reservations-cancel-note a {
  color: var(--primary-strong);
  font-weight: 700;
}

/* ---------- Wizard: progreso + pasos + volver ---------- */

.wizard-progress {
  color: var(--primary-strong);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wizard-step {
  display: grid;
  gap: 14px;
}

.wizard-back {
  justify-self: start;
  border: none;
  background: none;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.wizard-back:hover {
  color: var(--primary-strong);
}

/* Edición rápida en la pantalla de revisión del retiro a domicilio (2026-09-09) — 2 links en
   fila, mismo estilo que .wizard-back de siempre. */
.pickup-quick-edit {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.step-label {
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 750;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Marca/modelo/color de la bici (pedido de Facu 2026-08-19): son 3 datos de UNA sola cosa, van
   en fila como field-row — mismo criterio, se apila abajo de 480px (ver el media query). */
.field-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}

.field {
  display: grid;
  gap: 8px;
}

#serviceFields {
  display: grid;
  gap: 14px;
}

.field span {
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 750;
}

.field input,
.field select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 13px;
  background: var(--panel);
  color: var(--text);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.field input:hover {
  border-color: var(--line-strong);
}

.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
  outline: 0;
}

/* Dirección estructurada del retiro a domicilio (2026-09-08): el toggle de "es un barrio privado"
   y sus campos condicionales (nombre del barrio, lote, casa). */
.pickup-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.pickup-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}

#pickupBarrioFields {
  display: grid;
  gap: 14px;
}

/* Varias bicis por pedido (2026-09-08). Un bloque por bici, con su propio título solo si hay más
   de una — un cliente con una sola bici no necesita ver "Bici 1" de encabezado. */
#pickupBicisContainer {
  display: grid;
  gap: 18px;
}

.pickup-bici-block {
  display: grid;
  gap: 10px;
}

/* Cuerpo de la bici (datos + servicios) — grid propio para el mismo gap que antes tenía
   .pickup-bici-block directo, ahora que el header (2026-09-09, acordeón) se metió en el medio. */
.pickup-bici-body {
  display: grid;
  gap: 12px;
}

/* Header clickeable de cada bici (2026-09-09, "chocante que aparezca todo de golpe"): acordeón,
   una sola bici abierta a la vez. Mismo look que un .field pero interactivo. */
.pickup-bici-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  font: inherit;
  font-size: 13.5px;
  font-weight: 750;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.pickup-bici-header:hover { border-color: var(--accent); }
.pickup-bici-header.is-open { border-color: var(--accent); background: color-mix(in srgb, var(--primary) 10%, var(--panel)); }
.pickup-bici-header-title { flex-shrink: 0; }
.pickup-bici-header-summary {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
}
.pickup-bici-chevron { flex-shrink: 0; color: var(--muted); transition: transform .15s ease; }
.pickup-bici-header.is-open .pickup-bici-chevron { transform: rotate(180deg); }

/* Cada Marca/Modelo va con su propio checkbox "No sé" pegado justo debajo — gap chico a
   propósito, son una sola unidad visual, no dos campos sueltos. */
.pickup-bici-field-group {
  display: grid;
  gap: 6px;
}

.pickup-checkbox-sm {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-soft);
}

.pickup-checkbox-sm input[type="checkbox"] {
  width: 15px;
  height: 15px;
}

/* Servicios por bici (2026-09-09, paso 3: "que el cliente elija qué service quiere para cada
   bici"). Lista de checkboxes, no chips de radio: es multi-selección, mismo criterio visual que
   el resto del bloque de la bici (checkbox + label). */
.pickup-services-block {
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: grid;
  gap: 10px;
}

/* Rediseño 2026-09-09 (capturas reales de Enzo, ver el comentario grande en
   pickupServicesPickerHtml): antes esto vivía escondido detrás de un toggle "opcional" — ahora es
   la primera pregunta, siempre a la vista, en criollo. Reusa .motivo-card (mismas pastillas que
   "¿Cuántas bicis retiramos?") para que se sienta parte del mismo wizard, no un widget aparte. */
.pickup-services-question {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.pickup-services-fork .motivo-card {
  flex: 1;
  justify-content: center;
  text-align: center;
}

.pickup-services-no-se-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--panel-muted);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-soft);
}

.pickup-bici-services {
  display: grid;
  gap: 10px;
}

/* Grilla compacta, 2 columnas (2026-09-09, corregido: "chocante que aparezca toda la lista de
   golpe... parece scroll interminable" — una lista de 15 filas de a una se volvía km y medio de
   alto, más todavía con varias bicis. Mismo criterio visual que la grilla de servicios del ticket
   del taller en el panel admin, ver la referencia de calidad ya aprobada). */
.pickup-service-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.pickup-service-checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "check name" ". price";
  column-gap: 8px;
  row-gap: 3px;
  align-items: start;
  padding: 9px 10px;
  border-radius: var(--radius);
  background: var(--panel-muted);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  cursor: pointer;
}
.pickup-service-checkbox input[type="checkbox"] { grid-area: check; margin-top: 2px; }
.pickup-service-checkbox .pickup-service-name { grid-area: name; }
.pickup-service-checkbox .pickup-service-price { grid-area: price; }

.pickup-service-checkbox.is-disabled {
  opacity: .5;
  cursor: not-allowed;
}

.pickup-service-name { display: flex; align-items: center; gap: 4px; }

.pickup-service-price {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
  font-weight: 700;
  white-space: nowrap;
}

/* Botoncito "ⓘ" al lado de los 4 paquetes (Basic/Ready/Ready Plus/Pro): abre/cierra una línea con
   qué incluye, sin ocupar espacio permanente en la lista (pedido real: "encontrar la forma de
   explicarlo sin que sature la vista"). */
.pickup-service-info {
  border: none;
  background: none;
  color: var(--primary);
  font-size: 13px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.pickup-service-desc {
  grid-column: 1 / -1; /* ocupa las 2 columnas de la grilla, sin importar en cuál esté su chip */
  margin: -2px 0 0;
  padding: 0 10px 8px;
  font-size: 12px;
  color: var(--text-soft);
  font-weight: 500;
}

.pickup-bici-subtotal {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  text-align: right;
}

.pickup-bici-subtotal strong { color: var(--text); }

/* Total general del paso 3 — misma caja visual que .pickup-checkbox pero no clickeable. */
.pickup-services-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 10%, var(--panel));
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.pickup-services-total strong { font-size: 17px; font-variant-numeric: tabular-nums; }

/* Resumen del paso 4 (domicilio, "Revisá y confirmá") — lista de pares etiqueta/valor, mismo
   patrón visual que .field (label chico arriba, dato abajo) para no meter un componente nuevo. */
.pickup-summary {
  display: grid;
  gap: 14px;
  margin: 0;
}

.pickup-summary > div {
  display: grid;
  gap: 4px;
}

.pickup-summary dt {
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 750;
}

.pickup-summary dd {
  margin: 0;
  font-size: 15px;
  color: var(--text);
}

/* Bici del paso 4 (2026-09-09): ahora puede traer varios <p>, uno por bici + el total, en vez de
   un solo texto plano — resetea el margen default de <p> para que no se vea desparejo dentro del
   mismo <dd>. */
.pickup-summary dd p { margin: 0 0 4px; }
.pickup-summary dd p:last-child { margin-bottom: 0; }
.pickup-confirm-subtotal { color: var(--text-soft); font-weight: 500; }
.pickup-confirm-total { font-weight: 750; padding-top: 4px; border-top: 1px dashed var(--line); }
.pickup-confirm-total strong { font-variant-numeric: tabular-nums; }

/* Aviso de la seña (2026-09-09) — misma caja "soft" que .pickup-services-total, para que se lea
   como información importante sin parecer una alerta de error. */
.pickup-deposit-notice {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 8%, var(--panel));
  border: 1px solid var(--line);
}
.pickup-deposit-notice p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.pickup-deposit-notice p + p { margin-top: 6px; }
.pickup-deposit-notice-small { font-size: 12px !important; color: var(--text-soft); }

/* ---------- Paso 1: sucursal ----------
   Cada tarjeta separa 2 acciones distintas con su propio boton: "Elegir esta sucursal" (avanza
   el wizard) y "Ver ubicacion" (despliega un mapa chico). No pueden compartir un solo <button>
   contenedor (un <button> no puede tener un <iframe>/<a> interactivo adentro, HTML invalido) —
   por eso .branch-card es un div, no un button. */

.branch-grid {
  display: grid;
  gap: 10px;
}

.branch-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  transition: border-color 150ms ease;
}

.branch-card:has(.branch-card-select[aria-checked="true"]) {
  border-color: var(--accent);
}

.branch-card-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 96px;
  object-fit: cover;
}

.branch-card-body {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 12px 14px;
}

.branch-card-name {
  font-size: 15px;
  font-weight: 750;
}

.branch-card-address {
  color: var(--muted);
  font-size: 12px;
}

.branch-card-hours {
  color: var(--text-soft);
  font-size: 12px;
}

.branch-card-map-toggle {
  justify-self: start;
  border: none;
  background: none;
  padding: 0;
  color: var(--primary-strong);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.branch-card-map-toggle:hover {
  text-decoration: underline;
}

.branch-card-map {
  display: grid;
  gap: 6px;
}

.branch-card-map iframe {
  width: 100%;
  /* 200 y no 130: por debajo de ~180px Google esconde los controles de zoom y el mapa parece
     una foto fija. Con este alto aparecen los controles y se puede arrastrar comodo. */
  height: 200px;
  border: 0;
  border-radius: var(--radius);
}

.branch-card-map-link {
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}

.branch-card-map-link:hover {
  color: var(--primary-strong);
}

.branch-card-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 14px;
  background: var(--panel-muted);
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.branch-card-select:hover {
  border-color: var(--accent);
}

.branch-card-select[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--primary);
  color: var(--on-primary);
}

/* ---------- Paso 2: dia + horario ---------- */

.day-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.day-tab {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  gap: 2px;
  min-width: 64px;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 10px;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.day-tab:hover {
  border-color: var(--accent);
}

.day-tab[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--primary);
  color: var(--on-primary);
}

.day-tab-weekday {
  text-transform: capitalize;
  opacity: 0.85;
}

.day-tab-date {
  font-size: 13px;
}

.slots-box {
  display: grid;
  gap: 8px;
  min-height: 44px;
  max-height: 280px;
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.slots-hint {
  margin: 0;
  padding: 12px 2px;
  color: var(--muted);
  font-size: 13px;
}

.time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 16px;
  background: var(--panel);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.time-row:hover {
  border-color: var(--accent);
}

.time-row[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--primary) 10%, var(--panel));
}

.time-status {
  font-size: 12px;
  font-weight: 700;
}

.time-status.is-available {
  color: var(--success);
}

.time-status.is-reserved {
  color: var(--danger);
}

.time-row.is-reserved {
  cursor: not-allowed;
  opacity: 0.6;
}

.time-row.is-reserved:hover {
  border-color: var(--line);
}

/* ---------- Paso 3: motivo ---------- */

.motivo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.motivo-card {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 16px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.motivo-card:hover {
  border-color: var(--accent);
}

.motivo-card[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--primary);
  color: var(--on-primary);
}

/* Franja sin cupo (2026-09-08, "el cupo debe ser por franja horaria") — mismo criterio visual que
   .time-row.is-reserved del turnero de sucursal. */
.motivo-card.is-full {
  cursor: not-allowed;
  opacity: 0.55;
}

.motivo-card.is-full:hover {
  border-color: var(--line);
}

/* ---------- Honeypot ---------- */

/* Fuera de pantalla pero presente en el DOM y fuera del tab order, para que un bot que
   autocompleta todos los inputs lo llene igual, sin que un humano lo vea nunca. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Estado / botones ---------- */

.status-message {
  border: 1px solid color-mix(in srgb, var(--danger) 26%, var(--line));
  border-radius: var(--radius);
  padding: 12px 13px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
}

.status-message.is-success {
  border-color: color-mix(in srgb, var(--success) 26%, var(--line));
  background: var(--success-soft);
  color: var(--success);
}

.book-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  padding: 0 16px;
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
  font-weight: 800;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease, opacity 150ms ease;
}

.book-button:hover:not(:disabled) {
  border-color: var(--primary-strong);
  background: var(--primary-strong);
}

.book-button:active:not(:disabled) {
  transform: translateY(1px);
}

.book-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}

.book-button.secondary {
  justify-content: center;
  border-color: var(--line);
  background: var(--panel-muted);
  color: var(--text);
}

.book-button.secondary:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--panel);
  color: var(--primary-strong);
}

/* ---------- Las 2 formas de traer la bici (bienvenida) ----------
   Tarjetas, no botones: cada opción tiene que poder decir en una línea qué implica elegirla.
   Un botón con 3 palabras obliga al cliente a entrar para enterarse, que es exactamente lo que
   pasaba antes con el retiro a domicilio (nadie sabía que existía). */
.choice-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr 20px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.choice-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 10%, transparent);
}

.choice-card:active { transform: translateY(0); }

.choice-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--panel-muted);
  color: var(--text);
}

.choice-icon svg { width: 24px; height: 24px; }

.choice-text { display: grid; gap: 3px; min-width: 0; }

.choice-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.choice-sub {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.choice-chevron { display: grid; place-items: center; color: var(--muted); }
.choice-chevron svg { width: 18px; height: 18px; }

/* La opción nueva se destaca sin gritar: el fondo tintado de marca alcanza para que el ojo vaya
   ahí primero, sin robarle el lugar a la opción de siempre. */
.choice-card.is-featured {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: linear-gradient(140deg, var(--primary-soft), transparent 65%), var(--panel);
}

.choice-card.is-featured .choice-icon {
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  color: var(--primary-strong);
}

.choice-badge {
  position: absolute;
  top: -9px;
  right: 14px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #04252f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.landing-link {
  justify-self: center;
  margin-top: 2px;
  border: none;
  background: none;
  padding: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.landing-link:hover { color: var(--primary-strong); text-decoration: underline; }

/* ---------- Explicaciones dentro del wizard ---------- */
.step-intro {
  margin: -4px 0 4px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.55;
}

/* Puente entre los dos flujos: quien entró por sucursal puede descubrir el retiro acá. */
.step-switch {
  justify-self: start;
  margin-top: 4px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  padding: 9px 14px;
  background: none;
  color: var(--primary-strong);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.step-switch:hover {
  border-color: var(--accent);
  background: var(--primary-soft);
}

/* ---------- Retiro a domicilio: qué es el servicio ---------- */
.pickup-hero {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(150deg, var(--primary-soft), transparent 70%), var(--panel-muted);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
}

.pickup-hero-badge {
  justify-self: start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #04252f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pickup-hero-title {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}

.pickup-hero-lead {
  margin: 0;
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

.pickup-steps {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.pickup-step {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  padding: 10px 0;
}

/* Línea que une los 3 pasos: los lee como una secuencia, no como 3 datos sueltos. */
.pickup-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}

.pickup-step-num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 13px;
  font-weight: 800;
}

.pickup-step-text {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  padding-top: 3px;
}

.pickup-step-text strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

/* ---------- Pantalla de "listo" ----------
   Sin nada que tocar salvo volver al inicio: es el final del camino, no un paso más. Antes se
   volvía al paso 1 del wizard y el cliente quedaba mirando "¿A qué sucursal la llevás?" con el
   cartel de éxito arriba — invitando a sacar un segundo turno sin querer. */
.done-card {
  justify-items: center;
  text-align: center;
  gap: 10px;
}

.done-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
}

.done-icon svg { width: 30px; height: 30px; }

.done-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}

.done-detail {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.done-next {
  margin: 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.done-actions {
  display: grid;
  gap: 10px;
  justify-items: center;
  width: 100%;
  margin-top: 8px;
}

.done-actions .book-button { width: 100%; }

.done-help {
  color: var(--muted);
  font-size: 12.5px;
  text-decoration: none;
}

.done-help:hover { color: var(--primary-strong); text-decoration: underline; }

/* ---------- Mapa de la zona de retiro ----------
   Es un mapa para MIRAR y ubicarse, no para explorar: sin controles, sin arrastre (ver book.js).
   Todo el bloque se puede sacar sin romper nada; el chequeo por dirección no depende de él. */
.coverage {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
}

.coverage-map {
  height: 200px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
  background: var(--panel-muted);
}

/* Leaflet dibuja su propio fondo blanco: en tema oscuro el mapa quedaría como un cuadro
   encandilante al lado del resto. Se apaga un poco, sin volverlo ilegible. */
:root[data-theme="dark"] .coverage-map .leaflet-tile-pane {
  filter: brightness(0.72) saturate(0.85);
}


.coverage-map .leaflet-control-attribution {
  font-size: 9px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  color: var(--muted);
}

.coverage-note {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.button-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
}

.button-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
  .book-topbar {
    padding: 10px 14px;
  }

  .book-topbar-title {
    font-size: 15px;
  }

  .book-topbar-subtitle {
    display: none;
  }

  .book-shell {
    padding: 14px 12px;
  }

  .book-card {
    padding: 18px;
  }

  .field-row,
  .field-row-3 {
    grid-template-columns: 1fr;
  }

  .branch-card {
    grid-template-columns: 72px 1fr;
  }

  .branch-card-photo {
    min-height: 72px;
  }

  /* Las tarjetas de la bienvenida en pantalla chica: el ícono ocupa menos y el texto respira. */
  .choice-card {
    grid-template-columns: 42px 1fr 18px;
    gap: 12px;
    padding: 14px;
  }

  .choice-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .choice-icon svg { width: 21px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}