/* QSalud Patient App Base Styles */
/* Prefix qs- to avoid overriding existing site styles when embedded via shortcode */

/* ─────────────────────────────────────────────────────────────────────────
   A11y · Skip link — invisible hasta recibir foco con TAB. Permite a
   usuarios de teclado y lectores de pantalla saltar topbar+tabbar+sheet.
   ───────────────────────────────────────────────────────────────────── */
.qs-skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 9999;
  padding: 12px 18px;
  background: #0A1F33;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 14px;
  border-radius: 12px;
  text-decoration: none;
  /* Off-screen por defecto sin display:none (preserva accesibilidad). */
  transform: translateY(-200%);
  transition: transform .15s ease;
}
.qs-skip-link:focus,
.qs-skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #FBBF24; /* highly visible focus indicator */
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   A11y · Focus-visible global — restituye un anillo de foco para usuarios
   de teclado que CSS-reset de tema o `outline:0` puedan haber pisado.
   Sólo aparece con keyboard nav, no con click (gracias a :focus-visible).
   ───────────────────────────────────────────────────────────────────── */
.qs-app-wrapper :focus-visible {
  outline: 3px solid #2e5c90;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ─────────────────────────────────────────────────────────────────────────
   A11y · Visually-hidden (screen-reader only). Lo usamos para labels que
   no queremos mostrar visualmente pero que SÍ necesita anunciar el SR.
   Patrón estándar (Bootstrap, GOV.UK, Tailwind sr-only).
   ───────────────────────────────────────────────────────────────────── */
.qs-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   A11y · Reduced motion — usuarios con vestibular disorders, motion sickness
   o que han activado "Reducir movimiento" en iOS/Android. WCAG 2.3.3.
   Desactivamos transiciones, animaciones de spin/pulse, transforms.
   ───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .qs-app-wrapper *,
  .qs-app-wrapper *::before,
  .qs-app-wrapper *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Caso especial: el spinner queda visible pero estático (mismo color que
     hace de "loading indicator" aunque no rote). */
  .qs-app-wrapper .qs-spin {
    animation: none !important;
  }
}

.qs-app-wrapper {
  /* ── Brand · rediseño V2 · #2e5c90 sustituye al Wave Teal ───────── */
  --qs-brand:        #2e5c90;
  --qs-brand-2:      #1c3d66;
  --qs-brand-soft:   #dce6f1;
  --qs-ink:          #0A1F33;
  --qs-ink-2:        #1B2D40;
  --qs-blue:         #1455D8;   /* CTA secundaria / enlaces */

  /* ── Surfaces ───────────────────────────────────────────────────── */
  --qs-bg:           #F6F4EF;
  --qs-surface:      #FFFFFF;
  --qs-surface-2:    #FAFAF7;
  --qs-line:         #ECE9E2;
  --qs-line-2:       #E2DED4;

  /* ── Text · WCAG 2.2 AA · ratios verificados sobre #FFFFFF ──────── */
  --qs-text:         #0A1F33;   /* 16.1:1 — body */
  --qs-muted:        #5A6573;   /* 5.27:1 — subtítulos AA OK */
  /* qs-text-3 ANTES era #8A93A0 (3.05:1) — bajaba de AA. Subido a
     #585F6B para llegar a 4.6:1 manteniendo el tono frío "neutral 3". */
  --qs-text-3:       #585F6B;   /* 4.6:1 — texto secundario AA OK */

  /* ── Status (marca) · usados para fondos/iconos, NO para texto pequeño
     sobre fondos pastel. Para texto en badges usar las variantes -text. */
  --qs-coral:        #F4564B;
  --qs-coral-soft:   #FFE4E1;
  --qs-amber:        #F4A523;
  --qs-mint:         #00B894;
  --qs-violet:       #7C5CFC;

  /* ── Status · variantes de TEXTO con contraste AA (≥4.5:1 sobre
     soft-bg rgba(*,.12-.14)). Las usamos en badges de estado y
     etiquetas de status_label en payments/receipts/etc. ──────────── */
  --qs-coral-text:   #B91C3A;   /* 5.6:1 sobre rgba(225,29,72,.12) */
  --qs-amber-text:   #92400E;   /* 5.5:1 sobre rgba(245,158,11,.14) */
  --qs-mint-text:    #047857;   /* 5.2:1 sobre rgba(16,185,129,.12) */
  --qs-violet-text:  #5B21B6;   /* 8.3:1 sobre rgba(124,58,237,.12) */

  /* ── Aliases legacy (back-compat con selectores existentes) ────── */
  --qs-success:      var(--qs-mint);
  --qs-warning:      var(--qs-amber);
  --qs-danger:       var(--qs-coral);

  /* ── Typography ─────────────────────────────────────────────────── */
  --qs-font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --qs-font-display: 'Instrument Serif', 'Times New Roman', serif;

  /* ── Shadows ────────────────────────────────────────────────────── */
  --qs-shadow:       0 4px 14px rgba(10,31,51,.06), 0 2px 4px rgba(10,31,51,.04);
  --qs-shadow2:      0 18px 40px -12px rgba(10,31,51,.18);
  --qs-shadow-glow:  0 12px 32px -8px rgba(46,92,144,.45);

  /* ── Radii (mantenidos para back-compat con CSS existente) ─────── */
  --qs-r14: 14px;
  --qs-r18: 16px;
  --qs-r22: 22px;
  --qs-r26: 28px;
  --qs-r30: 36px;

  /* ── Motion ─────────────────────────────────────────────────────── */
  --qs-t: 200ms cubic-bezier(.22, 1, .36, 1);

  font-family: var(--qs-font-body);
  color: var(--qs-text);
  background: var(--qs-bg);
  min-height: auto;
  /* when embedded */
  position: relative;
  overflow-x: hidden; overflow-y: visible;
  border-radius: var(--qs-r22);
}

.qs-app-wrapper * {
  box-sizing: border-box;
}

/* Sensación de app nativa: scroll funcional pero sin barra visible.
   Aplicamos a TODOS los descendientes del wrapper + a html/body cuando
   la SPA está montada (lo detectamos por la presencia de .qs-app-wrapper).
   La barra sigue existiendo a nivel de scroll pero no se renderiza visualmente. */
.qs-app-wrapper,
.qs-app-wrapper * {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE / Edge legacy */
}
.qs-app-wrapper::-webkit-scrollbar,
.qs-app-wrapper *::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; }

html:has(.qs-app-wrapper),
body:has(.qs-app-wrapper) { scrollbar-width: none; -ms-overflow-style: none; }
html:has(.qs-app-wrapper)::-webkit-scrollbar,
body:has(.qs-app-wrapper)::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; }

.qs-container {
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 14px 90px 14px;
}

/* Topbar */
.qs-topbar {
  position: sticky;
  /* A11y/PWA · respeta el safe-area-inset-top del iPhone con notch / Dynamic
     Island. Sin esto, el topbar queda bajo el reloj y la cámara. */
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  margin: -14px -14px 14px -14px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 12px 14px;
  background: rgba(246, 244, 239, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--qs-line);
}

.qs-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.qs-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 950;
}

.qs-logo {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--qs-brand), var(--qs-brand-2));
  display: grid;
  place-items: center;
  color: white;
  font-weight: 950;
  box-shadow: var(--qs-shadow);
}

.qs-brandmeta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}

.qs-brandmeta b {
  font-size: 14px;
}

.qs-brandmeta span {
  font-size: 12px;
  color: var(--qs-muted);
  font-weight: 850;
}

.qs-badge {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--qs-brand-soft);
  color: var(--qs-brand-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qs-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--qs-mint);
  display: inline-block;
}

.qs-dot.offline {
  background: #9ca3af;
}

.qs-h1 {
  font-family: var(--qs-font-display);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 10px 0 4px;
  font-weight: 400;
  color: var(--qs-ink);
}

.qs-h1 em { font-style: italic; color: var(--qs-brand); }

.qs-sub {
  font-size: 13.5px;
  color: var(--qs-muted);
  margin: 0;
  line-height: 1.45;
}

/* Buttons */
.qs-btn {
  border: 0;
  border-radius: 999px;
  padding: 13px 18px;
  font-family: var(--qs-font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: transform var(--qs-t), box-shadow var(--qs-t);
}

.qs-btn:active {
  transform: scale(.98);
}

.qs-btn-primary {
  background: var(--qs-ink);
  color: white;
  box-shadow: var(--qs-shadow);
}

.qs-btn-primary:hover { box-shadow: var(--qs-shadow2); }

.qs-btn-brand {
  background: var(--qs-brand);
  color: white;
  box-shadow: var(--qs-shadow-glow);
}

.qs-btn-ghost {
  background: rgba(255, 255, 255, .84);
  border: 1px solid var(--qs-line-2);
  color: var(--qs-ink);
}

.qs-btn-block {
  width: 100%;
}

.qs-iconbtn {
  /* A11y · Touch target 44×44 (Apple HIG / Material). El icono interno
     sigue siendo visualmente compacto, pero el área de tap incluye padding. */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--qs-ink);
  position: relative;
  transition: background var(--qs-t), transform var(--qs-t);
}

.qs-iconbtn:hover { background: var(--qs-surface-2); }
.qs-iconbtn:active { transform: scale(.96); }
.qs-iconbtn svg, .qs-iconbtn i { width: 18px; height: 18px; }
.qs-iconbtn.has-dot::after {
  content: ''; position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--qs-coral); border: 2px solid var(--qs-bg);
}

/* Helpers */
.qs-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.qs-row-between {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

[data-hidden="true"] {
  display: none !important;
}

/* Inputs and Forms */
.qs-input {
  width: 100%;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--qs-line);
  font-size: 14px;
  outline: none;
  transition: border-color var(--qs-t);
}

.qs-input:focus {
  border-color: var(--qs-brand);
}

.qs-label {
  display: block;
  font-size: 12px;
  color: var(--qs-muted);
  font-weight: 950;
  margin: 10px 6px 8px;
}

/* Tabbar — patrón V2 fiel (iteración 1).
   Bar al 100% del ancho del frame, FAB URGENCIAS 112 elevado en el centro.
   Tabs: Inicio · Citas · [FAB 112 coral] · IA · Salud. Activo en azul. */
.qs-tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 80;
  width: 100%;
  max-width: 560px;
  padding: 10px 8px calc(28px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .86);
  border-top: 1px solid var(--qs-line);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}

.qs-tabs {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0;
}

.qs-tab {
  flex: 1;
  /* A11y · target táctil mínimo 44px alto cumplido sumando padding + icon
     + label (22+4+12 = 38) → subimos padding vertical para alcanzar 48. */
  padding: 8px 0 6px;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  /* A11y · 700 + 11px sobre fondo claro = "large bold" para criterios WCAG. */
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--qs-text-3);   /* #585F6B = 4.6:1 sobre blanco (AA OK) */
  text-decoration: none;
  transition: color var(--qs-t);
  background: transparent;
}

.qs-tab.active { color: var(--qs-blue); }
.qs-tab i, .qs-tab svg { width: 22px; height: 22px; stroke-width: 1.8; }
.qs-tab.active i, .qs-tab.active svg { stroke-width: 2.2; }

/* FAB RESERVAR CITA central — elevado sobre el tabbar (sale 32 px arriba).
   Es la acción primaria de la app: una sola pulsación abre el wizard de
   reserva. Color brand para diferenciarlo de los tabs y dar protagonismo. */
