/* =====================================================================
   CANNA420 — ClientForm (Client Assessment Form)
   Everything is namespaced under .ts-client-form with --cf-* tokens, so
   the form's palette never leaks into the theme (no :root / body
   overrides). Light skin by default; the dark one lives behind
   [data-theme="dark"] and the toggle in the header.
   Prefix: cf-
   ===================================================================== */

/* --------------------------------------------------------------------
   Tokens — light clinical panel by default, scoped, never global
   -------------------------------------------------------------------- */
.ts-client-form {
  --cf-bg: #f1f7f4;
  --cf-bg-card: #ffffff;
  --cf-bg-card-hover: #f7fbf9;
  --cf-bg-input: #ffffff;
  --cf-border: rgba(31, 92, 69, 0.16);
  --cf-border-focus: #2f6b53;

  --cf-primary: #1f5c45;
  --cf-primary-hover: #174a37;
  --cf-primary-light: #2f6b53;
  --cf-accent: #2f9c74;
  --cf-text: #10231c;
  --cf-text-muted: #5f7a70;
  --cf-text-dark: #0b1511;
  --cf-on-primary: #ffffff;

  --cf-shadow-sm: 0 4px 12px rgba(16, 42, 33, 0.08);
  --cf-shadow-lg: 0 12px 36px rgba(16, 42, 33, 0.16);
  --cf-shadow-btn: 0 4px 14px rgba(31, 92, 69, 0.24);
  --cf-shadow-btn-hover: 0 6px 20px rgba(31, 92, 69, 0.3);
  --cf-glass: rgba(255, 255, 255, 0.9);
  --cf-glass-border: rgba(31, 92, 69, 0.1);

  /* Superficies suaves, carril del progreso y decoración de fondo */
  --cf-soft: rgba(31, 92, 69, 0.07);
  --cf-soft-strong: rgba(31, 92, 69, 0.12);
  --cf-track: rgba(16, 42, 33, 0.1);
  --cf-summary-bg: #f6faf8;
  --cf-overlay: rgba(10, 26, 20, 0.55);
  --cf-focus-ring: rgba(47, 107, 83, 0.18);
  --cf-hover-border: rgba(47, 107, 83, 0.4);
  --cf-blob-1: rgba(82, 183, 136, 0.16);
  --cf-blob-2: rgba(47, 107, 83, 0.1);

  --cf-font: 'Outfit', 'Inter', var(--ts-font-sans);
  --cf-radius-sm: 8px;
  --cf-radius-lg: 20px;
  --cf-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Optional dark skin inside the panel (toggle) */
.ts-client-form[data-theme="dark"] {
  --cf-bg: #0b1511;
  --cf-bg-card: rgba(18, 36, 28, 0.75);
  --cf-bg-card-hover: rgba(26, 51, 40, 0.85);
  --cf-bg-input: rgba(10, 22, 17, 0.8);
  --cf-border: rgba(64, 145, 108, 0.25);
  --cf-border-focus: #52b788;

  --cf-primary: #40916c;
  --cf-primary-hover: #52b788;
  --cf-primary-light: #74c69d;
  --cf-accent: #b7e4c7;
  --cf-text: #f0f7f4;
  --cf-text-muted: #95a5a0;

  --cf-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
  --cf-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.5);
  --cf-shadow-btn: 0 4px 14px rgba(64, 145, 108, 0.4);
  --cf-shadow-btn-hover: 0 6px 20px rgba(82, 183, 136, 0.5);
  --cf-glass: rgba(16, 33, 26, 0.65);
  --cf-glass-border: rgba(255, 255, 255, 0.08);

  --cf-soft: rgba(64, 145, 108, 0.2);
  --cf-soft-strong: rgba(64, 145, 108, 0.28);
  --cf-track: rgba(255, 255, 255, 0.1);
  --cf-summary-bg: rgba(0, 0, 0, 0.2);
  --cf-overlay: rgba(0, 0, 0, 0.8);
  --cf-focus-ring: rgba(82, 183, 136, 0.2);
  --cf-hover-border: rgba(82, 183, 136, 0.4);
  --cf-blob-1: rgba(64, 145, 108, 0.15);
  --cf-blob-2: rgba(45, 106, 79, 0.12);
}

