:root {
  --bg: #0b0c0f;
  --bg-card: #17191f;
  --bg-card-2: #1f222a;
  --border: #2c313c;
  --text: #f0f1f3;
  --text-dim: #9aa0ab;
  --accent: #ff3b30;
  --accent-2: #3ddc97;
  --gold: #c9a24d;
  --danger: #ff5c6c;
  --radius: 10px;
  --font-display: 'Oswald', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- "Liquid Glass" — superficies traslúcidas + gradientes sólidos fuertes,
     inspirado en Apple Music/iOS. No reemplaza la identidad dorada/oscura de la marca:
     el dorado sigue siendo el acento de marca (logo, títulos), y estos gradientes se
     usan en superficies puntuales (botón principal, pestaña activa, cronómetro, hero)
     donde antes había un color plano. ---- */
  --glass-tint: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-shine: rgba(255, 255, 255, 0.5);
  --glass-blur: 24px;
  --radius-glass: 20px;

  /* Gradiente "dorado premium" — botón principal, pestaña activa, CTA. */
  --gradient-gold: linear-gradient(135deg, #ffd479 0%, #d9ab52 45%, #a9762a 100%);
  /* Gradiente "descanso" (verde/azul) — cronómetro y estados de éxito. */
  --gradient-rest: linear-gradient(135deg, #57f0b0 0%, #22c98f 45%, #0d8f9e 100%);
  /* Gradiente "energía" (rojo/rosa, tono Apple Music) — hero y banners llamativos. */
  --gradient-energy: linear-gradient(135deg, #ff6a5a 0%, #ff3b30 45%, #c81e5e 100%);
  /* Gradiente "premium noche" (violeta/azul) — fondos de hero alternativos. */
  --gradient-night: linear-gradient(135deg, #6d5bff 0%, #3d3bb8 55%, #1c1c4d 100%);
  /* Alto máximo seguro para el contenido de un modal, descontando la zona de arriba/abajo
     que en modo PWA standalone tapan la hora/batería del celular o el home indicator
     (env(safe-area-inset-*) vale 0 en navegador normal, así que no cambia nada ahí). Se
     usa con min(NNvh, var(--safe-modal-max-h)) para que la tarjeta nunca intente
     centrarse por encima de esa zona, sin importar qué tan alto sea su contenido. */
  --safe-modal-max-h: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 40px);
}

/* ---- Sistema de iconos de línea (reemplaza los emojis de la landing) ----
   Estilo Nike/WHOOP: líneas blancas discretas por defecto, que se encienden en
   rojo cuando el usuario pasa el mouse sobre la tarjeta que las contiene. */
.icon-gold {
  color: var(--gold);
  display: inline-block;
  vertical-align: -3px;
  transition: color 0.25s ease;
}
.icon-gold path, .icon-gold circle, .icon-gold polyline, .icon-gold line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 16px;
}

.brand-mark { color: var(--text); }
.brand-mark-accent { color: var(--gold); }

.brand-logo {
  height: 136px;
  width: auto;
  max-width: 100%;
  border-radius: 6px;
  display: block;
}

/* En la tarjeta de login el espacio es angosto: el logo se ve mucho más chico y
   se apila arriba del texto en vez de ir al lado, para que nunca se salga del marco. */
.login-card .brand {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.login-card .brand-logo {
  height: 80px;
  width: auto;
  max-width: 100%;
}

.login-card .brand-text {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.hero-logo {
  display: block;
  height: 384px;
  width: auto;
  border-radius: 14px;
  margin-bottom: 18px;
}

.hero {
  position: relative;
  padding: 48px 40px;
  border-radius: var(--radius-glass);
  background:
    linear-gradient(135deg, rgba(255,106,90,0.32), rgba(11,12,15,0.93)),
    var(--gradient-energy);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  overflow: hidden;
}

.hero-kicker {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.hero-title {
  font-size: 32px;
  line-height: 1.15;
  margin: 0 0 14px;
  font-weight: 800;
}

.hero-title em {
  color: var(--accent);
  font-style: normal;
}

.hero-sub {
  color: var(--text-dim);
  font-size: 15px;
  max-width: 460px;
  margin-bottom: 0;
}

/* Cabecera del panel del cliente: se separa del "hero" rojo genérico de la landing —
   acá el acento es dorado (nuestra firma de marca) con una textura de líneas finas en
   diagonal, más cercana al lenguaje "exclusivo/premium" que un cliente ve cada vez que
   entra, en vez del rojo de urgencia que se usa para CTAs de venta. */
.hero.compact {
  padding: 22px 26px;
  margin-bottom: 20px;
  border-radius: var(--radius-glass);
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 26px),
    linear-gradient(135deg, rgba(11,12,15,0.55), rgba(11,12,15,0.85)),
    var(--gradient-gold);
  border-color: rgba(255,255,255,0.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}

.hero.compact .hero-kicker { color: var(--gold); font-size: 11px; margin-bottom: 8px; }
.hero.compact .hero-title { font-size: 21px; margin-bottom: 4px; }
.hero.compact .hero-sub { font-size: 13.5px; max-width: 420px; }

.login-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  max-width: 920px;
  width: 100%;
  align-items: stretch;
}

@media (max-width: 820px) {
  .login-layout { grid-template-columns: 1fr; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Fondo "aurora": varias manchas de color grandes y difusas, fijas detrás de todo el
   contenido. Solas no se ven (quedan detrás de las tarjetas oscuras), pero son las que
   le dan sentido al vidrio esmerilado de .card/.bottom-nav/etc: al tener blur() sobre
   una superficie semitransparente, lo que se difumina es ESTO — sin color de fondo real
   detrás, un "vidrio" solo se ve como gris oscuro liso, nunca como vidrio de verdad. */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(ellipse 60% 45% at 12% 8%, rgba(255, 90, 70, 0.35), transparent 60%),
    radial-gradient(ellipse 55% 40% at 88% 15%, rgba(201, 162, 77, 0.32), transparent 60%),
    radial-gradient(ellipse 60% 45% at 15% 90%, rgba(13, 143, 158, 0.3), transparent 60%),
    radial-gradient(ellipse 55% 45% at 90% 85%, rgba(109, 91, 255, 0.28), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

a { color: var(--accent); }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px;
}

/* Cuando la barra de navegación inferior está presente (panel del cliente), se deja
   espacio extra abajo para que el contenido no quede tapado por la barra fija. */
body.has-bottom-nav .wrap {
  padding-bottom: 100px;
}

/* Cuando varias secciones quedan visibles a la vez dentro de un mismo grupo de la
   barra inferior (p. ej. "Clientes" o "Seguimiento" en el panel de administrador),
   se deja un respiro entre ellas para que no se vean pegadas. */
body.has-bottom-nav section + section {
  margin-top: 24px;
}

/* Firma "exclusiva" del panel (cliente y administrador): una línea dorada corta bajo
   cada título de sección, en vez de depender de texto extra para separar bloques. */
body.has-bottom-nav section > h2 {
  padding-bottom: 10px;
}
body.has-bottom-nav section > h2::after {
  content: '';
  display: block;
  width: 34px;
  height: 2px;
  background: var(--gold);
  margin-top: 8px;
  border-radius: 2px;
}

/* Menú "Más": antes era una sola lista pegada (líneas divisorias, sin diseño); ahora cada
   fila es su propia "burbuja" de liquid glass, separada de las demás, mismo lenguaje que
   .card/.day-block/.exercise-card (translúcido + blur + borde de vidrio). */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.menu-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)), rgba(23, 25, 31, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  color: var(--text);
  padding: 16px 14px;
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.15s var(--ease-premium), border-color 0.2s ease, background 0.2s ease;
}
.menu-row:hover:not(:disabled) { border-color: rgba(201,162,77,0.4); filter: none; }
.menu-row:active:not(:disabled) { transform: scale(0.98); }

.menu-row-icon { display: flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; }
.menu-row-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.menu-row-label { flex: 1; }
.menu-row-chevron { color: var(--text-dim); font-size: 19px; font-weight: 400; }

.mas-back-btn { margin-bottom: 16px; }

.center-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Tarjeta "Liquid Glass": superficie semitransparente con desenfoque detrás (se ve el
   fondo oscuro difuminado a través), un borde claro tenue que simula el filo brillante
   del vidrio, y una esquina redondeada mayor (estilo iOS) en vez del recuadro cuadrado
   de antes. */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)), rgba(23, 25, 31, 0.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
}

/* Fondo oscuro de cualquier modal (cambiar contraseña, ficha de ejercicio, check-in...).
   El padding-top/bottom respeta env(safe-area-inset-*) para que, en modo PWA standalone,
   la tarjeta nunca se centre por detrás de la hora/batería del celular arriba, ni del
   home indicator abajo — antes cada modal tenía este mismo bloque repetido inline sin
   ese ajuste, por eso el check-in se veía "mezclado" con los íconos del sistema. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 12, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  padding: 20px;
  padding-top: max(20px, calc(env(safe-area-inset-top) + 20px));
  padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 20px));
}

.login-card {
  width: 100%;
  max-width: 380px;
}

h1, h2, h3 { margin: 0 0 12px; font-family: var(--font-display); letter-spacing: 0.01em; }

.subtitle { color: var(--text-dim); margin-bottom: 20px; font-size: 14px; }

label {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  margin: 12px 0 4px;
}

/* -webkit-appearance/appearance: none + color-scheme: dark son necesarios acá porque
   inputs nativos como type="date" o type="number" (su calendario / flechitas) los dibuja
   el propio sistema operativo, NO el navegador — sin esto, iOS renderiza ese control con
   su caja cuadrada de fondo claro por defecto, que se asoma por las esquinas del input
   redondeado (se veía como un rectángulo oscuro/claro "saliéndose" de la tarjeta). Con
   appearance:none el control deja de dibujar su propio fondo y respeta nuestro
   border-radius/glass, y color-scheme:dark le avisa al sistema que use su variante oscura
   para lo poco que sigue siendo nativo (ícono de calendario, etc). */
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.055);
  background-clip: padding-box;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text);
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
}

