/* ============================================================================
   GymCRM — alta de membresía. Estética: refined minimalism (Apple / SpaceX /
   Starlink). Base monocroma + acento per-tenant vía --accent. Light/dark via [data-theme].
   Tipografía: Hanken Grotesk (UI) + JetBrains Mono (detalles técnicos).
   ========================================================================== */

:root {
  /* Acento del tenant — punto único de cambio. Default = ROJO V MOTEL (#dc2626);
     por tenant se sobrescribe con --accent inyectado desde su .env (ver base.html).
     --accent-strong (hover) deriva solo; --on-accent es el texto SOBRE el acento
     (blanco = contraste AA sobre el rojo medio). */
  --accent: #dc2626;
  --accent-strong: color-mix(in srgb, var(--accent) 85%, #000);
  --on-accent: #ffffff;

  /* Warning semántico (ámbar) — legible AA en ambos temas; nada de café sucio. */
  --warn: #b45309;
  --warn-bg: color-mix(in srgb, #f59e0b 12%, var(--surface));
  --warn-border: color-mix(in srgb, #f59e0b 50%, transparent);

  /* Light (por defecto) */
  --bg: color-mix(in srgb, var(--accent) 3%, #f7f7f7);
  --bg-grid: rgba(10, 10, 10, 0.025);
  --surface: #ffffff;
  --surface-2: color-mix(in srgb, var(--accent) 2%, #ffffff);
  --text: #0a0a0a;
  --text-2: #6c6c72;
  --text-3: #9a9aa0;
  --border: color-mix(in srgb, var(--accent) 9%, #e9e9e9);
  --border-strong: color-mix(in srgb, var(--accent) 12%, #d9d9d9);
  --field-bg: color-mix(in srgb, var(--accent) 2%, #ffffff);
  --field-bg-focus: #ffffff;
  --shadow-card: 0 1px 2px rgba(10, 10, 10, 0.04), 0 12px 32px -12px rgba(10, 10, 10, 0.12);
  --ring: rgba(10, 10, 10, 0.08);

  --radius: 14px;
  --radius-sm: 10px;
  --radius-field: 11px;
  --maxw: 460px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Dificultad / nivel (semánticas; biblioteca SmartCoach + rutinas). */
  --dif-principiante: #3f8a55;
  --dif-intermedio: #a8742a;
  --dif-avanzado: #b04733;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #080809;
  --bg-grid: rgba(255, 255, 255, 0.022);
  --surface: #111113;
  --surface-2: #161618;
  --text: #f4f4f5;
  --text-2: #9d9da6;
  --text-3: #6a6a72;
  --border: #232327;
  --border-strong: #303036;
  --field-bg: #161618;
  --field-bg-focus: #1b1b1e;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 60px -24px rgba(0, 0, 0, 0.8);
  --ring: rgba(255, 255, 255, 0.09);
  /* Warning — variantes más claras para fondo oscuro (AA). */
  --warn: #fcd34d;
  --warn-bg: color-mix(in srgb, #f59e0b 15%, var(--surface));
  --warn-border: color-mix(in srgb, #f59e0b 42%, transparent);
  /* Dificultad / nivel — variantes más claras para fondo oscuro. */
  --dif-principiante: #57b06e;
  --dif-intermedio: #cca23f;
  --dif-avanzado: #cd5f4c;
  color-scheme: dark;
}

/* ----- reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  /* Atmósfera: rejilla técnica tenue + halo del acento, sin gritar. */
  background-image:
    radial-gradient(900px 500px at 50% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 100% 100%, 56px 56px, 56px 56px;
  background-attachment: fixed;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

::selection { background: var(--accent); color: var(--on-accent); }

/* ----- banner de warning reutilizable (turno cerrado, avisos) — tokens semánticos ----- */
.banner-warn { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius-sm);
  padding: 12px 16px; font-size: 14px; color: var(--text); }
.banner-warn svg { color: var(--warn); flex-shrink: 0; }
.banner-warn .banner-cta { margin-left: auto; background: var(--accent); color: var(--on-accent);
  padding: 9px 18px; border-radius: var(--radius-field); font-weight: 600; text-decoration: none;
  font-size: 13px; white-space: nowrap; transition: background .15s var(--ease); }
.banner-warn .banner-cta:hover { background: var(--accent-strong); }

/* ── Sistema de diálogos ÚNICO: native <dialog> centrado (desktop) / bottom-sheet (móvil), chrome común ── */
dialog { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text);
  padding: 20px; max-width: min(460px, calc(100vw - 32px)); width: 100%; box-shadow: var(--shadow-card);
  /* VEH-COLA-4b: el reset universal (L81) mata el margin:auto del UA que CENTRA los <dialog>
     nativos → sin esto quedan pegados arriba-izquierda en desktop. El media móvil lo re-fija a
     auto auto 0 (bottom-sheet). */
  margin: auto;
  /* UI-4 §A: nunca cortado — el diálogo scrollea internamente antes que desbordar el viewport. */
  max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain; }
dialog::backdrop { background: color-mix(in srgb, #000 50%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
dialog[open] { animation: dlgpop .18s var(--ease); }
@keyframes dlgpop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
dialog h3 { font-size: 17px; font-weight: 800; margin-bottom: 12px; }
dialog label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); display: block; margin: 10px 0 4px; }
dialog input, dialog select, dialog textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-field); background: var(--field-bg); color: var(--text); font: inherit; font-size: 15px; }
dialog input:focus, dialog select:focus, dialog textarea:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 70%, var(--border-strong)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.dlg-actions { display: flex; gap: 8px; margin-top: 16px; }
.dlg-actions > button, .dlg-actions > .btn { flex: 1; }
@media (max-width: 640px) {
  /* Bottom-sheet: más alto y con safe-area — el último botón SIEMPRE completo y tapeable. */
  dialog { max-width: 100%; width: 100%; margin: auto auto 0; border-radius: var(--radius) var(--radius) 0 0; border-bottom: none;
    max-height: 92dvh; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

/* ── Empty-state reutilizable: ícono + mensaje útil + CTA ── */
.empty-state { text-align: center; padding: 56px 24px; }
.empty-state svg { width: 42px; height: 42px; color: var(--text-3); margin-bottom: 12px; }
.empty-state p { font-size: 14px; color: var(--text-2); }
.empty-state .cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; background: var(--accent); color: var(--on-accent); text-decoration: none; padding: 9px 18px; border-radius: var(--radius-field); font-weight: 600; font-size: 13px; border: none; cursor: pointer; }
.empty-state .cta:hover { background: var(--accent-strong); }

/* ── Botón en estado loading (spinner) → cero doble-submit ── */
.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----- shell ----- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 24px 48px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ----- top bar: logo slot + theme toggle ----- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(48px, 12vh, 96px);
}

/* Slot del logo del tenant. Hoy muestra un placeholder; cuando llegue el
   logo, reemplazar el contenido de .brand-mark por <img class="brand-logo">. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.brand-mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.04em;
  flex: none;
}
.brand-logo { height: 30px; width: auto; display: block; }
/* Marca tipográfica: inicial en el rojo de marca, fondo transparente (sin badge). */
.brand-v { width: 36px; height: 36px; flex: none; display: block; }
/* Wordmark SVG inyectado inline en .brand: hereda currentColor → theme-adaptive. */
.brand svg { height: 30px; width: auto; display: block; color: var(--text); }
.brand-name {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.theme-toggle {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  width: 38px; height: 38px;
  border-radius: 999px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
              background 0.2s var(--ease), transform 0.2s var(--ease);
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ----- main / card ----- */
main { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}
.eyebrow .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

h1 {
  font-size: clamp(30px, 8vw, 40px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin-bottom: 12px;
}
.lede {
  color: var(--text-2);
  font-size: 15.5px;
  max-width: 38ch;
  margin-bottom: 36px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(22px, 5vw, 30px);
}

/* ----- form ----- */
.field { margin-bottom: 18px; }
.field:last-of-type { margin-bottom: 0; }
/* RFC siempre en MAYÚSCULAS (display); el valor enviado lo espeja un oninput en cada input. */
input[name="rfc"], #fc-rfc, #fac-rfc, #fiscal-rfc { text-transform: uppercase; }

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 8px;
}

.field input,
.field select {
  width: 100%;
  font-family: var(--font-sans);
  /* 16px es el mínimo que evita el auto-zoom de iOS Safari al enfocar un campo
     (login y datos fiscales del portal, y todo .field). NO bajar de 16px. */
  font-size: 16px;
  color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-field);
  padding: 13px 14px;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease),
              box-shadow 0.18s var(--ease);
  outline: none;
}
.field input::placeholder { color: var(--text-3); }
.field input:hover,
.field select:hover { border-color: var(--border-strong); }
.field input:focus,
.field select:focus {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border-strong));
  background: var(--field-bg-focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* select con chevron propio */
.select-wrap { position: relative; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}
.select-wrap::after {
  content: "";
  position: absolute;
  right: 15px; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.6px solid var(--text-2);
  border-bottom: 1.6px solid var(--text-2);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 420px) { .field-row { grid-template-columns: 1fr; gap: 18px; } }

/* ----- selector de plan: pills de periodo + cards seleccionables -----
   Hereda el lenguaje del form (--accent, superficies, radios). 16px en lo tocable
   (.period-pill / .plan-card) para evitar el zoom de iOS al enfocar. */
.period-pills {
  display: grid;
  /* PULIDO: columnas según el nº de periodos (no fijo a 4) → segmented balanceado para N. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px;
  margin-bottom: 12px;
}
.period-pill {
  appearance: none;
  -webkit-appearance: none;
  /* 13px es intencional: el zoom de iOS al enfocar SOLO lo disparan inputs/select/textarea,
     no los <button>; la regla de 16px aplica a campos, aquí no estorba. */
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-2);
  background: none;
  border: 0;
  padding: 9px 4px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  text-align: center;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.period-pill:hover { color: var(--text); }
.period-pill.is-active { background: var(--accent); color: var(--on-accent); }
.period-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
@media (max-width: 360px) {
  .period-pill { font-size: 12px; letter-spacing: 0; }
}

.plan-cards { display: grid; gap: 9px; }
.plan-empty { color: var(--text-3); font-size: 14px; }
.plan-card {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-field);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease),
              box-shadow 0.18s var(--ease);
}
.plan-card[hidden] { display: none; }
.plan-card:hover { border-color: var(--border-strong); }
.plan-card.is-selected {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border-strong));
  background: var(--field-bg-focus);
  box-shadow: 0 0 0 1px var(--accent) inset,
              0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.plan-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}
.pc-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pc-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.pc-eq { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.pc-eq:empty { display: none; }
.pc-pricewrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
  text-align: right;
}
.pc-price { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; }
.pc-price .pc-cad { color: var(--text-3); font-weight: 400; font-size: 12px; }
.pc-save {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}
.pc-save:empty { display: none; }

/* ----- consentimiento (aviso de privacidad corto + checkbox) ----- */
.consent {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.consent-box {
  max-height: 118px;
  overflow-y: auto;
  padding: 13px 15px;
  margin-bottom: 14px;
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}
.consent-box p {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-3);
  margin: 0;
}
.consent-box::-webkit-scrollbar { width: 6px; }
.consent-box::-webkit-scrollbar-track { background: transparent; }
.consent-box::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.consent-box::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
.consent-check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.consent-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  flex: none;
  margin-top: 1px;
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  background: var(--field-bg);
  cursor: pointer;
  position: relative;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease),
              box-shadow 0.16s var(--ease);
}
.consent-check input:hover { border-color: var(--accent); }
.consent-check input:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); outline: none; }
.consent-check input:checked { background: var(--accent); border-color: var(--accent); }
.consent-check input:checked::after {
  content: "";
  position: absolute;
  left: 6px; top: 2.5px;
  width: 5px; height: 10px;
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consent-check a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.consent-check a:hover { border-bottom-color: var(--accent); }

/* ----- página de documento legal (aviso integral) ----- */
.legal-doc { max-width: 720px; margin: 0 auto; }
.legal-doc h1 { font-size: clamp(24px, 6vw, 30px); margin-bottom: 8px; }
.legal-doc .updated {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 28px;
}
.legal-doc h2 {
  font-size: 16px;
  letter-spacing: -0.01em;
  margin: 26px 0 8px;
}
.legal-doc p, .legal-doc li { font-size: 14.5px; line-height: 1.65; color: var(--text-2); }
.legal-doc p { margin-bottom: 12px; }
.legal-doc strong { color: var(--text); font-weight: 600; }
.legal-doc .back {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 2px;
}
.legal-doc .back:hover { color: var(--text); border-color: var(--accent); }

/* ----- CTA ----- */
.cta {
  width: 100%;
  margin-top: 26px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-field);
  padding: 15px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s var(--ease), box-shadow 0.22s var(--ease),
              background 0.18s var(--ease);
  box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--accent) 75%, transparent);
}
.cta:hover { background: var(--accent-strong); box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--accent) 85%, transparent); }
.cta:active { transform: scale(0.985); }
.cta:disabled { opacity: 0.6; cursor: progress; }
.cta .arrow { transition: transform 0.22s var(--ease); }
.cta:hover .arrow { transform: translateX(3px); }
/* spinner cuando .is-loading */
.cta .spinner {
  display: none;
  width: 17px; height: 17px;
  border: 2px solid color-mix(in srgb, var(--on-accent) 30%, transparent);
  border-top-color: var(--on-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.cta.is-loading .label,
.cta.is-loading .arrow { display: none; }
.cta.is-loading .spinner { display: block; }

/* Botón secundario "Pagaré en recepción": ghost del lenguaje del form
   (transparente + borde), bajo el CTA primario. Mismo box-model que .cta. */
.cta-ghost {
  width: 100%;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-field);
  padding: 13px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease),
              background 0.18s var(--ease);
}
.cta-ghost:hover {
  border-color: var(--accent);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.cta-ghost:active { transform: scale(0.985); }
.cta-ghost:disabled { opacity: 0.6; cursor: progress; }

.form-error {
  display: none;
  margin-top: 14px;
  font-size: 13.5px;
  color: #e5484d;
  background: color-mix(in srgb, #e5484d 9%, transparent);
  border: 1px solid color-mix(in srgb, #e5484d 24%, transparent);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.form-error.show { display: block; }

.fineprint {
  margin-top: 18px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-3);
}
.fineprint .lock { vertical-align: -2px; margin-right: 5px; opacity: 0.8; }

/* ----- gracias / estado ----- */
.status {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.status-badge {
  width: 76px; height: 76px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  margin-bottom: 26px;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 8%, transparent);
}
.status-badge svg { width: 34px; height: 34px; color: var(--text); }
.status-badge .check {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: draw 0.6s var(--ease-out) 0.25s forwards;
}
.status h1 { margin-bottom: 14px; }
.status .lede { margin: 0 auto 32px; text-align: center; }
.ghost-link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.ghost-link:hover { color: var(--text); border-color: var(--accent); }

/* ----- footer ----- */
.foot {
  margin-top: 40px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
/* Link "Powered by GymCRM" → gymcrm.mx: hereda el gris discreto, hover sutil (ambos temas). */
.foot a { color: inherit; text-decoration: none; transition: color .18s ease; }
.foot a:hover { color: var(--text-2); }

/* ── Sistema de barra de control del panel (patrón aprobado en Gastos) ──
   .filtros-buscar (admin_base) es la barra base; estas clases la completan y las
   consumen TODAS las secciones (Gastos/Cobros/Miembros) — cero copy-paste:
   .accion-principal  → el botón #1 de la sección (full-width y PRIMERO en móvil)
   .filtros-mes       → input de mes AL TEMA (nada nativo blanco; mono + tokens)
   .chips-row         → chips en UNA fila scrolleable con fade (móvil)
   .seccion-stat-*    → total/conteo con jerarquía (label mono + cifra grande)
   .modo-toggle       → switch de modo de vista (ej. Ver anulados) */
.filtros-mes {
  flex: none; width: auto;
  -webkit-appearance: none; appearance: none;
  font-family: var(--font-mono); font-size: 13px; color: var(--text);
  background: var(--field-bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 12px; min-height: 38px; outline: none;
}
/* Grupo con micro-etiqueta para el mes: con appearance:none un month VACÍO es una
   caja muda (el cuadrito fantasma de Cobros a 390) — la etiqueta le da nombre. */
.filtros-mes-grupo { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.filtros-mes-grupo .filtros-mes { flex: 1; }
.filtros-mes-etq {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); flex: none;
}
.seccion-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 2px 0 18px;
}
/* Sub-tabs de dominio (Equipo, Reportes): los chips del sistema como navegación
   local bajo el h1. El glifo de candado (.nav-lock) cabe dentro de un chip. */
.subtabs { margin: 4px 0 26px; }
.seccion-stat-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
  margin-bottom: 5px;
}
.seccion-stat-num {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.seccion-stat-sub { font-size: 12.5px; color: var(--text-3); margin-top: 4px; }
.modo-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; padding-bottom: 5px; }
.modo-toggle .switch { position: relative; width: 38px; height: 22px; flex: none; }
.modo-toggle .switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.modo-toggle .switch-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--field-bg); border: 1px solid var(--border); border-radius: 999px;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.modo-toggle .switch-slider::before {
  content: ""; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px;
  background: var(--text-3); border-radius: 50%;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.modo-toggle input:checked + .switch-slider { background: var(--accent); border-color: var(--accent); }
.modo-toggle input:checked + .switch-slider::before { transform: translateX(16px); background: var(--on-accent); }
.modo-toggle-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
@media (max-width: 640px) {
  .filtros-buscar { flex-wrap: wrap; }
  .accion-principal { flex: 1 1 100%; width: 100%; order: -1; }   /* la acción #1 arriba, a lo ancho */
  .filtros-buscar input[type="search"] { flex: 1 1 100%; }        /* búsqueda full-width sobre los chips */
  .filtros-buscar .filtros-mes { flex: 1; }
  /* .chips.chips-row (doble clase): le gana al .chips{flex-wrap:wrap} del <style>
     de admin_base, que carga DESPUÉS de esta hoja. */
  .chips.chips-row {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
    padding-right: 40px;
  }
  .chips.chips-row::-webkit-scrollbar { display: none; }
  .chips.chips-row .chip, .chips.chips-row .filtros-limpiar { flex: none; scroll-snap-align: start; }
  .filtros-buscar .filtros-mes-grupo { flex: 1; min-width: 0; }
  /* dentro del grupo el input cede el ancho de la etiqueta (width:100% desbordaba) */
  .filtros-buscar .filtros-mes-grupo .filtros-mes { width: auto; flex: 1; min-width: 0; }
}

/* ----- TIERS: candados Premium (decisión: VISIBLES, nunca ocultar — el candado vende) ----- */
[data-premium-lock] { cursor: pointer; }
.premium-tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
/* Links/botones chicos bloqueados (PDF · XML, Reintentar): mismo cuerpo que el link vivo,
   atenuado + candadito. */
.lock-inline {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-3); white-space: nowrap;
}
.lock-inline svg { width: 11px; height: 11px; flex: none; }
/* Chip de filtro bloqueado (Cobros): mismo chip, atenuado, no navega. */
.chip-lock { opacity: 0.6; }
.chip-lock svg { width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; }
/* Card fiscal del Resumen con candado — el candado ocupa el lugar del monto (misma altura
   que el número de .kpi-num para que la fila no brinque); el tag Premium va bajo el label. */
.kpi-lock-num { display: flex; align-items: center; height: 33px; }
.kpi-lock-num svg { width: 22px; height: 22px; color: var(--text-3); }
.kpi-lock .premium-tag { margin-top: 8px; }
/* Fila de factura de la ficha con candado en lugar del switch CFDI (básico). */
.pago-switch-lock svg { width: 14px; height: 14px; color: var(--text-3); flex: none; }
/* Hero bloqueado (página completa gateada, ej. Bitácora en básico): el lock ES el
   contenido — sin 403, el tab sigue visible y la página vende. */
.lock-hero {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; padding: 64px 24px; margin-top: 22px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.lock-hero-ico {
  width: 64px; height: 64px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.lock-hero-ico svg { width: 30px; height: 30px; color: var(--accent); }
.lock-hero-texto { font-size: 15px; color: var(--text-2); line-height: 1.6; max-width: 48ch; margin: 0; }
.lock-hero-btn {
  height: 42px; padding: 0 22px; margin-top: 6px;
  border: none; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600;
  background: var(--accent); color: var(--on-accent);
  transition: filter .18s var(--ease);
}
.lock-hero-btn:hover { filter: brightness(1.07); }
/* Glifo de candado junto al label de un tab del nav (el tab no se oculta — vende). */
.nav-lock { width: 10px; height: 10px; margin-left: 5px; vertical-align: -1px; opacity: 0.75; }
/* Modal Premium (admin_base): se abre desde cualquier [data-premium-lock]. Mismo
   lenguaje que el modal de contrato (overlay fijo + blur, card surface, .hidden). */
.premium-modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, #000 55%, transparent);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.premium-modal.hidden { display: none; }
.premium-modal-card {
  width: min(420px, 100%);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 32px 28px 26px;
  text-align: center;
}
.premium-modal-ico {
  width: 56px; height: 56px; margin: 0 auto 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.premium-modal-ico svg { width: 26px; height: 26px; color: var(--accent); }
.premium-modal-eyebrow {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.premium-modal-titulo {
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text); margin: 0 0 8px;
}
.premium-modal-texto { font-size: 14px; color: var(--text-2); line-height: 1.55; margin: 0 0 22px; }
.premium-modal-acciones { display: flex; flex-direction: column; gap: 8px; }
.premium-modal-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; border-radius: 10px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: none; border: 1px solid transparent;
  font-family: inherit;
  transition: filter .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.premium-modal-btn.primario { background: var(--accent); color: var(--on-accent, #fff); }
.premium-modal-btn.primario:hover { filter: brightness(1.07); }
.premium-modal-btn.secundario { background: none; border-color: var(--border); color: var(--text-2); }
.premium-modal-btn.secundario:hover { color: var(--text); border-color: var(--border-strong); }
.premium-modal-btn svg { width: 16px; height: 16px; flex: none; }

/* ----- motion: entrada escalonada ----- */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

.reveal { opacity: 0; animation: rise 0.7s var(--ease-out) forwards; }
.reveal:nth-child(1) { animation-delay: 0.04s; }
.reveal:nth-child(2) { animation-delay: 0.10s; }
.reveal:nth-child(3) { animation-delay: 0.16s; }
.reveal:nth-child(4) { animation-delay: 0.22s; }
.reveal:nth-child(5) { animation-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; }
}

/* ===== Modal de rutina + armador de pasos (compartido: builder /admin/rutinas y ficha /admin/miembro) =====
   BUG-FIX-1 PASO 1 — promovido a global desde el <style> inline de rutinas.html (:21-75) para que el
   partial _rutina_modal.html quede con estilo en CUALQUIER host. La ficha incluía el partial sin proveer
   este CSS → el modal renderizaba in-flow, sin overlay (.cl-modal no era position:fixed) y sin ocultarse
   (.cl-modal.hidden no aplicaba) → botones grises, textarea diminuto, panel sticky encimado.
   Los inline de rutinas.html/clases.html SE MANTIENEN como red de seguridad (se quitan en PASO 2).
   Reglas .cl-* byte-idénticas entre rutinas.html y clases.html. Única reconciliación: .cl-hint se scopea
   a `.cl-card .cl-hint` para NO pisar el .cl-hint propio de correos.html (que tiene valores distintos). */
.cl-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(4px); }
.cl-modal.hidden { display: none; }
.cl-card { width: min(460px, 100%); max-height: 90vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 26px 24px; }
.cl-card h2 { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.cl-card .nota-modal { font-size: 12px; color: var(--text-3); margin: 0 0 16px; }
.cl-card .field { margin-bottom: 14px; }
.cl-card textarea { width: 100%; min-height: 84px; resize: vertical; font-family: inherit; font-size: 14px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.cl-card textarea:focus { border-color: var(--accent); outline: none; }
.cl-acciones { display: flex; gap: 8px; margin-top: 20px; }
.cl-acciones button { flex: 1; height: 42px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid transparent; transition: filter .18s var(--ease); }
.cl-guardar { background: var(--accent); color: var(--on-accent); } .cl-guardar:hover { filter: brightness(1.07); } .cl-guardar:disabled { opacity: .6; cursor: progress; }
.cl-cancelar { background: none; border-color: var(--border) !important; color: var(--text-2); }
.cl-card .cl-hint { font-size: 11.5px; color: var(--text-3); margin-top: 5px; }   /* reconciliado: scopeado a .cl-card (correos.html define su propio .cl-hint con otros valores) */

/* R2b: armador de pasos */
.ru-picker { position: relative; }
#ru-buscar { width: 100%; height: 40px; font-family: inherit; font-size: 14px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 12px; }
#ru-buscar:focus { border-color: var(--accent); outline: none; }
.ru-resultados { margin-top: 4px; max-height: 300px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ru-resultados[hidden] { display: none; }
.ru-filtros { display: flex; gap: 8px; margin-top: 8px; }
.ru-filtros .select-wrap { flex: 1; min-width: 0; }   /* cada select hereda .field select + .select-wrap (appearance:none → pinta el web font, como NIVEL) */
.ru-res { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--text); font-size: 13px; border-bottom: 1px solid var(--border); padding: 7px 10px; cursor: pointer; }
.ru-res:last-child { border-bottom: none; }
.ru-res:hover { background: var(--surface-2); }
.ru-res-thumb { width: 40px; height: 28px; object-fit: cover; border-radius: 4px; background: var(--surface-2); flex: 0 0 auto; }
.ru-res-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.ru-res-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ru-res-sub { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ru-res-add { flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: var(--text-2); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.ru-res:hover .ru-res-add { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ru-res-vacio { font-size: 12.5px; color: var(--text-3); padding: 10px; }
.ru-pasos { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ru-pasos-vacio { margin: 4px 0 0; text-align: center; }
.ru-paso { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 9px 10px; }
.ru-paso-head { display: flex; align-items: center; gap: 9px; }
.ru-paso-num { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-3); flex: 0 0 auto; min-width: 14px; }
.ru-paso-thumb { width: 42px; height: 30px; object-fit: cover; border-radius: 4px; background: var(--surface); flex: 0 0 auto; }
.ru-paso-nombre { font-size: 13px; font-weight: 600; color: var(--text); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ru-paso-x { flex: 0 0 auto; width: 24px; height: 24px; border: none; background: none; color: var(--text-3); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 50%; }
.ru-paso-x:hover { color: #e5484d; background: color-mix(in srgb, #e5484d 12%, transparent); }
.ru-paso-mv { flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; color: var(--text-3); cursor: pointer; border-radius: 50%; }
.ru-paso-mv:hover:not(:disabled) { color: var(--text); background: var(--surface); }
.ru-paso-mv:disabled { opacity: .3; cursor: default; pointer-events: none; }
.ru-paso-mv svg { width: 15px; height: 15px; }
.ru-paso-campos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.ru-campo { display: flex; flex-direction: column; gap: 3px; flex: 1 1 76px; min-width: 0; }
.ru-campo > span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.ru-campo input { width: 100%; height: 34px; font-family: inherit; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 9px; }
.ru-campo input:focus { border-color: var(--accent); outline: none; }
.ru-campo-notas { flex: 1 1 100%; }
.ru-tipo { display: inline-flex; flex: 0 0 auto; align-self: flex-end; height: 34px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.ru-tipo button { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-3); background: none; border: none; padding: 0 11px; cursor: pointer; }
.ru-tipo button.on { background: var(--accent); color: var(--on-accent); }