/* --------------------------------------------------------------------
   Shell — light floating panel inside the page
   -------------------------------------------------------------------- */
/* No extra vertical rhythm of its own: the previous section (#contact)
   already contributes 64–120px below the "Order now." band, and the
   footer adds .ts-main padding + its own margin-top. Zeroing padding
   here makes the form fill exactly that gap — it touches neither the
   band above nor the footer below. */
.ts-section.ts-client-form { padding-block: 0; }

/* Página «solo el formulario» (plantilla del plugin para pruebas y revisiones
   del cliente): aquí no hay sección previa que aporte el aire, así que el
   formulario recupera su propio espacio arriba y abajo. */
.ts-main--form-only .ts-section.ts-client-form { padding-block: clamp(16px, 3vw, 40px); }

.ts-client-form .cf-shell {
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(20px, 3vw, 32px);
  color: var(--cf-text);
  font-family: var(--cf-font);
  line-height: 1.6;
  background-color: var(--cf-bg);
  background-image:
    radial-gradient(circle at 15% 15%, var(--cf-blob-1) 0%, transparent 40%),
    radial-gradient(circle at 85% 85%, var(--cf-blob-2) 0%, transparent 40%);
  border: 1px solid var(--cf-border);
  border-radius: var(--ts-radius-page);
  box-shadow: var(--ts-shadow-soft);
  /* clip (not hidden) so the sticky header keeps working; older engines
     fall back to hidden → header simply scrolls with the page. */
  overflow: hidden;
  overflow: clip;
}

.ts-client-form .cf-shell :where(h2, h3, p, ul, ol) { margin: 0; }
.ts-client-form .cf-shell img,
.ts-client-form .cf-shell svg { max-width: 100%; }

/* --------------------------------------------------------------------
   Header + progress
   -------------------------------------------------------------------- */
.ts-client-form .cf-header {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: calc(clamp(20px, 3vw, 32px) * -1);
  margin-bottom: 1.5rem;
  padding: 1rem clamp(20px, 3vw, 32px);
  background: var(--cf-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--cf-glass-border);
}

.ts-client-form .cf-header__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
}

.ts-client-form .cf-brand { display: flex; align-items: center; gap: 0.75rem; }

.ts-client-form .cf-brand__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--ts-radius-full);
  background: var(--cf-soft);
  border: 1px solid var(--cf-border);
  font-size: 1.05rem;
}

.ts-client-form .cf-brand__title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cf-text);
}

.ts-client-form .cf-header__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.ts-client-form .cf-progress { margin-top: 0.85rem; }

.ts-client-form .cf-progress__info {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--cf-text-muted);
  margin-bottom: 0.35rem;
}

.ts-client-form .cf-progress__percent { font-weight: 700; color: var(--cf-primary-light); }

.ts-client-form .cf-progress__bar {
  width: 100%;
  height: 6px;
  border-radius: 10px;
  background: var(--cf-track);
  overflow: hidden;
}

.ts-client-form .cf-progress__fill {
  height: 100%;
  width: 0%;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--cf-primary), var(--cf-primary-hover), var(--cf-accent));
  transition: width 0.4s ease-out;
}

/* --------------------------------------------------------------------
   Hero banner
   -------------------------------------------------------------------- */
.ts-client-form .cf-hero {
  position: relative;
  overflow: hidden;
  padding: 1.75rem;
  margin-bottom: 1.75rem;
  background: var(--cf-bg-card);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-sm);
}

.ts-client-form .cf-hero::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(to bottom, var(--cf-primary-light), var(--cf-primary));
}

.ts-client-form .cf-hero__title {
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.ts-client-form .cf-hero__desc { color: var(--cf-text-muted); font-size: 0.95rem; }

/* --------------------------------------------------------------------
   Sections / questions
   -------------------------------------------------------------------- */
.ts-client-form .cf-section {
  padding: clamp(20px, 3vw, 32px);
  margin-bottom: 1.75rem;
  background: var(--cf-bg-card);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-sm);
  transition: var(--cf-transition);
}