textarea { resize: vertical; font-family: inherit; }

/* El ícono de calendario de input[type="date"] es SVG del sistema; en dark mode ya sale
   claro gracias a color-scheme:dark, pero por si el navegador no lo respeta, se fuerza
   a blanco/translúcido para que no quede un cuadro oscuro apagado sobre el vidrio. */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
  opacity: 0.85;
}

/* El botón principal usaba --accent (rojo saturado) para TODAS las acciones de
   guardar/confirmar en toda la app — con el rediseño premium eso se sentía agresivo y
   fuera de tono con la paleta dorada/oscura del resto. Ahora el botón primario es dorado
   (coherente con el resto de acentos), y el rojo queda reservado solo para acciones
   realmente destructivas (button.danger, sin tocar). */
button {
  cursor: pointer;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  background: var(--gradient-gold);
  color: #1a1108;
  margin-top: 16px;
  box-shadow: 0 3px 12px rgba(201, 162, 77, 0.35), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: filter 0.15s ease, transform 0.1s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

button:hover:not(:disabled) { filter: brightness(1.08); }
button:active:not(:disabled) { transform: scale(0.97); }
button:disabled { cursor: default; opacity: 0.6; }

button.secondary {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid var(--glass-border);
  box-shadow: none;
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}

button.danger { background: var(--danger); color: #300; }
button.small { padding: 6px 10px; font-size: 12px; margin-top: 0; }

input, select, textarea { transition: border-color 0.15s ease; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }

.error {
  color: var(--danger);
  font-size: 13px;
  margin-top: 8px;
  min-height: 16px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  /* Mismo ajuste que .landing-nav: deja espacio para la hora/batería del celular
     cuando la app está instalada (PWA en modo standalone). */
  padding-top: max(16px, calc(env(safe-area-inset-top) + 16px));
  background: rgba(11,12,15,0.45);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  z-index: 300;
}

.topbar .who { color: var(--text-dim); font-size: 13px; }

.tabs {
  display: flex;
  gap: 8px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.tabs button {
  margin-top: 0;
  background: rgba(255,255,255,0.05);
  color: var(--text-dim);
  border: 1px solid var(--glass-border);
  box-shadow: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.tabs button.active {
  background: var(--gradient-gold);
  color: #1a1108;
  box-shadow: 0 3px 12px rgba(201, 162, 77, 0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 800px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* Pestaña Usuarios: el formulario "Nuevo usuario" se veía chico y aplastado porque la
   tabla (con muchas columnas) empujaba su columna del grid más allá del 50%. Forzamos
   columnas realmente simétricas (minmax(0,1fr) evita que el contenido de la tabla
   "robe" espacio) y dejamos que ambas tarjetas se estiren a la misma altura para que
   no quede un hueco vacío suelto debajo de la tabla. */
/* La tabla de usuarios necesita todo el ancho para que las columnas (nombre, email, rol,
   nivel, días/sem, estado) no queden apretadas. Antes iba lado a lado con "Nuevo
   usuario" en un grid de 2 columnas; ahora la tabla ocupa el 100% del ancho y el
   formulario de alta queda debajo, en vez de al costado. */
.users-grid { grid-template-columns: 1fr; }

.users-table-card { overflow-x: auto; }
.users-table-card table { min-width: 480px; }

/* El formulario ya no comparte columna con la tabla, así que sin este límite se
   estiraría de borde a borde en pantallas grandes (inputs enormes, feo). Se deja
   centrado con un ancho cómodo de formulario. */
.user-form-card { padding: 30px; max-width: 560px; margin: 0 auto; }
.user-form-card label { font-size: 14px; margin: 16px 0 6px; }
.user-form-card input, .user-form-card select {
  padding: 13px 14px;
  font-size: 15.5px;
  border-radius: 9px;
}
.user-form-card h3 { font-size: 19px; }

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 14px;
}

th, td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

th { color: var(--text-dim); font-weight: 600; font-size: 12px; text-transform: uppercase; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-dim);
}

.badge.admin { color: #fff; background: var(--gradient-energy); border-color: rgba(255,255,255,0.3); }
.badge.ok { color: #fff; background: var(--gradient-rest); border-color: rgba(255,255,255,0.3); }

.day-block {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  padding: 16px;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.045);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition: opacity .15s ease, border-color .15s ease;
}

.day-block h4 { margin-bottom: 10px; }

.day-block.dragging { opacity: 0.45; }

.day-block.drag-over {
  border: 2px dashed var(--accent) !important;
  border-radius: var(--radius);
}

.day-drag-handle {
  cursor: grab;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  user-select: none;
  touch-action: none;
  flex: 0 0 auto;
}

.day-drag-handle:active { cursor: grabbing; }

/* Carpetas de semana en el editor de rutinas (admin): usa <details>/<summary> nativo, así
   el navegador se encarga de abrir/cerrar sin JS extra y el contenido sigue existiendo en
   el DOM mientras está abierto (necesario para que el arrastrar/soltar de días siga
   funcionando exactamente igual que antes de agrupar por semana). */
.week-folder {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  background: rgba(201, 162, 77, 0.03);
}

.week-folder summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px;
  user-select: none;
}
.week-folder summary::-webkit-details-marker { display: none; }

.week-folder summary::before {
  content: '\203A';
  display: inline-block;
  color: var(--gold);
  font-size: 16px;
  font-weight: 700;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.week-folder[open] summary::before { transform: rotate(90deg); }

.week-folder-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--gold);
}

.week-folder-count {
  color: var(--text-dim);
  font-size: 12.5px;
  flex: 1;
}

.week-folder-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.week-move-btn { min-width: 34px; text-align: center; }

.week-folder-body {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--border);
}
.week-folder-body .day-block { margin-top: 14px; }
.week-folder-body > .day-block:first-child { margin-top: 14px; }

.ex-link {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent);
  padding-bottom: 1px;
}

.ex-link:hover {
  color: var(--accent);
  border-bottom-style: solid;
}

/* Antes era un texto pequeño y gris (casi invisible entre las tarjetas de ejercicio).
   Se sube el tamaño, el color y el acento a dorado (en vez de rojo, que se lee como
   alerta) para que la frase realmente se note y se sienta como una pausa, no como un
   detalle decorativo que el ojo se salta. */
.day-motivation {
  position: relative;
  padding: 14px 18px 14px 42px;
  margin-bottom: 16px;
  border-left: 3px solid var(--gold);
  background: linear-gradient(90deg, rgba(201,162,77,0.14), rgba(201,162,77,0.03));
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.55;
}

.day-motivation::before {
  content: '\201C';
  position: absolute;
  left: 10px;
  top: 4px;
  font-size: 34px;
  font-style: normal;
  font-family: Georgia, serif;
  color: var(--gold);
  opacity: 0.7;
  line-height: 1;
}

/* Pestañas "Semana 1 / 2 / 3..." dentro de cada tarjeta de rutina (vista del cliente).
   Solo aparecen si la rutina tiene más de una semana — una rutina de una sola semana no
   gana nada mostrando una pestaña única. Estilo píldora, dorado en la semana activa. */
/* En una fila que se desplaza horizontalmente (como los filtros de categoría de
   WHOOP/Nike) en vez de envolver en varias filas de píldoras del mismo peso — con 13
   categorías esa cuadrícula se sentía pesada y "genérica". Sin barra de scroll visible;
   se desliza con el dedo. Solo la pestaña activa lleva relleno; el resto es texto suave
   sin borde, así que la fila entera pesa mucho menos visualmente. */
.week-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 4px;
  margin: 4px 0 18px;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.week-tabs::-webkit-scrollbar { display: none; }
.week-tab {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--text-dim);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.week-tab:hover { color: var(--text); }
.week-tab.active {
  background: var(--gradient-gold);
  color: #1a1108;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(201, 162, 77, 0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}

/* ---- Tarjetas de ejercicio dentro de "Mis rutinas" (reemplazan la tabla anterior) ----
   Cada ejercicio es su propia tarjeta con nombre, estadísticas con icono (Series, Reps/
   Duración, Descanso) y una nota opcional, en vez de columnas de texto plano. El grid es
   responsive: una columna en celular, dos o más en pantallas anchas u horizontal — así
   se aprovecha siempre el ancho disponible sin depender de una tabla HTML. */
.rtn-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.rtn-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  transition: border-color 0.25s ease, transform 0.25s var(--ease-premium), box-shadow 0.25s ease;
}
.rtn-card:hover { border-color: rgba(201,162,77,0.5); box-shadow: 0 14px 32px rgba(0,0,0,0.32); }

.rtn-card-title {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 12px;
  padding-bottom: 10px;
  padding-right: 34px;
  border-bottom: 1px solid rgba(201,162,77,0.16);
}

/* Botón de iniciar cronómetro: anclado a la esquina de la tarjeta (no compite por
   espacio dentro de la fila de estadísticas), y como la tarjeta recorta cualquier
   desborde (overflow: hidden) nunca puede "montarse" sobre otra tarjeta ni sobre
   el dock inferior. */
.rtn-card .rest-timer-btn {
  position: absolute;
  top: 8px;
  right: 14px;
  z-index: 2;
  margin-left: 0;
}

.rtn-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.rtn-stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rtn-stat-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201,162,77,0.1);
  border: 1px solid rgba(201,162,77,0.25);
  color: var(--gold);
}
.rtn-stat-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rtn-stat-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rtn-stat-value {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rtn-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.rtn-stat-rest { grid-column: span 1; }

.rtn-card-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(201,162,77,0.16);
  font-size: 13px;
  font-style: italic;
  color: var(--text-dim);
  line-height: 1.5;
}
.rtn-card-note svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 480px) {
  .rtn-day-grid { grid-template-columns: 1fr; }
  .rtn-card-stats { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .rtn-stat-rest { grid-column: span 2; }
}

.ex-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

/* Campo de nombre de ejercicio + botón "Elegir" (abre el mosaico) uno junto al otro. */
.ex-name-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ex-name-wrap input { flex: 1; min-width: 0; }
.ex-name-wrap button { flex-shrink: 0; white-space: nowrap; }

.ex-reps-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ex-tiempo-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--text-dim);
  white-space: nowrap;
  cursor: pointer;
}