.qs-tab-fab {
  flex: 0 0 auto;
  margin-top: -32px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--qs-brand, #2e5c90);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px rgba(46,92,144,0.4);
  text-decoration: none;
  transition: transform var(--qs-t);
  padding: 0;
}
.qs-tab-fab:hover { transform: translateY(-2px); }
.qs-tab-fab:active { transform: scale(.95); }
.qs-tab-fab i, .qs-tab-fab svg { width: 22px; height: 22px; stroke-width: 2.4; color: #fff; }

/* .qs-fab queda como alias retrocompatible — si algún CPT/widget viejo lo
   referencia, redirige al estilo del tab-fab. El layout.php ya no lo emite. */
.qs-fab { display: none; }

/* Sheet */
.qs-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, .44);
  z-index: 95;
  display: none;
}

.qs-sheet-backdrop.active {
  display: block;
}

.qs-sheet {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: -120%;
  width: 100%;
  max-width: 560px;
  background: white;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  z-index: 100;
  transition: bottom 0.3s cubic-bezier(.2, .8, .2, 1);
  padding: 12px 14px 24px;
  box-shadow: var(--qs-shadow2);
}

.qs-sheet.active {
  bottom: 0;
}

.qs-grab {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: #d1d5db;
  margin: 6px auto 12px;
}

.qs-sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 10px;
}

.qs-sheet-tile {
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--qs-line);
  background: #fafafa;
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.qs-sheet-tile:hover {
  background: #f0f4f8;
}

/* Toast */
.qs-toast {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 184px;
  z-index: 120;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(17, 24, 39, .92);
  color: white;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.qs-toast.show {
  opacity: 1;
}

/* Views base styles */
.qs-view-enter {
  opacity: 0;
  transform: translateY(10px);
}

.qs-view-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s, transform 0.3s;
}

/* Dashboard & Cards */
/* A11y: la clase puede aplicarse a un <h2> o a un <div>. Si es h2, le
   damos reset de margin/padding default del navegador para que el look
   sea idéntico al div. */
.qs-section-title,
h2.qs-section-title {
  margin: 16px 6px 10px;
  padding: 0;
  font-size: 12px;
  color: var(--qs-muted);
  font-weight: 950;
  letter-spacing: .9px;
  text-transform: uppercase;
  line-height: 1.2;
}

.qs-card {
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-r26);
  box-shadow: var(--qs-shadow);
  padding: 14px;
}

.qs-coverage {
  border-radius: 28px;
  padding: 14px;
  background: radial-gradient(900px 300px at 10% 0%, rgba(19, 194, 138, .18), transparent 55%), radial-gradient(900px 300px at 100% 10%, rgba(55, 117, 184, .18), transparent 60%), rgba(255, 255, 255, .86);
  border: 1px solid var(--qs-line);
  box-shadow: var(--qs-shadow);
}

.qs-coverage-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.qs-coverage-name {
  font-weight: 950;
  letter-spacing: -.2px;
}

.qs-coverage-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--qs-muted);
  line-height: 1.3;
}

.qs-coverage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.qs-kpi {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .75);
  border: 1px solid var(--qs-line);
}

.qs-kpi b {
  display: block;
  font-size: 16px;
  letter-spacing: -.3px;
}

.qs-kpi span {
  display: block;
  font-size: 12px;
  color: var(--qs-muted);
  margin-top: 2px;
}

/* Dashboard lists & grids */
.qs-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.qs-grid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.qs-tile {
  padding: 12px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--qs-line);
  box-shadow: 0 10px 26px rgba(17, 24, 39, .08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: transform var(--qs-t);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.qs-tile:active {
  transform: scale(.985);
}

.qs-tile b {
  font-size: 13px;
}

.qs-tile span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--qs-muted);
}

.qs-chev {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  background: rgba(55, 117, 184, .10);
  border: 1px solid rgba(55, 117, 184, .16);
  display: grid;
  place-items: center;
  color: var(--qs-brand-2);
  flex: 0 0 auto;
}

.qs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qs-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .78);
}

.qs-left {
  display: flex;
  gap: 12px;
  align-items: center;
}

.qs-ic {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background: rgba(55, 117, 184, .12);
  border: 1px solid rgba(55, 117, 184, .18);
  display: grid;
  place-items: center;
  color: var(--qs-brand-2);
}

.qs-t1 {
  font-weight: 900;
  font-size: 14px;
}

.qs-t2 {
  font-size: 12px;
  color: var(--qs-muted);
  margin-top: 2px;
}

.qs-pill {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .85);
  color: var(--qs-brand-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.qs-pill-success {
  background: rgba(19, 194, 138, .12);
  border-color: rgba(19, 194, 138, .22);
  color: #0f766e;
}

.qs-pill-warn {
  background: rgba(255, 176, 32, .14);
  border-color: rgba(255, 176, 32, .22);
  color: #92400e;
}

.qs-pill-danger {
  background: rgba(225, 29, 72, .12);
  border-color: rgba(225, 29, 72, .22);
  color: #9f1239;
}

/* Sub-page Heros */
.qs-hero {
  border-radius: var(--qs-r30);
  padding: 16px;
  background: radial-gradient(1000px 360px at 10% 0%, rgba(55, 117, 184, .26), transparent 56%), radial-gradient(900px 360px at 100% 30%, rgba(34, 87, 126, .20), transparent 60%), rgba(255, 255, 255, .84);
  border: 1px solid var(--qs-line);
  box-shadow: var(--qs-shadow2);
}

.qs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, .08);
  border: 1px solid rgba(17, 24, 39, .10);
  font-size: 12px;
  font-weight: 950;
  color: rgba(17, 24, 39, .86);
  user-select: none;
}

.qs-hero h2 {
  margin: 10px 0 6px;
  font-size: 18px;
  letter-spacing: -.35px;
}

.qs-hero p {
  margin: 0;
  color: var(--qs-muted);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 750;
}

.qs-tabs-inline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--qs-line);
}

.qs-tab-inline {
  flex: 1;
  min-width: 100px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--qs-muted);
  font-weight: 950;
  cursor: pointer;
  transition: background var(--qs-t), color var(--qs-t);
}

.qs-tab-inline.active {
  background: rgba(55, 117, 184, .10);
  border-color: rgba(55, 117, 184, .16);
  color: var(--qs-brand-2);
}

.qs-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.qs-empty {
  padding: 18px;
  border-radius: var(--qs-r30);
  border: 1px dashed rgba(91, 91, 96, .25);
  background: rgba(255, 255, 255, .72);
  text-align: center;
}

.qs-empty b {
  display: block;
  font-size: 14px;
}

.qs-empty span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--qs-muted);
  line-height: 1.35;
  font-weight: 750;
}

/* Phase 3 Booking */
.qs-progress {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 22px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .84);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.qs-steps {
  display: flex;
  gap: 8px;
  align-items: center;
}

.qs-dot {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: rgba(91, 91, 96, .25);
}

.qs-dot.on {
  background: linear-gradient(135deg, var(--qs-brand), var(--qs-brand-2));
}

.qs-choice {
  padding: 14px 12px;
  border-radius: 24px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 10px 26px rgba(17, 24, 39, .08);
  cursor: pointer;
  user-select: none;
  transition: transform var(--qs-t), border var(--qs-t), background var(--qs-t);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.qs-choice:active {
  transform: scale(.99);
}

.qs-choice.active {
  border-color: rgba(55, 117, 184, .45);
  background: rgba(55, 117, 184, .08);
}

.qs-choice b {
  display: block;
  font-size: 14px;
  letter-spacing: -.2px;
}

.qs-choice span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--qs-muted);
  line-height: 1.3;
  font-weight: 800;
}

.qs-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.qs-tag {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .90);
  color: var(--qs-brand-2);
  user-select: none;
}

.qs-tag.ok {
  border-color: rgba(19, 194, 138, .22);
  background: rgba(19, 194, 138, .12);
  color: #0f766e;
}

.qs-tag.warn {
  border-color: rgba(255, 176, 32, .22);
  background: rgba(255, 176, 32, .12);
  color: #92400e;
}

.qs-hint {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .75);
  border: 1px dashed rgba(91, 91, 96, .25);
  color: var(--qs-muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
}

.qs-field {
  margin-top: 12px;
}

.qs-helper {
  font-size: 12px;
  color: var(--qs-muted);
  margin: 10px 6px 0;
  line-height: 1.35;
  font-weight: 800;
}

.qs-mode {
  padding: 12px;
  border-radius: 22px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 26px rgba(17, 24, 39, .08);
  cursor: pointer;
  user-select: none;
  transition: transform var(--qs-t), border var(--qs-t), background var(--qs-t);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 110px;
}

.qs-mode:active {
  transform: scale(.99);
}

.qs-mode.active {
  border-color: rgba(55, 117, 184, .45);
  background: rgba(55, 117, 184, .08);
}

.qs-mode b {
  font-size: 13px;
  letter-spacing: -.2px;
}

.qs-mode span {
  font-size: 12px;
  color: var(--qs-muted);
  line-height: 1.25;
  font-weight: 800;
}

.qs-badge {
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid var(--qs-line);
  background: rgba(55, 117, 184, .10);
  color: var(--qs-brand-2);
}

.qs-badge.video {
  background: rgba(55, 117, 184, .10);
  border-color: rgba(55, 117, 184, .16);
}

.qs-badge.phone {
  background: rgba(19, 194, 138, .10);
  border-color: rgba(19, 194, 138, .18);
  color: #0f766e;
}

.qs-badge.pres {
  background: rgba(255, 176, 32, .12);
  border-color: rgba(255, 176, 32, .20);
  color: #92400e;
}

.qs-picker {
  margin-top: 12px;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .82);
  display: flex;
  gap: 10px;
  align-items: center;
}

.qs-picker input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-weight: 850;
  color: var(--qs-text);
}

.qs-prefs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.qs-pref {
  padding: 14px 12px;
  border-radius: 24px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 10px 26px rgba(17, 24, 39, .08);
  cursor: pointer;
  user-select: none;
  transition: transform var(--qs-t), border var(--qs-t), background var(--qs-t);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.qs-pref:active {
  transform: scale(.99);
}

.qs-pref.active {
  border-color: rgba(55, 117, 184, .45);
  background: rgba(55, 117, 184, .08);
}

.qs-pref b {
  display: block;
  font-size: 14px;
  letter-spacing: -.2px;
}

.qs-pref span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--qs-muted);
  line-height: 1.3;
  font-weight: 800;
}

.qs-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.qs-slot {
  padding: 12px;
  border-radius: 22px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .78);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  transition: transform var(--qs-t), border var(--qs-t), background var(--qs-t);
}

.qs-slot:active {
  transform: scale(.99);
}

.qs-slot.active {
  border-color: rgba(55, 117, 184, .45);
  background: rgba(55, 117, 184, .08);
}

.qs-sid {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background: rgba(55, 117, 184, .12);
  border: 1px solid rgba(55, 117, 184, .18);
  display: grid;
  place-items: center;
  color: var(--qs-brand-2);
  flex: 0 0 auto;
}

.qs-tag.alt {
  background: rgba(255, 176, 32, .12);
  border-color: rgba(255, 176, 32, .20);
  color: #92400e;
}

.qs-modal {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: -120%;
  width: min(640px, 100vw);
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--qs-line);
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  box-shadow: var(--qs-shadow2);
  z-index: 130;
  transition: bottom 260ms cubic-bezier(.2, .8, .2, 1);
  padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  max-height: calc(100vh - 22px);
  overflow: auto;
}

.qs-modal.active {
  bottom: 0;
}

.qs-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 0 2px 10px;
}

.qs-modal-head b {
  font-size: 14px;
  letter-spacing: -.2px;
}

.qs-frame {
  width: 100%;
  height: 70vh;
  border: 0;
  border-radius: 22px;
  background: rgba(246, 248, 251, .95);
  border: 1px solid var(--qs-line);
}