.ts-client-form .cf-section:hover { border-color: var(--cf-hover-border); }

.ts-client-form .cf-section__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--cf-border);
}

.ts-client-form .cf-section__badge {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--ts-radius-full);
  background: var(--cf-soft);
  border: 1px solid var(--cf-border);
  color: var(--cf-primary-light);
  font-size: 0.9rem;
  font-weight: 700;
}

.ts-client-form .cf-section__title { font-size: clamp(1.1rem, 2.2vw, 1.35rem); font-weight: 600; }

.ts-client-form .cf-question { margin-bottom: 2rem; }
.ts-client-form .cf-question:last-child { margin-bottom: 0; }

.ts-client-form .cf-question__label {
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--cf-text);
  margin-bottom: 0.75rem;
}

.ts-client-form .cf-question__num { color: var(--cf-primary-light); font-weight: 700; margin-right: 0.4rem; }

/* --------------------------------------------------------------------
   Conditional questions (15 ← 14, 22 ← 21, 24 ← 23)
   -------------------------------------------------------------------- */
.ts-client-form .cf-conditional {
  display: none;
  padding: 1.25rem;
  margin: 1rem 0 2rem;
  background: var(--cf-soft);
  border-left: 4px solid var(--cf-primary-light);
  border-radius: var(--cf-radius-sm);
}

.ts-client-form .cf-conditional.is-visible {
  display: block;
  animation: cf-fade-in 0.4s ease-out both;
}

@keyframes cf-fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------
   Inputs
   -------------------------------------------------------------------- */
.ts-client-form .cf-input,
.ts-client-form .cf-textarea {
  width: 100%;
  padding: 0.85rem 1.1rem;
  background-color: var(--cf-bg-input);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-sm);
  color: var(--cf-text);
  font-family: inherit;
  font-size: 1rem;
  transition: var(--cf-transition);
}

.ts-client-form .cf-input::placeholder,
.ts-client-form .cf-textarea::placeholder { color: var(--cf-text-muted); }

.ts-client-form .cf-input:focus,
.ts-client-form .cf-textarea:focus {
  outline: none;
  border-color: var(--cf-border-focus);
  box-shadow: 0 0 0 3px var(--cf-focus-ring);
}

.ts-client-form .cf-input:focus-visible,
.ts-client-form .cf-textarea:focus-visible,
.ts-client-form .cf-btn:focus-visible,
.ts-client-form .cf-pain__pill:focus-visible,
.ts-client-form .cf-option input:focus-visible {
  outline: 2px solid var(--cf-primary-light);
  outline-offset: 2px;
}

.ts-client-form .cf-textarea { resize: vertical; min-height: 90px; }

/* Campos con icono dentro (el icono es decorativo: aria-hidden en el markup) */
.ts-client-form .cf-field { position: relative; }

.ts-client-form .cf-field__icon {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--cf-text-muted);
  pointer-events: none;
}

.ts-client-form .cf-field__icon svg { display: block; width: 18px; height: 18px; }

.ts-client-form .cf-field .cf-input { padding-left: 2.7rem; }

/* Aviso de validación junto al campo (email, fecha de nacimiento). */
.ts-client-form .cf-field.is-invalid .cf-input,
.ts-client-form .cf-field.is-invalid .cf-textarea {
  border-color: #d64545;
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.16);
}

.ts-client-form .cf-error {
  margin: 0.5rem 0 0;
  color: #b32d2d;
  font-size: 0.88rem;
  font-weight: 600;
}

.ts-client-form .cf-error[hidden] { display: none; }

.ts-client-form[data-theme="dark"] .cf-error { color: #ffa8a8; }

.ts-client-form[data-theme="dark"] .cf-field.is-invalid .cf-input,
.ts-client-form[data-theme="dark"] .cf-field.is-invalid .cf-textarea { border-color: #ff8f8f; }

.ts-client-form .cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.ts-client-form .cf-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}

.ts-client-form .cf-options--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Preguntas que comparten fila con .cf-grid (20 y 27): tres columnas dentro
   de media fila recortan las etiquetas largas («Ocasionalmente»), así que
   dentro de la rejilla se apilan. */
.ts-client-form .cf-grid .cf-options--3 { grid-template-columns: 1fr; }

.ts-client-form .cf-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--cf-bg-input);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-sm);
  cursor: pointer;
  user-select: none;
  font-size: 0.95rem;
  transition: var(--cf-transition);
}