.ex-tiempo-toggle input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.actions-row { display: flex; gap: 8px; flex-wrap: wrap; }

.hidden { display: none !important; }

.empty {
  color: var(--text-dim);
  font-size: 14px;
  padding: 20px 0;
}

.progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* ---------------- Biblioteca de ejercicios estilo Netflix ---------------- */
.exercise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

/* En pantallas de escritorio se fuerzan exactamente 4 columnas (en vez de dejar
   que auto-fill decida según el ancho). Ahora que el mosaico ocupa todo el ancho
   de la pestaña (ya no comparte mitad de pantalla con el formulario), 4 columnas
   dejan tarjetas grandes y cómodas en vez de apretadas. */
@media (min-width: 900px) {
  .exercise-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

/* Mosaico compacto para el selector de ejercicios (modal). Antes usaba auto-fill con
   un mínimo chico y en pantallas anchas terminaba mostrando 6+ tarjetas por fila,
   demasiado pequeñas para distinguir bien el ejercicio; se fija a 4 columnas siempre
   (en escritorio) para que cada tarjeta se vea más grande y clara. */
.exercise-picker-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 12px;
}
.exercise-picker-grid .exercise-card-body { padding: 6px 8px; }
.exercise-picker-grid .exercise-card-title { font-size: 12px; margin-bottom: 4px; }
.exercise-picker-grid .exercise-card-tags { display: none; }
.exercise-picker-grid .exercise-card-placeholder { font-size: 28px; }

/* ---- Tarjeta de ejercicio "premium": pocos elementos, pero cuidados ----
   Antes cada tarjeta mostraba 3 etiquetas con fondo/borde dorado + una insignia
   "▶ Video" — con 250+ ejercicios en el mosaico, esa repetición se sentía recargada
   en vez de elegante. Ahora solo se muestra el grupo muscular (sin fondo, como
   texto pequeño en mayúsculas doradas) y un botón de video circular discreto; el
   resto de la info (tipo de entrenamiento, equipamiento) sigue disponible al abrir
   el detalle del ejercicio. Una línea dorada tenue separa la portada del texto y un
   degradado + sombra suave le dan la sensación de profundidad "boutique" en vez de
   una caja plana. */
