/* Citeri — app de clientas (PWA). Dirección visual tipo iOS/Apple: superficies
   claras y cálidas, un único acento índigo con carácter, tipografía Sora con
   jerarquía generosa, sombras casi imperceptibles y micro-interacciones con
   "spring" táctil. Los nombres de clase se mantienen intactos: los usa app.js. */

@font-face {
  font-family: "Sora";
  src: url("/app/fonts/sora-variable.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --bg: #f5f2fb;
  --surface: #ffffff;
  --ink: #1a1330;
  --muted: #75708a;
  --border-soft: rgba(26, 19, 48, 0.07);
  --border: rgba(26, 19, 48, 0.12);
  --accent: #5c4fe6;
  --accent-deep: #231a3f;
  --accent-light: #ece8fb;
  --on-accent: #ffffff;
  --success: #2f8f5d;
  --success-tint: #e6f3ea;
  --danger: #d1483d;
  --danger-tint: #fbebe9;
  --star: #d69a2c;
  --disabled-bg: #ddd7ee;
  --inactive: #a49dbb;
  --hero-from: #6f5ff2;
  --hero-to: #221a3d;
  --hero-muted: #cabdf7;
  --hero-on-filled: #231a3f;
  --shadow: rgba(31, 22, 61, 0.1);
  --shadow-lg: rgba(31, 22, 61, 0.22);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --glass: rgba(255, 255, 255, .76);
  --glass-thick: rgba(255, 255, 255, .9);
  --glass-edge: rgba(255, 255, 255, .92);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

.payment-view { padding-top:22px; max-width:520px; }
.payment-loading { min-height:55vh; display:grid; place-items:center; }
.payment-hero { text-align:center; padding:8px 20px 24px; }
.payment-hero p { margin:8px 0 4px; color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.payment-hero h1 { margin:0; font-size:29px; letter-spacing:-.05em; }
.payment-hero span { color:var(--muted); font-size:14px; }
.payment-lock { width:42px; height:42px; margin:auto; display:grid; place-items:center; border-radius:15px; color:var(--accent); background:var(--accent-light); }
.payment-lock .icon { width:20px; height:20px; }
.payment-card { background:var(--surface); border:1px solid var(--border-soft); box-shadow:0 18px 45px rgba(42,26,93,.09); padding:18px; border-radius:24px; }
.payment-service, .payment-service>div { display:flex; align-items:center; gap:11px; }
.payment-service { justify-content:space-between; }
.payment-service b { display:block; font-size:14px; }
.payment-service small { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.payment-service>strong { font-size:17px; letter-spacing:-.03em; }
.payment-summary { display:grid; grid-template-columns:1fr auto; gap:10px 18px; padding:18px 0; margin-top:16px; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); font-size:13px; color:var(--muted); }
.payment-summary b { color:var(--ink); font-size:14px; }
.payment-save { display:flex; align-items:flex-start; gap:9px; margin:16px 0 8px; font-size:13px; line-height:1.35; }
.payment-save input { margin-top:2px; accent-color:var(--accent); }
.payment-main { width:100%; margin-top:14px; min-height:51px; }
#expressCheckout { margin-top:17px; }
#walletDivider { display:flex; align-items:center; gap:10px; margin:18px 0 12px; color:var(--muted); font-size:12px; }
#walletDivider:before, #walletDivider:after { content:""; flex:1; height:1px; background:var(--border-soft); }
#paymentElement { padding:13px; border:1px solid var(--border); border-radius:14px; }
.payment-security { display:flex; justify-content:center; align-items:center; gap:6px; margin:16px 4px 0; color:var(--muted); text-align:center; font-size:11px; line-height:1.45; }
.payment-security .icon { width:14px; height:14px; flex:none; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
button, a, [data-svc], [data-emp], [data-loc], [data-go], [data-open-business] { touch-action: manipulation; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Sora", system-ui, -apple-system, sans-serif;
  font-size: 15.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ── humidity wheel / selector de umbrales ───────────────────
   Adaptado del Wheel MIT de Bencho. No se introduce ningún token global:
   Citeri ya dispone de --ink y Sora, así que --fill-on/--font-ui se resuelven
   en la raíz del componente y no se filtran al resto de la app. */
.hum {
  --font-ui: "Sora", system-ui, -apple-system, sans-serif;
  --fill-on: var(--ink);
  --hum-lit: #12b055;
  position:relative; display:flex; flex-direction:column; align-items:center;
  color:var(--fill-on); font-family:var(--font-ui);
}
/* Red under 12 and amber from 12 to 25 — warning and critical remain
   distinguishable on a 2px stroke. */
.hum[data-state="crit"] { --hum-lit:#e8443a; }
.hum[data-state="low"] { --hum-lit:#d97706; }
.hum[data-state="high"] { --hum-lit:#2563eb; }
.hum-dial { position:relative; width:min(250px, 100%); aspect-ratio:1; margin:18px auto 8px; }
.hwheel { position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:none; outline:none; }
.hwheel[data-dragging="true"] { cursor:grabbing; }
.hwheel:focus-visible { outline:2px solid var(--accent); outline-offset:5px; border-radius:50%; }
.hwheel-readout { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
/* The readout intentionally names the selected service value rather than
   showing the numeric percentage used internally for the booking. */
.hum-figure { color:var(--hum-lit); font-family:var(--font-ui); font-size:clamp(25px, 9vw, 34px); font-weight:600; letter-spacing:-.045em; line-height:1; text-align:center; }
.hum-unit { margin-top:7px; color:var(--muted); font-family:var(--font-ui); font-size:13px; font-weight:500; line-height:1.2; }
.wheel-a11y-input { position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none; }
@media (prefers-reduced-motion:reduce) { .hwheel { cursor:pointer; } }
.meter-summary { padding:13px 15px; min-width:0; overflow:hidden; }
.meter-summary-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; min-width:0; font-size:14px; }
.meter-summary-row + .meter-summary-row { margin-top:9px; padding-top:9px; border-top:1px solid var(--border-soft); }
.meter-summary-row span { color:var(--muted); min-width:0; overflow-wrap:anywhere; }
.meter-summary-row strong { color:var(--ink); white-space:nowrap; text-align:right; font-size:14px; }

.icon {
  width: 22px; height: 22px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  flex: none;
  display: inline-block;
  vertical-align: middle;
}

/* ── Layout de app ─────────────────────────────────────────────────── */

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100%;
  background: var(--bg);
  position: relative;
  padding-bottom: calc(94px + var(--safe-b));
}
#app.no-tabbar { padding-bottom: 0; }

.view { padding: calc(16px + var(--safe-t)) 20px 32px; }
.view-flush { padding: calc(16px + var(--safe-t)) 0 32px; }
/* Solo para vistas con su propia cabecera a sangre (la ficha de negocio,
   con .business-cover/.business-toolbar) — esas ya resuelven el hueco de
   la barra de estado por dentro (.business-toolbar), así que el padding
   de arriba de .view-flush solo dejaba un hueco blanco encima de la foto. */
.view-flush.edge-to-edge { padding-top: 0; }

/* Route changes use a short opacity transition in playViewTransition(). */

.screen-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px 10px;
}
.screen-header h1 { font-size: 22px; margin: 0; flex: 1; letter-spacing: -0.4px; }

.back-btn {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--surface); border: none; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
  color: var(--ink); flex: none;
  box-shadow: 0 1px 2px var(--shadow), 0 6px 16px var(--shadow);
  transition: transform .15s var(--ease), opacity .15s var(--ease);
}
.back-btn:active { transform: scale(0.96); opacity: .8; }
.back-btn:disabled { opacity: .35; cursor: not-allowed; }
.back-btn.on-dark { background: rgba(255,255,255,.16); color: #fff; box-shadow: none; }
/* Mismo bug de siempre: display:flex de autor gana a [hidden] del
   navegador (ver .scroll-x[hidden] más abajo) — sin esto, "removePhoto"
   seguía visible aunque no hubiera foto que quitar. */
.back-btn[hidden] { display: none; }
#retryProfileSave[hidden] { display: none; }
.profile-save-state { min-height: 22px; }
.service-card { width:100%; text-align:left; color:var(--ink); font:inherit; border:0; padding:0; cursor:pointer; }
.service-card-body { align-items:stretch; gap:12px; }
.service-card-copy { min-width:0; }
/* El selector vive dentro de la tarjeta, no robándole ancho desde fuera. El
   precio queda abajo y el − / n / + arriba: una descripción larga puede usar
   la tarjeta completa y se lee entera. */
.service-card-side { width:108px; flex:none; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:10px; }
.service-stepper-slot { min-height:36px; display:flex; justify-content:flex-end; }
.service-stepper { display:flex; align-items:center; gap:4px; }
.service-price { margin-top:auto; color:var(--accent); text-align:right; white-space:nowrap; }
.consultation-action { padding:0 18px 16px; }
.professional-card { width:96px; flex:none; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; }
.professional-card > .label-sm { width:100%; overflow-wrap:anywhere; }
.professional-card > .back-btn { position:absolute; top:0; right:8px; width:26px; height:26px; background:var(--surface); box-shadow:none; }
[data-emp] .title-sm { flex:1; text-align:center; }
.date-chip { align-items:center !important; justify-content:center !important; text-align:center; line-height:1.2; }
.date-chip > span { display:block; width:100%; text-align:center; }
.glass-choices { position:relative; isolation:isolate; }
.glass-choices > button { position:relative; z-index:1; }
.glass-choices > button.active { background:transparent !important; box-shadow:none !important; color:var(--accent-deep) !important; }
.choice-glass { position:absolute; left:0; top:0; z-index:0; pointer-events:none; border-radius:22px; background:linear-gradient(150deg,rgba(235,230,255,.88),rgba(218,206,255,.66)); border:1px solid var(--glass-edge); box-shadow:inset 0 1px 1px #fff,0 2px 8px rgba(81,55,148,.10); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); transform-origin:center; }
.choice-glass[hidden], #businessMapBox[hidden], #businessGallery[hidden], #businessGalleryButton[hidden] { display:none; }
#businessGallery h2 { scroll-margin-top:calc(20px + var(--safe-t)); }
.appointment-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; text-align:center; }
.appointment-calendar-grid .choice-glass { border-radius:14px; }
.calendar-day { position:relative; min-height:44px; border:0; border-radius:14px; background:transparent; color:var(--ink); font:inherit; cursor:pointer; }
.calendar-day[aria-current="date"] { box-shadow:inset 0 0 0 1px var(--accent); }
.calendar-day[aria-pressed="true"] { background:var(--accent); color:white; }
.calendar-day.has-appointments::after { content:''; position:absolute; width:4px; height:4px; border-radius:50%; background:currentColor; bottom:5px; left:calc(50% - 2px); }
.calendar-appointment { color:inherit; text-decoration:none; gap:12px; }
.calendar-toggle { padding-inline:0; gap:16px; cursor:pointer; }
.calendar-toggle input { appearance:none; -webkit-appearance:none; position:relative; flex:none; width:46px; height:28px; margin:0; border:1px solid var(--border-soft); border-radius:999px; background:var(--border-soft); cursor:pointer; }
.calendar-toggle input::after { content:''; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:white; box-shadow:0 1px 3px rgba(0,0,0,.14); }
.calendar-toggle input:checked { background:var(--accent); border-color:var(--accent); }
.calendar-toggle input:checked::after { transform:translateX(18px); }
.calendar-url { width:100%; min-width:0; padding:12px; border:1px solid var(--border-soft); border-radius:12px; background:var(--surface); color:var(--ink); font-size:16px; }
.calendar-day:active { transform:scale(.97); }
.glass-choices > button.card { background:rgba(255,255,255,.55); }
.map-box, .map-box .maplibregl-canvas-container { color-scheme:light; background:#f5f5f5; }
.map-box canvas { filter:none !important; }
.gallery-photo { flex:none; width:160px; height:120px; border:0; border-radius:20px; padding:0; overflow:hidden; background:var(--surface); cursor:pointer; }
.gallery-photo img { width:100%; height:100%; object-fit:cover; }
.gallery-dialog { width:min(92vw,760px); max-height:90dvh; border:0; border-radius:24px; padding:16px; background:var(--surface); color:var(--ink); }
.gallery-dialog::backdrop { background:rgba(20,16,32,.65); }
.gallery-dialog > .back-btn { margin:0 0 12px auto; }
.gallery-dialog > img { display:block; width:100%; max-height:70dvh; object-fit:contain; border-radius:12px; }
.review-card { padding-bottom:16px; border-bottom:1px solid var(--border-soft); }
.review-stars { color:var(--star); white-space:nowrap; }
.review-star-button { border:0; background:none; padding:6px; font-size:32px; color:var(--star); cursor:pointer; }
[data-like-review][aria-pressed="true"] { color:var(--danger); background:var(--danger-tint); }
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  .choice-glass { background:#e9e1fa; backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* ── Barra de pestañas ─────────────────────────────────────────────── */

.tabbar {
  position: fixed; left: 16px; right: 16px; bottom: calc(14px + var(--safe-b));
  max-width: 448px; margin: 0 auto;
  background: rgba(255, 255, 255, .64);
  border: 1px solid var(--glass-edge);
  border-radius: 28px;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(92,79,230,.05),
    0 8px 28px rgba(31,22,56,.1), 0 1px 4px rgba(31,22,56,.06);
  display: flex;
  padding: 6px;
  isolation: isolate;
  z-index: 40;
}
.tabbar::before, .segmented::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(110deg, rgba(255,255,255,.38), transparent 42%, rgba(255,255,255,.16));
  pointer-events: none; z-index: -1;
}
.tabbar[hidden] { display: none; }
.tabbar-selection, .segmented-selection {
  position: absolute; top: 6px; bottom: 6px; left: 6px;
  width: calc((100% - 12px) / var(--tab-count, 5)); border-radius: 22px;
  background: linear-gradient(155deg, #f3f0fe, #e9e4fb);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 3px rgba(31,22,56,.06);
  pointer-events: none; z-index: -1;
  will-change: transform;
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  -webkit-tap-highlight-color: transparent;
  min-width: 0; border-radius: 22px;
  gap: 4px; padding: 9px 2px; color: #635c77;
  font-size: 10px; font-weight: 600;
  transition: color .15s var(--ease), transform .15s var(--ease);
}
.tabbar a:active { transform: scale(0.96); background: transparent; outline: none; box-shadow: none; }
.tabbar a.active { color: var(--accent); }
.tabbar a .icon { width: 23px; height: 23px; }

/* ── Tipografía ────────────────────────────────────────────────────── */

h1, h2, h3 { font-weight: 700; margin: 0; letter-spacing: -0.3px; }
.display { font-size: 34px; font-weight: 700; letter-spacing: -0.7px; line-height: 1.1; }
.headline { font-size: 24px; font-weight: 700; letter-spacing: -0.4px; }
.title { font-size: 17px; font-weight: 600; letter-spacing: -0.1px; }
.title-sm { font-size: 14px; font-weight: 600; }
.body { font-size: 15.5px; }
.body-sm { font-size: 13.5px; }
.label-sm { font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px; text-transform: uppercase; }
.muted { color: var(--muted); }

/* ── Superficies ───────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border-radius: 26px;
  box-shadow: 0 1px 2px var(--shadow), 0 10px 24px var(--shadow);
  transition: transform .15s var(--ease);
}
.card.flat { box-shadow: none; border: 1px solid var(--border-soft); }
.card-body { padding: 18px; }
.card[data-open-business]:active,
.card[data-svc]:active,
.card[data-emp]:active,
.card[data-loc]:active,
.card[data-appt]:active { transform: scale(0.985); }

/* Mapa (MapLibre GL + OpenFreeMap, cargado bajo demanda en ficha de negocio
   y detalle de cita — ver renderMap() en app.js). cooperativeGestures ya
   evita que un dedo arrastrando el mapa se coma el scroll de la página.
   El pin y los botones de zoom de serie de MapLibre se sustituyen por unos
   propios (.map-marker/.map-zoom) para que no desentonen con el resto de
   la app — solo queda de MapLibre la atribución (obligatoria) y el mapa. */
/* isolation:isolate es lo importante: el <canvas> WebGL de MapLibre se
   promociona a su propia capa de composición, y en móvil (sobre todo iOS)
   esa capa puede pintarse POR ENCIMA de cosas con z-index mayor pero fuera
   de este contenedor (p. ej. el botón "Reservar cita", que es sticky) al
   hacer scroll — overflow:hidden no basta porque el problema es de orden
   de capas de la GPU, no de recorte. isolation:isolate obliga a que TODO lo
   de dentro (canvas incluido) se pinte contenido en este nivel. */
.map-box { position: relative; isolation: isolate; z-index: 0; height: 170px; border-radius: 26px; overflow: hidden; border: 1px solid var(--border-soft); background: var(--surface); }
.map-box .maplibregl-map { width: 100%; height: 100%; font: inherit; }
.map-box .maplibregl-ctrl-attrib { font-size: 9px; background: none; color: var(--muted); padding: 3px 8px; }
.map-box .maplibregl-ctrl-attrib a { color: var(--muted); }
.map-box .maplibregl-ctrl-attrib-button { display: none; }
.map-marker { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px var(--shadow), 0 0 0 5px rgba(92,79,230,.18); }
.map-marker .icon { width: 17px; height: 17px; }
.map-zoom { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.map-zoom button {
  width: 30px; height: 30px; border-radius: 999px; border: none; padding: 0;
  background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 2px var(--shadow), 0 4px 10px var(--shadow);
  transition: transform .15s var(--ease), opacity .15s var(--ease);
}
.map-zoom button:active { transform: scale(0.94); opacity: .8; }
.map-zoom .icon { width: 15px; height: 15px; }

.hero {
  border-radius: 30px;
  background: linear-gradient(160deg, var(--hero-from) 0%, var(--hero-to) 100%);
  color: #fff;
  box-shadow: 0 1px 2px var(--shadow-lg), 0 20px 36px var(--shadow-lg);
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 15% -10%, rgba(255,255,255,.22), transparent 60%);
}
.hero .muted { color: var(--hero-muted); }
/* Liquid glass: violeta suave con algo más de color que la versión gris
   anterior, pero lejos del morado eléctrico original (--hero-from/--hero-to). */
.hero-glass {
  background:
    radial-gradient(90% 70% at 18% 0%, rgba(255,255,255,.42), transparent 60%),
    radial-gradient(70% 60% at 100% 100%, rgba(207,168,240,.28), transparent 62%),
    linear-gradient(160deg, rgba(120,76,170,.88) 0%, rgba(54,32,82,.93) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(255,255,255,.14),
    0 26px 50px -14px rgba(28,24,37,.46);
}
.hero-glass::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 48%, transparent 60%);
  mix-blend-mode: soft-light;
}
.hero-glass > * { position: relative; z-index: 1; }
.hero-glass .hero-pill { background: rgba(255,255,255,.3); color: #fff; border: 1px solid rgba(255,255,255,.45); }
@media (prefers-reduced-transparency: reduce) {
  .hero-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(160deg, #78539c, #3a2452); }
}
.hero-pill {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: var(--hero-muted);
  font-size: 13px; font-weight: 600;
}

.card-actions {
  display: flex; border-top: 1px solid var(--border-soft); padding: 4px 6px; gap: 4px;
}
.card-action {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 4px; background: none; border: none; cursor: pointer;
  color: var(--accent); font-size: 13px; font-weight: 600; font-family: inherit;
  border-radius: 14px; transition: background .15s var(--ease), transform .15s var(--ease);
}
.card-action:active { transform: scale(0.95); background: var(--accent-light); }
.card-action.destructive { color: var(--danger); }
/* Tarjeta de cita: botones en morado oscuro de la marca; el morado de acento queda para el precio. */
.card[data-appt] .card-action { color: var(--accent-deep); }
.card[data-appt] .card-action.destructive { color: var(--danger); }
.card-action.destructive:active { background: var(--danger-tint); }
.card-action .icon { width: 20px; height: 20px; }

/* ── Avatares ──────────────────────────────────────────────────────── */

.avatar {
  border-radius: 32%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex: none; overflow: hidden;
}
.avatar.round { border-radius: 999px; }
.avatar img, .avatar svg { width: 100%; height: 100%; object-fit: cover; }

/* ── Botones ───────────────────────────────────────────────────────── */

.btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 54px; border: none; border-radius: 17px;
  font-family: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s var(--ease), opacity .15s var(--ease), box-shadow .15s var(--ease);
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px var(--shadow), 0 10px 20px rgba(92, 79, 230, 0.3); }
.btn-primary:disabled { background: var(--disabled-bg); color: #fff; box-shadow: none; }
.btn-secondary { background: var(--accent-light); color: var(--accent); min-height: 48px; }
.btn-hero { background: #fff; color: var(--hero-on-filled); min-height: 46px; }
.btn-hero-ghost { background: rgba(255,255,255,.14); color: #fff; min-height: 46px; }
.btn-danger-ghost { background: var(--danger-tint); color: var(--danger); min-height: 52px; }
.btn .icon { width: 19px; height: 19px; }
.btn:active { transform: scale(0.97); opacity: .9; }
.btn:disabled:active { transform: none; opacity: 1; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 4px;
}

.spinner {
  width: 18px; height: 18px; border-radius: 999px;
  border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.spinner.dark { border-color: rgba(92,79,230,.22); border-top-color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Campos ────────────────────────────────────────────────────────── */

.field {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 0 18px; min-height: 56px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field .icon { color: var(--muted); width: 19px; height: 19px; }
.field input {
  border: none; outline: none; background: none; flex: 1;
  font-family: inherit; font-size: 15.5px; color: var(--ink); min-width: 0;
}
.field input::placeholder { color: var(--muted); }
textarea.area {
  width: 100%; border: 1px solid var(--border-soft); border-radius: 18px;
  padding: 14px 16px; font-family: inherit; font-size: 15.5px; color: var(--ink);
  background: var(--surface); resize: none; min-height: 110px; outline: none;
  transition: border-color .15s var(--ease);
}
textarea.area:focus, .field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-light);
}

.otp-boxes { display: flex; gap: 9px; justify-content: center; }
.otp-box {
  width: 46px; height: 58px; text-align: center;
  font-family: 'Sora', sans-serif; font-size: 24px; font-weight: 700; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--border-soft); border-radius: 14px;
  outline: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
}
.otp-box:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-light); }
.otp-box.filled { border-color: var(--accent); }
.otp-box.shake { animation: otpShake .35s; }
@keyframes otpShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ── Píldoras / chips ──────────────────────────────────────────────── */

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--accent-light);
}
.pill .icon { width: 13px; height: 13px; }
.pill-status { padding: 6px 11px; }
.banner-meta .pill { background: rgba(255, 255, 255, .22); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.social-btn {
  width: 38px; height: 38px; border-radius: 999px; flex: none;
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: transform .15s var(--ease), opacity .15s var(--ease);
}
.social-btn:active { transform: scale(0.92); opacity: .85; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 16px; height: 38px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-soft);
  font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap;
  cursor: pointer; transition: transform .15s var(--ease), background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.chip:active { transform: scale(0.95); }
.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* El selector de fecha usaba .chip tal cual: cuadrado (72x72) + border-radius
   999px de .chip = salía como círculo perfecto. Cuadrado con esquinas
   redondeadas de verdad, no un círculo. */
.chip.date-chip { border-radius: 20px; }
.chip:disabled { opacity: .5; cursor: default; transform: none; }
.chip .icon { width: 15px; height: 15px; }

.category-chip { width: 74px; text-align: center; flex: none; }
.category-chip .circle {
  width: 56px; height: 56px; border-radius: 30%; background: var(--accent-light);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 7px; transition: transform .15s var(--ease);
}
.category-chip:active .circle { transform: scale(0.93); }

.scroll-x.discover-categories { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: max-content; gap: 8px; padding-bottom: 6px; }
.nearby-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.nearby-controls .btn { width: 100%; box-shadow: none; }
.nearby-controls [hidden] { display: none; }
.nearby-controls[hidden] { display: none; }
.appointments-list { margin-top: 24px; }
.favorites-list { display: grid; gap: 16px; margin-top: 24px; }
.favorites-view .card { box-shadow: none; }
.favorites-view .card-body { padding: 20px; }
.business-cover { position: relative; height: 152px; background: linear-gradient(120deg, #e6e0fa, #f1eefb 55%, #dcd5f4); }
.business-cover.has-image { height: 194px; }
.business-cover-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.business-toolbar { position: absolute; top: 0; left: 0; right: 0; justify-content: space-between; padding: calc(12px + var(--safe-t)) 16px 12px; }
.business-tool { background: var(--glass-thick); color: var(--ink); border: 1px solid var(--glass-edge); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 2px 8px rgba(26,19,48,.06); width: 44px; height: 44px; }
.business-identity { position: relative; padding: 0 20px; }
.business-avatar { display: inline-flex; padding: 5px; margin-top: -34px; border-radius: 50%; background: var(--bg); }
.business-name-row { flex-wrap: wrap; margin-top: 10px; }
.business-identity h1 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.8px; overflow-wrap: anywhere; }
.business-meta { flex-wrap: wrap; margin-top: 10px; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .business-tool { background: var(--surface); border-color: var(--border); backdrop-filter: none; -webkit-backdrop-filter: none; } }
/* Antes restaba 104px pensados para la barra de pestañas de abajo — pero
   esta vista siempre la oculta (setTabbar(null)), así que quedaba un hueco
   muerto debajo de la caja de escribir en vez de pegarla al fondo real. */
.chat-view { height: calc(100dvh - var(--safe-b)); min-height: 320px; display: flex; flex-direction: column; padding-bottom: 8px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 18px 0; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.chat-bubble { max-width: 88%; border-radius: 20px; padding: 12px 16px; overflow-wrap: anywhere; }
.chat-bubble p { white-space: pre-wrap; font-size: 14px; }
.chat-bubble time { display: block; font-size: 10px; opacity: .75; margin-top: 6px; }
.chat-bubble.mine { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.chat-bubble.theirs { align-self: flex-start; background: var(--surface); border: 1px solid var(--border-soft); border-bottom-left-radius: 6px; }
.chat-compose { display: flex; gap: 10px; align-items: end; }
.chat-compose .area { flex: 1; min-width: 0; min-height: 52px; max-height: 140px; resize: vertical; }
.chat-compose .btn { width: 48px; min-height: 48px; padding: 12px; flex: none; box-shadow: none; }
/* Ciria owns the visible viewport. Do not apply this to other routes: their
   document scroll and bottom navigation must keep working normally. */
html.ciria-open { overflow: hidden; overscroll-behavior: none; }
body.ciria-open { position: fixed; inset: 0; width: 100%; overflow: hidden; }
.ciria-view {
  position: fixed; top: var(--ciria-top, 0px); left: 0; right: 0;
  width: 100%; max-width: 480px; margin-inline: auto;
  height: var(--ciria-height, 100dvh); min-height: 0;
  overflow: hidden; background: var(--bg);
  padding-bottom: calc(8px + var(--safe-b));
}
.ciria-view.keyboard-open { padding-bottom: 8px; }
.ciria-view > header, .ciria-view > .chat-compose { flex: none; }
.ciria-view > .chat-messages { min-height: 0; overflow-anchor: none; }
.ciria-view > .chat-messages > * { flex-shrink: 0; }
.ciria-view .chat-compose { position: relative; z-index: 1; background: var(--bg); padding-top: 8px; }
.ciria-view #ai-text { font-size: 16px; resize: none; }
.ai-options { flex-wrap: wrap; align-self: flex-start; max-width: 88%; }
.ai-cards { align-self: stretch; }
.ai-cards .card { margin-bottom: 0; }
/* Cada mensaje del asesor va en fila con su avatar (como cualquier chat de
   verdad) — arriba, no centrado, para que no "flote" raro en burbujas de
   varias líneas. */
.ai-msg-row { align-items: flex-start; max-width: 100%; }
.ai-msg-row .chat-bubble { max-width: calc(88% - 34px); }
/* Indicador de "escribiendo" — antes era una burbuja con "…" estático,
   diminuta y sin pinta de estar cargando nada. Tres puntos que rebotan en
   cascada, patrón habitual de indicador de escritura. */
.ai-typing { display: flex; gap: 5px; align-items: center; padding: 14px 16px; min-width: 52px; }
.ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--inactive); animation: ai-typing-bounce 1.1s infinite ease-in-out; }
.ai-typing span:nth-child(2) { animation-delay: .15s; }
.ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ai-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ai-typing span { animation: none; opacity: .8; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.segmented {
  position: relative; isolation: isolate; display: flex;
  background: rgba(255,255,255,.64); border: 1px solid var(--glass-edge);
  border-radius: 24px; padding: 6px;
  box-shadow: inset 0 1px 0 #fff, 0 4px 16px rgba(31,22,56,.06);
}
.segmented-selection { width: calc((100% - 12px) / 2); border-radius: 18px; }
.segmented button {
  flex: 1; min-width: 0; min-height: 44px; border: none; background: none; padding: 10px 4px; border-radius: 18px;
  font-family: inherit; font-size: 13px; font-weight: 600; color: #635c77; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s var(--ease), transform .15s var(--ease);
}
.segmented button.active { color: var(--accent); }
.segmented button:active { transform: scale(.96); }

/* ── Filas ─────────────────────────────────────────────────────────── */

.row { display: flex; align-items: center; }
.meta-row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }
.meta-row .icon { width: 16px; height: 16px; }

.list-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-family: inherit;
  transition: background .15s var(--ease);
}
.list-row:active { background: var(--bg); }
.list-row + .list-row { border-top: 1px solid var(--border-soft); }
.list-row-icon {
  width: 38px; height: 38px; border-radius: 30%; background: var(--accent-light);
  color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none;
}
.list-row-icon .icon { width: 19px; height: 19px; }
.chev { color: var(--inactive); width: 18px; height: 18px; flex: none; }

/* ── Estado vacío / esqueleto ──────────────────────────────────────── */

.empty-state { text-align: center; padding: 48px 24px; }
.empty-state .circle {
  width: 80px; height: 80px; border-radius: 30%; background: var(--accent-light);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.empty-state .circle .icon { width: 34px; height: 34px; }
.empty-state h3 { margin-bottom: 6px; }
.empty-state p { color: var(--muted); margin: 0 0 20px; }

.skeleton {
  border-radius: 12px; background: rgba(26,19,48,.055);
  animation: shimmer 1.1s ease-in-out infinite alternate;
}
@keyframes shimmer { from { opacity: .45; } to { opacity: .85; } }

/* ── Toast / error inline ─────────────────────────────────────────── */

.error-text { color: var(--danger); font-size: 13px; padding: 8px 4px 0; }
.toast {
  position: fixed; left: 50%; bottom: calc(100px + var(--safe-b));
  transform: translateX(-50%); background: var(--accent-deep); color: #fff;
  padding: 13px 22px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 12px 28px rgba(0,0,0,.28);
  z-index: 100; max-width: 90%; text-align: center;
  animation: toast-in .3s var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── Reserva: sello de finalización y ráfaga de confeti ────────────── */

.booking-success {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(32px + var(--safe-t)) 24px calc(20px + var(--safe-b));
  background: radial-gradient(ellipse 75% 28% at 50% 12%, #e7e4f8 0%, transparent 100%);
}
.booking-success-intro { text-align: center; }
.booking-success-intro, .booking-receipt, .booking-success-actions {
  position: relative; z-index: 1;
}
.booking-confetti {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.booking-confetti-piece {
  position: absolute; opacity: 0; border-radius: 1px;
  background-image: linear-gradient(135deg, rgba(255,255,255,.28), transparent 65%);
}
.booking-success-intro h1 {
  font-size: clamp(25px, 6.7vw, 30px); line-height: 1.15;
  letter-spacing: -.035em; text-wrap: balance;
}
.booking-success-intro p { color: #635c77; margin: 12px 0 0; font-size: 14px; }
.booking-seal {
  width: 104px; height: 104px; margin: 0 auto 28px;
  position: relative; display: grid; place-items: center;
}
.booking-seal-disc {
  position: relative; width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center; color: #277653;
  background: linear-gradient(145deg, #fff 0%, #edf6f1 55%, #d5e9df 100%);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: inset 0 2px 2px #fff, inset 0 -2px 4px rgba(39,118,83,.08),
    0 12px 28px rgba(55,85,73,.12), 0 2px 5px rgba(55,85,73,.04);
}
.booking-seal-disc .icon { width: 38px; height: 38px; stroke-width: 1.5; }
.booking-seal-halo {
  position: absolute; inset: 0; border: 1px solid rgba(63,132,100,.25);
  border-radius: 50%; opacity: 0; pointer-events: none;
}
.booking-receipt {
  margin-top: 32px; padding: 24px; border-radius: 28px;
  background: linear-gradient(145deg, #fff, #fdfcfe);
  border: 1px solid #fff;
  box-shadow: 0 12px 36px rgba(31,22,56,.06), 0 1px 3px rgba(31,22,56,.04);
  overflow-wrap: anywhere;
}
.booking-receipt-label {
  display: flex; align-items: center; gap: 8px;
  color: #635c77; font-size: 12px; font-weight: 500;
}
.booking-receipt-label .icon { width: 17px; height: 17px; color: var(--accent); }
.booking-receipt-time {
  margin-top: 14px; font-size: 44px; line-height: 1.1;
  font-weight: 600; letter-spacing: -.055em; font-variant-numeric: tabular-nums;
}
.booking-receipt-date { margin-top: 6px; font-size: 14px; color: #635c77; }
.booking-receipt-business { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-soft); }
.booking-receipt-business .title { font-size: 15px; }
.booking-receipt-business .muted { margin-top: 4px; }
.booking-receipt-location {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; color: #635c77; font-size: 12px;
}
.booking-receipt-location .icon { width: 15px; height: 15px; }
.booking-success-actions { margin-top: 24px; text-align: center; }
.booking-success-actions p { margin: 0 auto 20px; max-width: 290px; line-height: 1.6; }
.booking-success-actions .btn-primary {
  background: linear-gradient(175deg, #6a5aed, var(--accent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 5px 14px rgba(92,79,230,.18);
}
.booking-home-link {
  min-height: 48px; display: inline-flex; align-items: center;
  margin-top: 6px; padding: 0 16px; border-radius: 14px;
  color: var(--accent); font-size: 13px; font-weight: 600;
}
.is-celebrating .booking-seal-disc { animation: booking-settle 280ms var(--ease) backwards; }
.is-celebrating .booking-seal-disc .icon { animation: booking-check 250ms var(--ease) 80ms backwards; }
/* Completion is a one-shot celebration. Its decorative layers stay behind
   the receipt and never delay or intercept the user's next action. */
.is-celebrating .booking-seal-halo { animation: booking-halo 600ms var(--ease) 80ms backwards; }
@keyframes booking-settle {
  from { opacity: 0; transform: translateY(6px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes booking-check {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to { clip-path: inset(0); opacity: 1; }
}
@keyframes booking-halo {
  from { opacity: .65; transform: scale(.94); }
  to { opacity: 0; transform: scale(1.32); }
}

/* ── Popup modal (hoja inferior) ──────────────────────────────────── */

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(17, 12, 32, .36);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 200; padding: 16px; animation: modal-fade .2s var(--ease);
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  width: 100%; max-width: 400px; background: var(--surface);
  border: 1px solid var(--glass-edge);
  border-radius: 30px; padding: 28px 24px calc(22px + var(--safe-b));
  max-height: calc(100dvh - 32px); overflow-y: auto;
  box-shadow: inset 0 1px 0 #fff, 0 20px 60px rgba(17,12,32,.2);
  animation: modal-up .25s var(--ease);
}
@keyframes modal-up { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.modal-card .muted { color: #635c77; }
.modal-card .btn + .btn { margin-top: 10px; }

/* Glass belongs to floating chrome. Keep content cards opaque, and never
   animate blur or add full-screen filters on the mobile scrolling path. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar, .segmented {
    background: rgba(255, 255, 255, .58);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
  }
  .modal-card {
    background: var(--glass-thick);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    backdrop-filter: blur(20px) saturate(135%);
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .tabbar, .segmented, .modal-card {
    background: var(--surface);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: #75708a;
  }
  .booking-receipt { border-color: #75708a; }
}
@media (prefers-reduced-motion: reduce) {
  .booking-confetti { display: none; }
  .is-celebrating .booking-seal-disc,
  .is-celebrating .booking-seal-disc .icon,
  .modal-card { animation: modal-fade 150ms ease; }
  .is-celebrating .booking-seal-halo { animation: none; }
  .btn:active, .back-btn:active, .tabbar a:active, .segmented button:active,
  .card[data-open-business]:active, .card[data-svc]:active,
  .card[data-emp]:active, .card[data-loc]:active, .card[data-appt]:active,
  .chip:active, .category-chip:active .circle, .card-action:active,
  .social-btn:active { transform: none; }
  .toast { animation: modal-fade 150ms ease; }
  .skeleton { animation: none; }
  .otp-box.shake { animation: none; }
}
.modal-icon {
  width: 64px; height: 64px; border-radius: 999px; margin: 0 auto;
  background: var(--accent-light); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.modal-icon .icon { width: 30px; height: 30px; }
.ios-step-num {
  width: 24px; height: 24px; border-radius: 999px; flex: none;
  background: var(--accent-light); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; margin-top: 1px;
}

/* ── Utilidades ────────────────────────────────────────────────────── */

.stack { display: flex; flex-direction: column; }
.gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; }
.gap-12 { gap: 12px; } .gap-14 { gap: 14px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-14 { margin-bottom: 14px; }
.scroll-x { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
/* Sin esto, alternar el atributo [hidden] por JS (radiusRow.hidden = ...)
   no ocultaba nada: display:flex de esta misma clase es una regla de
   autor y siempre gana a [hidden] del navegador, sea cual sea el orden o
   la especificidad — mismo bug ya visto y arreglado en .tabbar. */
.scroll-x[hidden] { display: none; }
.scroll-x::-webkit-scrollbar { display: none; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center { display: flex; align-items: center; justify-content: center; }
.grow { flex: 1; min-width: 0; }

/* ── Splash / onboarding ───────────────────────────────────────────── */

/* Antes fondo morado degradado a pantalla completa — única pantalla oscura
   de toda la app mientras el resto es claro (--bg lavanda suave). Ahora usa
   el mismo degradado claro que la bienvenida (.welcome), para que no dé un
   flash oscuro antes de entrar en una app que es clara en todo lo demás. */
.splash {
  position: fixed; inset: 0; background: #ffffff; z-index: 200;
  display: grid; place-items: center; overflow: hidden;
}
.splash .loader {
  width: 180px; height: 180px; display: grid; place-items: center;
  opacity: 0; transform: scale(.97);
  animation: splash-appear 250ms cubic-bezier(.22, 1, .36, 1) forwards;
}
.splash .logo {
  width: 100%; height: 100%; overflow: visible;
  animation: splash-finish 400ms cubic-bezier(.22, 1, .36, 1) 1250ms both;
}
.splash .stroke {
  fill: none; stroke: #2c2c2c; stroke-width: 14;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.splash .circle { stroke-dasharray: 1; stroke-dashoffset: 1; animation: splash-circle 950ms cubic-bezier(.65, 0, .25, 1) 100ms forwards; }
.splash .check { stroke-dasharray: 1; stroke-dashoffset: 1; animation: splash-check 620ms cubic-bezier(.65, 0, .2, 1) 650ms forwards; }
@keyframes splash-appear { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
@keyframes splash-circle { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes splash-check { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes splash-finish { 0% { transform: scale(1); } 50% { transform: scale(1.025); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .splash .loader { animation: none; opacity: 1; transform: none; }
  .splash .logo, .splash .circle, .splash .check { animation: none; }
  .splash .circle, .splash .check { stroke-dashoffset: 0; }
}

.welcome { min-height: 100svh; display: flex; flex-direction: column; padding: calc(20px + var(--safe-t)) 24px calc(24px + var(--safe-b)); background: linear-gradient(160deg, #fff, var(--bg) 70%); }
.welcome-top { display: flex; align-items: center; justify-content: space-between; }
.welcome-brand { font-size: 27px; font-weight: 750; letter-spacing: -1.4px; }
.welcome-brand span { color: var(--accent); }
.welcome-link { border: 0; background: none; color: var(--accent); font-size: 13px; font-weight: 600; padding: 12px 4px; cursor: pointer; min-height: 44px; }
.welcome-body { flex: 1; padding: 24px 0; }
.welcome-art { position: relative; width: 180px; margin: 6px auto 38px; padding: 12px; }
.welcome-tile { min-height: 138px; border: 1px solid #fff; border-radius: 32px; background: linear-gradient(145deg,#ede8ff,#faf9ff); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transform: rotate(-6deg); box-shadow: 0 12px 32px rgba(92,79,230,.09); }
.welcome-tile .icon { width: 42px; height: 42px; color: var(--accent); }
.welcome-tile span { font-size: 11px; font-weight: 600; }
.welcome-badge { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 44px; height: 44px; border: 4px solid var(--bg); background: var(--accent); color: white; border-radius: 50%; }
.welcome-eyebrow { font-size: 10px; letter-spacing: 1.4px; font-weight: 650; color: var(--accent); margin-bottom: 12px; }
.welcome h1 { font-size: clamp(30px, 9vw, 40px); line-height: 1.12; letter-spacing: -1.4px; font-weight: 700; }
.welcome-description { color: var(--muted); margin-top: 16px; max-width: 320px; }
.welcome-features { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 16px; }
.welcome-features li { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.welcome-features .icon { color: var(--accent); width: 20px; height: 20px; }
.welcome-actions { display: grid; gap: 6px; text-align: center; }
.welcome-actions p { font-size: 11px; color: var(--muted); }
@media (max-height: 700px) { .welcome-art { width: 140px; margin: 0 auto 22px; } .welcome-tile { min-height: 94px; } .welcome-tile span { display: none; } .welcome-body { padding: 16px 0; } }


@media (min-width: 481px) {
  body { background: #eae5f5; }
  #app { min-height: 100vh; box-shadow: 0 0 50px rgba(23, 15, 46, .1); }
}

/* ---- Cobro de la señal: hero animado, pago rápido y estados ---- */
.ck { position:relative; }
.ck-hero { position:relative; isolation:isolate; overflow:hidden; text-align:center; padding:12px 20px 26px; }
.ck-orbs { position:absolute; left:-20px; right:-20px; top:-40px; height:260px; z-index:-1; pointer-events:none; }
.ck-orbs span { position:absolute; left:10%; top:10px; width:180px; height:180px; border-radius:50%; filter:blur(36px); opacity:.5; background:radial-gradient(circle, #a99cff, transparent 70%); animation:ck-float 9s ease-in-out infinite; }
.ck-orbs span:nth-child(2) { left:55%; top:30px; background:radial-gradient(circle, #ffb4d6, transparent 70%); animation-duration:11s; animation-delay:-3s; }
.ck-orbs span:nth-child(3) { left:22%; top:90px; width:120px; height:120px; background:radial-gradient(circle, #7fe0c4, transparent 70%); animation-duration:13s; animation-delay:-6s; }
@keyframes ck-float { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(18px,-14px) scale(1.08); } }
.ck-lock { animation:ck-pop .6s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes ck-pop { from { transform:scale(.4); opacity:0; } to { transform:none; opacity:1; } }
.ck-kicker { margin:10px 0 4px; color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.ck-title { margin:0; font-size:26px; letter-spacing:-.05em; }
.ck-amount { margin-top:10px; font-size:44px; font-weight:700; letter-spacing:-.05em; line-height:1.1; font-variant-numeric:tabular-nums; background:linear-gradient(120deg, var(--ink) 0%, var(--accent) 60%, #d64fa0 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ck-biz { display:block; margin-top:4px; color:var(--muted); font-size:14px; }
.ck-in { opacity:0; transform:translateY(12px); animation:ck-in .55s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--d, 0) * 80ms + 120ms); }
@keyframes ck-in { to { opacity:1; transform:none; } }
.ck-card { position:relative; overflow:hidden; }
.ck-express { margin-top:16px; }
.ck-divider { display:flex; align-items:center; gap:10px; margin:16px 0 4px; color:var(--muted); font-size:12px; }
.ck-divider::before, .ck-divider::after { content:""; flex:1; height:1px; background:var(--border-soft); }
.ck-form { margin-top:4px; transition:opacity .25s, filter .25s; }
.is-busy .ck-field, .is-busy .ck-express { opacity:.45; pointer-events:none; filter:saturate(.6); }
.ck-cta { position:relative; overflow:hidden; transition:transform .15s ease, box-shadow .25s ease; }
.ck-cta:not(:disabled):active { transform:scale(.97); }
.ck-cta:not(:disabled):hover { box-shadow:0 10px 26px rgba(92,79,230,.32); }
.ck-cta:disabled { opacity:.75; }
.ck-busy, .ck-done { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; border-radius:inherit; }
.ck-busy[hidden], .ck-done[hidden] { display:none; }
.ck-busy { background:color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter:blur(3px); }
.ck-busy p, .ck-done p { margin:0; font-size:14px; font-weight:600; }
.ck-ring { width:56px; height:56px; }
.ck-ring svg { width:100%; height:100%; animation:ck-spin 1.1s linear infinite; }
.ck-ring circle { fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round; stroke-dasharray:90 200; }
@keyframes ck-spin { to { transform:rotate(360deg); } }
.ck-done { z-index:3; background:var(--surface); }
.ck-done svg { width:84px; height:84px; }
.ck-done-ring { fill:none; stroke:var(--accent); stroke-width:3; stroke-dasharray:180; stroke-dashoffset:180; }
.ck-done-tick { fill:none; stroke:#2fa57f; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:50; stroke-dashoffset:50; }
.is-done .ck-done-ring { animation:ck-draw .6s ease-out forwards; }
.is-done .ck-done-tick { animation:ck-draw .45s .45s ease-out forwards; }
@keyframes ck-draw { to { stroke-dashoffset:0; } }
.ck-done p { font-size:17px; animation:ck-in .5s .7s both; }
.ck-spark { position:absolute; left:0; top:0; width:8px; height:8px; border-radius:2px; pointer-events:none; z-index:4; }
@media (prefers-reduced-motion: reduce) {
  .ck *, .ck-orbs span { animation:none !important; }
  .ck-in { opacity:1; transform:none; }
  .ck-done-ring, .ck-done-tick { stroke-dashoffset:0; }
}

/* ---- Servicios: buscador, agrupación por categoría y «Añadir otro servicio» ---- */
.svc-search { margin:4px 0 6px; }
.svc-group { display:flex; flex-direction:column; gap:10px; }
.svc-group-title { margin:14px 2px 2px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.svc-group-title:first-child { margin-top:0; }
.svc-group[hidden], [data-search][hidden], #svcNoResults[hidden], #addSvcNone[hidden] { display:none !important; }
.svc-chips { display:flex; flex-wrap:wrap; gap:8px; }

/* ---- Tarjeta con nuestro diseño (campo seguro de Stripe dentro de nuestro borde) ---- */
.ck-label { display:block; margin:14px 2px 8px; font-size:13px; font-weight:600; color:var(--ink); }
.ck-field { display:flex; align-items:center; gap:12px; min-height:56px; padding:0 16px; background:var(--surface); border:1px solid var(--border-soft); border-radius:16px; transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
.ck-field:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-light); }
.ck-field.has-error { border-color:#d64fa0; }
.ck-field-icon { display:grid; place-items:center; color:var(--muted); flex:none; }
.ck-field-icon .icon { width:19px; height:19px; }
.ck-mount { flex:1; min-width:0; padding:15px 0; }
.ck-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ck-span2 { grid-column:1 / -1; }
.ck-field-err { min-height:18px; margin:8px 4px 0; font-size:13px; color:#c2306f; }
.ck-leave-note { margin:12px 4px 0; text-align:center; font-size:12.5px; color:var(--muted); }
/* Los chips llevan display propio (.chip): sin esto, [hidden] no los oculta y el buscador no filtra. */
[data-extra-svc][hidden] { display:none !important; }
.svc-group h3.svc-group-title { margin:12px 2px 6px; }
.svc-group .svc-chips { margin:0; }

/* Extras con cantidad: contador − n + por servicio */
.ck-stepper { flex:none; }
.ck-step-btn { width:36px; height:36px; border-radius:50%; border:1px solid var(--border-soft); background:var(--surface); color:var(--ink); font-size:18px; line-height:1; cursor:pointer; }
.ck-step-btn:disabled { opacity:.35; cursor:default; }
.ck-step-n { min-width:24px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }

/* ── Cartera de tarjetas (#/payment-cards y #/payment-cards/add) ──
   Las medidas de la cara de la tarjeta van en --u (1 % del ancho), que fija
   app.js: así escala igual en 320 px que en una tablet, sin container queries
   (WKWebView antiguos). Colores en HSL a partir del matiz del negocio. */
.wl-view { padding-top: 8px; max-width: 520px; margin: 0 auto; }
.wl-skeleton { width: 100%; aspect-ratio: 85.6 / 53.98; border-radius: 18px; }
.wl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.wl-sub { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.wl-pill { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 8px 13px 8px 10px; border: 0; border-radius: 999px;
  background: var(--accent-light); color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wl-pill .icon { width: 15px; height: 15px; }
.wl-pill[hidden] { display: none; }
.wl-stage { position: relative; margin: 0 -20px; padding: 0 20px; overflow: hidden; touch-action: pan-x; user-select: none; -webkit-user-select: none; }
.wl-stage.is-open { touch-action: pan-y; }
.wl-pocket { position: absolute; left: 0; right: 0; bottom: 0; z-index: 40; pointer-events: none;
  background: linear-gradient(180deg, rgba(245,242,251,0) 0%, var(--bg) 62%); }

.wl-card { position: absolute; left: 20px; top: 0; width: calc(100% - 40px); aspect-ratio: 85.6 / 53.98; padding: 0; margin: 0; border: 0; background: none;
  color: inherit; text-align: left; cursor: pointer; transform-origin: 50% 50%; will-change: transform; outline: none; font: inherit; -webkit-tap-highlight-color: transparent;
  --card-a: #4a505c; --card-b: #16181d; --card-ink: #fff; }
.wl-card-static { position: relative; left: 0; width: 100%; cursor: default; }
.wl-shadow { position: absolute; inset: 0; border-radius: calc(var(--u) * 5); pointer-events: none; box-shadow: 0 1px 1.5px rgba(31,22,61,.12), 0 8px 18px -8px rgba(31,22,61,.28); }
.wl-shadow.deep { box-shadow: 0 24px 44px -16px rgba(31,22,61,.42), 0 8px 16px -8px rgba(31,22,61,.24); opacity: 0; }
.wl-face { position: absolute; inset: 0; border-radius: calc(var(--u) * 5); overflow: hidden; color: var(--card-ink); transform-origin: 50% 60%;
  background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%), linear-gradient(135deg, var(--card-a), var(--card-b)); }
.wl-face::before { content: ""; position: absolute; right: -18%; bottom: -46%; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 68%); pointer-events: none; }
.wl-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.28); }
.wl-card:focus-visible .wl-face { outline: 3px solid var(--accent); outline-offset: 3px; }
.wl-sheen { position: absolute; inset: 0; background: linear-gradient(165deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,0) 72%, rgba(0,0,0,.12) 100%); pointer-events: none; }
.wl-light { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,.12) 16%, rgba(255,255,255,0) 34%); mix-blend-mode: soft-light; }
.wl-org { position: absolute; left: calc(var(--u) * 7); right: calc(var(--u) * 7); top: calc(var(--u) * 6.4); display: flex; align-items: center; gap: calc(var(--u) * 2.4);
  font-size: calc(var(--u) * 5.2); font-weight: 750; letter-spacing: -.02em; line-height: 1.1; min-width: 0; }
.wl-org b { font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-logo { flex: none; width: calc(var(--u) * 8.6); height: calc(var(--u) * 8.6); border-radius: calc(var(--u) * 2.4); overflow: hidden; display: grid; place-items: center;
  background: rgba(255,255,255,.75); color: var(--card-ink, var(--accent)); font-weight: 800; font-size: calc(var(--u) * 4.2); box-shadow: 0 0 0 1px rgba(0,0,0,.05); }
.wl-logo img { width: 100%; height: 100%; object-fit: cover; }
.wl-kind { position: absolute; left: calc(var(--u) * 7); top: calc(var(--u) * 17.4); max-width: calc(var(--u) * 52); font-size: calc(var(--u) * 3.3); font-weight: 600; opacity: .72; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-tag { position: absolute; right: calc(var(--u) * 6.4); top: calc(var(--u) * 15.9); display: inline-flex; align-items: center; gap: calc(var(--u) * 1);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 2.6); border-radius: 999px; font-size: calc(var(--u) * 2.9); font-weight: 800; line-height: 1; white-space: nowrap;
  background: var(--card-ink); color: var(--card-b); }
.wl-tag .icon { width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); stroke-width: 3; }
.wl-tag.is-expired { background: #f6d4d6; color: #7d1f27; }
.wl-chip { position: absolute; left: calc(var(--u) * 7); top: calc(var(--u) * 25); width: calc(var(--u) * 11.4); filter: drop-shadow(0 calc(var(--u) * .15) calc(var(--u) * .2) rgba(0,0,0,.2)); }
.wl-num { position: absolute; right: calc(var(--u) * 6.6); top: calc(var(--u) * 26.4); display: flex; align-items: center; gap: calc(var(--u) * 2.2);
  font-size: calc(var(--u) * 7); font-weight: 700; letter-spacing: .04em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wl-dots { display: flex; gap: calc(var(--u) * 1.1); }
.wl-dots i { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); border-radius: 50%; background: currentColor; opacity: .45; }
.wl-email { font-size: calc(var(--u) * 4); font-weight: 600; max-width: calc(var(--u) * 60); overflow: hidden; text-overflow: ellipsis; }
.wl-holder { position: absolute; left: calc(var(--u) * 7); bottom: calc(var(--u) * 7); max-width: calc(var(--u) * 41); font-size: calc(var(--u) * 3.5); font-weight: 700; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .03em; }
.wl-valid { position: absolute; left: calc(var(--u) * 50); bottom: calc(var(--u) * 6.6); display: flex; flex-direction: column; gap: calc(var(--u) * .8); line-height: 1; }
.wl-valid small { font-size: calc(var(--u) * 2.3); font-weight: 500; opacity: .75; }
.wl-valid b { font-size: calc(var(--u) * 3.5); font-weight: 700; font-variant-numeric: tabular-nums; }
.wl-brand { position: absolute; right: calc(var(--u) * 6.6); bottom: calc(var(--u) * 6); display: flex; align-items: center; justify-content: flex-end; height: calc(var(--u) * 7); }
.wl-mark { font-size: calc(var(--u) * 4.6); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.wl-mark.m-visa { font-style: italic; font-size: calc(var(--u) * 5.6); letter-spacing: .01em; }
.wl-mark.m-mastercard, .wl-mark.m-maestro { font-size: calc(var(--u) * 4.2); letter-spacing: -.03em; }
.wl-mark.m-amex { font-size: calc(var(--u) * 3.6); padding: calc(var(--u) * .8) calc(var(--u) * 1.4); border: calc(var(--u) * .45) solid currentColor; border-radius: calc(var(--u) * 1); }
.wl-mark.m-link { text-transform: lowercase; }
/* Arriba: logo del banco (o la red si no se sabe). Se escala por altura, sin deformar. */
.wl-top { position: absolute; left: calc(var(--u) * 7); top: calc(var(--u) * 6.4); height: calc(var(--u) * 7.4); max-width: calc(var(--u) * 52);
  display: flex; align-items: center; }
.wl-bank-logo { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); }
.wl-bank-logo.is-color { filter: none; }
.wl-card.is-ink-dark .wl-bank-logo { filter: brightness(0); opacity: .9; }
.wl-bank-word { font-size: calc(var(--u) * 6); font-weight: 800; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.wl-top .wl-net.is-top { height: calc(var(--u) * 6.4); }
.wl-top .wl-net.is-top.n-color { height: calc(var(--u) * 8.4); }
.wl-bank-lockup { display: flex; align-items: center; gap: calc(var(--u) * 2.2); height: 100%; }
.wl-bank-lockup .wl-bank-logo { height: 86%; }
.wl-bank-lockup .wl-bank-word { font-size: calc(var(--u) * 5.4); }
.wl-brand .wl-net.n-mono { height: 80%; }
.wl-card.is-ink-dark .wl-net.n-mono { filter: brightness(0); opacity: .85; }
.wl-net { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
.wl-net.n-mono { filter: brightness(0) invert(1); }
.wl-net.n-plate { background: #fff; border-radius: calc(var(--u) * 1); padding: calc(var(--u) * .6) calc(var(--u) * 1); box-sizing: border-box; }
.wl-brand .wl-net { max-width: calc(var(--u) * 22); }
.wl-where { position: absolute; left: calc(var(--u) * 7); right: calc(var(--u) * 7); bottom: calc(var(--u) * 15.2); display: flex; align-items: center; gap: calc(var(--u) * 1.6);
  font-size: calc(var(--u) * 2.9); font-weight: 600; line-height: 1.1; min-width: 0; opacity: .92; }
.wl-where > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-where b { font-weight: 800; }
.wl-where-logo { flex: none; width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); border-radius: calc(var(--u) * 1.3); overflow: hidden; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: #1a1330; font-weight: 800; font-size: calc(var(--u) * 2.6); }
.wl-where-logo img { width: 100%; height: 100%; object-fit: cover; }
.wl-card.is-expired .wl-face { filter: grayscale(.85); opacity: .86; }
.wl-card.is-pending .wl-face { filter: grayscale(.6); opacity: .75; }

.wl-panel { position: absolute; left: 20px; right: 20px; z-index: 50; will-change: transform, opacity; }
.wl-bal-label { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.wl-bal { font-size: 34px; font-weight: 750; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 2px; }
.wl-bal-note { font-size: 13.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.wl-actions { display: grid; gap: 6px; margin-top: 16px; }
.wl-actions .btn[hidden] { display: none; }
.wl-del { width: 100%; min-height: 46px; border: 0; border-radius: 15px; background: transparent; color: var(--danger); font: inherit; font-size: 14.5px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s var(--ease); -webkit-tap-highlight-color: transparent; }
.wl-del.confirm { background: var(--danger-tint); }
.wl-sec { font-size: 13px; font-weight: 700; color: var(--muted); margin: 20px 2px 8px; text-transform: uppercase; letter-spacing: .06em; }
.wl-list { list-style: none; margin: 0; padding: 4px 0; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 18px; }
.wl-tx { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; position: relative; }
.wl-tx + .wl-tx::before { content: ""; position: absolute; left: 62px; right: 14px; top: 0; border-top: 1px solid var(--border-soft); }
.wl-tx-ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-light); color: var(--accent); }
.wl-tx-ico.in { background: var(--success-tint); color: var(--success); }
.wl-tx-ico .icon { width: 18px; height: 18px; }
.wl-tx-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wl-tx-main b { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-tx-main small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-tx-a { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-tx-a.in { color: var(--success); }
.wl-tx-empty { padding: 14px; font-size: 13.5px; color: var(--muted); }
.wl-facts { padding: 2px 0; }
.wl-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 14px; font-size: 14px; }
.wl-facts div + div { border-top: 1px solid var(--border-soft); }
.wl-facts dt { color: var(--muted); }
.wl-facts dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.wl-st { opacity: 0; transform: translateY(10px); }
.wl-panel.on .wl-st { opacity: 1; transform: none; transition: opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 55ms + 110ms); }
.wl-hint { margin: 14px 2px 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.wl-note, .wl-secure { display: flex; gap: 8px; align-items: flex-start; margin: 14px 2px 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.wl-note .icon, .wl-secure .icon { flex: none; width: 15px; height: 15px; margin-top: 1px; }

.wl-empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 36px 8px 8px; }
.wl-ciria { width: 104px; height: 104px; animation: wl-bob 3.2s ease-in-out infinite; }
@keyframes wl-bob { 50% { transform: translateY(-5px) rotate(-2deg); } }
.wl-empty h3 { margin: 8px 0 0; font-size: 19px; letter-spacing: -.02em; }
.wl-empty p { margin: 0 0 12px; color: var(--muted); font-size: 14.5px; line-height: 1.5; max-width: 32ch; }
.wl-empty-btn { width: auto; padding: 0 24px; text-decoration: none; }

/* Añadir tarjeta */
.wl-add-preview { width: min(100%, 360px); margin: 4px auto 22px; }
.wl-add-preview .wl-card { transition: filter .3s var(--ease); }
.wl-add-step { margin-top: 18px; }
.wl-step-title { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 17px; letter-spacing: -.02em; }
.wl-step-title span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 700; }
.wl-step-sub { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.wl-orgs { display: grid; gap: 8px; }
.wl-org-opt, .ck-saved-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: 16px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.wl-org-opt span:not(.wl-logo) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-org-opt[aria-checked="true"], .ck-saved-opt[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-light); }
.wl-logo-lg { width: 40px; height: 40px; border-radius: 12px; font-size: 17px; background: var(--accent-light); color: var(--accent); }
.wl-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); position: relative; }
[aria-checked="true"] > .wl-radio { border-color: var(--accent); }
[aria-checked="true"] > .wl-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.wl-add-step.is-locked { opacity: .45; pointer-events: none; filter: saturate(.5); }
.wl-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); padding: 15px 0; }
.wl-input::placeholder { color: #8a819f; }
.wl-default { margin-top: 14px; }
.wl-consent { margin: 4px 2px 14px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* Pantalla de pago: tarjetas guardadas del negocio */
.ck-saved { margin-top: 4px; }
.ck-saved-list { display: grid; gap: 8px; margin-bottom: 14px; }
.ck-saved-mark { flex: none; width: 52px; height: 34px; border-radius: 7px; display: grid; place-items: center; color: var(--card-ink, #fff); --u: 3.4px; padding: 0 7px;
  background: linear-gradient(135deg, var(--card-a, #4a505c), var(--card-b, #16181d)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.ck-saved-mark .wl-net { height: 15px; max-width: 38px; }
.ck-saved-mark .wl-mark { font-size: 12px; }
.ck-saved-mark .wl-mark.m-visa { font-size: 14px; }
.ck-saved-mark .wl-mark.m-mastercard, .ck-saved-mark .wl-mark.m-maestro { font-size: 9px; }
.ck-saved-mark .wl-mark.m-amex { font-size: 10px; border-width: 1.5px; padding: 1px 3px; border-radius: 3px; }
.ck-saved-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ck-saved-txt b { font-size: 15px; letter-spacing: .03em; }
.ck-saved-txt small { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.ck-other { display: block; margin: 10px auto 0; padding: 10px 14px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer; }
.ck-saved:not([hidden]) ~ .ck-divider, .ck-saved:not([hidden]) ~ .ck-express, .ck-collapsed { display: none !important; }
.is-busy .ck-saved { opacity: .45; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .wl-st { opacity: 1; transform: none; }
  .wl-panel.on .wl-st { transition: none; }
  .wl-light { display: none; }
  .wl-ciria { animation: none; }
}

/* Banco de la tarjeta: botón del panel y selector */
.wl-bankbox { margin-top: 14px; }
.wl-bank-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: 16px;
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.wl-bank-btn[hidden] { display: none; }
.wl-bank-btn > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wl-bank-btn small { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.wl-bank-btn b { font-size: 15px; }
.wl-bank-btn em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--accent); }
.wl-bank-btn[aria-expanded="true"] em { opacity: .5; }
.wl-bank-sw { flex: none; width: 52px; height: 34px; border-radius: 7px; display: grid; place-items: center; padding: 0 7px; color: var(--card-ink);
  background: linear-gradient(135deg, var(--card-a), var(--card-b)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); overflow: hidden; }
.wl-bank-sw .icon { width: 18px; height: 18px; }
.wl-sw-logo { max-height: 16px; max-width: 40px; width: auto; filter: brightness(0) invert(1); }
.wl-sw-logo.is-color { filter: none; max-height: 22px; }
.wl-bank-sw.is-ink-dark .wl-sw-logo { filter: brightness(0) invert(13%); }
.wl-sw-word { font-size: 9.5px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wl-banks { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.wl-bank-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 1px solid var(--border-soft); border-radius: 14px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; text-align: center; cursor: pointer; min-width: 0; }
.wl-bank-opt > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-bank-opt[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.wl-bank-opt:disabled { opacity: .6; }
.wl-bank-opt .wl-bank-sw { width: 72px; height: 45px; }
.wl-bank-opt .wl-sw-logo { max-height: 19px; max-width: 54px; }
.wl-bank-opt .wl-sw-logo.is-color { max-height: 28px; }
.wl-bank-opt.is-none .wl-sw-word { font-size: 16px; }
.wl-step-mini { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 2px; font-size: 15px; letter-spacing: -.01em; }
.wl-step-mini span { font-size: 12.5px; font-weight: 500; color: var(--muted); }

/* Elegir banco: aviso bajo el montón, hoja inferior y paso 3 de «Añadir» */
.wl-bankchip { display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0 0; padding: 11px 14px; border: 0; border-radius: 18px;
  background: var(--accent-light); color: var(--ink); font: inherit; text-align: left; cursor: pointer; animation: wl-chip-in .45s cubic-bezier(.2,.8,.2,1); }
.wl-bankchip[hidden] { display: none; }
.wl-bankchip:active { transform: scale(.985); }
.wl-bankchip-sw { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface); color: var(--accent); }
.wl-bankchip-sw .icon { width: 20px; height: 20px; }
.wl-bankchip > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wl-bankchip b { font-size: 15px; }
.wl-bankchip small { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.wl-bankchip em { flex: none; font-style: normal; font-weight: 700; font-size: 14px; color: #fff; background: var(--accent); padding: 8px 14px; border-radius: 999px; }
@keyframes wl-chip-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wl-sheet { max-width: 460px; padding-top: 22px; }
.wl-sheet-head { display: flex; gap: 14px; align-items: flex-start; }
.wl-sheet-head .wl-bank-sw { width: 64px; height: 41px; margin-top: 2px; }
.wl-sheet-head .title { font-size: 19px; line-height: 1.25; }
.wl-sheet-head .muted { margin-top: 4px; }
.wl-sw-net { max-height: 16px; max-width: 44px; width: auto; }
.wl-sheet .wl-banks { max-height: min(52vh, 420px); overflow-y: auto; padding: 4px 2px 6px; margin-top: 14px; }
.wl-face.is-leaving { z-index: 0; }
.wl-step-bank { margin-top: 22px; }
.wl-bank-missing { display: flex; gap: 8px; align-items: flex-start; margin: 10px 2px 0; font-size: 13px; line-height: 1.4; color: var(--accent); font-weight: 600; }
.wl-bank-missing[hidden] { display: none; }
.wl-bank-missing .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }
@media (prefers-reduced-motion: reduce) { .wl-bankchip { animation: none; } }
@media (max-width: 359px) { .wl-sheet-head .wl-bank-sw { display: none; } .wl-sheet-head .title { font-size: 18px; } .wl-bankchip-sw { display: none; } }