.ts-client-form .cf-option:hover { background: var(--cf-bg-card-hover); border-color: var(--cf-primary-light); }

.ts-client-form .cf-option input {
  accent-color: var(--cf-primary-light);
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  cursor: pointer;
}

.ts-client-form .cf-option.is-selected {
  background: var(--cf-soft-strong);
  border-color: var(--cf-primary-light);
  box-shadow: var(--cf-shadow-sm);
}

/* «Otro → especifique» */
.ts-client-form .cf-other { display: none; margin-top: 0.75rem; }
.ts-client-form .cf-other.is-visible { display: block; animation: cf-fade-in 0.3s ease-out both; }

/* --------------------------------------------------------------------
   Pain scale (Q17)
   -------------------------------------------------------------------- */
.ts-client-form .cf-pain { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }

/* Escala de dolor: los 11 números comparten exactamente el mismo tamaño y el
   elegido se agranda con un anillo, para que en el móvil se note cuál está
   marcado (antes solo cambiaba el color de fondo y casi no se apreciaba). */
.ts-client-form .cf-pain__pills {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 6px;
}

.ts-client-form .cf-pain__pill {
  position: relative;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--cf-bg-input);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-sm);
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: var(--cf-transition);
}

.ts-client-form .cf-pain__pill:hover { transform: translateY(-2px); }