.exercise-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-glass);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  transition: transform 0.2s var(--ease-premium), border-color 0.2s ease, box-shadow 0.2s ease;
}

.exercise-card:hover {
  transform: translateY(-3px);
  border-color: rgba(201,162,77,0.5);
  box-shadow: 0 14px 32px rgba(0,0,0,0.38);
}

.exercise-card-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-card-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.exercise-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video/imagen dentro de la ficha de ejercicio (modal) y del modal del Banco de Videos.
   Sin un aspect-ratio de partida, el navegador no sabe qué alto darle al <video> antes de
   conocer sus dimensiones reales (metadata) y puede reservarle una caja enorme, dejando el
   contenido real arriba y un vacío negro gigante debajo — el bug de "cortado a la mitad".
   Como la mayoría de los videos de la biblioteca son VERTICALES, se parte de un aspect-ratio
   9:16 por defecto (así la caja ya nace del tamaño correcto). En cuanto el navegador conoce
   las dimensiones reales del video (evento 'loadedmetadata' en user.js), ese valor se
   corrige en línea al aspect-ratio EXACTO del clip — así los pocos videos horizontales
   también terminan viéndose completos y sin recorte, sin caja gigante vacía. */
.exercise-modal-media {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 62vh;
  border-radius: 10px;
  margin: 0 auto 12px;
  display: block;
  background: #000;
  object-fit: contain;
}

img.exercise-modal-media { aspect-ratio: auto; }

.exercise-card-placeholder {
  font-size: 56px;
  font-weight: 800;
  color: var(--text-dim);
}

.exercise-card-video-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(201,162,77,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 10px;
  line-height: 1;
}
.exercise-card-video-badge::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin-left: 2px;
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent var(--gold);
}

.exercise-card-body {
  padding: 13px 14px 14px;
  border-top: 1px solid rgba(201,162,77,0.16);
}

.exercise-card-title {
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  margin-bottom: 5px;
  /* Máximo 2 líneas: nombres largos no rompen la simetría del mosaico. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}

.exercise-card-tags {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  min-height: 14px;
}

/* Editar/Eliminar siempre parten el ancho de la tarjeta a la mitad cada uno, así
   nunca se desbordan sin importar qué tan angosta sea la tarjeta. */
.exercise-card-body .actions-row button {
  flex: 1;
  text-align: center;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
}

/* ==================== RESPONSIVE / MÓVIL ==================== */
/* La mayoría de los clientes van a abrir la app desde el navegador de su celular,
   así que estas reglas reorganizan topbar, pestañas, tablas y formularios en
   pantallas angostas en vez de dejarlos desbordarse o verse aplastados. */
@media (max-width: 700px) {
  .wrap { padding: 14px; }
  .center-screen { padding: 14px; }

  .card { padding: 16px; }

  .hero { padding: 26px 18px; }
  .hero-title { font-size: 22px; }
  .hero-sub { max-width: 100%; }
  .hero.compact { padding: 18px 16px; }
  .hero.compact .hero-title { font-size: 18px; }

  /* Barra superior: apila el logo/nombre y las acciones en vez de aplastarlos en una fila. */
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    /* Igual que .landing-nav: sin esto, este @media (el que aplica en todos los
       celulares) pisaba el margen de seguridad de arriba y la app instalada quedaba
       otra vez detrás de la hora/batería. */
    padding-top: max(12px, calc(env(safe-area-inset-top) + 12px));
  }
  .topbar .brand { flex-wrap: wrap; row-gap: 6px; }
  .topbar .who {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* El logo grande se ve bien en pantallas anchas, pero en celular hay que achicarlo
     para que no empuje el resto de la barra o la pantalla de inicio fuera de vista. */
  .brand-logo { height: 46px; }
  .hero-logo { height: 130px; }

  /* Pestañas: más compactas para que quepan varias por fila en vez de una sola gigante. */
  .tabs { gap: 6px; }
  .tabs button { font-size: 12.5px; padding: 8px 10px; }

  /* Tablas: en vez de aplastar columnas hasta ser ilegibles, se deslizan horizontalmente
     dentro de su tarjeta (deslizar con el dedo para ver el resto). La tabla de ejercicios
     de las rutinas del cliente ya no es una tabla HTML (ver .rtn-day-grid / .rtn-card
     más abajo), así que esta regla no le aplica. */
  .card { overflow-x: auto; }
  table { min-width: 520px; }

  /* Evita que iOS haga zoom automático de la pantalla al tocar un campo de texto
     (Safari hace zoom si el tamaño de letra de un input es menor a 16px). */
  input, select, textarea { font-size: 16px; }

  /* Editor de ejercicios (plantillas/rutinas en el panel admin): de 5 columnas
     apretadas a una sola columna apilada y legible. */
  .ex-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 10px;
  }

  /* Antes esto quedaba en 1 sola columna en la mayoría de celulares (se veía como
     lista); con un mínimo más chico caben 2-3 tarjetas por fila y sí se ve mosaico. */
  .exercise-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 10px; }
  .exercise-card-title { font-size: 12.5px; }
  .exercise-card-tags .tag { font-size: 10px; padding: 1px 6px; }
  .exercise-picker-grid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 8px; }

  /* El bloque de cada día (.day-block) tenía su propia caja con borde y relleno, y
     dentro las tarjetas de ejercicio (.rtn-card) traen la suya: quedaban "cajas dentro
     de cajas" que le quitaban ancho útil a cada tarjeta. En móvil se quita la caja del
     día (deja de tener borde/fondo propio) y solo quedan visibles las tarjetas de
     ejercicio, que así aprovechan todo el ancho de la tarjeta de la rutina. */
  .day-block {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
  }
}

@media (max-width: 420px) {
  .brand-mark, .brand-mark-accent { font-size: 13px; }
  .hero-logo { height: 100px; }
  .brand-logo { height: 38px; }

  /* En pantallas muy angostas se fuerzan exactamente 2 columnas (en vez de dejar
     que el auto-fill decida) para garantizar el efecto mosaico siempre. */
  .exercise-grid { grid-template-columns: repeat(2, 1fr); }
  .exercise-picker-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==================== CRÉDITO DE AUTORÍA ====================
   Aparece en las tres pantallas (login, panel cliente, panel admin) para generar
   autoridad: quién creó la app y sus credenciales profesionales. */
.author-credit {
  text-align: center;
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.7;
  padding: 16px 12px;
}

.author-credit strong {
  color: var(--text);
  font-weight: 700;
}

.author-copyright {
  text-align: center;
  color: var(--text-dim);
  font-size: 10.5px;
  opacity: 0.65;
  padding: 0 12px 16px;
  margin-top: -10px;
}

/* En el login no hay scroll (la pantalla ocupa 100vh), así que el crédito va fijo abajo
   para que sea visible sin necesidad de desplazarse. */
.author-credit.fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 12, 15, 0.92);
  border-top: 1px solid var(--border);
  padding: 8px 12px;
  z-index: 40;
}

@media (max-width: 420px) {
  .author-credit { font-size: 10.5px; padding: 12px 10px; }
}

