@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;700&display=swap');

:root {
  --bg: #f3f4f9;
  --bg-grid: #e9ebf3;
  --surface: #ffffff;
  --surface-2: #f1f2f8;
  --border: #e2e4ee;
  --text: #191b26;
  --text-muted: #6b7280;
  --ember: #ff4b2b;
  --ember-dark: #e2380f;
  --ember-rgb: 255,75,43;
  --mint: #00c48c;
  --amber: #ffaa00;
  --red: #ef4444;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(20,22,50,.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14151d;
    --bg-grid: #1c1e29;
    --surface: #1c1e29;
    --surface-2: #23252f;
    --border: #2e303c;
    --text: #f2f3f7;
    --text-muted: #9498a8;
    --shadow: 0 10px 30px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  --bg: #14151d;
  --bg-grid: #1c1e29;
  --surface: #1c1e29;
  --surface-2: #23252f;
  --border: #2e303c;
  --text: #f2f3f7;
  --text-muted: #9498a8;
  --shadow: 0 10px 30px rgba(0,0,0,.4);
}

.theme-toggle {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--ember); color: var(--ember); transform: rotate(15deg); }
.theme-toggle-fixed { position: fixed; top: 18px; right: 18px; z-index: 20; box-shadow: var(--shadow); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Los <button>/<input>/<select> NO heredan la tipografía de la página por
   defecto (usan la fuente del sistema) a menos que se les indique. La mayoría
   de botones del sitio ya fijaban su fuente vía .btn, pero los pequeños
   (check de serie, eliminar, menú de ejercicio, etc.) no — y en la fuente por
   defecto de algunos navegadores de Android (Samsung Internet en particular)
   símbolos como ✓ o ✕ no se dibujan bien y quedan en blanco/"tapados". */
button, input, select, textarea { font-family: inherit; }

/* Banner de temporada patria (todo septiembre): bandera ondeando + mensaje
   de independencia. Un solo componente (includes/mes_patrio.php) reusado en
   el portal público y en los paneles de cliente/staff. */
.mes-patrio-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
  margin-bottom: 14px;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #4997d0, #2f7cb8);
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
  box-shadow: var(--shadow);
}
.mes-patrio-banner strong { font-weight: 800; }

.mes-patrio-bandera {
  display: inline-flex;
  width: 30px; height: 20px;
  flex: none;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  animation: mesPatrioOndear 2.4s ease-in-out infinite;
  transform-origin: left center;
}
.mes-patrio-bandera span { flex: 1; height: 100%; }
.mes-patrio-bandera span:nth-child(1),
.mes-patrio-bandera span:nth-child(3) { background: #4997d0; }
.mes-patrio-bandera span:nth-child(2) { background: #fff; }

@keyframes mesPatrioOndear {
  0%, 100% { transform: skewY(0deg); }
  25% { transform: skewY(5deg); }
  75% { transform: skewY(-5deg); }
}

/* Dentro del hero público el fondo es una foto; el banner se integra como
   tarjeta translúcida en vez de flotar suelto encima de la imagen. */
.hero-full-content .mes-patrio-banner {
  background: rgba(47,124,184,.9);
  backdrop-filter: blur(2px);
  margin-bottom: 18px;
}

/* Pantalla de bienvenida al entrar (ver includes/topbar.php): tapa el menú y
   el contenido un momento justo después del login, en vez de mostrarlos de
   una vez. z-index bien alto porque tiene que ganarle hasta al cajón del
   menú en celular (ver .staff-sidebar en la sección de sidebar). */
.bienvenida-overlay {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  cursor: pointer;
  opacity: 1; transition: opacity .5s ease;
}
.bienvenida-overlay.bienvenida-oculto { opacity: 0; pointer-events: none; }
.bienvenida-caja { text-align: center; padding: 20px; }
.bienvenida-caja .brand-icon { width: 42px; height: 42px; color: var(--ember); margin-bottom: 14px; }
.bienvenida-eyebrow {
  font-family: 'Roboto Mono', monospace; text-transform: uppercase; letter-spacing: .25em;
  color: var(--text-muted); font-size: .8rem; margin: 0 0 6px;
}
.bienvenida-nombre {
  font-family: 'Bebas Neue', 'Inter', sans-serif; text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(2rem, 6vw, 3.4rem); color: var(--text); margin: 0; line-height: 1.1;
}
.bienvenida-rol { color: var(--ember); font-weight: 600; margin: 6px 0 0; font-size: 1.05rem; }

body {
  margin: 0;
  background:
    linear-gradient(var(--bg-grid) 1px, transparent 1px) 0 0/100% 42px,
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px) 0 0/42px 100%,
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 .3em;
  color: var(--text);
}
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.1rem; color: var(--text-muted); font-weight: 400; }

.mono { font-family: 'Roboto Mono', monospace; }