.qs-embed-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .75);
  border: 1px dashed rgba(91, 91, 96, .25);
  color: var(--qs-muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
}

.qs-summary-block {
  padding: 12px;
  border-radius: 22px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .78);
}

.qs-summary-block b {
  display: block;
  font-size: 14px;
  letter-spacing: -.2px;
}

.qs-summary-block span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--qs-muted);
  line-height: 1.3;
  font-weight: 800;
}

.qs-next {
  padding: 14px;
  border-radius: var(--qs-r30);
  border: 1px solid var(--qs-line);
  background: radial-gradient(900px 300px at 10% 0%, rgba(55, 117, 184, .18), transparent 55%), radial-gradient(900px 300px at 100% 10%, rgba(255, 176, 32, .14), transparent 60%), rgba(255, 255, 255, .86);
  box-shadow: var(--qs-shadow);
}

.qs-next b {
  display: block;
  font-size: 14px;
  letter-spacing: -.2px;
}

.qs-next span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--qs-muted);
  line-height: 1.35;
  font-weight: 800;
}

.qs-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.qs-chip {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .90);
  color: var(--qs-brand-2);
  user-select: none;
  white-space: nowrap;
}

.qs-chip.ok {
  background: rgba(19, 194, 138, .12);
  border-color: rgba(19, 194, 138, .22);
  color: #0f766e;
}

/* --- Phase 4: Video --- */
.qs-video-wrap {
  border-radius: var(--qs-r26);
  border: 1px solid var(--qs-line);
  background: rgba(15, 23, 42, .70);
  box-shadow: var(--qs-shadow);
  overflow: hidden;
  position: relative;
  min-height: 320px;
}

.qs-video-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  z-index: 10;
  background: linear-gradient(180deg, rgba(11, 18, 32, .82), rgba(11, 18, 32, 0));
}

.qs-video-acts {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.qs-daily-cont {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(232, 238, 252, .78);
  font-weight: 900;
}

.qs-panel-top {
  padding: 12px;
  border-bottom: 1px solid var(--qs-line);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  background: rgba(17, 28, 51, .05);
}

.qs-panel-top b {
  font-size: 14px;
  letter-spacing: -.2px;
}

.qs-panel-top span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--qs-muted);
  font-weight: 850;
  line-height: 1.3;
}

.qs-tabs-ui {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--qs-line);
  background: rgba(17, 28, 51, .02);
}

.qs-tab-btn {
  flex: 1;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, .06);
  color: var(--qs-text);
  font-weight: 950;
  cursor: pointer;
  user-select: none;
  transition: transform var(--qs-t), background var(--qs-t), border var(--qs-t);
  font-size: 13px;
}

.qs-tab-btn:active {
  transform: scale(.99);
}

.qs-tab-btn.active {
  background: rgba(55, 117, 184, .12);
  border-color: rgba(55, 117, 184, .28);
}

.qs-check-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .06);
  margin-top: 10px;
}

.qs-check-row b {
  font-size: 13px;
}

.qs-check-row span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--qs-muted);
  font-weight: 850;
  line-height: 1.25;
}

.qs-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: rgba(255, 176, 32, .95);
  box-shadow: 0 0 0 4px rgba(255, 176, 32, .18);
  flex: 0 0 auto;
}

.qs-status-dot.ok {
  background: rgba(19, 194, 138, .95);
  box-shadow: 0 0 0 4px rgba(19, 194, 138, .18);
}

.qs-status-dot.bad {
  background: rgba(225, 29, 72, .95);
  box-shadow: 0 0 0 4px rgba(225, 29, 72, .18);
}

.qs-toggle {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid var(--qs-line);
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: background var(--qs-t);
  flex: 0 0 auto;
}

.qs-toggle::after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left var(--qs-t);
  opacity: .92;
}

.qs-toggle.on {
  background: rgba(55, 117, 184, .30);
}

.qs-toggle.on::after {
  left: 24px;
}

.qs-chat-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.qs-msg {
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .6);
  font-weight: 850;
  line-height: 1.35;
  align-self: flex-start;
}

.qs-msg.me {
  align-self: flex-end;
  background: rgba(55, 117, 184, .12);
  border-color: rgba(55, 117, 184, .20);
}

.qs-composer {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.qs-textarea {
  flex: 1;
  min-height: 44px;
  max-height: 140px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .7);
  color: var(--qs-text);
  outline: none;
  font-weight: 850;
  resize: none;
  font-family: inherit;
}

.qs-drop {
  padding: 14px;
  border-radius: 22px;
  border: 1px dashed rgba(91, 91, 96, .25);
  background: rgba(255, 255, 255, .5);
  text-align: center;
}

.qs-drop b {
  display: block;
  font-size: 13px;
}

.qs-drop span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--qs-muted);
  font-weight: 850;
  line-height: 1.35;
}

.qs-files {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qs-file {
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .7);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-weight: 850;
}

.qs-file small {
  color: var(--qs-muted);
  font-weight: 850;
}

.qs-safety {
  margin-top: 12px;
  padding: 12px;
  border-radius: 22px;
  border: 1px dashed rgba(225, 29, 72, .28);
  background: rgba(225, 29, 72, .10);
  color: #9f1239;
}

.qs-safety b {
  display: block;
  font-size: 13px;
}

.qs-safety span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #be123c;
  line-height: 1.35;
  font-weight: 850;
}

/* --- Phase 4: Specialists --- */
.qs-search-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .82);
}

.qs-search-bar input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-weight: 850;
  color: var(--qs-text);
  min-width: 0;
}

.qs-filters-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.qs-doc {
  padding: 12px;
  border-radius: 26px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .86);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  transition: transform var(--qs-t);
}

.qs-doc:active {
  transform: scale(.99);
}

.qs-doc-main {
  flex: 1;
  min-width: 0;
}

.qs-doc-main b {
  display: block;
  font-size: 14px;
  letter-spacing: -.2px;
}

.qs-doc-main span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--qs-muted);
  font-weight: 850;
  line-height: 1.25;
}

.qs-cta-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  flex: 0 0 auto;
}

/* --- Phase 4: Doctor Profile --- */
.qs-hero-profile {
  border-radius: var(--qs-r30);
  padding: 16px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid var(--qs-line);
  box-shadow: var(--qs-shadow);
  position: relative;
  overflow: hidden;
}

.qs-hero-top {
  display: flex;
  gap: 12px;
  align-items: center;
}

.qs-who {
  min-width: 0;
}

.qs-who b {
  display: block;
  font-size: 16px;
  letter-spacing: -.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qs-who span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--qs-muted);
  font-weight: 850;
  line-height: 1.25;
}

.qs-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.qs-cta-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  width: min(560px, calc(100vw - 18px));
  padding: 10px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid var(--qs-line);
  box-shadow: var(--qs-shadow2);
  backdrop-filter: blur(16px);
  display: flex;
  gap: 10px;
  z-index: 90;
}

.qs-about {
  font-size: 13px;
  color: var(--qs-text);
  line-height: 1.45;
  font-weight: 750;
}

.qs-about p {
  margin: 0;
}

.qs-about ul {
  margin: 10px 0 0 18px;
  color: var(--qs-muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 850;
}

.qs-about li {
  margin: 6px 0;
}

.qs-review {
  padding: 12px;
  border-radius: 22px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .78);
  margin-bottom: 10px;
}

.qs-review b {
  display: block;
  font-size: 13px;
}

.qs-review span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--qs-muted);
  font-weight: 850;
  line-height: 1.35;
}

/* --- Phase 5: Finance, Legal & More --- */
.qs-balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .78);
}

.qs-balance b {
  font-size: 18px;
}

.qs-balance span {
  font-size: 12px;
  color: var(--qs-muted);
  font-weight: 850;
}

.qs-method,
.qs-payment,
.qs-receipt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .86);
  margin-bottom: 10px;
}

.qs-method {
  align-items: center;
  background: rgba(255, 255, 255, .78);
}

.qs-receipt {
  border-radius: 26px;
  box-shadow: 0 10px 26px rgba(17, 24, 39, .08);
  cursor: pointer;
}

.qs-main-info b {
  display: block;
  font-size: 14px;
}

.qs-main-info span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--qs-muted);
  font-weight: 850;
}

.qs-cta-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.qs-mini-btn {
  border: 1px solid var(--qs-line);
  background: #fff;
  color: var(--qs-brand-2);
  border-radius: 14px;
  padding: 8px 10px;
  font-weight: 950;
  font-size: 12px;
  cursor: pointer;
}

.qs-search {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .82);
}

.qs-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-weight: 850;
}

/* Switches for settings */
.qs-switch {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: rgba(55, 117, 184, .18);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background var(--qs-t);
  user-select: none;
}

.qs-switch::after {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left var(--qs-t);
  box-shadow: 0 10px 26px rgba(17, 24, 39, .12);
}

.qs-switch.on {
  background: linear-gradient(135deg, var(--qs-brand), var(--qs-brand-2));
}

.qs-switch.on::after {
  left: 22px;
}

/* Contact and Emergency */
.qs-contact {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .78);
  margin-bottom: 10px;
}

.qs-emergency {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  border: 1px solid #fecaca;
}

.qs-emergency b {
  font-size: 14px;
}

.qs-emergency span {
  font-size: 12px;
  color: #7f1d1d;
  font-weight: 850;
}

/* Severity selector */
.qs-sev {
  padding: 14px 12px;
  border-radius: 24px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 10px 26px rgba(17, 24, 39, .08);
  cursor: pointer;
  user-select: none;
  transition: transform var(--qs-t), border var(--qs-t), background var(--qs-t);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.qs-sev:active {
  transform: scale(.99);
}

.qs-sev.active {
  border-color: rgba(225, 29, 72, .45);
  background: rgba(225, 29, 72, .06);
}

.qs-sev b {
  display: block;
  font-size: 14px;
  letter-spacing: -.2px;
}

.qs-sev span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--qs-muted);
  line-height: 1.3;
  font-weight: 800;
}

/* Chat and AI */
.qs-chat-area {
  flex: 1;
  overflow: auto;
  padding: 14px 14px 12px 14px;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
}

.qs-banner {
  border-radius: var(--qs-r30);
  padding: 14px;
  background: radial-gradient(1000px 360px at 10% 0%, rgba(55, 117, 184, .22), transparent 56%), radial-gradient(900px 360px at 100% 30%, rgba(34, 87, 126, .16), transparent 60%), rgba(255, 255, 255, .86);
  border: 1px solid var(--qs-line);
  box-shadow: var(--qs-shadow);
  margin-bottom: 12px;
}

.qs-banner b {
  display: block;
  font-size: 14px;
  letter-spacing: -.2px;
}

.qs-banner span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--qs-muted);
  line-height: 1.35;
  font-weight: 800;
}

.qs-ai-msg {
  display: flex;
  gap: 10px;
  margin: 10px 0;
  align-items: flex-end;
}

.qs-ai-msg.user {
  justify-content: flex-end;
}

.qs-ai-bubble {
  max-width: 82%;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 26px rgba(17, 24, 39, .06);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
  color: var(--qs-text);
  white-space: pre-wrap;
}

.qs-ai-msg.user .qs-ai-bubble {
  background: linear-gradient(135deg, var(--qs-brand), var(--qs-brand-2));
  color: white;
  border-color: rgba(55, 117, 184, .25);
}

.qs-ai-avatar {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(55, 117, 184, .12);
  border: 1px solid rgba(55, 117, 184, .18);
  color: var(--qs-brand-2);
  font-weight: 950;
  flex: 0 0 auto;
  user-select: none;
}

.qs-ai-meta {
  font-size: 11px;
  color: rgba(91, 91, 96, .9);
  margin-top: 6px;
  font-weight: 850;
}