/* ==================== LANDING PÚBLICA (index.html) ====================
   Página de presentación de Fit Life Performance: nav, hero, cifras, método,
   programas, cómo funciona, resultados, diferenciadores y evaluación. */

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Al instalar la app (PWA en modo standalone) desaparece la barra del navegador y
     el contenido puede quedar detrás de la hora/batería del celular (viewport-fit=cover).
     env(safe-area-inset-top) suma el espacio real de esa zona; en el navegador normal
     vale 0 y el padding se queda igual que antes. */
  padding: 14px 28px;
  padding-top: max(14px, calc(env(safe-area-inset-top) + 14px));
  background: rgba(11, 12, 15, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.landing-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  flex-shrink: 0;
}

.landing-nav-logo { height: 34px; width: auto; border-radius: 4px; display: block; }

.landing-nav-links {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  white-space: nowrap;
  flex: 1;
  padding: 0 12px;
}

.landing-nav-links a {
  position: relative;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding-bottom: 3px;
  transition: color 0.2s ease;
}

.landing-nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--accent);
  transition: width 0.25s var(--ease-premium);
}

.landing-nav-links a:hover { color: var(--text); }
.landing-nav-links a:hover::after { width: 100%; }

.landing-nav-login {
  margin-top: 0;
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  padding: 8px 18px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.landing-nav-login:hover { background: var(--text); color: #0b0c0f; border-color: var(--text); }
.landing-nav-login:active { transform: scale(0.97); }

.promo-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  padding: 12px 20px;
  background: linear-gradient(90deg, rgba(201,162,77,0.16), rgba(255,59,48,0.14));
  border-bottom: 1px solid var(--gold);
  text-align: center;
}

.promo-banner-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

.promo-banner-text strong { color: var(--gold); }

.promo-banner-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
}

.promo-price-old {
  color: var(--text-dim);
  text-decoration: line-through;
  font-size: 13px;
}

.promo-price-new {
  color: var(--gold);
  font-size: 18px;
  font-weight: 800;
}

.promo-banner-btn {
  background: var(--accent);
  color: #fff;
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  padding: 7px 16px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.promo-banner-btn:hover { background: var(--text); color: #0b0c0f; border-color: var(--text); }
.promo-banner-btn:active { transform: scale(0.97); }

@media (max-width: 700px) {
  .promo-banner { padding: 10px 14px; gap: 6px 12px; }
  .promo-banner-text { font-size: 12px; width: 100%; }
  .promo-price-new { font-size: 16px; }
}

.landing-hero {
  padding: 64px 28px;
  background:
    linear-gradient(135deg, rgba(255,59,48,0.16), rgba(11,12,15,0.98)),
    radial-gradient(circle at 15% 15%, rgba(255,59,48,0.22), transparent 55%);
}

.landing-hero-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.landing-hero-title {
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 1.12;
  margin: 16px 0 18px;
  font-weight: 700;
}

.landing-hero-title em { color: var(--gold); font-style: normal; }

.landing-hero-sub {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: 28px;
}

.landing-hero-copy { min-width: 0; }

.landing-hero-copy-bubble {
  background:
    linear-gradient(160deg, rgba(255,59,48,0.16), rgba(255,255,255,0.02)),
    var(--bg-card);
  border: 1px solid rgba(255,59,48,0.4);
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 40px rgba(255,59,48,0.08);
}

.landing-hero-copy-bubble .landing-hero-sub { margin-bottom: 20px; }

.landing-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.landing-program-btn { margin-top: 6px; }

.btn-cta-primary, .btn-cta-secondary {
  display: inline-block;
  text-decoration: none;
  border-radius: 6px;
  padding: 14px 26px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: transform 0.25s var(--ease-premium), background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  border: 1.5px solid transparent;
}

.btn-cta-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-cta-primary:hover {
  background: var(--text);
  color: #0b0c0f;
  border-color: var(--text);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(255, 59, 48, 0.22);
}

.btn-cta-secondary { background: transparent; color: var(--text); border-color: var(--border); }
.btn-cta-secondary:hover {
  border-color: var(--text);
  transform: translateY(-2px);
}

.btn-cta-primary:active, .btn-cta-secondary:active { transform: translateY(0) scale(0.98); }

.landing-hero-visual-inner {
  border: 1px solid rgba(255, 59, 48, 0.3);
  border-radius: 20px;
  background:
    radial-gradient(circle at 30% 30%, rgba(201,162,77,0.14), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(255,59,48,0.16), transparent 55%),
    linear-gradient(160deg, var(--bg-card), #000);
  padding: 44px 28px;
  text-align: center;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.landing-hero-visual-inner:hover {
  border-color: rgba(201, 162, 77, 0.5);
  box-shadow: 0 20px 50px rgba(201, 162, 77, 0.14), 0 10px 30px rgba(255, 59, 48, 0.12);
}

.landing-hero-visual-logo {
  height: 230px;
  width: auto;
  max-width: 100%;
  opacity: 1;
  filter: drop-shadow(0 8px 30px rgba(201, 162, 77, 0.3));
  transition: transform 0.4s var(--ease-premium);
}

.landing-hero-visual-inner:hover .landing-hero-visual-logo { transform: scale(1.04); }

@media (max-width: 900px) {
  .landing-hero-visual-inner { min-height: 320px; }
  .landing-hero-visual-logo { height: 180px; }
}

@media (max-width: 480px) {
  .landing-hero-visual-logo { height: 140px; }
}

.landing-hero-visual-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.landing-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  padding: 22px 24px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.landing-stats-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dim);
  transition: color 0.2s ease;
}

.landing-stats-item:hover { color: var(--text); }
.landing-stats-item:hover .icon-gold { color: var(--accent); }

.landing-section { padding: 72px 28px; max-width: 1180px; margin: 0 auto; }

.landing-section-header { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.landing-section-header h2 {
  font-size: 30px;
  margin: 8px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.landing-pillars, .landing-programs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .landing-pillars, .landing-programs, .landing-metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .landing-pillars, .landing-programs, .landing-metrics { grid-template-columns: 1fr; }
}

.landing-pillar, .landing-program-card {
  background: var(--bg-card);
  border: 1px solid rgba(201, 162, 77, 0.22);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
  transition: transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium), border-color 0.35s ease, background 0.35s ease;
}

.landing-pillar:hover, .landing-program-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  background: #1a0f0f;
  box-shadow: 0 18px 40px rgba(255, 59, 48, 0.2);
}

.landing-pillar-icon, .landing-program-icon { margin-bottom: 16px; color: var(--gold); transition: color 0.3s ease, transform 0.3s var(--ease-premium); }
.landing-pillar:hover .landing-pillar-icon, .landing-program-card:hover .landing-program-icon {
  color: var(--accent);
  transform: scale(1.08);
}
.landing-pillar-icon svg, .landing-program-icon svg { width: 30px; height: 30px; }
.landing-pillar-icon svg path, .landing-pillar-icon svg circle,
.landing-program-icon svg path, .landing-program-icon svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tag svg, .landing-stats-item svg { width: 14px; height: 14px; }
.btn-cta-primary svg, .btn-cta-secondary svg { width: 13px; height: 13px; margin-left: 6px; vertical-align: -1px; }
.landing-pillar h3, .landing-program-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.landing-pillar p, .landing-program-card p { color: var(--text-dim); font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; }

/* Aparición escalonada: cada tarjeta de una fila se revela un poco después que la
   anterior, en vez de que todas salten a la vez (efecto más pulido, tipo Nike/Technogym). */
.landing-pillars .reveal:nth-child(1), .landing-programs .reveal:nth-child(1) { transition-delay: 0s; }
.landing-pillars .reveal:nth-child(2), .landing-programs .reveal:nth-child(2) { transition-delay: 0.08s; }
.landing-pillars .reveal:nth-child(3), .landing-programs .reveal:nth-child(3) { transition-delay: 0.16s; }
.landing-pillars .reveal:nth-child(4), .landing-programs .reveal:nth-child(4) { transition-delay: 0.24s; }
.landing-pillars .reveal:nth-child(5), .landing-programs .reveal:nth-child(5) { transition-delay: 0.32s; }
.landing-programs .reveal:nth-child(6) { transition-delay: 0.4s; }
.landing-programs .reveal:nth-child(7) { transition-delay: 0.48s; }
.landing-programs .reveal:nth-child(8) { transition-delay: 0.56s; }

.landing-steps { display: flex; flex-direction: column; gap: 18px; max-width: 640px; margin: 0 auto; }

.landing-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: border-color 0.3s ease, transform 0.3s var(--ease-premium);
}