a { color: var(--ember); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
/* Para pantallas con tablas/listas densas (ej. editor de rutinas) que
   desperdician espacio a los lados con el ancho normal del sitio. */
.container-ancho { max-width: 1600px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  letter-spacing: .08em;
}
.brand .brand-icon {
  width: 26px; height: 26px;
  color: var(--ember);
  flex-shrink: 0;
}
.brand small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: .6rem;
  letter-spacing: .12em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.topbar-user {
  display: flex; align-items: center; gap: 14px;
  font-size: .9rem; color: var(--text-muted);
}
.topbar-user strong { color: var(--text); }

.pulse-divider {
  height: 22px;
  margin: 4px 0 20px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .85;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24'%3E%3Cpolyline points='0,12 120,12 140,2 155,22 172,12 400,12' fill='none' stroke='%23ff4b2b' stroke-width='2'/%3E%3C/svg%3E");
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
/* Aviso "viendo como"/"entrenando": fondo con tinte ember que se adapta solo
   al tema (en vez de un hex fijo pensado solo para fondo claro). */
.card-aviso { background: rgba(var(--ember-rgb), .12); border-color: var(--ember); }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* ---------- Pestaña "Medidas" del cliente: chips de composición + silueta ---------- */
.delta-up { color: var(--red); }
.delta-down { color: var(--mint); }
.delta-flat { color: var(--text-muted); }

.medidas-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.medida-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-size: .85rem;
  white-space: nowrap;
}
.medida-chip .valor { font-family: 'Roboto Mono', monospace; font-weight: 700; }
/* En celular, una sola columna (una tarjeta por fila) para que el texto quepa
   en una sola línea — con 2 columnas se partían palabras como "% Grasa" a la
   mitad, que se veía feo. */
@media (max-width: 700px) {
  .medidas-chips { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .medida-chip { padding: 8px 14px; font-size: .82rem; white-space: nowrap; }
}
.medidas-silueta-card { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.medidas-silueta-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  /* La foto (JPG) trae fondo blanco fijo (no admite transparencia); se le pone
     fondo blanco explícito para que no choque con el tema oscuro. Va en la
     imagen (no en este contenedor con overflow:hidden) porque las etiquetas
     de medida sí necesitan poder salirse de este ancho hacia los lados. */
  line-height: 0;
}
.medidas-silueta-img { display: block; width: 100%; height: auto; background: #fff; border-radius: var(--radius); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .medidas-silueta-img { background: var(--surface); filter: invert(1); }
}
:root[data-theme="dark"] .medidas-silueta-img { background: var(--surface); filter: invert(1); }
.medidas-silueta-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.medida-etiqueta {
  position: absolute;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 9px;
  font-size: .72rem;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: var(--shadow);
}
.medida-etiqueta-nombre { color: var(--text-muted); }
.medida-etiqueta-valor { font-family: 'Roboto Mono', monospace; font-weight: 700; }
.medida-etiqueta-cambio { font-size: .68rem; font-weight: 700; }
.medida-etiqueta-anterior { font-size: .66rem; color: var(--text-muted); }
.medida-etiqueta.izq { left: 14%; transform: translate(-100%, -50%); align-items: flex-end; text-align: right; }
.medida-etiqueta.der { left: 86%; transform: translate(0, -50%); align-items: flex-start; text-align: left; }

.medidas-lista-movil { display: none; }
@media (max-width: 700px) {
  .medida-etiqueta { display: none; }
  .medidas-silueta-wrap { max-width: 220px; }
  .medidas-lista-movil {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    width: 100%;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
  }
  .medidas-lista-movil li {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .8rem;
  }
  .medidas-lista-movil li > span:last-child {
    display: flex; flex-direction: column; align-items: flex-end;
    font-family: 'Roboto Mono', monospace; font-weight: 700; text-align: right;
  }
  .medidas-lista-movil .medida-etiqueta-cambio,
  .medidas-lista-movil .medida-etiqueta-anterior { font-family: 'Inter', sans-serif; font-weight: 400; }
}

.stat {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.stat:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(20,22,50,.12); }
.stat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--ember), var(--mint));
  opacity: 0; transition: opacity .2s ease;
}
.stat:hover::before { opacity: 1; }
.stat .label { color: var(--text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.stat .value { font-family: 'Roboto Mono', monospace; font-size: 1.8rem; font-weight: 700; margin-top: 4px; }
.stat .delta { font-size: .85rem; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.stat .delta.up { color: var(--red); }
.stat .delta.down { color: var(--mint); }
.stat .delta.flat { color: var(--text-muted); }

.stat-clicable {
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  display: block;
}
.stat-clicable.active { border-color: var(--ember); box-shadow: 0 0 0 2px var(--ember) inset; }
.stat-clicable.active::before { opacity: 1; }

.week-tab {
  position: relative;
  border: 1px solid var(--border);
  border-left: 4px solid var(--ember);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.week-tab .week-no {
  position: absolute; top: -10px; left: 14px;
  background: var(--ember);
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: .72rem;
  letter-spacing: .06em;
  padding: 2px 10px;
  border-radius: 4px;
}

label { display: block; font-size: .85rem; color: var(--text-muted); margin: 14px 0 6px; }
input, select, textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 12px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:hover, select:hover, textarea:hover { border-color: #cfd2e0; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ember);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(var(--ember-rgb), .14);
}
input.is-valid, select.is-valid, textarea.is-valid { border-color: var(--mint); }
input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--red); }
input::placeholder, textarea::placeholder { color: #9aa0ac; }
/* SweetAlert2 pinta sus propios campos con selectores tipo
   "div:where(.swal2-container) input:where(.swal2-input)" — el :where()
   anula la clase, pero el "div" y el "input" sueltos siguen contando, así que
   ese selector le gana en especificidad al simple "input" de arriba. El
   resultado: el texto se quedaba con el color fijo del popup (#191b26,
   pensado para su fondo blanco) en vez de var(--text), y en tema oscuro
   quedaba prácticamente invisible sobre el fondo oscuro que sí heredaba bien.
   Un selector de clase (.swal2-input) tiene más especificidad que ese
   "div input" y lo gana de forma consistente. */
.swal2-input, .swal2-textarea, .swal2-select {
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus {
  background: var(--surface);
}
input[type="date"] { min-width: 0; -webkit-appearance: none; appearance: none; }
.filtro-historial > div { min-width: 0; flex: 1 1 140px; }
@media (max-width: 480px) {
  .filtro-historial { flex-direction: column; align-items: stretch; }
  .filtro-historial > div, .filtro-historial > .btn, .filtro-historial > a.btn { width: 100%; }
}
.password-field { position: relative; }
.password-field input { padding-right: 42px; }
.password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
}
.password-toggle:hover { color: var(--text); }
.password-toggle svg { width: 20px; height: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: .92rem;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--ember); color: #fff; box-shadow: 0 6px 16px rgba(var(--ember-rgb), .3); }
.btn-outline { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.btn-mantener-activo { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; }
.btn-danger { background: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(239,68,68,.28); }
.btn-muted { background: var(--surface-2); color: var(--text-muted); }
.btn-sm { padding: 7px 12px; font-size: .8rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-block { width: 100%; }

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,.55);
  animation: rippleAnim .55s ease-out;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(2.6); opacity: 0; }
}

[data-animate] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.auth-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.auth-card { width: 100%; max-width: 420px; }
.auth-card .card { padding: 34px 30px; }

/* ---------- Hero de portada (full-bleed, con el login encima) ---------- */
.hero-full {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 24px 90px;
  background:
    radial-gradient(circle at 15% 20%, rgba(var(--ember-rgb),.35), transparent 55%),
    linear-gradient(160deg, #191b26 0%, #0f1018 100%);
  color: #fff;
}
.hero-full-watermark {
  position: absolute;
  inset: auto 0 -20% 0;
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(6rem, 20vw, 15rem);
  letter-spacing: .04em;
  color: rgba(255,255,255,.045);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero-slide.active { opacity: 1; }
.hero-slide::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 15%, rgba(var(--ember-rgb),.3), transparent 55%),
    linear-gradient(180deg, rgba(15,16,24,.55) 0%, rgba(15,16,24,.9) 100%);
}
.hero-full-content { position: relative; z-index: 1; max-width: 460px; display: flex; flex-direction: column; align-items: center; }
.hero-full .brand { color: #fff; margin-bottom: 24px; justify-content: center; }
.hero-full .brand small { color: rgba(255,255,255,.6); }
.hero-full h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.6rem, 6vw, 4rem);
  letter-spacing: .02em;
  line-height: 1.05;
  margin: 0 0 14px;
  color: #fff;
}
.hero-full h1 span { color: var(--ember); }
.hero-full-tagline { color: rgba(255,255,255,.75); font-size: 1rem; max-width: 400px; margin: 0 0 34px; }
.hero-login-card { width: 100%; max-width: 400px; padding: 34px 32px; text-align: left; color: var(--text); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.portal-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(var(--ember-rgb),.1);
  color: var(--ember);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 16px;
}
.hero-scroll-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 1;
  animation: heroCueBounce 2.2s ease-in-out infinite;
  transition: background .15s ease, border-color .15s ease;
}
.hero-scroll-cue:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.55); }
.hero-scroll-cue svg { width: 18px; height: 18px; }
@keyframes heroCueBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); }
}
@media (max-width: 640px) {
  .hero-full { padding: 84px 20px 76px; }
}