.qs-cardout {
  margin: 10px 0 6px;
  border-radius: 22px;
  border: 1px solid var(--qs-line);
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--qs-shadow);
  padding: 12px;
}

.qs-cardout h3 {
  margin: 0;
  font-size: 13px;
  letter-spacing: -.2px;
}

.qs-cardout ul {
  margin: 8px 0 0 18px;
  padding: 0;
  color: var(--qs-muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 850;
}

.qs-ai-composer {
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) 14px;
  border-top: 1px solid var(--qs-line);
  background: rgba(246, 248, 251, .82);
  backdrop-filter: blur(16px);
}

.qs-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: var(--qs-muted);
  font-size: 12px;
  font-weight: 850;
}

.qs-minilink {
  color: var(--qs-brand-2);
  font-weight: 950;
  cursor: pointer;
  user-select: none;
}

/* ── Missing utilities (added for level-999 completeness) ──────────────────── */

/* CSS variable: success/ok green */
.qs-app-wrapper {
  --qs-ok: #0f766e;
  --qs-error: #e11d48;
  --qs-panel: rgba(255,255,255,.86);
  --qs-bg-alt: rgba(246,248,251,.94);
}

/* Button sizes */
.qs-btn-sm {
  /* A11y · 44px alto mínimo aunque sea "small". padding vertical sube de
     7 a 11px para que el target táctil cumpla con Apple HIG. */
  padding: 11px 14px;
  font-size: 13px;
  border-radius: 12px;
  min-height: 44px;
}

/* Button variants */
.qs-btn-secondary {
  background: rgba(55,117,184,.10);
  border: 1px solid rgba(55,117,184,.20);
  color: var(--qs-brand-2);
}

.qs-btn-danger {
  background: var(--qs-danger);
  color: #fff;
}

.qs-btn-danger-light {
  background: rgba(225,29,72,.10);
  border: 1px solid rgba(225,29,72,.20);
  color: #9f1239;
}

/* Page content wrapper — gives enter animation */
.qs-wrap {
  animation: qsSlideIn 260ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes qsSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Loading spinner (spinning icon class) */
.qs-spin {
  animation: qsSpin 1s linear infinite;
  display: inline-block;
}

@keyframes qsSpin {
  to { transform: rotate(360deg); }
}

/* Inline loader */
.qs-loader-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  text-align: center;
  color: var(--qs-muted);
  font-size: 13px;
  font-weight: 850;
}

.qs-loader {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(55,117,184,.2);
  border-top-color: var(--qs-brand);
  border-radius: 50%;
  animation: qsSpin 0.75s linear infinite;
}

/* Spinner text (legacy class) */
.qs-spinner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--qs-muted);
  font-size: 14px;
  font-weight: 850;
}

/* Error wrap */
.qs-error-wrap {
  padding: 40px 20px;
  text-align: center;
}

.qs-error-wrap h3 {
  color: var(--qs-danger);
  margin-bottom: 8px;
}

.qs-error-wrap p {
  font-size: 13px;
  color: var(--qs-muted);
}

/* Badge variants */
.qs-badge-success {
  background: rgba(19,194,138,.12);
  border: 1px solid rgba(19,194,138,.22);
  color: #065f46;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
}

.qs-badge-warning {
  background: rgba(255,176,32,.12);
  border: 1px solid rgba(255,176,32,.22);
  color: #92400e;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
}

.qs-badge-danger {
  background: rgba(225,29,72,.10);
  border: 1px solid rgba(225,29,72,.18);
  color: #9f1239;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
}

/* Pill extra variants */
.qs-pill.ok {
  background: rgba(19,194,138,.12);
  border-color: rgba(19,194,138,.22);
  color: #0f766e;
}

.qs-pill.info {
  background: rgba(55,117,184,.10);
  border-color: rgba(55,117,184,.18);
  color: var(--qs-brand-2);
}

/* Empty state */
.qs-empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--qs-muted);
  border-radius: var(--qs-r22);
}

.qs-empty-state i {
  display: block;
  margin: 0 auto 12px;
  opacity: .35;
}

.qs-empty-state b {
  display: block;
  font-size: 14px;
  color: var(--qs-text);
}

.qs-empty-state span {
  display: block;
  font-size: 12px;
  margin-top: 6px;
  line-height: 1.4;
}

/* Toggle switch (native input + label pattern) */
.qs-switch {
  position: relative;
  display: inline-flex;
  width: 46px;
  height: 26px;
  flex: 0 0 auto;
  cursor: pointer;
}

.qs-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.qs-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(155,155,165,.3);
  transition: background var(--qs-t);
}

.qs-slider::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: left var(--qs-t);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.qs-switch input:checked + .qs-slider {
  background: linear-gradient(135deg, var(--qs-brand), var(--qs-brand-2));
}

.qs-switch input:checked + .qs-slider::after {
  left: 23px;
}

/* Row item — generic list row */
.qs-row-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background var(--qs-t);
}

.qs-row-item:hover {
  background: rgba(55,117,184,.04);
}

/* Generic flexible grid (1 column on small, 2 on wider) */
.qs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Clickable list item hover effect */
.qs-clickable-item {
  transition: background var(--qs-t), transform var(--qs-t);
}

.qs-clickable-item:hover {
  background: rgba(55,117,184,.05);
}

.qs-clickable-item:active {
  transform: scale(.99);
}

/* AI Chat: user message bubble */
.qs-user-msg {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}

.qs-user-bubble {
  max-width: 82%;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--qs-brand), var(--qs-brand-2));
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
}

/* Responsive: stack grid to 1 col on very narrow */
@media (max-width: 360px) {
  .qs-grid2,
  .qs-grid,
  .qs-prefs {
    grid-template-columns: 1fr;
  }
}
/* ──────────────────────────────────────────────────────────────────────────── */

/* ============================================================================
   Rediseño V2 — componentes nuevos para el header (logo + iconbtns + greeting)
   y el hero "Today card". Apilados al final para que no rompan reglas previas.
   ============================================================================ */

/* Greeting opcional bajo el topbar — "BUENOS DÍAS, Víctor" */
.qs-greeting {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--qs-text-3);
  margin: 4px 0 8px;
}
.qs-greeting svg, .qs-greeting i { width: 14px; height: 14px; stroke-width: 2; color: var(--qs-amber); }
.qs-greeting b { color: var(--qs-ink); font-weight: 700; letter-spacing: 0; text-transform: none; font-size: 13px; margin-left: 2px; }

/* Logo en topbar — restaura tamaño consistente, sin fondo */
.qs-brand a { display: flex; align-items: center; text-decoration: none; gap: 8px; }
.qs-brand img { height: 36px; width: auto; display: block; object-fit: contain; }

/* Hero card V2 — gradiente navy con radial accent QSalud */
.qs-hero {
  margin: 4px 0 0;
  border-radius: var(--qs-r30);
  padding: 24px 22px 22px;
  background: linear-gradient(140deg, #0A1F33 0%, #143A66 60%, #1A4DBF 110%);
  color: #fff;
  position: relative;
  overflow: hidden;
  border: 0;
  box-shadow: var(--qs-shadow2);
}
.qs-hero::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(46,92,144,.55), transparent 60%);
  pointer-events: none;
}
.qs-hero .qs-kicker {
  color: rgba(255,255,255,.65);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
.qs-hero h2 {
  font-family: var(--qs-font-display);
  font-size: 26px; line-height: 1.1; letter-spacing: -0.015em; font-weight: 400;
  margin-top: 10px; max-width: 280px; position: relative; z-index: 1;
}
.qs-hero h2 em { font-style: italic; color: #7AB5F0; }
.qs-hero p { color: rgba(255,255,255,.7); font-size: 13.5px; line-height: 1.45; }
.qs-hero .qs-row, .qs-hero .qs-row-between { position: relative; z-index: 1; }
.qs-hero .qs-btn-primary { background: var(--qs-brand); box-shadow: var(--qs-shadow-glow); }
.qs-hero .qs-btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.18); }