.landing-step:hover { border-color: var(--accent); transform: translateX(4px); }

.landing-step-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 0 0 3px rgba(201, 162, 77, 0.25);
}

.landing-step h3 {
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
.landing-step p { color: var(--text-dim); font-size: 13.5px; margin: 0; }

.landing-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.landing-metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  transition: border-color 0.3s ease, transform 0.3s var(--ease-premium);
}

.landing-metric-card:hover { border-color: var(--accent); transform: translateY(-4px); }

.landing-metric-label { color: var(--gold); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
.landing-metric-value {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.landing-metric-accent { color: var(--accent); }
.landing-metric-sub { color: var(--text-dim); font-size: 12px; margin-top: 8px; line-height: 1.4; }

.landing-cta-final { background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* Tabla de diferenciadores: en vez de una tabla genérica, se ve como una comparación
   editorial -> columna izquierda apagada ("otros"), columna derecha en blanco con un
   acento rojo a la izquierda de cada celda, marcando visualmente quién gana cada fila. */
.landing-compare-card { padding: 8px 24px; }
.landing-compare-table { border-collapse: collapse; }
.landing-compare-table tr { border-bottom: 1px solid var(--border); }
.landing-compare-table tr:first-child { border-bottom: 2px solid var(--gold); }
.landing-compare-table tr:last-child { border-bottom: none; }
.landing-compare-table th, .landing-compare-table td { padding: 16px 20px; border: none; }
.landing-compare-table th {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.landing-compare-table th:last-child { color: var(--accent); }
.landing-compare-table td:first-child { color: var(--text-dim); }
.landing-compare-table td:last-child {
  color: var(--text);
  font-weight: 600;
  border-left: 2px solid var(--accent);
}

/* Animación de scroll: entrada suave con una curva "ease-out" pronunciada (estilo
   Apple/Nike) en vez de un ease lineal, más un ligerísimo zoom-in para dar sensación
   de profundidad sin ser exagerado. */
.reveal {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium);
}
.reveal.visible { opacity: 1; transform: translateY(0) scale(1); }

@media (max-width: 900px) {
  .landing-hero-grid { grid-template-columns: 1fr; }
  .landing-hero-title { font-size: 30px; }
}

@media (max-width: 700px) {
  /* El nav de la landing (logo + links de anclas + botón "Iniciar sesión") se aplastaba
     en una sola fila en celular: el logo/nombre y el botón nunca se encogen (flex-shrink:0),
     así que cuando no cabían todos, el botón terminaba empujado fuera de la pantalla.
     Solución: se parte en dos filas -> arriba logo+botón (siempre visibles), abajo los
     links de ancla en su propia franja deslizable. */
  .landing-nav {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 12px 16px;
    /* Esta regla de celular pisaba el padding-top con el margen de seguridad (ver arriba
       en .landing-nav): por eso el ajuste no se notaba en ningún teléfono. Se repite aquí
       para que sobreviva a este @media, que es justo el que aplica en todos los celulares. */
    padding-top: max(12px, calc(env(safe-area-inset-top) + 12px));
    gap: 10px;
  }
  .landing-nav-brand { order: 1; }
  .landing-nav-login { order: 2; margin-left: auto; }
  .landing-nav-links {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    padding: 0;
    gap: 16px;
  }

  .landing-hero { padding: 40px 18px; }
  .landing-hero-title { font-size: 25px; }
  .landing-hero-sub { font-size: 14.5px; }
  .landing-section { padding: 48px 18px; }
  .landing-section-header h2 { font-size: 21px; }
  .landing-stats { gap: 10px 18px; padding: 16px 18px; }
  .landing-stats-item { font-size: 12px; }

  /* Botones del hero: en vez de apretarse uno al lado del otro, se apilan a todo
     el ancho para que sean fáciles de tocar y nunca queden cortados. */
  .landing-hero-ctas { flex-direction: column; }
  .btn-cta-primary, .btn-cta-secondary { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
  /* En pantallas muy angostas ocultamos solo el ".APP" del nav (el logo y
     "NEURO PERFORMANCE" ya identifican la marca) para darle aire al botón de login. */
  .landing-nav-brand-online { display: none; }
}

/* ---- Cronómetro de descanso entre series (panel del cliente) ---- */

/* Botón pequeño "▶" junto al texto de descanso de cada ejercicio. */
.rest-timer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 6px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--accent-2);
  background: transparent;
  color: var(--accent-2);
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}
.rest-timer-btn:active { background: var(--accent-2); color: #04150e; }

/* ---- Navegación inferior fija (estilo Apple Music: solo íconos + texto, sin "pastilla"
   de fondo detrás de cada botón — el color es lo único que marca la pestaña activa). El
   botón "Más" vive aparte, como círculo flotante junto al dock (misma referencia visual
   que la app de Apple Music enviada: barra de tabs + botón redondo independiente). */
.dock-row {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 400;
  display: flex;
  align-items: stretch;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
}

.bottom-nav {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 2px;
  background: rgba(23, 25, 31, 0.82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 2px 10px rgba(0,0,0,0.35);
  padding: 7px 6px;
}

/* Botón "Más": circular, aislado, mismo vidrio que el dock — solo ícono, sin texto.
   Usa el selector combinado ".bottom-nav-btn.bottom-nav-more" (más específico que el
   ".bottom-nav-btn" de más abajo) a propósito: el botón tiene AMBAS clases en el HTML, y
   sin esa especificidad extra el "flex: 1" de .bottom-nav-btn ganaba por venir después en
   la hoja de estilos, estirando el círculo hasta ocupar todo el ancho sobrante (se veía
   como una píldora gigante en vez de un círculo chico). "align-self: center" además evita
   que el "align-items: stretch" de .dock-row lo estire de alto y lo deforme. */
.bottom-nav-btn.bottom-nav-more {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  align-self: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: rgba(23, 25, 31, 0.82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 2px 10px rgba(0,0,0,0.35);
  color: var(--text-dim);
  padding: 0;
  margin: 0;
  gap: 0;
  transition: color 0.3s var(--ease-premium);
}
.bottom-nav-more .nav-label { display: none; }
.bottom-nav-more:active:not(:disabled) { transform: scale(0.92); }
.bottom-nav-more.active,
.bottom-nav-more:hover:not(:disabled) { color: var(--gold); }

.bottom-nav-btn {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 8px 4px 7px;
  margin: 0;
  border-radius: 15px;
  transition: color 0.3s var(--ease-premium);
}
.bottom-nav-btn:hover:not(:disabled) { filter: none; color: var(--text); }
.bottom-nav-btn:active:not(:disabled) { transform: scale(0.94); }

.bottom-nav-btn .nav-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease-premium);
}

.bottom-nav-btn .nav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: font-weight 0.2s ease;
}

.bottom-nav-btn svg { width: 23px; height: 23px; transition: filter 0.3s ease; }
.bottom-nav-btn svg path,
.bottom-nav-btn svg circle,
.bottom-nav-btn svg line,
.bottom-nav-btn svg rect,
.bottom-nav-btn svg polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Activo: solo cambia de color (dorado), sin fondo ni sombra — nada de "botón", solo
   el ícono y la etiqueta tomando el acento, igual que los tabs de Apple Music. */
.bottom-nav-btn.active {
  color: var(--gold);
  background: transparent;
  box-shadow: none;
}
.bottom-nav-btn.active .nav-icon-wrap { transform: translateY(-1px) scale(1.08); }
.bottom-nav-btn.active .nav-label { font-weight: 700; }

@media (max-width: 380px) {
  .bottom-nav-btn .nav-label { font-size: 9px; }
  .bottom-nav-btn svg { width: 21px; height: 21px; }
  .bottom-nav-btn.bottom-nav-more { flex-basis: 46px; width: 46px; height: 46px; }
}

/* Cronómetro de descanso, "mini-reproductor" tipo Apple Music — pero el reproductor real
   de Apple Music (la franja "Reproduciendo ahora") es vidrio oscuro translúcido con blur,
   NO un bloque de color sólido. El gradiente verde sólido de antes se veía plano y no
   encajaba con el resto de la app (que sí es vidrio); ahora usa el mismo lenguaje de
   .card/.day-block (translúcido + blur fuerte) con solo un aro/glow verde sutil para que
   siga leyéndose como "descanso" sin ser un bloque de color macizo. Flota sobre el dock. */
.rest-timer-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 88px;
  z-index: 500;
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02)), rgba(13, 32, 28, 0.6);
  border: 1px solid rgba(61, 220, 151, 0.35);
  border-radius: var(--radius-glass);
  padding: 10px 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 20px rgba(34, 201, 143, 0.18), inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  max-width: 520px;
  margin: 0 auto;
}
.rest-timer-bar.hidden { display: none; }