/* ---------- Qué incluye tu membresía ---------- */
.features-section { padding: 80px 24px; max-width: 1080px; margin: 0 auto; }
.features-heading { text-align: center; max-width: 560px; margin: 0 auto 40px; }
.features-heading .eyebrow { display: block; color: var(--ember); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: 8px; }
.features-heading h2 { margin: 0; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; }
.feature-card { text-align: left; }
.feature-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(var(--ember-rgb), .1);
  color: var(--ember);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-title { font-weight: 600; color: var(--text); margin-bottom: 6px; }
.feature-desc { margin: 0; color: var(--text-muted); font-size: .9rem; line-height: 1.5; }

/* ---------- Sección de frase editorial (sin tarjetas) ---------- */
.quote-section {
  position: relative;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 24px;
  overflow: hidden;
}
.quote-mark {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(9rem, 22vw, 15rem);
  line-height: 1;
  color: rgba(var(--ember-rgb), .08);
  pointer-events: none;
  user-select: none;
}
.quote-display { position: relative; z-index: 1; max-width: 780px; margin: 0; }
.quote-display p {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.8rem, 4.4vw, 3.1rem);
  letter-spacing: .01em;
  line-height: 1.25;
  color: var(--text);
  margin: 0;
  min-height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .35s ease, transform .35s ease;
}
.quote-display p.fade-out { opacity: 0; transform: translateY(-10px); }
.quote-label {
  position: relative; z-index: 1;
  display: block;
  margin-top: 22px;
  color: var(--ember);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
}
.quote-dots { position: relative; z-index: 1; display: flex; gap: 10px; margin-top: 34px; }
.quote-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, transform .2s ease;
}
.quote-dot:hover { transform: scale(1.2); }
.quote-dot.active { background: var(--ember); }
@media (max-width: 640px) {
  .quote-section { padding: 76px 20px; min-height: 340px; }
}