/* Quick action grid (Accesos rápidos en home / sheet "Más") */
.qs-qa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.qs-qa {
  background: var(--qs-surface);
  border-radius: var(--qs-r22);
  padding: 16px;
  border: 1px solid var(--qs-line);
  position: relative;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform var(--qs-t), box-shadow var(--qs-t);
}
.qs-qa:hover { box-shadow: var(--qs-shadow); transform: translateY(-1px); }
.qs-qa-icon {
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--qs-surface-2);
  display: grid; place-items: center; color: var(--qs-ink);
  margin-bottom: 12px;
}
.qs-qa-icon svg, .qs-qa-icon i { width: 18px; height: 18px; stroke-width: 2; }
.qs-qa.qa-brand  .qs-qa-icon { background: var(--qs-brand-soft); color: var(--qs-brand-2); }
.qs-qa.qa-blue   .qs-qa-icon { background: #DBEAFE;             color: var(--qs-blue);    }
.qs-qa.qa-violet .qs-qa-icon { background: #ECE7FF;             color: var(--qs-violet);  }
.qs-qa.qa-coral  .qs-qa-icon { background: var(--qs-coral-soft); color: #B22222;          }
.qs-qa-title { font-weight: 700; font-size: 14px; color: var(--qs-ink); }
.qs-qa-sub   { font-size: 12px; color: var(--qs-muted); margin-top: 4px; }
.qs-qa-chev  { position: absolute; top: 16px; right: 16px; color: var(--qs-text-3); }
.qs-qa-chev svg { width: 14px; height: 14px; stroke-width: 2; }

/* Chip de marca (badge tipo "SIN ESPERAS") */
.qs-chip-brand {
  background: var(--qs-brand-soft); color: var(--qs-brand-2);
  border-radius: 999px; padding: 3px 9px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px;
}

/* Ajustes finos para que la nueva tipografía no rompa selectores antiguos */
.qs-h1, .qs-coverage-name, .qs-card h2 { font-family: var(--qs-font-display); font-weight: 400; }
.qs-t1, .qs-tile b { font-weight: 700; }

/* ============================================================================
   Componentes V2 · iteración 1 (citas + salud)
   Estos selectores los emiten los template literals de views.citas() y views.salud()
   en app.js. Si faltan aquí, las vistas se renderizan como texto plano.
   ============================================================================ */

/* ─── Tabs-pill (citas: Próximas / Pasadas / Canceladas) ──────────────────── */
.qs-tabs-pill {
  display: flex;
  gap: 4px;
  margin: 14px 0;
  padding: 4px;
  background: rgba(10, 31, 51, 0.06);
  border-radius: 999px;
}
.qs-tab-pill {
  flex: 1;
  padding: 9px 12px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--qs-muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--qs-font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background var(--qs-t), color var(--qs-t);
}
.qs-tab-pill.active {
  background: #fff;
  color: var(--qs-ink);
  box-shadow: var(--qs-shadow);
}
.qs-tab-pill-badge {
  /* A11y · contraste AA: blanco sobre coral original (#F4564B) sólo da 3.34:1.
     Subimos a coral-text #B91C3A que da 5.6:1 con blanco. */
  background: var(--qs-coral-text, #B91C3A);
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
}
.qs-tab-pill.active .qs-tab-pill-badge { background: var(--qs-brand); }

/* ─── Week-strip (citas: tira horizontal con días) ────────────────────────── */
.qs-week {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  overflow-x: auto;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.qs-week::-webkit-scrollbar { display: none; }
.qs-day {
  flex: 0 0 54px;
  aspect-ratio: 0.68;
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-r18);
  padding: 10px 6px;
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: background var(--qs-t);
}
.qs-day-name {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--qs-text-3);
  text-transform: uppercase;
}
.qs-day-num {
  font-family: var(--qs-font-display);
  font-size: 22px;
  line-height: 1;
  margin-top: 4px;
  color: var(--qs-ink);
}
.qs-day-dot {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--qs-brand);
}
.qs-day.today { background: var(--qs-ink); border-color: var(--qs-ink); }
/* A11y · sobre fondo dark #0A1F33 necesitamos texto claro. Antes:
   - day-name rgba(255,255,255,.55) = ~3.5:1 (fallo)
   - day-num #2e5c90 sobre #0A1F33 = 2.42:1 (fallo grave)
   Ahora: day-name blanco 85% (~5.3:1), day-num blanco puro (16:1). */
.qs-day.today .qs-day-name { color: rgba(255, 255, 255, 0.85); }
.qs-day.today .qs-day-num  { color: #FFFFFF; }
.qs-day.today .qs-day-dot  { background: #FFFFFF; }

/* ─── Appointment card (citas + dashboard) ────────────────────────────────── */
.qs-appt-card {
  background: var(--qs-surface);
  border-radius: var(--qs-r22);
  padding: 14px;
  border: 1px solid var(--qs-line);
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform var(--qs-t), box-shadow var(--qs-t);
}
.qs-appt-card:hover { box-shadow: var(--qs-shadow); transform: translateY(-1px); }
.qs-appt-ic {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--qs-brand-soft);
  color: var(--qs-brand-2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.qs-appt-ic svg, .qs-appt-ic i { width: 20px; height: 20px; stroke-width: 1.8; }
.qs-appt-main { flex: 1; min-width: 0; }
.qs-appt-title { font-weight: 700; font-size: 13.5px; color: var(--qs-ink); }
.qs-appt-sub { font-size: 12px; color: var(--qs-muted); margin-top: 3px; }
.qs-appt-tag {
  /* A11y · texto blanco sobre mint #00B894 sólo da 2.53:1. Subimos el fondo
     a mint-text #047857 que con blanco da 5.48:1 (AA OK).
     Variantes .pending/.danger siguen los pares oscuros equivalentes. */
  background: var(--qs-mint-text, #047857);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
/* A11y · variantes con fondo oscuro para que el texto blanco mantenga AA. */
.qs-appt-tag.pending { background: var(--qs-amber-text, #92400E); }
.qs-appt-tag.danger  { background: var(--qs-coral-text, #B91C3A); }

/* ─── Section title con variante serif (dashboard "Hoy · 23 mayo", citas) ─── */
.qs-section-display {
  font-family: var(--qs-font-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--qs-ink);
  margin: 18px 0 14px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
}
.qs-section-display a {
  font-family: var(--qs-font-body);
  font-size: 12.5px;
  color: var(--qs-blue);
  text-decoration: none;
  font-weight: 700;
}

/* ─── Salud · Health Score hero ──────────────────────────────────────────── */
.qs-score-hero {
  margin: 18px 0 16px;
  background: radial-gradient(120% 80% at 0% 0%, #143A66 0%, #0A1F33 60%);
  border-radius: var(--qs-r30);
  padding: 24px 22px 22px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.qs-score-hero::after {
  content: '';
  position: absolute;
  bottom: -80px; right: -80px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(46,92,144,.55), transparent 60%);
  pointer-events: none;
}
.qs-score-top { display: flex; align-items: start; justify-content: space-between; gap: 16px; position: relative; z-index: 1; }
.qs-score-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.qs-score-num { font-family: var(--qs-font-display); font-size: 60px; line-height: 0.85; letter-spacing: -0.04em; margin-top: 6px; }
.qs-score-num em { font-style: italic; color: var(--qs-brand); font-size: 26px; vertical-align: top; }
.qs-score-lbl { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 6px; }
.qs-score-lbl b { color: var(--qs-brand); font-weight: 700; }
.qs-ring { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.qs-ring svg { transform: rotate(-90deg); }
.qs-ring-inner { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.qs-ring-num { font-family: var(--qs-font-display); font-size: 20px; line-height: 1; color: var(--qs-brand); }
.qs-ring-l { font-size: 9px; color: rgba(255,255,255,.6); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }
.qs-score-divider { margin: 18px 0 14px; border: 0; border-top: 1px dashed rgba(255,255,255,.18); position: relative; z-index: 1; }
.qs-score-row { display: flex; justify-content: space-between; position: relative; z-index: 1; gap: 12px; }
.qs-score-metric { flex: 1; min-width: 0; }
.qs-score-metric-num { font-family: var(--qs-font-display); font-size: 22px; color: #fff; line-height: 1; white-space: nowrap; }
.qs-score-metric-num small { font-size: 11px; color: rgba(255,255,255,.5); margin-left: 2px; font-family: var(--qs-font-body); font-weight: 500; }
.qs-score-metric-lbl { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 4px; letter-spacing: 0.04em; }

/* ─── Salud · Insight card (Care Copilot) ─────────────────────────────────── */
.qs-insight {
  background: linear-gradient(135deg, #FFF8EE 0%, #FFE4C4 100%);
  border: 1px solid #F4D8A8;
  border-radius: var(--qs-r-xl, 28px);
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  transition: transform var(--qs-t), box-shadow var(--qs-t);
}
.qs-insight:hover { box-shadow: var(--qs-shadow); transform: translateY(-1px); }
.qs-insight-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--qs-amber); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.qs-insight-ic svg, .qs-insight-ic i { width: 16px; height: 16px; stroke-width: 2; }
.qs-insight-body { flex: 1; min-width: 0; }
.qs-insight-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #B97A0F; }
.qs-insight-text { margin-top: 6px; font-family: var(--qs-font-display); font-size: 16px; line-height: 1.25; color: var(--qs-ink); }
.qs-insight-cta { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--qs-blue); display: inline-flex; align-items: center; gap: 4px; }
.qs-insight-cta svg, .qs-insight-cta i { width: 12px; height: 12px; }

/* ─── Salud · Vitals disclaimer + grid placeholder ────────────────────────── */
.qs-vitals-disclaimer {
  padding: 12px 14px;
  background: #FFE4C4;
  border: 1px solid #F4D8A8;
  border-radius: var(--qs-r18);
  display: flex;
  gap: 10px;
  align-items: start;
}
.qs-vitals-disclaimer svg, .qs-vitals-disclaimer i { width: 16px; height: 16px; color: #B97A0F; flex-shrink: 0; margin-top: 1px; }
.qs-vitals-disclaimer-text { font-size: 12px; color: #78350F; line-height: 1.4; }
.qs-vitals-disclaimer-text b { color: #B97A0F; font-weight: 700; }

.qs-vitals-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.qs-vital {
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-r22);
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.qs-vital.placeholder {
  background: repeating-linear-gradient(45deg, var(--qs-surface), var(--qs-surface) 8px, var(--qs-surface-2) 8px, var(--qs-surface-2) 16px);
  opacity: .85;
}
.qs-vital-head { display: flex; align-items: center; gap: 8px; }
.qs-vital-icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.qs-vital-icon.heart { background: var(--qs-coral-soft); color: var(--qs-coral); }
.qs-vital-icon.sleep { background: var(--qs-violet-soft); color: var(--qs-violet); }
.qs-vital-icon.steps { background: #DBEAFE; color: var(--qs-blue); }
.qs-vital-icon.spo2  { background: var(--qs-brand-soft); color: var(--qs-brand-2); }
.qs-vital-icon svg, .qs-vital-icon i { width: 13px; height: 13px; }
.qs-vital-lbl { font-size: 11px; color: var(--qs-muted); font-weight: 600; }
.qs-vital-num { font-family: var(--qs-font-display); font-size: 26px; line-height: 1; margin-top: 8px; color: var(--qs-ink); }
.qs-vital-empty { font-size: 11px; color: var(--qs-muted); margin-top: 6px; line-height: 1.4; }

/* ─── Salud · Documentación tiles ─────────────────────────────────────────── */
.qs-tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.qs-tile-v2 {
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-r22);
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform var(--qs-t), box-shadow var(--qs-t);
}
.qs-tile-v2:hover { box-shadow: var(--qs-shadow); transform: translateY(-1px); }
.qs-tile-info b { font-size: 13px; font-weight: 700; color: var(--qs-ink); display: block; }
.qs-tile-info span { font-size: 11.5px; color: var(--qs-muted); display: block; margin-top: 2px; }
.qs-tile-chev { width: 28px; height: 28px; border-radius: 10px; background: var(--qs-brand-soft); color: var(--qs-brand-2); display: grid; place-items: center; flex-shrink: 0; }
.qs-tile-chev svg, .qs-tile-chev i { width: 14px; height: 14px; stroke-width: 2; }

/* ============================================================================
   Componentes V2 · iteración 7 (auth: login + register + recover + pin)
   ============================================================================ */

/* Fondo decorativo de blobs (login/register) */
.qs-auth-frame {
  position: relative;
  min-height: 100vh;
  padding: 0 24px 30px;
  overflow-x: hidden; overflow-y: visible;
}
.qs-auth-frame::before {
  content: ''; position: absolute;
  top: -120px; right: -120px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(46,92,144,.18), transparent 60%);
  pointer-events: none;
}
.qs-auth-frame::after {
  content: ''; position: absolute;
  bottom: -150px; left: -130px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(20,85,216,.10), transparent 60%);
  pointer-events: none;
}

/* Brand mark superior */
.qs-auth-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 60px 0 0;
  position: relative; z-index: 1;
}
.qs-auth-brand img { height: 32px; width: auto; }
.qs-auth-brand-text {
  font-family: var(--qs-font-display);
  font-size: 22px; letter-spacing: -0.01em;
  color: var(--qs-ink);
}

/* Saludo hero serif */
.qs-auth-greet {
  font-family: var(--qs-font-display);
  font-size: 40px; line-height: 1.02; letter-spacing: -0.02em;
  font-weight: 400;
  margin-top: 56px;
  color: var(--qs-ink);
  position: relative; z-index: 1;
}
.qs-auth-greet em { font-style: italic; color: var(--qs-brand); }
.qs-auth-sub {
  color: var(--qs-muted);
  margin-top: 12px;
  font-size: 14.5px;
  max-width: 320px;
  line-height: 1.45;
  position: relative; z-index: 1;
}

/* Form + fields */
.qs-auth-form {
  margin-top: 32px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; z-index: 1;
}
.qs-auth-field {
  display: flex; align-items: center; gap: 12px;
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-r-md);
  padding: 14px 16px;
  transition: border-color var(--qs-t);
}
.qs-auth-field:focus-within { border-color: var(--qs-brand); }
.qs-auth-field svg, .qs-auth-field i {
  width: 18px; height: 18px;
  color: var(--qs-text-3); stroke-width: 2; flex-shrink: 0;
}
.qs-auth-field input,
.qs-auth-field select {
  border: 0; outline: 0; background: transparent;
  font-family: var(--qs-font-body);
  font-size: 14.5px; font-weight: 500;
  width: 100%; color: var(--qs-ink);
}
.qs-auth-field input::placeholder { color: var(--qs-text-3); }
.qs-auth-field-pass-toggle {
  background: 0; border: 0; cursor: pointer; padding: 0;
  color: var(--qs-text-3);
  display: grid; place-items: center;
}

/* Helper row (Recuérdame + Recuperar) */
.qs-auth-helper {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px;
  font-size: 13px;
  position: relative; z-index: 1;
}
.qs-auth-helper label {
  display: flex; align-items: center; gap: 8px;
  color: var(--qs-muted); font-weight: 500;
  cursor: pointer;
}
.qs-auth-helper a {
  color: var(--qs-blue); font-weight: 600; text-decoration: none;
}
.qs-auth-check {
  width: 18px; height: 18px;
  border: 1.5px solid var(--qs-line-2);
  border-radius: 5px;
  display: grid; place-items: center;
  color: transparent;
  transition: all var(--qs-t);
}
.qs-auth-check.on {
  background: var(--qs-ink); border-color: var(--qs-ink); color: #fff;
}
.qs-auth-check svg, .qs-auth-check i { width: 12px; height: 12px; stroke-width: 3; }

/* Divider con texto */
.qs-auth-divider {
  text-align: center;
  margin: 24px 0;
  position: relative;
  color: var(--qs-text-3);
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 1;
}
.qs-auth-divider::before,
.qs-auth-divider::after {
  content: ''; position: absolute; top: 50%;
  width: 35%; height: 1px; background: var(--qs-line);
}
.qs-auth-divider::before { left: 0; }
.qs-auth-divider::after { right: 0; }

/* SSO grid */
.qs-auth-sso {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  position: relative; z-index: 1;
}
.qs-auth-sso .qs-btn {
  padding: 14px;
  background: var(--qs-surface);
  color: var(--qs-ink);
  border: 1px solid var(--qs-line);
}
.qs-auth-sso .qs-btn:hover { background: var(--qs-surface-2); }

/* Trust strip */
.qs-auth-trust {
  margin-top: 22px;
  background: var(--qs-surface);
  border-radius: var(--qs-r-md);
  border: 1px solid var(--qs-line);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  position: relative; z-index: 1;
}
.qs-auth-trust-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,184,148,.15);
  color: var(--qs-mint);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.qs-auth-trust-icon svg, .qs-auth-trust-icon i { width: 18px; height: 18px; stroke-width: 2.2; }
.qs-auth-trust-text { font-size: 12.5px; color: var(--qs-muted); line-height: 1.4; }
.qs-auth-trust-text b { color: var(--qs-ink); font-weight: 700; }

/* Footer link "¿Eres nuevo?" / "Ya tengo cuenta" */
.qs-auth-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--qs-muted);
  position: relative; z-index: 1;
}
.qs-auth-footer a {
  color: var(--qs-ink); font-weight: 700; text-decoration: none;
}

/* Sección de form (Datos personales / Identificación / Contacto) */
.qs-auth-section-label {
  font-size: 11px; color: var(--qs-text-3);
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  margin: 18px 0 10px;
}
.qs-auth-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}

/* PIN boxes (set PIN) */
.qs-pin-boxes {
  display: flex; justify-content: center; gap: 12px;
  margin: 28px 0 10px;
  position: relative; z-index: 1;
}
.qs-pin-input {
  width: 56px; height: 64px;
  border-radius: 16px;
  border: 1.5px solid var(--qs-line);
  background: var(--qs-surface);
  font-family: var(--qs-font-display);
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  outline: none;
  color: var(--qs-ink);
  transition: all var(--qs-t);
}
.qs-pin-input:focus { border-color: var(--qs-brand); box-shadow: 0 0 0 3px var(--qs-brand-soft); }
.qs-pin-input.filled { background: var(--qs-ink); color: #fff; border-color: var(--qs-ink); }

/* ──────────────────────────────────────────────────────────────────────────── */

/* ============================================================================
   Componentes V2 · iteración 6 (ajustes + onboarding + control-peso GLP-1)
   ============================================================================ */

/* ─── Toggle switch genérico V2 ──────────────────────────────────────────── */
.qs-toggle {
  width: 44px; height: 26px;
  border-radius: 999px;
  background: var(--qs-line-2);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--qs-t);
  border: 0;
}
.qs-toggle.is-on { background: var(--qs-brand); }
.qs-toggle::after {
  content: ''; position: absolute;
  width: 20px; height: 20px;
  background: #fff; border-radius: 50%;
  top: 3px; left: 3px;
  transition: transform var(--qs-t);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.qs-toggle.is-on::after { transform: translateX(18px); }

/* ─── Settings list / row (notif, accesibilidad) ─────────────────────────── */
.qs-set-list {
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-r22);
  padding: 0 18px;
}
.qs-set-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--qs-line);
}
.qs-set-row:last-child { border-bottom: none; }
.qs-set-row-icon {
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--qs-surface-2);
  color: var(--qs-ink);
  display: grid; place-items: center; flex-shrink: 0;
}
.qs-set-row-icon svg, .qs-set-row-icon i { width: 18px; height: 18px; stroke-width: 2; }
.qs-set-row-main { flex: 1; min-width: 0; }
.qs-set-row-title { font-weight: 600; font-size: 14px; color: var(--qs-ink); }
.qs-set-row-sub { font-size: 12px; color: var(--qs-muted); margin-top: 2px; line-height: 1.4; }
.qs-set-row-chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.qs-set-row-chip {
  font-size: 9.5px; font-weight: 700; padding: 3px 7px; border-radius: 999px;
  background: var(--qs-surface-2); color: var(--qs-muted);
  letter-spacing: 0.04em; text-transform: uppercase;
}
/* A11y · contraste AA en chips. Originalmente .sms tenía #B97A0F sobre
   #FFEFD6 (3.17:1). Subimos a amber-text #92400E (≈5.5:1). */
.qs-set-row-chip.push  { background: #DBEAFE; color: var(--qs-blue); }
.qs-set-row-chip.email { background: var(--qs-brand-soft); color: var(--qs-brand-2); }
.qs-set-row-chip.sms   { background: #FFEFD6; color: var(--qs-amber-text, #92400E); }

/* ─── Channel grid (Push / Email / SMS) ──────────────────────────────────── */
.qs-channel-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.qs-channel-card {
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-r22);
  padding: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.qs-channel-card-icon {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
}
.qs-channel-card-icon.push  { background: #DBEAFE; color: var(--qs-blue); }
.qs-channel-card-icon.email { background: var(--qs-brand-soft); color: var(--qs-brand-2); }
.qs-channel-card-icon.sms   { background: #FFEFD6; color: #B97A0F; }
.qs-channel-card-icon svg, .qs-channel-card-icon i { width: 19px; height: 19px; stroke-width: 2; }
.qs-channel-card-lbl { font-size: 12px; font-weight: 600; color: var(--qs-ink); }

/* ─── Language row con flag ──────────────────────────────────────────────── */
.qs-lang-list {
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-r22);
  padding: 4px 18px;
}
.qs-lang-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--qs-line);
  cursor: pointer;
}
.qs-lang-row:last-child { border-bottom: none; }
.qs-lang-flag {
  width: 36px; height: 36px;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--qs-line);
  flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 18px;
}
.qs-lang-flag svg { width: 100%; height: 100%; display: block; }
.qs-lang-main { flex: 1; min-width: 0; }
.qs-lang-title { font-weight: 600; font-size: 14px; color: var(--qs-ink); }
.qs-lang-sub { font-size: 11.5px; color: var(--qs-muted); margin-top: 2px; }
.qs-lang-check {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--qs-line); flex-shrink: 0;
  display: grid; place-items: center; color: transparent;
  transition: all var(--qs-t);
}
.qs-lang-row.active .qs-lang-check { background: var(--qs-brand); border-color: var(--qs-brand); color: #fff; }
/* A11y · opacity 0.6 reducía el contraste de muted/ink a 2.54:1 / 4.45:1.
   Subimos a 0.88 que sigue mostrando jerarquía visual pero mantiene AA. */
.qs-lang-row.inactive { opacity: 0.88; }
.qs-lang-check svg, .qs-lang-check i { width: 14px; height: 14px; stroke-width: 3; }

/* ─── Contrast tile grid (accesibilidad) ─────────────────────────────────── */
.qs-contrast-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.qs-contrast-tile {
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-r-md);
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all var(--qs-t);
}
.qs-contrast-tile.active { border-color: var(--qs-brand); box-shadow: 0 0 0 2px var(--qs-brand-soft); }
.qs-contrast-preview {
  width: 100%; aspect-ratio: 1.6;
  border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--qs-font-display); font-size: 22px;
  margin-bottom: 8px;
}
.qs-contrast-preview.default { background: var(--qs-bg); color: var(--qs-ink); }
.qs-contrast-preview.high    { background: #fff; color: #000; font-weight: 700; border: 1px solid var(--qs-line); }
.qs-contrast-preview.dark    { background: #0A1F33; color: #5EEAD4; }
.qs-contrast-lbl { font-size: 11.5px; font-weight: 600; color: var(--qs-ink); }
.qs-contrast-sub { font-size: 10px; color: var(--qs-text-3); margin-top: 2px; }

/* ─── Text-size slider (accesibilidad) ───────────────────────────────────── */
.qs-text-size-preview {
  padding: 16px;
  background: var(--qs-bg);
  border-radius: var(--qs-r-md);
  margin-bottom: 14px;
  text-align: center;
}
.qs-text-size-preview-title {
  font-family: var(--qs-font-display);
  color: var(--qs-ink); line-height: 1.2;
}
.qs-text-size-preview-title em { font-style: italic; color: var(--qs-brand); }
.qs-text-size-preview-body { color: var(--qs-muted); margin-top: 4px; line-height: 1.4; }

/* ─── Onboarding ────────────────────────────────────────────────────────── */
.qs-onb-frame {
  position: fixed; inset: 0;
  background: linear-gradient(160deg, #0A1F33 0%, #143A66 60%, #1A4DBF 110%);
  color: #fff;
  display: flex; flex-direction: column;
  z-index: 99998;
  overflow: hidden;
}
.qs-onb-skip {
  position: absolute; top: 16px; right: 18px;
  background: rgba(255,255,255,.12);
  color: #fff; border: 0;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  z-index: 2;
}
.qs-onb-slider {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.qs-onb-slider::-webkit-scrollbar { display: none; }
.qs-onb-slide {
  min-width: 100%;
  scroll-snap-align: center;
  display: flex; flex-direction: column;
  padding: 60px 26px 24px;
}
.qs-onb-art {
  flex: 1;
  display: grid; place-items: center;
  position: relative;
  max-height: 320px;
  min-height: 220px;
  margin-bottom: 24px;
}
.qs-onb-blob {
  position: absolute; inset: 15%;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}
.qs-onb-illus { position: relative; z-index: 1; width: 80%; max-width: 280px; height: auto; }
.qs-onb-eyebrow {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.6);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 10px;
}
.qs-onb-headline {
  font-family: var(--qs-font-display);
  font-size: 30px; line-height: 1.05;
  letter-spacing: -0.02em; font-weight: 400;
  color: #fff;
  margin-bottom: 12px;
  max-width: 320px;
}
.qs-onb-headline em { font-style: italic; color: #7AB5F0; }
.qs-onb-body {
  font-size: 13.5px;
  color: rgba(255,255,255,.7);
  line-height: 1.55;
  max-width: 340px;
}
.qs-onb-footer {
  padding: 18px 22px calc(22px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
.qs-onb-dots { display: flex; gap: 6px; justify-content: center; }
.qs-onb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  transition: all var(--qs-t);
}
.qs-onb-dot.active { background: var(--qs-brand); width: 24px; border-radius: 4px; }
.qs-onb-actions { display: flex; gap: 10px; align-items: center; }
.qs-onb-actions .qs-btn { flex: 1; }
.qs-onb-arrow {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--qs-brand);
  color: #fff;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  box-shadow: var(--qs-shadow-glow);
}
.qs-onb-arrow svg { width: 22px; height: 22px; stroke-width: 2.4; }

/* ─── GLP-1 Weight program ───────────────────────────────────────────────── */
.qs-glp-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700;
  color: var(--qs-brand-2);
  background: var(--qs-brand-soft);
  padding: 5px 10px; border-radius: 999px;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 12px;
}
.qs-glp-eyebrow svg, .qs-glp-eyebrow i { width: 13px; height: 13px; }
.qs-glp-title {
  font-family: var(--qs-font-display);
  font-size: 32px; line-height: 1.05;
  letter-spacing: -0.02em; font-weight: 400;
  color: var(--qs-ink);
}
.qs-glp-title em { font-style: italic; color: var(--qs-brand); }
.qs-glp-sub {
  font-size: 14px; color: var(--qs-muted);
  margin-top: 12px; line-height: 1.5;
}
.qs-glp-sub b { color: var(--qs-ink); font-weight: 700; }

.qs-glp-progress {
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-r-2xl, 36px);
  padding: 20px;
  margin: 18px 0;
}
.qs-glp-progress-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px;
}
.qs-glp-progress-title {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--qs-text-3);
}
.qs-glp-progress-sub {
  font-family: var(--qs-font-display); font-size: 18px;
  color: var(--qs-mint); font-style: italic;
}
.qs-glp-progress-main {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.qs-glp-progress-weight {
  font-family: var(--qs-font-display); font-size: 48px;
  line-height: 1; color: var(--qs-ink);
  letter-spacing: -0.03em;
}
.qs-glp-progress-weight-unit {
  font-size: 18px; color: var(--qs-text-3);
  font-family: var(--qs-font-body); font-weight: 600;
  margin-left: 2px;
}
.qs-glp-progress-delta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(0,184,148,.12);
  color: var(--qs-mint);
  font-size: 12px; font-weight: 700;
}
.qs-glp-progress-delta svg { width: 12px; height: 12px; }
.qs-glp-progress-chart svg { width: 100%; height: 80px; }
.qs-glp-progress-bar {
  display: flex; justify-content: space-between;
  padding-top: 14px; margin-top: 8px;
  border-top: 1px dashed var(--qs-line);
}
.qs-glp-bar-block {
  font-size: 10.5px; color: var(--qs-muted);
  text-align: center; flex: 1;
}
.qs-glp-bar-num {
  display: block;
  font-family: var(--qs-font-display); font-size: 19px;
  color: var(--qs-ink); margin-bottom: 2px;
}
.qs-glp-bar-num em { font-style: italic; color: var(--qs-brand); font-size: 14px; }

.qs-glp-steps { display: flex; flex-direction: column; gap: 10px; }
.qs-glp-step {
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: var(--qs-r22);
  padding: 16px;
  display: flex; gap: 14px; align-items: flex-start;
}
.qs-glp-step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--qs-brand-soft);
  color: var(--qs-brand-2);
  display: grid; place-items: center;
  font-family: var(--qs-font-display); font-size: 17px;
  flex-shrink: 0;
}
.qs-glp-step-main { flex: 1; min-width: 0; }
.qs-glp-step-title { font-weight: 700; font-size: 14px; color: var(--qs-ink); }
.qs-glp-step-sub { font-size: 12px; color: var(--qs-muted); margin-top: 3px; line-height: 1.4; }

.qs-glp-compliance {
  background: var(--qs-surface); border: 1px solid var(--qs-line);
  border-radius: var(--qs-r22); padding: 16px; text-align: center;
}
.qs-glp-compliance-title {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--qs-text-3); font-weight: 700; margin-bottom: 10px;
}
.qs-glp-compliance-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.qs-glp-compliance-chip {
  padding: 8px 4px; font-size: 9.5px; font-weight: 700;
  background: var(--qs-surface-2); border: 1px solid var(--qs-line);
  border-radius: 10px; color: var(--qs-ink);
  line-height: 1.2;
}

.qs-glp-cta {
  padding: 24px 22px;
  background: linear-gradient(135deg, var(--qs-ink) 0%, var(--qs-brand) 100%);
  color: #fff;
  border-radius: var(--qs-r-2xl, 36px);
  box-shadow: var(--qs-shadow-glow);
  position: relative; overflow: hidden;
  text-align: center;
}
.qs-glp-cta::before {
  content: ''; position: absolute;
  right: -60px; top: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46,92,144,.4), transparent 60%);
  pointer-events: none;
}
.qs-glp-cta-title {
  font-family: var(--qs-font-display);
  font-size: 26px; line-height: 1.1; letter-spacing: -0.015em;
  margin-bottom: 8px; position: relative; z-index: 1;
}
.qs-glp-cta-title em { font-style: italic; color: #7AB5F0; }
.qs-glp-cta-sub {
  font-size: 13px; opacity: 0.75;
  margin-bottom: 18px; line-height: 1.5;
  position: relative; z-index: 1;
}
.qs-glp-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  background: #fff; color: var(--qs-ink);
  border-radius: 999px;
  font-weight: 700; font-size: 14px;
  border: 0; cursor: pointer;
  text-decoration: none;
  position: relative; z-index: 1;
}
.qs-glp-cta-btn svg { width: 14px; height: 14px; stroke-width: 2.5; }
.qs-glp-cta-fine {
  font-size: 10.5px; opacity: 0.6;
  margin-top: 12px;
  position: relative; z-index: 1;
}