.rest-timer-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

/* Ícono decorativo tipo "carátula" del mini-reproductor — un cuadrado redondeado
   traslúcido con un cronómetro adentro, mismo lugar que ocupa el ícono de Apple Music. */
.rest-timer-icon-badge {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(61, 220, 151, 0.18);
  border: 1px solid rgba(61, 220, 151, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-2);
}
.rest-timer-icon-badge svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.rest-timer-label {
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rest-timer-time {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.25);
}

/* Botón para silenciar/activar los pitidos del cronómetro; la preferencia se recuerda
   por cliente (localStorage), así que solo hace falta tocarlo una vez. */
.rest-timer-sound-btn {
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.rest-timer-sound-btn.muted { color: rgba(255,255,255,0.55); background: transparent; }
.rest-timer-sound-btn:active { transform: scale(0.92); }

.rest-timer-progress-track {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  margin-bottom: 10px;
}
.rest-timer-progress-fill {
  height: 100%;
  background: var(--gradient-rest);
  box-shadow: 0 0 6px rgba(34, 201, 143, 0.6);
  transition: width 1s linear;
}

/* Frase breve de conciencia corporal, rotando en cada descanso — no es un botón ni una
   alerta, es solo una línea de acompañamiento mientras el cuerpo se recupera. */
.rest-timer-frase {
  font-size: 11.5px;
  font-style: italic;
  color: rgba(255,255,255,0.8);
  text-align: center;
  margin: 2px 0 8px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Fila de controles: -15s / +15s quedan como pastillas chicas de vidrio a los costados,
   "Pausar/Reanudar/Reiniciar" es el botón grande y sólido (equivalente al "play" del
   mini-reproductor), y "Cancelar" queda como texto discreto, igual que un botón de
   cerrar en un mini-player — mismos ids/textos de siempre, solo cambia el tratamiento
   visual, así que no hace falta tocar el JS. */
.rest-timer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rest-timer-actions button {
  flex: 1;
  padding: 8px 4px;
  font-size: 12.5px;
  margin-top: 0;
}
.rest-timer-actions button.secondary {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#restTimerPauseBtn {
  flex: 1.6;
  background: #fff;
  color: #0d8f6a;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
#restTimerCancelBtn {
  flex: 0.9;
  background: transparent;
  color: rgba(255,255,255,0.75);
  box-shadow: none;
  border: 1px solid rgba(255,255,255,0.25);
}

@media (max-width: 480px) {
  .rest-timer-time { font-size: 22px; }
  .rest-timer-actions button { padding: 8px 2px; font-size: 11.5px; }
}

/* En horizontal, un celular tiene mucha menos altura de pantalla (a veces apenas
   400-500px), así que el dock inferior y la barra flotante del cronómetro (cada uno
   calculado para pantallas altas en vertical) terminaban quedando montados uno sobre
   el otro. Aquí se compactan ambos: menos relleno, iconos y letras más chicos, y la
   barra del cronómetro se acerca al dock ya que este también ocupa menos espacio. */
@media (orientation: landscape) and (max-height: 500px) {
  .dock-row { bottom: max(8px, env(safe-area-inset-bottom)); }
  .bottom-nav { padding: 4px 6px; }
  .bottom-nav-btn.bottom-nav-more { flex-basis: 40px; width: 40px; height: 40px; }
  .bottom-nav-btn { padding: 4px 4px 3px; gap: 2px; }
  .bottom-nav-btn svg { width: 18px; height: 18px; }
  .bottom-nav-btn .nav-label { font-size: 8px; }

  .rest-timer-bar { bottom: 52px; padding: 8px 12px; }
  .rest-timer-info { margin-bottom: 5px; }
  .rest-timer-time { font-size: 19px; }
  .rest-timer-label { font-size: 10.5px; }
  .rest-timer-sound-btn { width: 22px; height: 22px; }
  .rest-timer-progress-track { margin-bottom: 6px; height: 5px; }
  .rest-timer-actions button { padding: 5px 4px; font-size: 10.5px; }

  /* En este mismo formato bajito, también conviene bajarle altura a la cabecera y al
     hero para que quede más contenido visible sin tener que deslizar tanto. */
  body.has-bottom-nav .wrap { padding-bottom: 80px; }
}

/* ==================== CUENTA: foto de perfil + datos del usuario ====================
   La pestaña "Cuenta" pasó de solo tener "Cambiar contraseña" / "Salir" a mostrar todo
   lo que un cliente necesita tener a la mano: su foto, sus datos y los de su plan. */
.account-photo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
}

.account-avatar-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin-bottom: 14px;
}

.account-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-card-2);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.account-avatar-initials {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--accent-2);
  letter-spacing: 0.02em;
}

.account-avatar-edit-btn {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-2);
  color: #04150e;
  border: 3px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.account-avatar-edit-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.account-avatar-edit-btn:active { transform: scale(0.94); }

.account-photo-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}

.account-info-list {
  display: flex;
  flex-direction: column;
}