.ts-client-form .cf-pain__pill[data-cf-pain="0"],
.ts-client-form .cf-pain__pill[data-cf-pain="1"],
.ts-client-form .cf-pain__pill[data-cf-pain="2"] { border-bottom: 4px solid #2a9d8f; }

.ts-client-form .cf-pain__pill[data-cf-pain="3"],
.ts-client-form .cf-pain__pill[data-cf-pain="4"],
.ts-client-form .cf-pain__pill[data-cf-pain="5"] { border-bottom: 4px solid #e9c46a; }

.ts-client-form .cf-pain__pill[data-cf-pain="6"],
.ts-client-form .cf-pain__pill[data-cf-pain="7"],
.ts-client-form .cf-pain__pill[data-cf-pain="8"] { border-bottom: 4px solid #f4a261; }

.ts-client-form .cf-pain__pill[data-cf-pain="9"],
.ts-client-form .cf-pain__pill[data-cf-pain="10"] { border-bottom: 4px solid #e63946; }

.ts-client-form .cf-pain__pill.is-active {
  z-index: 1;
  background: var(--cf-primary);
  color: var(--cf-on-primary);
  border-color: var(--cf-primary);
  box-shadow: 0 0 0 3px var(--cf-soft-strong), var(--cf-shadow-btn);
  font-size: 1.25rem;
  transform: scale(1.16);
}

.ts-client-form .cf-pain__display { font-size: 0.9rem; color: var(--cf-text-muted); text-align: center; }

/* --------------------------------------------------------------------
   Asistente por pasos (wizard) — la clase .is-stepped la pone client-form.js.
   Cada sección se parte en .cf-page de 2 preguntas como máximo; sin JS no
   existe nada de esto y el formulario se ve completo, como siempre.
   -------------------------------------------------------------------- */
.ts-client-form .cf-shell.is-stepped .cf-section { display: none; }
.ts-client-form .cf-shell.is-stepped .cf-section.is-active { display: block; }

.ts-client-form .cf-shell.is-stepped .cf-page { display: none; }

.ts-client-form .cf-shell.is-stepped .cf-page.is-active {
  display: block;
  animation: cf-step-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* El foco va a la página al cambiar de paso: sin anillo doble. */
.ts-client-form .cf-page:focus { outline: none; }

/* El hero es la intro del paso 1: al avanzar deja de ocupar scroll. */
.ts-client-form .cf-shell.is-hero-hidden .cf-hero { display: none; }

@keyframes cf-step-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Índice de pasos (una sola fila, con scroll si no cabe) */
.ts-client-form .cf-stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.1rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Sin JS el índice se queda vacío: que no deje hueco. */
.ts-client-form .cf-stepper:empty { display: none; }

.ts-client-form .cf-stepper__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  padding: 0.45rem 0.85rem;
  background: var(--cf-bg-card);
  border: 1px solid var(--cf-border);
  border-radius: var(--ts-radius-pill);
  color: var(--cf-text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--cf-transition);
}

.ts-client-form .cf-stepper__item:hover {
  color: var(--cf-text);
  border-color: var(--cf-primary-light);
}

.ts-client-form .cf-stepper__item:disabled {
  color: var(--cf-text-muted);
  cursor: not-allowed;
  opacity: 0.55;
}

.ts-client-form .cf-stepper__item:disabled:hover {
  border-color: var(--cf-border);
}

.ts-client-form .cf-stepper__num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--ts-radius-full);
  background: var(--cf-soft);
  border: 1px solid var(--cf-border);
  color: var(--cf-primary-light);
  font-size: 0.75rem;
  font-weight: 700;
}

.ts-client-form .cf-stepper__check { display: none; color: inherit; font-weight: 700; }

/* Estados: completado y actual (el actual gana por orden de cascada) */
.ts-client-form .cf-stepper__item.is-done {
  color: var(--cf-primary-light);
  border-color: transparent;
  background: var(--cf-soft);
}

.ts-client-form .cf-stepper__item.is-done .cf-stepper__num { display: none; }

.ts-client-form .cf-stepper__item.is-done .cf-stepper__check {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: var(--ts-radius-full);
  background: var(--cf-primary);
  color: var(--cf-on-primary);
  font-size: 0.8rem;
}

.ts-client-form .cf-stepper__item.is-current {
  color: var(--cf-text);
  background: var(--cf-soft-strong);
  border-color: var(--cf-primary-light);
  box-shadow: var(--cf-shadow-sm);
}

.ts-client-form .cf-stepper__item.is-current .cf-stepper__num {
  display: grid;
  background: var(--cf-primary);
  border-color: transparent;
  color: var(--cf-on-primary);
}

.ts-client-form .cf-stepper__item.is-current .cf-stepper__check { display: none; }

/* Modo compacto (formularios con muchos pasos, p. ej. 2 preguntas por paso):
   cada paso es un círculo con su número, y todos caben en una fila. */
.ts-client-form .cf-stepper.is-compact { gap: 0.35rem; }
.ts-client-form .cf-stepper.is-compact .cf-stepper__item {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: var(--ts-radius-full);
  background: var(--cf-soft);
  border-color: var(--cf-border);
  color: var(--cf-primary-light);
  font-size: 0.85rem;
  font-weight: 700;
}

.ts-client-form .cf-stepper.is-compact .cf-stepper__item:hover {
  background: var(--cf-soft-strong);
  border-color: var(--cf-primary-light);
  color: var(--cf-primary);
}

.ts-client-form .cf-stepper.is-compact .cf-stepper__item.is-done {
  background: var(--cf-soft-strong);
  border-color: transparent;
  color: var(--cf-primary);
}

.ts-client-form .cf-stepper.is-compact .cf-stepper__item.is-current {
  background: var(--cf-primary);
  border-color: transparent;
  color: var(--cf-on-primary);
  box-shadow: var(--cf-shadow-btn);
}

.ts-client-form .cf-stepper.is-compact .cf-stepper__num { display: none; }
.ts-client-form .cf-stepper.is-compact .cf-stepper__label { display: inline; }

.ts-client-form .cf-stepper.is-compact .cf-stepper__item.is-done .cf-stepper__label { display: none; }
.ts-client-form .cf-stepper.is-compact .cf-stepper__item.is-done .cf-stepper__check { display: inline; }

.ts-client-form .cf-stepper.is-compact .cf-stepper__item.is-current .cf-stepper__label { display: inline; }
.ts-client-form .cf-stepper.is-compact .cf-stepper__item.is-current .cf-stepper__check { display: none; }

/* Pie de cada paso: aviso de pendientes + Anterior / Siguiente */
.ts-client-form .cf-step-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cf-border);
}

