/* 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);
}

* { 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; }

.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; }
.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); }
.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); }
.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: linear-gradient(160deg, #fff, var(--bg) 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); z-index: 200;
}
.splash .mark {
  width: 80px; height: 80px; border-radius: 26px; background: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
  box-shadow: 0 1px 2px var(--shadow), 0 20px 40px var(--shadow);
}
.splash .mark img { width: 50px; height: 50px; }
.splash .title { letter-spacing: -0.4px; }

.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); }
}