/* ──────────────────────────────────────────────────────────────────────────── */

/* ============================================================================
   Componentes V2 · iteración 2 (wizard de reserva: book_step1/2/3 + success)
   ============================================================================ */

/* ─── Wizard frame + progress ────────────────────────────────────────────── */
.qs-wizard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0 14px;
}
.qs-wizard-back {
  /* A11y · Touch target 44×44 mínimo (Apple HIG iOS / Material Android). */
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  display: grid; place-items: center;
  color: var(--qs-ink);
  cursor: pointer;
  /* Sin borrar el padding default de <button> */
  padding: 0;
  flex-shrink: 0;
}
.qs-wizard-back svg, .qs-wizard-back i { width: 20px; height: 20px; stroke-width: 2; }
.qs-wizard-title { font-size: 13px; font-weight: 600; color: var(--qs-text-2); letter-spacing: 0.01em; }

.qs-wizard-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}
.qs-wizard-progress div {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: var(--qs-line);
}
.qs-wizard-progress div.done { background: var(--qs-ink); }
.qs-wizard-progress div.current {
  background: linear-gradient(90deg, var(--qs-ink) 60%, var(--qs-line) 60%);
}

.qs-step-num {
  color: var(--qs-text-3);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 6px;
}
.qs-step-title {
  font-family: var(--qs-font-display);
  font-size: 32px; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--qs-ink);
  max-width: 320px;
}
.qs-step-title em { font-style: italic; color: var(--qs-brand); }
.qs-step-sub { color: var(--qs-muted); margin-top: 10px; font-size: 14px; line-height: 1.45; }