/* ---------- Sección final "Acerca de tu entrenador" (una sola tarjeta) ---------- */
.about-trainer-section { padding: 70px 24px; }
.about-trainer-card {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  overflow: hidden;
  padding: 48px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, #191b26 0%, #0f1018 100%);
  box-shadow: var(--shadow);
  color: #fff;
}
.about-trainer-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 88% 10%, rgba(var(--ember-rgb),.3), transparent 55%);
  pointer-events: none;
}
.about-trainer-photo {
  position: relative; z-index: 1;
  flex: 0 0 auto;
  width: min(190px, 40vw);
  height: min(190px, 40vw);
  margin: 0 auto;
  padding: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
}
.about-trainer-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 44%; display: block; }
.about-trainer-photo-placeholder {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  color: var(--text-muted);
}
.about-trainer-photo-placeholder svg { width: 44%; height: 44%; }
.about-trainer-body { position: relative; z-index: 1; flex: 1 1 320px; min-width: 0; }
.about-trainer-badge {
  display: inline-block;
  background: rgba(var(--ember-rgb),.16);
  border: 1px solid rgba(var(--ember-rgb),.4);
  color: var(--ember);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.about-trainer-body h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 14px; color: #fff; }
.about-trainer-bio { color: rgba(255,255,255,.78); margin: 0 0 20px; line-height: 1.6; }
.about-trainer-certs { display: flex; flex-wrap: wrap; gap: 8px; }
.about-trainer-cert {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: .78rem;
  color: #fff;
}
.about-trainer-creds {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.about-trainer-creds-label {
  display: block;
  color: var(--ember);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  margin-bottom: 14px;
}
.about-trainer-cred-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.about-trainer-cred-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 12px 14px;
  transition: background .2s, border-color .2s;
}
.about-trainer-cred-card:hover { background: rgba(255,255,255,.09); border-color: rgba(var(--ember-rgb),.4); }
.about-trainer-cred-icon {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(var(--ember-rgb),.18);
  color: var(--ember);
  display: flex; align-items: center; justify-content: center;
}
.about-trainer-cred-icon svg { width: 16px; height: 16px; }
.about-trainer-cred-titulo { display: block; font-weight: 600; color: #fff; font-size: .86rem; line-height: 1.35; }
.about-trainer-cred-inst { display: block; color: rgba(255,255,255,.6); font-size: .76rem; margin-top: 3px; }
@media (max-width: 760px) { .about-trainer-cred-grid { grid-template-columns: 1fr; } }

.about-trainer-story {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.about-trainer-story-label {
  display: block;
  color: var(--ember);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  margin-bottom: 12px;
}
.about-trainer-story p {
  color: rgba(255,255,255,.72);
  line-height: 1.65;
  font-size: .95rem;
  margin: 0 0 12px;
  font-style: italic;
}
.about-trainer-story p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .about-trainer-section { padding: 44px 16px; }
  .about-trainer-card { flex-direction: column; align-items: center; text-align: center; padding: 36px 24px; }
  .about-trainer-body { max-width: 100%; }
  .about-trainer-certs { justify-content: center; }
}
@media (max-width: 420px) {
  .about-trainer-card { padding: 30px 18px; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(160deg, #14151d 0%, #0a0a10 100%);
  color: rgba(255,255,255,.7);
  padding: 56px 24px 0;
}
.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand .brand { color: #fff; margin-bottom: 14px; }
.footer-brand .brand small { color: rgba(255,255,255,.5); }
.footer-tagline { color: rgba(255,255,255,.55); font-size: .88rem; line-height: 1.6; max-width: 320px; margin: 0; }
.footer-col-title { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: 16px; }
.footer-link {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.65);
  font-size: .9rem;
  margin-bottom: 12px;
  text-decoration: none;
  transition: color .15s ease;
}
.footer-link:hover { color: var(--ember); }
.footer-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.footer-social { display: flex; gap: 10px; }
.footer-social-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7);
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.footer-social-icon:hover { border-color: var(--ember); color: var(--ember); transform: translateY(-2px); }
.footer-social-icon svg { width: 18px; height: 18px; }
.footer-bottom {
  max-width: 1080px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  font-size: .8rem;
  color: rgba(255,255,255,.45);
}
.footer-credit strong { color: rgba(255,255,255,.7); font-weight: 600; }
@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .footer-brand .brand { justify-content: center; }
  .footer-tagline { margin: 0 auto; }
  .footer-link { justify-content: center; }
  .footer-social { justify-content: center; }
  .footer-bottom { flex-direction: column; text-align: center; justify-content: center; }
}

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.table-wrap-scroll { max-height: 520px; overflow-y: auto; }
.table-wrap-scroll thead th { position: sticky; top: 0; z-index: 1; }
table { width: 100%; border-collapse: collapse; font-family: 'Roboto Mono', monospace; font-size: .85rem; }
thead th {
  background: var(--surface-2);
  text-align: left; padding: 10px 12px;
  color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: rgba(var(--ember-rgb), .06); }
tbody tr:last-child td { border-bottom: none; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
}
.badge-ok { background: rgba(0,196,140,.14); color: var(--mint); }
.badge-off { background: rgba(239,68,68,.12); color: var(--red); }
.badge-role { background: rgba(var(--ember-rgb),.12); color: var(--ember); }
.badge-mint { background: rgba(0,196,140,.14); color: var(--mint); }
.badge-ember { background: rgba(var(--ember-rgb),.14); color: var(--ember); }

.routine-day {
  border-left: 3px solid var(--mint);
  padding: 10px 16px;
  margin-bottom: 10px;
  background: var(--surface-2);
  border-radius: 0 8px 8px 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.routine-day:hover { transform: translateX(3px); box-shadow: var(--shadow); }
.routine-day .day-name { font-family: 'Bebas Neue', sans-serif; letter-spacing: .05em; color: var(--mint); }

.routine-card {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.routine-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--ember), var(--amber));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.routine-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20,22,50,.12); }
.routine-card:hover::before { transform: scaleX(1); }
.routine-card .day-icon { margin-right: 8px; }