.ts-client-form .cf-step-nav__hint { font-size: 0.85rem; color: var(--cf-text-muted); }
.ts-client-form .cf-step-nav__hint.is-complete { color: var(--cf-primary-light); }
.ts-client-form .cf-step-nav__hint.is-alert { color: #d64545; font-weight: 600; }
.ts-client-form[data-theme="dark"] .cf-step-nav__hint.is-alert { color: #ffa8a8; }

.ts-client-form .cf-step-nav__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

/* Un solo «Anterior» en el primer paso y solo el envío en el último: los
   botones se ocultan con [hidden], que debe ganar al display de .cf-btn. */
.ts-client-form .cf-step-nav__controls .cf-btn[hidden] { display: none; }

/* --------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------- */
.ts-client-form .cf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--ts-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--cf-transition);
}

.ts-client-form .cf-btn--primary {
  background: linear-gradient(135deg, var(--cf-primary), var(--cf-primary-hover));
  color: var(--cf-on-primary);
  box-shadow: var(--cf-shadow-btn);
}

.ts-client-form .cf-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--cf-shadow-btn-hover); }

.ts-client-form .cf-btn--secondary {
  background: var(--cf-bg-card);
  color: var(--cf-text);
  border-color: var(--cf-border);
}

.ts-client-form .cf-btn--secondary:hover { background: var(--cf-bg-card-hover); border-color: var(--cf-primary-light); }

.ts-client-form .cf-btn--outline {
  background: var(--cf-bg-card);
  color: var(--cf-text);
  border-color: var(--cf-border);
  font-size: 0.9rem;
  padding: 0.65rem 1.1rem;
}

.ts-client-form .cf-btn--outline:hover { color: var(--cf-text); border-color: var(--cf-text-muted); }

.ts-client-form .cf-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.ts-client-form .cf-actions--end { justify-content: flex-end; }

/* Con el asistente activo, el bloque de acciones se oculta: el envío se
   mueve al último paso. ([hidden] necesita ganar al display:flex de arriba) */
.ts-client-form .cf-actions[hidden] { display: none; }

/* --------------------------------------------------------------------
   Summary modal
   -------------------------------------------------------------------- */
.ts-client-form .cf-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--cf-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ts-client-form .cf-modal.is-open { display: flex; }

.ts-client-form .cf-modal__dialog {
  width: 100%;
  max-width: 750px;
  max-height: 85vh;
  overflow-y: auto;
  padding: clamp(20px, 3vw, 32px);
  background: var(--cf-bg);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-lg);
  animation: cf-fade-in 0.25s ease-out both;
}

.ts-client-form .cf-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--cf-border);
}

.ts-client-form .cf-modal__title { font-size: 1.35rem; font-weight: 700; }

.ts-client-form .cf-summary {
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: var(--cf-summary-bg);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-sm);
}

.ts-client-form .cf-summary__title {
  margin-bottom: 0.5rem;
  color: var(--cf-primary-light);
  font-size: 1.05rem;
  font-weight: 700;
}

.ts-client-form .cf-summary__item { display: flex; gap: 0.75rem; margin-bottom: 0.4rem; font-size: 0.95rem; }
.ts-client-form .cf-summary__key { flex: 0 0 45%; font-weight: 600; color: var(--cf-text-muted); }
.ts-client-form .cf-summary__val { flex: 1 1 auto; }

/* --------------------------------------------------------------------
   Form notice — validation feedback and submission result
   -------------------------------------------------------------------- */