/* ─── Specialty grid (book_step1 — services) ─────────────────────────────── */
.qs-spec-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.qs-spec {
  background: var(--qs-surface);
  border-radius: var(--qs-r22);
  padding: 16px;
  border: 1px solid var(--qs-line);
  cursor: pointer;
  transition: transform var(--qs-t), box-shadow var(--qs-t);
  position: relative;
  text-decoration: none;
  color: inherit;
}
.qs-spec:hover { transform: translateY(-2px); box-shadow: var(--qs-shadow); }
.qs-spec.selected { border-color: var(--qs-ink); box-shadow: var(--qs-shadow); }
.qs-spec.selected::after {
  content: '✓';
  position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--qs-ink); color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 900;
}
.qs-spec-icon {
  width: 42px; height: 42px;
  border-radius: 14px;
  background: var(--qs-brand-soft);
  color: var(--qs-brand-2);
  display: grid; place-items: center;
  margin-bottom: 12px;
}
.qs-spec-icon svg, .qs-spec-icon i { width: 20px; height: 20px; stroke-width: 1.8; }
.qs-spec-title { font-weight: 700; font-size: 14px; color: var(--qs-ink); }
.qs-spec-sub { font-size: 11.5px; color: var(--qs-text-3); margin-top: 3px; }

/* Specialty color tokens — mapeo V2 → categorías Amelia */
.qs-spec.qs-spec-medfam .qs-spec-icon  { background: #E5E7EB;          color: var(--qs-ink); }
.qs-spec.qs-spec-cardio .qs-spec-icon  { background: var(--qs-coral-soft); color: var(--qs-coral); }
.qs-spec.qs-spec-mente .qs-spec-icon   { background: var(--qs-violet-soft); color: var(--qs-violet); }
.qs-spec.qs-spec-ginec .qs-spec-icon   { background: #FCE7F3;           color: #DB2777; }
.qs-spec.qs-spec-pediat .qs-spec-icon  { background: #CFFAFE;           color: #0891B2; }
.qs-spec.qs-spec-fisio .qs-spec-icon   { background: var(--qs-brand-soft); color: var(--qs-brand-2); }
.qs-spec.qs-spec-derma .qs-spec-icon   { background: #FFEFD6;           color: #B97A0F; }
.qs-spec.qs-spec-trauma .qs-spec-icon  { background: #ECFCCB;           color: #65A30D; }

/* ─── Modality cards (book_step2 — modalidad) ────────────────────────────── */
.qs-mod-list {
  margin-top: 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.qs-mod {
  background: var(--qs-surface);
  border-radius: var(--qs-r22);
  padding: 18px;
  border: 1px solid var(--qs-line);
  display: flex; gap: 14px; align-items: center;
  cursor: pointer;
  transition: transform var(--qs-t), box-shadow var(--qs-t);
  position: relative;
  text-decoration: none;
  color: inherit;
}
.qs-mod:hover { box-shadow: var(--qs-shadow); }
.qs-mod.selected { border-color: var(--qs-ink); box-shadow: var(--qs-shadow); }
.qs-mod.selected::after {
  content: '✓';
  position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--qs-ink); color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 900;
}
.qs-mod-icon {
  width: 50px; height: 50px;
  border-radius: 16px;
  background: var(--qs-surface-2);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.qs-mod-icon svg, .qs-mod-icon i { width: 22px; height: 22px; stroke-width: 1.8; }
.qs-mod.qs-mod-video .qs-mod-icon  { background: #DBEAFE; color: var(--qs-blue); }
.qs-mod.qs-mod-phone .qs-mod-icon  { background: var(--qs-brand-soft); color: var(--qs-brand-2); }
.qs-mod.qs-mod-clinic .qs-mod-icon { background: var(--qs-coral-soft); color: var(--qs-coral); }
.qs-mod-main { flex: 1; min-width: 0; }
.qs-mod-title { font-weight: 700; font-size: 15px; color: var(--qs-ink); }
.qs-mod-sub { font-size: 12.5px; color: var(--qs-muted); margin-top: 3px; line-height: 1.4; }

/* ─── Doctor cards (book_step2 — provider list) ──────────────────────────── */
.qs-doc-list {
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.qs-doc {
  background: var(--qs-surface);
  border-radius: var(--qs-r22);
  padding: 14px;
  border: 1px solid var(--qs-line);
  display: flex; gap: 12px; align-items: flex-start;
  cursor: pointer;
  transition: box-shadow var(--qs-t);
  text-decoration: none;
  color: inherit;
}
.qs-doc:hover { box-shadow: var(--qs-shadow); }
.qs-doc.selected { border-color: var(--qs-ink); box-shadow: var(--qs-shadow); }
.qs-doc-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--qs-brand), var(--qs-ink));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 15px;
  flex-shrink: 0;
  overflow: hidden;
}
.qs-doc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qs-doc-main { flex: 1; min-width: 0; }
.qs-doc-name { font-weight: 700; font-size: 14.5px; color: var(--qs-ink); }
.qs-doc-spec { font-size: 12px; color: var(--qs-muted); margin-top: 2px; }
.qs-doc-meta {
  display: flex; gap: 12px; margin-top: 8px;
  font-size: 11.5px; color: var(--qs-text-2);
  flex-wrap: wrap;
}
.qs-doc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.qs-doc-meta svg, .qs-doc-meta i { width: 12px; height: 12px; }
.qs-doc-tag {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  color: var(--qs-brand-2);
  background: var(--qs-brand-soft);
  padding: 2px 8px; border-radius: 999px;
  margin-top: 4px;
}

/* ─── Slot pills (book_step3 — horarios) ─────────────────────────────────── */
.qs-slot-day-label {
  /* BUG-FIX · subido de 11px a 14px y color más oscuro para que las cabeceras
     de día (JUE 28 MAY, VIE 29 MAY…) sean fácilmente distinguibles entre
     bloques de horarios. Reporte QA · mayo 2026. */
  font-size: 14px; font-weight: 800; color: var(--qs-ink);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin: 18px 0 8px;
}
.qs-slot-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.qs-slot-pill {
  padding: 12px 0;
  text-align: center;
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: 12px;
  font-size: 13px; font-weight: 600; color: var(--qs-ink);
  cursor: pointer;
  font-family: var(--qs-font-body);
  transition: all var(--qs-t);
}
.qs-slot-pill:hover { border-color: var(--qs-brand); }
.qs-slot-pill.selected { background: var(--qs-ink); color: #fff; border-color: var(--qs-ink); }
.qs-slot-pill.disabled { color: var(--qs-text-3); opacity: 0.5; cursor: not-allowed; }

/* Featured slot — primer hueco destacado */
.qs-slot-featured {
  cursor: pointer;
  border-radius: var(--qs-r22);
  padding: 16px;
  background: linear-gradient(135deg, var(--qs-brand-soft), rgba(46,92,144,.04));
  border: 1.5px solid var(--qs-brand);
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 12px;
  transition: transform var(--qs-t);
}
.qs-slot-featured:hover { transform: translateY(-1px); }
.qs-slot-featured-ic {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--qs-brand); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(46,92,144,.32);
}
.qs-slot-featured-ic svg, .qs-slot-featured-ic i { width: 22px; height: 22px; }
.qs-slot-featured-main { flex: 1; min-width: 0; }
.qs-slot-featured-eyebrow {
  font-size: 10.5px; font-weight: 800; color: var(--qs-brand);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.qs-slot-featured-time {
  font-family: var(--qs-font-display); font-size: 18px; line-height: 1;
  color: var(--qs-ink); margin-top: 4px;
}
.qs-slot-featured-sub {
  font-size: 12px; color: var(--qs-muted); margin-top: 4px;
}

/* ─── Confirm card (book_step3 — resumen + summary rows) ─────────────────── */
.qs-confirm-card {
  background: var(--qs-surface);
  border-radius: var(--qs-r22);
  padding: 18px;
  border: 1px solid var(--qs-line);
}
.qs-confirm-head {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 14px;
}
.qs-confirm-title {
  font-family: var(--qs-font-display);
  font-size: 24px; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--qs-ink);
}
.qs-confirm-title em { font-style: italic; color: var(--qs-brand); }
.qs-sum-rows { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.qs-sum-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px dashed var(--qs-line);
}
.qs-sum-row:last-child { border-bottom: 0; padding-bottom: 0; }
.qs-sum-row-ico {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--qs-surface-2);
  display: grid; place-items: center;
  color: var(--qs-ink); flex-shrink: 0;
}
.qs-sum-row-ico svg, .qs-sum-row-ico i { width: 16px; height: 16px; stroke-width: 2; }
.qs-sum-row-main { flex: 1; min-width: 0; }
.qs-sum-row-label {
  font-size: 10.5px; color: var(--qs-text-3);
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.qs-sum-row-value { font-weight: 600; font-size: 14px; margin-top: 3px; color: var(--qs-ink); }

/* Tip card (Asistente IA debajo del confirm) */
.qs-tip-card {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--qs-brand-soft);
  border-radius: var(--qs-r-md);
  display: flex; gap: 10px; align-items: flex-start;
}
.qs-tip-card-ic {
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--qs-brand-2); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
}
.qs-tip-card-ic svg, .qs-tip-card-ic i { width: 15px; height: 15px; }
.qs-tip-card-text { font-size: 12.5px; color: var(--qs-brand-2); line-height: 1.4; }
.qs-tip-card-text b { font-weight: 700; }

/* ─── Booking success / failed — orbe celebración ────────────────────────── */
.qs-success-stage {
  text-align: center;
  padding: 40px 24px 30px;
}
.qs-success-orb {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--qs-mint) 55%, #0F8A7C 100%);
  margin: 0 auto;
  display: grid; place-items: center;
  box-shadow: 0 20px 40px -10px rgba(0,184,148,.5);
  position: relative;
}
.qs-success-orb::before, .qs-success-orb::after {
  content: ''; position: absolute; inset: -8px;
  border: 2px solid rgba(0,184,148,.3);
  border-radius: 50%;
  animation: qsOrbPulse 2.4s cubic-bezier(.16,.84,.44,1) infinite;
}
.qs-success-orb::after { animation-delay: 1.2s; }
.qs-success-orb svg, .qs-success-orb i { width: 50px; height: 50px; color: #fff; stroke-width: 3; }
@keyframes qsOrbPulse {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.4);  opacity: 0; }
}
.qs-fail-orb {
  background: radial-gradient(circle at 30% 30%, #fff, var(--qs-coral) 55%, #B22222 100%);
  box-shadow: 0 20px 40px -10px rgba(244,86,75,.5);
}
.qs-fail-orb::before, .qs-fail-orb::after { border-color: rgba(244,86,75,.3); }
.qs-success-title {
  font-family: var(--qs-font-display);
  font-size: 32px; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--qs-ink);
  margin-top: 22px;
}
.qs-success-title em { font-style: italic; color: var(--qs-brand); }
.qs-success-sub {
  font-size: 14px; color: var(--qs-muted);
  margin-top: 10px; line-height: 1.45;
}

/* ── Accesibilidad (slider + toggles funcionales) ───────────────────────── */
:root { --qs-a11y-scale: 1; }
html { font-size: calc(16px * var(--qs-a11y-scale, 1)); }
html[data-a11y-reduce-motion="on"] *,
html[data-a11y-reduce-motion="on"] *::before,
html[data-a11y-reduce-motion="on"] *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
html[data-a11y-dyslexic-font="on"] body,
html[data-a11y-dyslexic-font="on"] .qs-app-wrapper,
html[data-a11y-dyslexic-font="on"] .qs-app-wrapper * {
  font-family: "OpenDyslexic","Comic Sans MS","Verdana",sans-serif !important;
  letter-spacing: 0.02em !important;
}
html[data-a11y-contrast="high"] body {
  --qs-ink: #000;
  --qs-muted: #1a1a1a;
  --qs-text-3: #1a1a1a;
  --qs-surface: #fff;
  --qs-line: #000;
}
html[data-a11y-contrast="high"] .qs-btn,
html[data-a11y-contrast="high"] .qs-card,
html[data-a11y-contrast="high"] .qs-tile {
  border-width: 2px !important;
}
html[data-a11y-contrast="dark"] body {
  --qs-ink: #f0f0f0;
  --qs-muted: #b0b0b0;
  --qs-text-3: #b0b0b0;
  --qs-surface: #1a1d24;
  --qs-line: #2c303a;
  background: #0e1117 !important;
}

/* ── AI Engine embed inline (#qs-ai-embed) ────────────────────────────────
   AI Engine renderiza el chat con `mwai-bottom-right` y `mwai-fullscreen`
   por defecto, que lo posicionan como overlay o FAB ocupando 0×0 dentro
   del contenedor. Forzamos position estática, dimensiones fijas y ocultamos
   el botón "Open chat" para que el chat aparezca embebido inline dentro
   de la vista /ai_assistant. */
#qs-ai-embed .mwai-chatbot-container,
#qs-ai-embed .mwai-chat {
  position: static !important;
  inset: auto !important;
  top: auto !important; right: auto !important;
  bottom: auto !important; left: auto !important;
  width: 100% !important;
  height: 480px !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  border-radius: 14px !important;
  transform: none !important;
  z-index: auto !important;
  margin: 0 !important;
  display: block !important;
}
#qs-ai-embed .mwai-open-button { display: none !important; }
#qs-ai-embed .mwai-chat .mwai-content,
#qs-ai-embed .mwai-chat .mwai-input,
#qs-ai-embed .mwai-chat .mwai-conversation {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ── Wrapper margin reset · neutraliza CSS del theme externo ──────────────
   El theme Bricks (o un plugin externo) aplica `margin-top: -70px` al
   .qs-app-wrapper cuando el body se renderiza con `non-logged-in`. Eso
   empuja toda la app arriba ocultando la topbar. La regla se aplica al
   recargar la página tras cambiar idioma porque GTranslate fuerza un reload
   y, en ese instante, las cookies de sesión todavía no se reestablecen, así
   que PHP renderiza con `non-logged-in`. Después el login AJAX cambia la
   clase del body, pero el CSS del theme TAMBIÉN tiene una regla genérica
   `.qs-app-wrapper { margin-top: -70px }` (sin filtro por sesión) que sigue
   activa.

   Solución: forzar margin-top:0 con specificity `html body` para ganar a
   cualquier regla del theme.  */