.account-info-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.account-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.account-info-row:first-child { padding-top: 0; }

.account-info-label {
  font-size: 12.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.account-info-value {
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}

/* ---------------- Racha de Conciencia Corporal ----------------
   Tarjeta de racha (visible arriba, en el hero, sin importar la pestaña activa) y el
   modal de check-in diario: dial de energía, lunas de sueño y silueta corporal tocable.
   Ver public/js/user.js y routes/body-checkins.js para la lógica. */
/* Antes era una tarjeta ancha (100% del hero) con ícono + dos líneas de texto + un
   botón aparte a la derecha — obstruía la vista hacia el resto de la pantalla apenas
   se entraba a la app. Ahora es un solo botón compacto, de ancho automático (no
   "width:100%" como el resto de los <button>), que se puede ignorar de un vistazo o
   tocar para hacer el check-in. */
.streak-btn {
  display: inline-flex;
  width: auto;
  align-items: center;
  gap: 6px;
  background: rgba(201,162,77,0.1);
  border: 1px solid rgba(201,162,77,0.4);
  color: var(--gold);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 14px;
}
.streak-btn:hover { background: rgba(201,162,77,0.18); }
.streak-btn.hidden { display: none; }

/* Antes esta tarjeta reutilizaba el .card plano (fondo sólido, sin jerarquía) y mezclaba
   una insignia verde (.badge.ok), emojis (😴/⚡/☽) y un rojo muy saturado en la silueta —
   se sentía barato y desconectado del resto de la app ya rediseñada. Ahora usa el mismo
   degradado/sombra que las tarjetas premium (.rtn-card) y separa cada bloque con una
   línea dorada muy sutil en vez de amontonar todo junto. */
.checkin-card {
  text-align: center;
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  border-color: rgba(201,162,77,0.16);
  box-shadow: 0 14px 32px rgba(0,0,0,0.32);
}
.checkin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(201,162,77,0.16);
}
.checkin-header h3 { margin: 0; font-size: 17px; }

.checkin-streak-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(201,162,77,0.12);
  border: 1px solid rgba(201,162,77,0.4);
  color: var(--gold);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.checkin-dial-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 4px auto 8px;
}
.checkin-dial-svg { width: 140px; height: 140px; display: block; }
.checkin-dial-track { fill: none; stroke: var(--bg-card-2); stroke-width: 10; }
.checkin-dial-fill {
  fill: none;
  stroke: var(--gold);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.15s ease;
}
.checkin-dial-value { font-size: 26px; font-weight: 800; fill: var(--text); font-family: var(--font-display); }
.checkin-dial-caption { font-size: 11px; fill: var(--text-dim); }

/* El dial de arriba es solo lectura visual; el control real es este slider horizontal,
   grande y visible, para que mover hacia 0% o 100% sea preciso y no se sienta "aleatorio"
   como pasaba con el input invisible superpuesto sobre el círculo. */
.checkin-energia-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px auto 14px;
  max-width: 280px;
}

.checkin-energia-extremo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  flex-shrink: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.checkin-energia-extremo:hover { color: var(--gold); }
.checkin-energia-extremo:active { opacity: 0.8; }

.checkin-energia-slider {
  flex: 1;
  width: 100%;
  height: 28px;
  margin: 0;
  cursor: grab;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.checkin-energia-slider:active { cursor: grabbing; }

.checkin-energia-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-card-2);
}
.checkin-energia-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-card-2);
}
.checkin-energia-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 1px var(--gold);
  margin-top: -9px;
  cursor: grab;
}
.checkin-energia-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 1px var(--gold);
  cursor: grab;
}

.checkin-sueno-wrap {
  margin: 0 0 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(201,162,77,0.12);
}
/* Antes eran glifos de luna (☽) sacados de la fuente del sistema — se veían distinto
   según el dispositivo y rompían la regla de "sin emojis" del resto de la app. Ahora son
   puntos dibujados en CSS, del mismo estilo que cualquier otro control dorado. */
.checkin-moons { display: flex; justify-content: center; gap: 12px; }
.checkin-moon {
  width: 15px;
  height: 15px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.checkin-moon:hover { border-color: rgba(201,162,77,0.5); }
.checkin-moon:active { transform: scale(0.9); }
.checkin-moon.active {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,162,77,0.15);
}

.checkin-body-wrap {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(201,162,77,0.12);
}
.checkin-body-svg { width: 130px; display: block; margin: 8px auto; overflow: visible; }
.body-part { fill: var(--bg-card-2); }
.zona-hit { fill: transparent; cursor: pointer; transition: fill 0.15s ease; }
/* Antes un rojo muy saturado (255,92,108) para ambas intensidades, que chocaba con la
   paleta dorada. "Leve" ahora usa el mismo dorado del resto de la app; "fuerte" conserva
   un rojo, pero más apagado, para que siga leyéndose como alerta sin verse fuera de tono. */
.zona-hit.leve { fill: rgba(201,162,77,0.45); }
.zona-hit.fuerte { fill: rgba(214,90,90,0.8); }

.checkin-badge-toast {
  margin-top: 12px;
  background: var(--bg-card-2);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
}
.checkin-badge-toast.hidden { display: none; }

/* Visor propio de PDF (nutrición): reemplaza el enlace directo al archivo. Sin barra de
   herramientas nativa del navegador, sin botón de descarga/impresión — solo las páginas
   dibujadas en <canvas>. user-select/touch-callout en "none" evita el menú largo de
   "Guardar imagen" al mantener presionado en celular (freno adicional, no infalible). */
.pdf-viewer-card {
  width: 100%;
  max-width: 680px;
  max-height: min(90vh, var(--safe-modal-max-h));
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.pdf-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pdf-viewer-body {
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.pdf-viewer-page {
  max-width: 100%;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
/* Barra de Anterior/Siguiente del visor página-por-página (ver user.js: renderiza una
   sola página a la vez en vez de todo el documento, para no saturar memoria en móvil). */
.pdf-viewer-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.pdf-viewer-nav button:disabled {
  opacity: 0.4;
  cursor: default;
}
#pdfViewerPageInfo {
  font-size: 13px;
  white-space: nowrap;
}

/* Overlay de impacto para las frases de conciencia corporal (cierre de sesión, permiso
   de descanso consciente, hitos de racha). A propósito NO es un toast pequeño: ocupa el
   centro de la pantalla con una entrada suave, para que el mensaje realmente se note y
   se sienta como una pausa, no como un aviso que se ignora de reojo. */
.frase-consciencia-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 7, 9, 0.82);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 700;
  padding: 24px;
}
.frase-consciencia-overlay.hidden { display: none; }

.frase-consciencia-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: linear-gradient(160deg, var(--bg-card), var(--bg-card-2));
  border: 1px solid var(--gold);
  border-radius: 16px;
  padding: 34px 26px 26px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(201,162,77,0.15), 0 20px 60px rgba(0,0,0,0.55);
  animation: fraseConscienciaEntrada 0.4s var(--ease-premium, ease-out);
}

@keyframes fraseConscienciaEntrada {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.frase-consciencia-marca {
  font-family: Georgia, serif;
  font-size: 48px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.85;
  margin-bottom: 4px;
}

.frase-consciencia-texto {
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 24px;
}

.frase-consciencia-btn {
  background: var(--gold);
  color: #0b0c0f;
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.frase-consciencia-btn:hover { opacity: 0.9; }
.frase-consciencia-btn:active { transform: scale(0.96); }