.ts-client-form .cf-alert {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--cf-radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ts-client-form .cf-alert--error {
  color: #7f1d1d;
  background: #fef2f2;
  border-color: #fecaca;
}

.ts-client-form .cf-alert--success {
  color: #14532d;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

/* --------------------------------------------------------------------
   Gate banner — shown to visitors without an account
   -------------------------------------------------------------------- */
.ts-client-form .cf-gate {
  margin-bottom: 1.5rem;
  padding: clamp(18px, 2.5vw, 26px);
  background: var(--cf-bg-card);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-lg);
  box-shadow: var(--cf-shadow-sm);
}

.ts-client-form .cf-gate__notice {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.35rem 0.75rem;
  background: var(--cf-soft-strong);
  border-radius: 999px;
  color: var(--cf-primary);
  font-size: 0.85rem;
  font-weight: 700;
}

.ts-client-form .cf-gate__title { margin: 0 0 0.5rem; font-size: 1.4rem; font-weight: 800; }
.ts-client-form .cf-gate__text { margin: 0 0 1.25rem; color: var(--cf-text-muted); line-height: 1.6; }

.ts-client-form .cf-gate__form { margin: 0 0 1.25rem; }

.ts-client-form .cf-gate__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ts-client-form .cf-gate__field { display: block; }
.ts-client-form .cf-gate__field .cf-input { width: 100%; }

.ts-client-form .cf-gate__label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--cf-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ts-client-form .cf-gate__code {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.18em;
}

.ts-client-form .cf-gate__error {
  margin: 1rem 0 0;
  padding: 0.7rem 0.9rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--cf-radius-sm);
  color: #7f1d1d;
  font-size: 0.9rem;
  font-weight: 600;
}

.ts-client-form .cf-gate__submit { margin-top: 1rem; }