html body .qs-app-wrapper,
html body div.qs-app-wrapper {
  margin-top: 0 !important;
}

/* ── Ocultar banner de cookies Usercentrics dentro de la app PWA ─────────
   El sitio público qsalud.com integra Usercentrics CMP. En la app la página
   ya tiene su propia política y consentimiento (firma RGPD en /register +
   /legal_privacy). Mostrar otro banner dentro de la PWA confunde al paciente.
   Ocultamos cualquier elemento que monte Usercentrics. */
[id^="usercentrics"], [id^="uc-"], [class^="uc-"],
[class*="uc-banner"], [class*="uc-embedding"], [data-testid^="uc-"],
.usercentrics-button, #privacy-button, .uc-overlay,
[id^="usercentrics-root"], [data-cmp-host="usercentrics"] {
  display: none !important;
  visibility: hidden !important;
}

/* ── Login/register/recover/pin: eliminar espacio extra abajo ─────────────
   Las views de auth usan .qs-auth-frame. El #qs-main-content lleva
   padding-bottom: 130px reservado para tabbar+stickyCTA, pero en auth no
   hay tabbar ni sticky → ese padding aparece como hueco vacío grande bajo
   "¿Eres nuevo? Crear cuenta". Lo neutralizamos con :has(). */
html body main#qs-main-content:has(.qs-auth-frame) { padding-bottom: 24px !important; }
html body .qs-container:has(.qs-auth-frame)        { padding-bottom: 0 !important; padding-top: 0 !important; }
.qs-auth-frame { min-height: auto !important; }

/* ── Login/auth · eliminar espacio extra abajo (fix confirmado) ───────────
   Las views de auth usan .qs-auth-frame. El #qs-main-content lleva
   padding-bottom: 124px reservado para tabbar+stickyCTA, pero en auth no
   hay tabbar ni sticky → ese padding aparece como hueco vacío. */
html body main#qs-main-content:has(.qs-auth-frame) { padding-bottom: 24px !important; }
html body .qs-container:has(.qs-auth-frame)        { padding-bottom: 0 !important; padding-top: 0 !important; }
.qs-auth-frame { min-height: auto !important; }

/* ── Reducir padding inferior del container cuando no hay sticky CTA ─────
   El sticky CTA se eliminó del dashboard en v1.0.5+. El padding-bottom
   genérico de 124px deja hueco. Reducimos al espacio mínimo del tabbar. */
html body .qs-app-wrapper { min-height: auto !important; }
html body:not(.qs-has-sticky-cta) .qs-container {
  padding-bottom: 76px !important;
}