.exercise-count {
  font-family: 'Roboto Mono', monospace;
  font-size: .72rem;
  color: var(--text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 10px;
}

.exercise-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.exercise-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 9px 10px 12px 14px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid transparent;
  color: var(--text);
  font-size: .88rem;
  overflow: hidden;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.exercise-item::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--ember);
  transform: scaleY(0);
  transition: transform .2s ease;
}
.exercise-header { display: flex; align-items: center; gap: 10px; }
.exercise-item-clickable { cursor: pointer; }
.exercise-item:hover {
  background: rgba(var(--ember-rgb), .09);
  border-color: rgba(var(--ember-rgb), .3);
  box-shadow: 0 6px 16px rgba(20,22,50,.08);
}
.exercise-item:hover::before { transform: scaleY(1); }
.exercise-item .exercise-num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ember);
  font-family: 'Roboto Mono', monospace;
  font-size: .72rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.exercise-item:hover .exercise-num { background: var(--ember); color: #fff; transform: scale(1.15); }
.exercise-item .exercise-thumb-sm { transition: transform .25s ease; }
.exercise-item:hover .exercise-thumb-sm { transform: scale(1.12); }
.exercise-item.completado { background: rgba(0,196,140,.08); }
.exercise-item.completado::before { background: var(--mint); transform: scaleY(1); }
.exercise-item.completado .exercise-num { background: var(--mint); border-color: var(--mint); color: #fff; }
.exercise-item.completado .exercise-name { text-decoration: line-through; color: var(--text-muted); }

.exercise-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.exercise-meta {
  font-family: 'Roboto Mono', monospace;
  font-size: .68rem;
  color: var(--text-muted);
  letter-spacing: .02em;
}
.exercise-sugerencia-peso {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  color: var(--amber, #d97706);
}
.exercise-nota-indicador { flex-shrink: 0; font-size: .9rem; }
.btn-exercise-menu {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-weight: 700;
  cursor: pointer;
}
.btn-exercise-menu:hover { background: var(--surface-2); color: var(--text); }
.exercise-menu-panel {
  position: relative;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: min(240px, 100%);
  padding: 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(20,22,50,.14);
  z-index: 5;
}
.exercise-menu-panel[hidden] { display: none; }
.exercise-menu-panel button {
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: .82rem;
  cursor: pointer;
}
.exercise-menu-panel button:hover { background: var(--surface-2); }

.serie-tabla {
  display: none; flex-direction: column; gap: 4px; margin-top: 4px;
  /* Último recurso para celulares muy angostos (ej. 320px de iPhone SE): ni
     achicando las columnas al mínimo caben las 6 sin apretar "Anterior". En
     vez de recortarlo o partirlo feo, la tabla completa se desliza horizontal
     (min-width: max-content en las filas obliga el ancho natural). */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.exercise-item.expandido .serie-tabla { display: flex; }
.serie-tabla-head, .serie-fila { min-width: max-content; }
.exercise-item .exercise-header { cursor: pointer; }
.exercise-item .btn-exercise-menu { cursor: pointer; }
.serie-tabla-head {
  display: grid;
  grid-template-columns: 42px minmax(52px, 1fr) 56px 56px 50px 42px;
  gap: 6px;
  padding: 0 2px;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.serie-filas { display: flex; flex-direction: column; gap: 4px; }
.serie-fila {
  display: grid;
  grid-template-columns: 42px minmax(52px, 1fr) 56px 56px 50px 42px;
  gap: 6px;
  align-items: center;
}
.serie-fila.extra { grid-template-columns: 42px minmax(52px, 1fr) 56px 56px 50px 42px 34px; }
/* Ejercicios de abdomen/core no llevan peso (ver esEjercicioSinPeso en
   client/dashboard.php): se oculta esa columna y el toggle kg/lb del encabezado. */
.exercise-item[data-sin-peso="1"] .serie-tabla-head,
.exercise-item[data-sin-peso="1"] .serie-fila { grid-template-columns: 42px minmax(52px, 1fr) 56px 50px 42px; }
.exercise-item[data-sin-peso="1"] .serie-fila.extra { grid-template-columns: 42px minmax(52px, 1fr) 56px 50px 42px 34px; }
.exercise-item[data-sin-peso="1"] .serie-unidad-toggle { display: none; }
.serie-eliminar {
  width: 34px; height: 34px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--red);
  cursor: pointer;
  font-size: .8rem;
  touch-action: manipulation;
}
.serie-eliminar:hover { background: var(--red); color: #fff; border-color: var(--red); }
.serie-label {
  font-family: 'Roboto Mono', monospace;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
}
.serie-label-calentamiento { color: var(--amber); }
.serie-anterior {
  font-size: .7rem;
  color: var(--text);
  background: rgba(0,196,140,.14);
  border-radius: 8px;
  padding: 4px 6px;
  text-align: center;
  line-height: 1.25;
  white-space: normal;
}
.serie-unidad-toggle { cursor: pointer; text-decoration: underline dotted; user-select: none; }
.serie-unidad-toggle:hover { color: var(--text); }
.serie-input-kg, .serie-input-rep, .serie-input-descanso {
  width: 100%;
  padding: 8px 2px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  text-align: center;
  touch-action: manipulation;
}
.serie-input-descanso {
  font-size: .78rem;
  color: var(--text-muted);
}
.serie-check {
  width: 38px; height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  touch-action: manipulation;
}
.serie-fila.checked { background: rgba(0,196,140,.08); border-radius: 6px; }
.serie-fila.checked .serie-check { background: var(--mint); border-color: var(--mint); color: #fff; }
.serie-fila.checked .serie-input-kg,
.serie-fila.checked .serie-input-rep,
.serie-fila.checked .serie-input-descanso { opacity: .75; }
/* En celulares angostos, las columnas fijas (kg/rep/descanso/check) dejaban muy
   poco espacio a la columna "Anterior" y el texto ("50 lb x 10") se partía
   palabra por palabra en varias líneas en vez de quedar en 2 líneas prolijas
   dentro de su insignia, como en las demás columnas. Se angostan un poco esas
   columnas fijas y se le garantiza un ancho mínimo a "Anterior" (minmax) para
   que ese wrap a 2 líneas quede parejo en vez de partirse feo o recortarse. */
@media (max-width: 420px) {
  .serie-tabla-head,
  .serie-fila { grid-template-columns: 34px minmax(52px, 1fr) 48px 48px 42px 36px; gap: 4px; }
  .serie-fila.extra { grid-template-columns: 34px minmax(52px, 1fr) 48px 48px 42px 36px 30px; }
  .exercise-item[data-sin-peso="1"] .serie-tabla-head,
  .exercise-item[data-sin-peso="1"] .serie-fila { grid-template-columns: 34px minmax(52px, 1fr) 48px 42px 36px; }
  .exercise-item[data-sin-peso="1"] .serie-fila.extra { grid-template-columns: 34px minmax(52px, 1fr) 48px 42px 36px 30px; }
  .serie-anterior { font-size: .68rem; }
  .serie-input-kg, .serie-input-rep, .serie-input-descanso { padding: 8px 1px; font-size: .9rem; }
}
.serie-timer {
  text-align: center;
  padding: 6px;
  border-radius: 6px;
  background: rgba(var(--ember-rgb), .12);
  color: var(--ember);
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-size: .9rem;
}
.btn-add-serie {
  padding: 7px;
  border-radius: 6px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: .78rem;
  cursor: pointer;
}
.btn-add-serie:hover { background: var(--surface-2); color: var(--text); }
.btn-siguiente-ejercicio {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--mint);
  background: rgba(0,196,140,.1);
  color: var(--mint);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.btn-siguiente-ejercicio:disabled {
  border-color: var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: not-allowed;
}
.btn-siguiente-ejercicio:not(:disabled):hover { background: var(--mint); color: #fff; }
.exercise-item-resaltado { box-shadow: 0 0 0 2px var(--ember); }

.foto-progreso-thumb {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 8px;
  cursor: zoom-in;
  display: block;
  transition: transform .2s ease;
}
.foto-progreso-thumb:hover { transform: scale(1.02); }

.chat-hilo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 420px;
  overflow-y: auto;
  padding: 6px 4px;
}
.chat-msg {
  max-width: 72%;
  padding: 9px 14px;
  border-radius: 14px;
  font-size: .9rem;
  line-height: 1.4;
  word-break: break-word;
}
.chat-msg .chat-hora { display: block; font-size: .68rem; margin-top: 4px; opacity: .7; }
.chat-msg.propio { align-self: flex-end; background: var(--ember); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.ajeno { align-self: flex-start; background: var(--surface-2); color: var(--text); border-bottom-left-radius: 4px; }
.chat-form { display: flex; gap: 8px; margin-top: 14px; }
.chat-form textarea { flex: 1; resize: none; min-height: 44px; max-height: 120px; }

.badge-nav-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px;
  background: var(--red); color: #fff;
  font-size: .65rem; font-weight: 700;
  margin-left: 4px;
}

.notif-fotos-wrap { position: relative; display: inline-block; }
.notif-fotos-panel {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 300px; max-height: 360px; overflow-y: auto;
  background: var(--surface, #fff); border: 1px solid var(--border, #e5e5e5);
  border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.15);
  z-index: 50; padding: 6px;
}
.notif-fotos-panel-title {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted, #888); padding: 6px 8px 4px;
}
.notif-foto-item {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px;
  background: transparent; border: none; cursor: pointer; color: var(--text);
  position: relative;
}
.notif-foto-item:hover { background: var(--surface-2, #f2f2f2); }
.notif-foto-item span { font-size: .78rem; color: var(--text-muted, #888); }
/* Sin ver: punto rojo a la izquierda del nombre. Ya vista: se atenúa, pero
   sigue en la lista — no desaparece al abrirla. */
.notif-foto-item:not(.leido) { padding-left: 20px; }
.notif-foto-item:not(.leido)::before {
  content: ''; position: absolute; left: 8px; top: 14px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ember);
}
.notif-foto-item.leido { opacity: .6; }

.warning-box {
  border: 1px solid var(--amber);
  background: rgba(255,170,0,.1);
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
}
.warning-box .icon { font-size: 2.6rem; margin-bottom: 10px; }

.text-muted { color: var(--text-muted); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.flex { display: flex; align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }

.chart-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
/* Chart.js necesita un contenedor con alto fijo (no el canvas directamente)
   para poder ser responsive en ancho sin ir estirándose infinito en alto. */
.chart-canvas-wrap { position: relative; height: 340px; }
@media (max-width: 640px) {
  .chart-canvas-wrap { height: 260px; }
}

/* --- Barra lateral flotante (solo la cuenta de soporte técnico, ver
   esSoporteTecnico() en includes/functions.php) ---
   Al "cerrar" nunca desaparece del todo: se reduce a un riel angosto de solo
   iconos (--sidebar-w-riel), así el botón ☰ siempre queda en el mismo lugar
   y el contenido nunca se queda con un hueco vacío donde estaba el menú. */
:root {
  --sidebar-w: 240px;
  --sidebar-w-riel: 68px;
  --sidebar-margen: 16px;
}

.sidebar-overlay {
  position: fixed; inset: 0; background: rgba(10,11,18,.5);
  z-index: 34; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.sidebar-overlay.visible { opacity: 1; pointer-events: auto; }

/* Barra superior de solo celular: en escritorio el ☰ vive dentro del propio
   menú lateral (ver .staff-sidebar-head), pero en celular el menú queda
   oculto fuera de la pantalla, así que hace falta un botón fijo arriba,
   fuera del <aside>, para poder volver a abrirlo. */
.staff-topbar-movil { display: none; }

.staff-sidebar {
  position: fixed; top: var(--sidebar-margen); left: var(--sidebar-margen); bottom: var(--sidebar-margen);
  width: var(--sidebar-w);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 36;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width .25s cubic-bezier(.16,1,.3,1);
}
.staff-sidebar.cerrado { width: var(--sidebar-w-riel); }

.staff-sidebar-head {
  order: 1;
  display: flex; align-items: center;
  gap: 10px; padding: 14px; border-bottom: 1px solid var(--border);
  transition: gap .2s ease;
}
.staff-sidebar.cerrado .staff-sidebar-head { flex-direction: column; gap: 12px; }
.staff-sidebar-head .brand { font-size: 1.1rem; min-width: 0; overflow: hidden; }
.staff-sidebar-toggle {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.staff-sidebar-toggle:hover { border-color: var(--ember); color: var(--ember); background: var(--surface); }

.staff-sidebar-brand-text { white-space: nowrap; }
.staff-sidebar.cerrado .staff-sidebar-brand-text { display: none; }
.staff-sidebar.cerrado .staff-sidebar-head .brand { justify-content: center; }

.staff-sidebar-nav {
  order: 2;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 10px; display: flex; flex-direction: column; gap: 4px;
  /* Sombra de scroll: cuando hay más ítems arriba o abajo del área visible se
     ve un degradado en ese borde, para que no queden ocultos sin ninguna
     pista (como pasaba con "Admin" al final de una lista larga). Truco de
     background-attachment local/scroll, sin JS: los degradados "local" tapan
     la sombra "scroll" mientras el contenido está al principio/final, y la
     dejan ver apenas se desplaza. */
  background:
    linear-gradient(var(--surface) 30%, rgba(0,0,0,0)) center top,
    linear-gradient(rgba(0,0,0,0), var(--surface) 70%) center bottom,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.18), rgba(0,0,0,0)) center top,
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.18), rgba(0,0,0,0)) center bottom;
  background-repeat: no-repeat;
  background-color: var(--surface);
  background-size: 100% 30px, 100% 30px, 100% 12px, 100% 12px;
  background-attachment: local, local, scroll, scroll;
}
.staff-sidebar-nav::-webkit-scrollbar { width: 6px; }
.staff-sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }

.staff-sidebar-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--text-muted); font-weight: 600; font-size: .86rem;
  border: 1px solid transparent; background: none; text-align: left; cursor: pointer;
  width: 100%; font-family: 'Inter', sans-serif; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.staff-sidebar-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.staff-sidebar-link.active { background: var(--ember); color: #fff; box-shadow: 0 6px 16px rgba(var(--ember-rgb), .3); }
.staff-sidebar-link .badge-nav-count { margin-left: auto; flex-shrink: 0; }
.staff-sidebar-icon { flex-shrink: 0; font-size: 1.05rem; line-height: 1; width: 20px; text-align: center; }
.staff-sidebar-label {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  opacity: 1; transition: opacity .15s ease;
}

/* Riel colapsado: solo iconos, centrados; el título (tooltip nativo) sigue
   disponible por el atributo title de cada link. */
.staff-sidebar.cerrado .staff-sidebar-label { opacity: 0; width: 0; }
.staff-sidebar.cerrado .staff-sidebar-link { justify-content: center; padding: 10px 0; gap: 0; }
.staff-sidebar.cerrado .staff-sidebar-link .badge-nav-count { position: absolute; margin-left: 0; transform: translate(10px, -12px); }
.staff-sidebar.cerrado .staff-sidebar-link { position: relative; }

.notif-fotos-wrap-sidebar { position: static; display: block; }
.staff-sidebar-notif-panel {
  position: static; width: auto; margin: 2px 0 6px 4px;
  box-shadow: none; border: 1px solid var(--border); border-radius: 10px;
  max-height: 220px;
}
.staff-sidebar.cerrado .notif-fotos-wrap-sidebar .staff-sidebar-notif-panel { display: none; }

.staff-sidebar-foot {
  order: 3;
  border-top: 1px solid var(--border); padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.staff-sidebar.cerrado .staff-sidebar-foot { align-items: center; padding: 14px 10px; }
.staff-sidebar-foot-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.staff-sidebar.cerrado .staff-sidebar-foot-row { justify-content: center; }
.staff-sidebar-user { flex: 1 1 auto; min-width: 0; font-size: .8rem; color: var(--text-muted); line-height: 1.3; overflow: hidden; transition: opacity .15s ease; }
.staff-sidebar-user strong { display: block; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-sidebar.cerrado .staff-sidebar-user { display: none; }
.staff-sidebar-salir { display: flex; align-items: center; justify-content: center; gap: 8px; }
.staff-sidebar.cerrado .staff-sidebar-salir { width: 34px; height: 34px; padding: 0; border-radius: 10px; }
.staff-sidebar.cerrado .staff-sidebar-salir .staff-sidebar-label { display: none; }

body.tiene-sidebar-flotante .container {
  margin-left: calc(var(--sidebar-w) + var(--sidebar-margen) * 2);
  transition: margin-left .25s cubic-bezier(.16,1,.3,1);
}
body.tiene-sidebar-flotante.sidebar-cerrado .container {
  margin-left: calc(var(--sidebar-w-riel) + var(--sidebar-margen) * 2);
}

@media (max-width: 880px) {
  /* En celular el menú deja de ser un riel fijo a la izquierda: el logo y el
     botón ☰ pasan a una barra fija arriba (.staff-topbar-movil) y el menú
     completo queda oculto fuera de la pantalla hasta que se abre, momento en
     el que flota ENCIMA del contenido (con fondo oscuro detrás) en vez de
     empujarlo. En escritorio (fuera de este media query) todo sigue igual. */
  .staff-topbar-movil {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0; height: 56px;
    padding: 0 14px;
    background: var(--surface); border-bottom: 1px solid var(--border);
    z-index: 37;
  }
  .staff-topbar-movil .brand { font-size: 1rem; min-width: 0; overflow: hidden; }
  .staff-topbar-movil .staff-sidebar-brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  body.tiene-sidebar-flotante .container,
  body.tiene-sidebar-flotante.sidebar-cerrado .container {
    margin-left: 0;
    padding-top: 72px;
  }

  .staff-sidebar {
    top: 0; left: 0; bottom: 0;
    width: min(260px, 78vw);
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.16,1,.3,1);
  }
  .staff-sidebar.cerrado { width: min(260px, 78vw); transform: translateX(-100%); }
  .staff-sidebar:not(.cerrado) {
    transform: translateX(0);
    box-shadow: 0 20px 50px rgba(0,0,0,.4);
    z-index: 38;
  }
  /* La marca y el ☰ de escritorio ya se muestran en .staff-topbar-movil de
     arriba; repetirlos dentro del cajón sería redundante. */
  .staff-sidebar-head { display: none; }

  /* Evita que el fondo se siga desplazando detrás del menú mientras está
     abierto encima del contenido. */
  body.tiene-sidebar-flotante:not(.sidebar-cerrado) { overflow: hidden; }
}

@media (max-width: 520px) {
  body.tiene-sidebar-flotante .container,
  body.tiene-sidebar-flotante.sidebar-cerrado .container { padding-left: 4px; padding-right: 4px; }
}

.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
/* Barra de navegación de staff (Clientes/Medidas/Pagos/.../Admin): con tantas
   pestañas, envolver en 2 filas se ve desordenado — mejor una sola fila con
   scroll horizontal, como pestañas de navegador. */
.tabs-staff-nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* viejo Edge/IE */
}
.tabs-staff-nav::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */
.tabs-staff-nav .tab-btn { flex: 0 0 auto; }
/* Los días de la rutina (Lunes...Domingo) son hasta 7 botones: en celular,
   envueltos en 2-3 filas se veían amontonados y ocupaban media pantalla antes
   de llegar al contenido. Mismo truco que .tabs-staff-nav: una sola fila con
   scroll horizontal. En escritorio (fuera de este media query) se dejan
   envolver normal, ahí sí hay espacio de sobra. */
@media (max-width: 640px) {
  .tabs-dia {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tabs-dia::-webkit-scrollbar { display: none; }
  .tabs-dia .tab-btn { flex: 0 0 auto; }
}
.tabs-nav-row { display: flex; align-items: center; gap: 6px; margin-bottom: 22px; }
.tabs-nav-row .tabs-staff-nav { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.tabs-nav-row .notif-fotos-wrap { flex: 0 0 auto; }
.tabs-nav-flecha {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.tabs-nav-flecha:hover { border-color: var(--ember); color: var(--text); }
.tab-btn {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.tab-btn:hover { border-color: var(--ember); color: var(--text); transform: translateY(-2px); }
a.tab-btn { text-decoration: none; display: inline-block; }
.tab-btn.active { background: var(--ember); border-color: var(--ember); color: #fff; box-shadow: 0 6px 16px rgba(var(--ember-rgb), .3); animation: tabPop .32s cubic-bezier(.34,1.56,.64,1); }
.tabs-genero .tab-btn { font-size: .95rem; padding: 11px 24px; }
@keyframes tabPop {
  0% { transform: scale(.92); }
  55% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.day-icon { display: inline-block; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.tab-btn:hover .day-icon { transform: scale(1.25) rotate(-8deg); }
.tab-btn.active .day-icon { transform: scale(1.1); }

.genero-panel { display: none; }
.genero-panel.active { display: block; }
.dia-panel { display: none; }
.dia-panel.active { display: block; animation: panelEntrada .38s cubic-bezier(.16,1,.3,1); }
.panel-tab { display: none; }
.panel-tab.active { display: block; animation: panelEntrada .38s cubic-bezier(.16,1,.3,1); }

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

.dia-panel.active .exercise-item {
  opacity: 0;
  animation: exerciseEntrada .4s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes exerciseEntrada {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

.objetivo-card {
  display: flex;
  gap: 18px;
  align-items: center;
  border-width: 2px;
}
.objetivo-emoji { font-size: 3rem; line-height: 1; flex-shrink: 0; }
.objetivo-titulo { font-family: 'Bebas Neue', sans-serif; letter-spacing: .04em; font-size: 1.2rem; margin-bottom: 4px; }
.objetivo-bien { border-color: var(--mint); background: rgba(0,196,140,.06); }
.objetivo-bien .objetivo-titulo { color: var(--mint); }
.objetivo-mal { border-color: var(--amber); background: rgba(255,170,0,.06); }
.objetivo-mal .objetivo-titulo { color: #c98400; }
.objetivo-neutral .objetivo-titulo { color: var(--text-muted); }

/* Lista de ejercicios del editor de rutinas: una fila ancha por ejercicio (no
   una cuadrícula de tarjetas angostas) para aprovechar el ancho disponible y
   que ninguna etiqueta/placeholder se corte (Descanso, Calentamiento, etc.). */
.lista-ejercicios {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 4px 6px 4px 0;
}
.ejercicio-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.ejercicio-item input { margin-bottom: 0; }
.ejercicio-item .input-ejercicio { flex: 1 1 160px; min-width: 140px; }
.ejercicio-item .flex { gap: 6px; flex: 0 0 auto; margin-left: auto; }
.ejercicio-item .btn { padding: 6px 10px; }
.ejercicio-thumb {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 0;
  cursor: zoom-in;
  background: var(--surface);
  border: 1px solid var(--border);
}
/* Anchos de los campos de series/reps/descanso/etc. en un solo lugar (antes
   estaban repetidos como style="width:...px" en 5 sitios distintos del
   editor de rutinas) — con la fila ancha ya no hace falta que estén tan
   apretados, así el placeholder completo (Calentamiento, Descanso...) cabe. */
.input-series { width: 80px; }
.input-repeticiones { width: 90px; }
.input-descanso { width: 110px; }
.input-calentamiento { width: 140px; }
.input-peso-sugerido { width: 110px; }
.input-nota { width: 160px; }
.input-youtube { width: 220px; }
/* Checkbox para marcar 2-3 ejercicios SEGUIDOS y unirlos en una serie
   combinada (bi-serie, tri-serie...) — ver btn-crear-grupo-serie en
   includes/rutinas_staff_view.php. */
.chk-agrupar-wrap { flex-shrink: 0; display: flex; align-items: center; cursor: pointer; }
.chk-agrupar-wrap input { margin: 0; cursor: pointer; width: 16px; height: 16px; }
/* Llave visual que conecta 2-3 ejercicios seguidos que comparten serie
   combinada — ver recalcularGruposSerie() en includes/rutinas_staff_view.php
   (editor del staff) y el bloque equivalente en client/dashboard.php. */
.grupo-serie-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 6px;
  padding: 10px 0 10px 16px;
}
.grupo-serie-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 10px;
  border: 2px solid var(--ember);
  border-right: none;
  border-radius: 10px 0 0 10px;
}
.grupo-serie-label {
  position: absolute;
  left: 12px;
  top: -12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ember);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 2px 6px 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.btn-quitar-grupo-serie {
  background: rgba(255,255,255,.25);
  border: none;
  color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: .6rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.btn-quitar-grupo-serie:hover { background: rgba(255,255,255,.4); }
.grupo-serie-wrap .ejercicio-item,
.grupo-serie-wrap .exercise-item { margin: 0; }
.thumb-video-only {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--ember);
  font-size: 1.4rem;
}
.btn-buscar-api {
  flex-shrink: 0;
  width: 40px;
  padding: 0 !important;
  font-size: 1rem;
}
.resultado-ejercicio {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  margin-bottom: 6px;
  text-align: left;
  /* Se usa tanto en <button> como en <label> (selector múltiple de
     clientes): sin esto, la regla global "label { color: var(--text-muted) }"
     (pensada para etiquetas de formulario) se colaba aquí y dejaba el nombre
     del cliente casi invisible sobre el fondo blanco fijo de SweetAlert2,
     sobre todo con el tema oscuro activado. */
  color: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.resultado-ejercicio:hover { background: rgba(var(--ember-rgb), .09); border-color: rgba(var(--ember-rgb), .3); }
/* Sin esto, la regla global "input, select, textarea { width:100%; padding:...
   }" convierte el checkbox en una caja enorme (ocupa casi toda la fila),
   empujando el nombre del cliente fuera del ancho visible. */
.resultado-ejercicio input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0; margin: 0; padding: 0;
  background: none; border: 1px solid var(--border);
}
.resultado-ejercicio .miniatura {
  width: 48px; height: 48px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.resultado-ejercicio .miniatura-vacia {
  width: 48px; height: 48px;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.miniatura-video-badge {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ember);
  color: #fff;
  font-size: .55rem;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px #fff;
}
.exercise-item .exercise-thumb-sm {
  width: 34px; height: 34px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  cursor: zoom-in;
}

.section-title {
  display: flex; align-items: center; gap: 10px;
  margin: 30px 0 14px;
}
.section-title .tag {
  font-family: 'Roboto Mono', monospace;
  font-size: .7rem; color: var(--ember);
  border: 1px solid var(--ember);
  background: rgba(var(--ember-rgb), .08);
  padding: 2px 8px; border-radius: 4px;
}