.ts-client-form .cf-gate__hint {
  margin: 0;
  color: var(--cf-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------
   Entry screens — “are you a client?” and the sign in form
   -------------------------------------------------------------------- */
/* La entrada no lleva el formulario, así que se ve mejor una tarjeta
   estrecha y centrada que la caja ancha de 900px. */
.ts-client-form .cf-shell--entry { max-width: 620px; }

.ts-client-form .cf-gate--entry { margin-bottom: 0; }

.ts-client-form .cf-gate__choices {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.ts-client-form .cf-gate__link {
  color: var(--cf-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ts-client-form .cf-gate__link:hover,
.ts-client-form .cf-gate__link:focus-visible { color: var(--cf-primary-hover); }

/* El encabezado del formulario es sticky y va con margen negativo, así que sin
   este aire extra se monta encima de este enlace y su fondo claro lo tapa. */
.ts-client-form .cf-gate__back {
  margin: 0 0 calc(clamp(20px, 3vw, 32px) + 1rem);
  font-size: 0.9rem;
  text-align: right;
}

/* --------------------------------------------------------------------
   Access panel — account credentials shown right after submitting
   -------------------------------------------------------------------- */
.ts-client-form .cf-access {
  padding: 0.5rem 0 1.5rem;
  text-align: center;
}

.ts-client-form .cf-access__icon { margin-bottom: 0.75rem; font-size: 2.5rem; line-height: 1; }
.ts-client-form .cf-access__title { margin: 0 0 0.75rem; font-size: 1.5rem; font-weight: 800; }
.ts-client-form .cf-access__text { margin: 0 0 1rem; color: var(--cf-text-muted); line-height: 1.6; }

.ts-client-form .cf-access__note {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--cf-radius-sm);
  color: #78350f;
  font-size: 0.9rem;
  text-align: left;
}

.ts-client-form .cf-access__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.9rem 1.1rem;
  background: var(--cf-summary-bg);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-sm);
  text-align: left;
}

.ts-client-form .cf-access__label {
  flex: 1 1 100%;
  color: var(--cf-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ts-client-form .cf-access__value { font-weight: 600; overflow-wrap: anywhere; }
.ts-client-form .cf-access__row--code { background: var(--cf-soft); }

.ts-client-form .cf-access__code {
  flex: 1 1 auto;
  color: var(--cf-primary);
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: clamp(1.1rem, 3.5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  overflow-wrap: anywhere;
}

.ts-client-form .cf-access__copy { flex: 0 0 auto; }
.ts-client-form .cf-access__hint { margin: 1rem 0 0; color: var(--cf-text-muted); font-size: 0.9rem; }
.ts-client-form .cf-access__mail { margin: 0.5rem 0 0; color: var(--cf-primary-light); font-size: 0.9rem; font-weight: 600; }
.ts-client-form .cf-access__mail--warn { color: #b45309; }

.ts-client-form .cf-access__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------
   Confirmación — la vista que queda después de enviar el cuestionario.
   Es una pantalla propia, distinta de la entrada, para que el final del
   cuestionario no parezca un error de la web.
   -------------------------------------------------------------------- */
.ts-client-form .cf-confirmation[hidden] { display: none; }

.ts-client-form .cf-shell--confirm { max-width: 640px; }

.ts-client-form .cf-confirm {
  padding: clamp(0.5rem, 2vw, 1.5rem) 0;
  text-align: center;
}

.ts-client-form .cf-confirm .cf-access__title { font-size: clamp(1.6rem, 4vw, 2.1rem); }

.ts-client-form .cf-modal__error {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--cf-radius-sm);
  color: #7f1d1d;
  font-size: 0.9rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------
   Motion preference
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ts-client-form .cf-conditional.is-visible,
  .ts-client-form .cf-other.is-visible,
  .ts-client-form .cf-modal__dialog,
  .ts-client-form .cf-shell.is-stepped .cf-page.is-active { animation: none; }
  .ts-client-form .cf-pain__pill:hover,
  .ts-client-form .cf-btn--primary:hover { transform: none; }
}

/* --------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------- */
@media (max-width: 650px) {
  .ts-client-form .cf-grid { grid-template-columns: 1fr; }
  .ts-client-form .cf-gate__grid { grid-template-columns: 1fr; }
  .ts-client-form .cf-options--3 { grid-template-columns: 1fr 1fr; }

  /* La escala 0–10 pasa a dos filas de números iguales, con sitio de sobra
     para el que se agranda al elegirlo. */
  .ts-client-form .cf-pain__pills { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ts-client-form .cf-actions { flex-direction: column-reverse; align-items: stretch; }
  .ts-client-form .cf-actions .cf-btn { justify-content: center; }
  .ts-client-form .cf-hero { padding: 1.5rem; }

  /* Asistente: el índice se queda solo con los números para no ocupar alto. */
  .ts-client-form .cf-stepper { gap: 0.4rem; }
  .ts-client-form .cf-stepper__label { display: none; }
  .ts-client-form .cf-stepper__item { padding: 0.45rem 0.6rem; }
  .ts-client-form .cf-stepper__item.is-current .cf-stepper__label { display: inline; }

  /* En móvil el índice puede desplazarse: círculos algo más grandes. */
  .ts-client-form .cf-stepper.is-compact .cf-stepper__item {
    width: 38px;
    height: 38px;
    font-size: 0.9rem;
  }

  .ts-client-form .cf-step-nav { flex-direction: column; align-items: stretch; }
  .ts-client-form .cf-step-nav__controls { flex-direction: column-reverse; margin-left: 0; }
  .ts-client-form .cf-step-nav__controls .cf-btn { justify-content: center; }
}

@media (max-width: 420px) {
  .ts-client-form .cf-options--3 { grid-template-columns: 1fr; }
  .ts-client-form .cf-brand__title { font-size: 1rem; }
}

/* --------------------------------------------------------------------
   Print — only the clinical summary
   -------------------------------------------------------------------- */
@media print {
  .ts-header,
  .ts-footer,
  .ts-main > *:not(.ts-client-form),
  .ts-client-form .cf-header,
  .ts-client-form .cf-hero,
  .ts-client-form .cf-form,
  .ts-client-form .cf-gate,
  .ts-client-form .cf-actions { display: none !important; }

  .ts-client-form,
  .ts-client-form .cf-shell {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .ts-client-form .cf-modal {
    position: static !important;
    display: block !important;
    padding: 0 !important;
    background: none !important;
    backdrop-filter: none !important;
  }

  .ts-client-form .cf-modal__dialog {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #000000 !important;
    animation: none !important;
  }

  .ts-client-form .cf-summary { background: #ffffff !important; border-color: #cccccc !important; }
  .ts-client-form .cf-summary__title { color: #00543a !important; }
  .ts-client-form .cf-modal__title { color: #000000 !important; }
  .ts-client-form .cf-summary__key,
  .ts-client-form .cf-summary__val { color: #000000 !important; }
}