/* BodyRhythm — sistema visual.
   Tokens tomados del Manual Maestro de Marca v1.0 (27/8/2026):
   cap. 04 color, cap. 05 tipografia, anexo A1 tokens, A2 espacio y radio,
   A3 contrato de botones, A4 campos y formularios.
   Dark-first, que es "la expresion principal de la marca digital". */

:root {
  /* A1 · tokens de color */
  --rhythm-black: #05070B;
  --carbon:       #0B1118;
  --midnight:     #081827;
  --electric-cyan:#00C2FF;
  --deep-cyan:    #006B88;
  --link-blue:    #005FCC;
  --white:        #FFFFFF;
  --steel:        #C7D0D9;
  --graphite:     #4F5B66;
  --light:        #E8EDF1;
  --pale:         #F4F7F9;
  --borde:        #24303B;

  /* estados semanticos (cap. 04) */
  --ok:      #31D07F;
  --warning: #FFB020;
  --danger:  #FF4D5E;
  --info:    #00C2FF;

  /* A2 · espacio base 4, radios, movimiento, trazo */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 20px;
  --e6: 24px; --e7: 32px; --e8: 40px; --e9: 48px; --e10: 64px;
  --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --pill: 999px;
  --t-fast: 120ms; --t: 240ms; --t-slow: 420ms;

  --display: 'Sora', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --body: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  color-scheme: dark;
}

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

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--rhythm-black);
  color: var(--white);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, .cifra { font-family: var(--display); letter-spacing: -0.01em; }
h1 { font-size: 26px; font-weight: 700; margin: 0 0 var(--e1); }
h2 { font-size: 18px; font-weight: 600; margin: 0 0 var(--e3); }
h3 { font-size: 15px; font-weight: 600; margin: 0 0 var(--e2); }

a { color: var(--electric-cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Anillo de foco doble negro/cian, como pide el cap. 04 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--electric-cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.saltar {
  position: absolute; left: -9999px; top: 0; background: var(--electric-cyan);
  color: var(--rhythm-black); padding: var(--e2) var(--e4); font-weight: 700; z-index: 100;
}
.saltar:focus { left: var(--e4); top: var(--e2); }

/* ---------- Estructura ---------- */

.barra {
  background: var(--carbon);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 30;
}
.barra-int {
  max-width: 1100px; margin: 0 auto; padding: var(--e3) var(--e4);
  display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap;
}
/* HUECOS DE MATERIAL PENDIENTE.
   No se inventa ni se redibuja nada: donde va una pieza que no nos han
   entregado queda su caja, a su tamano, rotulada con lo que falta y con el
   nombre del archivo que se espera. El manual de marca prohibe redibujar el
   logo, y sin el kit no hay iconos ni app icon. */
.hueco {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center; text-decoration: none;
  border: 1px dashed var(--deep-cyan); border-radius: var(--r-sm);
  background: repeating-linear-gradient(
    135deg, transparent 0 6px, rgba(0,194,255,.045) 6px 12px);
  color: var(--electric-cyan);
  font-family: var(--body); font-weight: 700; letter-spacing: .04em;
}
.hueco b { font-size: 11px; font-weight: 700; }
.hueco span { font-size: 9.5px; font-weight: 500; color: var(--steel); letter-spacing: 0; }

/* En la barra, a la medida que ocupara el wordmark real */
.hueco-logo { width: 186px; height: 44px; flex: none; }

.faltantes { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.faltantes .hueco { min-height: 104px; padding: var(--e3); }
.faltantes .hueco.cuadrado { aspect-ratio: 1; min-height: 0; }
.quien { margin-left: auto; display: flex; align-items: center; gap: var(--e3); font-size: 13px; color: var(--steel); }
.quien b { color: var(--white); font-weight: 600; }

.menu { background: var(--carbon); border-bottom: 1px solid var(--borde); overflow-x: auto; }
.menu-int { max-width: 1100px; margin: 0 auto; padding: 0 var(--e4); display: flex; gap: var(--e1); }
.menu a {
  display: block; padding: var(--e3) var(--e4); min-height: 44px;
  font-size: 13.5px; font-weight: 600; color: var(--steel); text-decoration: none;
  border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--t-fast);
}
.menu a:hover { color: var(--white); }
.menu a[aria-current='page'] { color: var(--electric-cyan); border-bottom-color: var(--electric-cyan); }

main { max-width: 1100px; margin: 0 auto; padding: var(--e6) var(--e4) var(--e10); }

.cabecera { display: flex; align-items: flex-start; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e6); }
.cabecera p { margin: 0; color: var(--steel); font-size: 14px; }
.cabecera .acciones { margin-left: auto; display: flex; gap: var(--e2); flex-wrap: wrap; }

.tarjeta {
  background: var(--carbon); border: 1px solid var(--borde); border-radius: var(--r-md);
  padding: var(--e5); margin-bottom: var(--e4);
}
.tarjeta.destacada { background: var(--midnight); }

.rejilla { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.dato .k {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--steel); margin-bottom: 2px;
}
.dato .v { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.dato .v.vacio { color: var(--graphite); font-weight: 500; }

/* ---------- A3 · contrato de botones ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 44px; padding: var(--e3) var(--e5);
  font: inherit; font-size: 14px; font-weight: 700; font-family: var(--body);
  border-radius: var(--pill); border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast);
}
.btn.primario { background: var(--electric-cyan); color: var(--rhythm-black); }
.btn.primario:hover { background: #4fd6ff; }
.btn.secundario { background: transparent; color: var(--white); border-color: var(--borde); }
.btn.secundario:hover { border-color: var(--steel); }
.btn.terciario { background: transparent; color: var(--electric-cyan); padding-inline: var(--e2); }
.btn.terciario:hover { text-decoration: underline; }
.btn[disabled], .btn[aria-disabled='true'] {
  background: transparent; color: var(--graphite); border-color: var(--borde);
  cursor: not-allowed; pointer-events: none;
}

/* ---------- Estados: nombre + pictograma, nunca solo color ---------- */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--e3); border-radius: var(--pill);
  font-size: 12px; font-weight: 700; border: 1px solid;
  background: rgba(255,255,255,.03);
}
.chip .g { font-size: 10px; line-height: 1; }
.chip.ok      { color: var(--ok);      border-color: rgba(49,208,127,.45); }
.chip.danger  { color: var(--danger);  border-color: rgba(255,77,94,.45); }
.chip.warning { color: var(--warning); border-color: rgba(255,176,32,.45); }
.chip.info    { color: var(--info);    border-color: rgba(0,194,255,.45); }
.chip.mute    { color: var(--steel);   border-color: var(--borde); }

/* ---------- Tabla / directorio ---------- */

.tabla-scroll { overflow-x: auto; }
/* Una tabla que se desplaza dentro de su caja parece cortada en el telefono:
   este velo en el borde derecho avisa de que sigue. Se apaga al llegar al
   final, con `scroll-timeline` no; basta con que desaparezca bajo el propio
   contenido cuando la tabla cabe. */
.tabla-scroll {
  background:
    linear-gradient(to left, var(--carbon) 60%, transparent) right / 28px 100% no-repeat,
    linear-gradient(to left, rgba(0,194,255,.22), transparent) right / 2px 100% no-repeat;
  background-attachment: local, local;
}
table { width: 100%; border-collapse: collapse; min-width: 620px; }
th, td { text-align: left; padding: var(--e3) var(--e3); border-bottom: 1px solid var(--borde); }
th {
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--steel);
}
tbody tr:hover { background: rgba(0,194,255,.045); }
td a { font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }
.muestra {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--graphite); border: 1px solid var(--borde); border-radius: var(--r-sm);
  padding: 1px 6px; margin-left: 6px; white-space: nowrap;
}

/* ---------- A4 · campos y formularios ---------- */

.bloque { margin-bottom: var(--e7); }
.bloque > h2 { display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; }
.bloque > p.nota { margin: 0 0 var(--e4); color: var(--steel); font-size: 13.5px; max-width: 62ch; }

.campos { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.campo { display: flex; flex-direction: column; min-width: 0; }
.campo > label { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.campo .req { color: var(--electric-cyan); margin-left: 3px; }
.campo .ayuda { font-size: 12.5px; color: var(--steel); margin: 0 0 6px; line-height: 1.45; }
/* Solo para lectores de pantalla: el asterisco lo ve quien mira, la palabra
   "required" la oye quien no. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* Empuja el control al fondo de su celda para que todos los de una fila queden
   alineados aunque unos lleven texto de ayuda y otros no. */
.campo input, .campo select, .campo textarea { margin-top: auto; }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 15px; width: 100%; min-height: 48px;
  padding: var(--e3) var(--e4);
  color: var(--white); background: var(--rhythm-black);
  border: 1px solid var(--borde); border-radius: var(--r-sm);
  transition: border-color var(--t-fast);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--electric-cyan); }
.campo input[aria-invalid='true'], .campo select[aria-invalid='true'] { border-color: var(--danger); }
.campo .error {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 6px;
  color: var(--danger); font-size: 13px; font-weight: 600;
}
.campo .error::before { content: '▲'; font-size: 10px; line-height: 1.5; }

.casilla { flex-direction: row; align-items: flex-start; gap: var(--e3); }
.casilla input[type='checkbox'] {
  width: 22px; height: 22px; min-height: 22px; margin: 1px 0 0; flex: none;
  accent-color: var(--electric-cyan);
}
.casilla > div { min-width: 0; }
.casilla label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; }

.resumen-error {
  background: rgba(255,77,94,.09); border: 1px solid rgba(255,77,94,.45);
  border-radius: var(--r-md); padding: var(--e4) var(--e5); margin-bottom: var(--e5);
}
.resumen-error h2 { color: var(--danger); margin-bottom: var(--e2); }
.resumen-error ul { margin: 0; padding-left: var(--e5); }
.resumen-error a { color: var(--white); }

.pie-form {
  display: flex; gap: var(--e3); flex-wrap: wrap; align-items: center;
  border-top: 1px solid var(--borde); padding-top: var(--e5); margin-top: var(--e6);
}

/* ---------- Pestanas de la ficha ---------- */

.pestanas { display: flex; gap: var(--e1); border-bottom: 1px solid var(--borde); margin-bottom: var(--e5); overflow-x: auto; }
.pestanas a, .pestanas span {
  padding: var(--e3) var(--e4); min-height: 44px; display: inline-flex; align-items: center;
  font-size: 13.5px; font-weight: 600; color: var(--steel); text-decoration: none;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.pestanas a[aria-current='page'] { color: var(--electric-cyan); border-bottom-color: var(--electric-cyan); }
.pestanas span.fuera { color: var(--graphite); cursor: default; }
/* El rotulo es texto de verdad en el HTML, no `content` de CSS: asi lo lee un
   lector de pantalla y sobrevive si el CSS no carga. */
.pestanas span.fuera small {
  margin-left: 8px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--borde);
  border-radius: var(--r-sm); padding: 1px 5px; color: var(--graphite);
}

.aviso-alcance {
  background: var(--midnight); border: 1px solid var(--deep-cyan);
  border-radius: var(--r-md); padding: var(--e4) var(--e5); margin-bottom: var(--e4);
  font-size: 13.5px; color: var(--steel); max-width: 74ch;
}
.aviso-alcance b { color: var(--white); }

.vacio { color: var(--steel); font-size: 14px; max-width: 62ch; }
.pie { color: var(--graphite); font-size: 12px; margin-top: var(--e8); }
.pie a { color: var(--steel); }

/* Entrar */
.entrar { max-width: 420px; margin: var(--e10) auto; }
.entrar .tarjeta { padding: var(--e7); }
.roles-demo { margin-top: var(--e5); font-size: 13px; color: var(--steel); }
.roles-demo table { min-width: 0; }
.roles-demo td { padding: 6px 0; border: 0; font-size: 13px; }

@media (max-width: 640px) {
  main { padding: var(--e5) var(--e3) var(--e9); }
  h1 { font-size: 22px; }
  .cabecera .acciones { margin-left: 0; width: 100%; }
  .cabecera .acciones .btn { flex: 1 1 auto; }

  /* El menú principal, igual que las pestañas: envuelve en vez de desplazarse.
     Con cuatro secciones, en 390 px la última quedaba fuera de pantalla. */
  .menu { overflow-x: visible; }
  .menu-int { flex-wrap: wrap; padding-inline: var(--e3); }
  .menu a { padding: var(--e3); font-size: 13px; }

  /* Las pestañas se envuelven en vez de desplazarse: con scroll horizontal,
     en un teléfono de 390 px quedaban fuera de vista Body composition,
     Activity y Photos, y nadie descubre lo que no ve. */
  .pestanas { flex-wrap: wrap; overflow-x: visible; gap: 0 var(--e1); }
  .pestanas a, .pestanas span { padding: var(--e2) var(--e3); font-size: 13px; }
  .pestanas span.fuera small { display: block; margin: 2px 0 0; }

  /* La tabla de miembros pierde fecha de alta y correo: están en la ficha, y
     así las tres columnas que importan caben sin desplazar nada. */
  table { min-width: 0; }
  .solo-ancho { display: none; }
  /* La tarjeta pierde su relleno lateral para que las tres columnas quepan sin
     desplazamiento: con 12 px a cada lado la tabla se salia por 25 px. */
  .tarjeta.tabla-scroll { padding-left: 0; padding-right: 0; }
  .tarjeta.tabla-scroll th, .tarjeta.tabla-scroll td { padding: var(--e3) 6px; }
}

/* ================= Hoja de composición corporal =================
   Es lo que recibe el miembro. Se ve dentro de la app (oscura) y se imprime
   en papel (clara): los dos casos van resueltos aquí.
   Los números van DENTRO de cada franja para que la hoja siga leyéndose si el
   navegador imprime sin fondos — la marca hecha solo con `background` sale en
   blanco en el papel. */

.bc-hoja {
  background: var(--carbon); border: 1px solid var(--borde); border-radius: var(--r-lg);
  padding: var(--e7) var(--e6); max-width: 760px; margin: 0 auto;
}
.bc-cab { text-align: center; border-bottom: 1px solid var(--borde); padding-bottom: var(--e5); margin-bottom: var(--e6); }
.bc-firma {
  margin: 0 0 var(--e3); font-size: 9.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--steel);
}
.bc-hoja h1 {
  font-family: var(--display); font-size: 30px; font-weight: 700; margin: 0 0 6px;
  letter-spacing: -.01em;
}
.bc-sub {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--electric-cyan);
}

.bc-comparativa {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
  gap: var(--e4); margin-bottom: var(--e6);
}
.bc-col { text-align: center; }
.bc-fecha {
  margin: 0 0 var(--e2); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--steel);
}
.bc-fecha.ahora { color: var(--white); }
.bc-flecha { color: var(--electric-cyan); font-size: 22px; font-weight: 700; padding-bottom: 60px; }
.bc-barra {
  display: flex; flex-direction: column-reverse; height: 190px;
  border: 1px solid var(--borde); border-radius: var(--r-sm); overflow: hidden;
}
.bc-barra .seg {
  display: flex; align-items: center; justify-content: center; min-height: 0;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.bc-barra .seg i { font-style: normal; }
.bc-barra .grasa   { background: var(--warning); color: #2C2415; }
.bc-barra .musculo { background: var(--electric-cyan); color: var(--rhythm-black); }
.bc-barra .resto   { background: var(--borde); }
.bc-leyenda {
  grid-column: 1 / -1; display: flex; justify-content: center; gap: var(--e5);
  margin: var(--e2) 0 0; font-size: 12px; font-weight: 600; color: var(--steel);
}
.bc-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.bc-leyenda .p { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.bc-leyenda .p.grasa { background: var(--warning); }
.bc-leyenda .p.musculo { background: var(--electric-cyan); }
.bc-leyenda .p.resto { background: var(--borde); }

.bc-tabla { width: 100%; border-collapse: collapse; min-width: 0; font-variant-numeric: tabular-nums; }
.bc-tabla th[scope="col"] {
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--steel);
  text-align: right; padding: var(--e2) var(--e3);
}
.bc-tabla th[scope="col"]:first-child { text-align: left; }
.bc-tabla th[scope="row"] { font-weight: 600; font-size: 14px; text-align: left; padding: var(--e3); }
.bc-tabla th[scope="row"] .u { font-size: 11px; font-weight: 500; color: var(--steel); }
.bc-tabla td { text-align: right; padding: var(--e3); font-size: 15px; font-weight: 600; }
.bc-tabla td.ahora { font-family: var(--display); font-weight: 700; }
.bc-tabla td.dif { font-weight: 700; }
.bc-tabla td.dif.good { color: var(--ok); }
.bc-tabla td.dif.bad  { color: var(--danger); }
.bc-tabla td.dif.flat { color: var(--steel); font-weight: 600; }

.bc-sec { margin-top: var(--e6); }
.bc-sec h2 {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--electric-cyan); margin: 0 0 var(--e3);
}
.bc-sec ul { margin: 0; padding-left: var(--e5); display: flex; flex-direction: column; gap: 6px; }
.bc-sec li { font-size: 14.5px; }
.bc-chips { display: flex; flex-wrap: wrap; gap: var(--e2); }
.bc-chip {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px var(--e3);
  border: 1px solid var(--borde); border-radius: var(--pill);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.bc-chip b { font-weight: 600; color: var(--steel); font-size: 12px; }
.bc-chip.good { color: var(--ok); border-color: rgba(49,208,127,.45); }
.bc-chip.bad  { color: var(--danger); border-color: rgba(255,77,94,.45); }
.bc-chip.flat { color: var(--steel); }

.bc-pie { margin-top: var(--e7); padding-top: var(--e4); border-top: 1px solid var(--borde); }
.bc-pie p { margin: 0 0 6px; font-size: 12px; color: var(--steel); }
.bc-descargo { font-size: 11.5px; color: var(--graphite); max-width: 62ch; }

.bc-acciones { display: flex; gap: var(--e3); flex-wrap: wrap; margin: var(--e5) 0 var(--e6); }
.bc-idioma { display: inline-flex; border: 1px solid var(--borde); border-radius: var(--pill); overflow: hidden; }
.bc-idioma a {
  padding: var(--e2) var(--e4); min-height: 44px; display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 700; color: var(--steel); text-decoration: none;
}
.bc-idioma a[aria-current="true"] { background: var(--white); color: var(--rhythm-black); }

@media (max-width: 560px) {
  .bc-hoja { padding: var(--e5) var(--e4); }
  .bc-comparativa { gap: var(--e2); }
  .bc-flecha { font-size: 16px; padding-bottom: 50px; }
  .bc-barra { height: 150px; }
}

/* En papel: fondo blanco, tinta oscura, y solo la hoja. */
@media print {
  /* Se ocultan los elementos concretos que sobran, NO por jerarquía: la hoja
     vive dentro de <main>, así que un `body > *:not(.bc-solo)` la ocultaría
     con todo lo demás y saldría una página en blanco. */
  .saltar, .barra, .menu, .bc-acciones, .pie, .cabecera, .pestanas { display: none !important; }
  body, main, .bc-solo { background: #fff !important; color: #05070B !important; }
  main { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .bc-hoja {
    background: #fff !important; border: 0; max-width: none; padding: 0;
    color: #05070B;
  }
  .bc-hoja h1, .bc-tabla td.ahora { color: #05070B !important; }
  .bc-firma, .bc-fecha, .bc-tabla th[scope="col"], .bc-pie p { color: #4F5B66 !important; }
  .bc-sub, .bc-sec h2 { color: #006B88 !important; }
  .bc-cab, .bc-pie, .bc-tabla th[scope="row"], .bc-tabla td { border-color: #E1E5EB !important; }
  .bc-tabla th[scope="row"], .bc-tabla td { border-bottom: 1px solid #E1E5EB; }
  .bc-tabla td.dif.good { color: #0B7A4B !important; }
  .bc-tabla td.dif.bad  { color: #C93445 !important; }
  .bc-barra { border-color: #C7D0D9 !important; }
  .bc-barra .seg, .bc-leyenda .p {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .bc-barra .resto, .bc-leyenda .p.resto { background: #E8EDF1 !important; }
  .bc-acciones, .bc-idioma { display: none !important; }
  .bc-hoja, .bc-sec, .bc-comparativa { break-inside: avoid-page; }
}


/* ================= Cuestionario de definición =================
   Lo responde el dueño, en español, desde una ruta sin clave. Una sola
   columna, texto grande y cada pregunta como un bloque propio: se responde
   desde el teléfono, a ratos, y hay que ver de un vistazo qué falta. */
.cuest { max-width: 720px; }
.cuest-cab { margin-bottom: var(--e6); }
.sello {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--electric-cyan); margin: 0 0 var(--e3);
}
.cuest h1 { font-size: clamp(24px, 5vw, 32px); line-height: 1.1; margin-bottom: var(--e4); }
.entrada { font-size: 16px; color: var(--steel); max-width: 60ch; margin: 0 0 var(--e3); }
.entrada b { color: var(--white); }

.avance {
  position: sticky; top: 0; z-index: 20; background: var(--rhythm-black);
  padding: var(--e3) 0 var(--e4); margin-bottom: var(--e5);
  border-bottom: 1px solid var(--borde);
}
.barra-avance { height: 5px; border-radius: var(--pill); background: var(--borde); overflow: hidden; }
.barra-avance i { display: block; height: 100%; background: var(--electric-cyan); transition: width var(--t); }
.avance p { margin: var(--e2) 0 0; font-size: 13px; color: var(--steel); }
.avance b { color: var(--white); font-family: var(--display); }

.cuest .bloque { margin-bottom: var(--e9); }
.cuest .bloque > h2 {
  font-size: 19px; font-family: var(--display); font-weight: 700; color: var(--white);
  border-bottom: 1px solid var(--borde); padding-bottom: var(--e3); margin-bottom: var(--e3);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3);
}
.cuest .bloque > h2 small {
  font-family: var(--body); font-size: 12px; font-weight: 600; color: var(--graphite);
  white-space: nowrap;
}
.cuest .nota { font-size: 14px; color: var(--steel); max-width: 62ch; margin: 0 0 var(--e5); }
.cuest .nota a { overflow-wrap: anywhere; }

.preg {
  border-left: 2px solid var(--borde); padding: 0 0 0 var(--e4);
  margin-bottom: var(--e6); transition: border-color var(--t);
}
.preg.lista { border-left-color: var(--ok); }
.preg.guardando { border-left-color: var(--warning); }
.preg.guardada { border-left-color: var(--electric-cyan); }
.preg .q { font-size: 16.5px; font-weight: 600; margin: 0 0 6px; text-wrap: balance; }
.preg .ayuda { font-size: 13.5px; color: var(--steel); margin: 0 0 var(--e3); max-width: 60ch; }
.preg input[type='text'], .preg textarea {
  width: 100%; font: inherit; font-size: 15px; min-height: 48px;
  padding: var(--e3) var(--e4); color: var(--white); background: var(--carbon);
  border: 1px solid var(--borde); border-radius: var(--r-sm); resize: vertical;
}
.preg input[type='text']:focus, .preg textarea:focus { border-color: var(--electric-cyan); outline: none; }

.ops { display: flex; flex-direction: column; gap: var(--e2); }
.op {
  display: flex; align-items: flex-start; gap: var(--e3); cursor: pointer;
  background: var(--carbon); border: 1px solid var(--borde); border-radius: var(--r-sm);
  padding: var(--e3) var(--e4); min-height: 48px; transition: border-color var(--t-fast);
}
.op:hover { border-color: var(--steel); }
.op.puesta, .op:has(input:checked) { border-color: var(--electric-cyan); background: var(--midnight); }
.op input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--electric-cyan); }
.op span { font-size: 15px; font-weight: 500; }

.cierre {
  background: var(--midnight); border: 1px solid var(--deep-cyan);
  border-radius: var(--r-md); padding: var(--e6); margin-top: var(--e8);
}
.cierre h2 { margin-bottom: var(--e2); }
.cuest .pie { text-align: center; margin-top: var(--e8); }

/* El tipo de relación va bajo el nombre, no en una columna: así se ve también
   en el teléfono, donde la tabla ya va justa de ancho. */
.tipo {
  display: block; font-size: 11px; font-weight: 600; color: var(--steel);
  letter-spacing: .03em; margin-top: 2px;
}

/* La barra de búsqueda tiene tres filtros: en el teléfono van a ancho completo
   en vez de pelearse por 390 px. Sin esto la tarjeta se sale de su caja. */
@media (max-width: 640px) {
  .tarjeta .campo[style*="flex"] { flex: 1 1 100% !important; }
  .tarjeta form.tarjeta, form.tarjeta { padding: var(--e4); }
  form.tarjeta .btn { width: 100%; }
}

/* ================= Horario semanal =================
   Lista por día, no rejilla de siete columnas: en el teléfono —que es donde
   recepción lo mira— una rejilla de semana obliga a desplazar en dos ejes. */
.semana { display: flex; flex-direction: column; gap: var(--e6); }

.dia > h2 {
  display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap;
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
  padding-bottom: var(--e2); margin-bottom: var(--e3);
  border-bottom: 1px solid var(--borde);
}
.dia > h2 small { font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--steel); }
.dia.hoy > h2 { border-bottom-color: var(--electric-cyan); }

.sesiones { display: flex; flex-direction: column; gap: var(--e2); }
.sesion {
  display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: var(--e3);
  background: var(--carbon); border: 1px solid var(--borde); border-radius: var(--r-md);
  padding: var(--e3) var(--e4); min-height: 56px;
  text-decoration: none; color: var(--white);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.sesion:hover { border-color: var(--deep-cyan); background: var(--midnight); }
.sesion .hora {
  font-family: var(--display); font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--electric-cyan);
}
.sesion .qué { display: flex; flex-direction: column; min-width: 0; }
.sesion .qué b { font-size: 15px; font-weight: 600; }
.sesion .qué span { font-size: 12.5px; color: var(--steel); overflow-wrap: anywhere; }
.sesion .cupo { display: flex; align-items: center; gap: var(--e3); white-space: nowrap; }
.sesion .cupo .n {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  color: var(--steel); font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  /* La hora sube sobre el nombre y el cupo baja: en 390 px las tres columnas
     dejaban el nombre de la clase en dos letras por línea. */
  .sesion { grid-template-columns: 1fr auto; gap: var(--e1) var(--e3); padding: var(--e3); }
  .sesion .hora { grid-column: 1 / -1; }
  .sesion .cupo { flex-direction: column; align-items: flex-end; gap: 2px; }
}

/* Una clase cancelada sigue en el horario, atenuada: quien la tenía reservada
   necesita verla para entender qué pasó. Desaparecer es peor que tacharse. */
.sesion.cancelada { opacity: .55; border-style: dashed; }
.sesion.cancelada .qué b { text-decoration: line-through; text-decoration-thickness: 1px; }
.sesion.cancelada .hora { color: var(--graphite); }

/* El logo real, cuando llegue: a la misma altura que ocupaba su hueco. */
.marca-logo { display: inline-flex; align-items: center; flex: none; }
.marca-logo img { height: 44px; width: auto; display: block; }

/* ---------- La silueta de la hoja ----------
   El contorno recorta las franjas de composición: el cuerpo se llena con lo
   que la báscula midió, que es lo que el cliente pidió ver. */
.bc-silueta { width: 100%; max-width: 112px; height: auto; display: block; margin: 0 auto var(--e3); }
.bc-silueta .sil-fondo   { fill: var(--rhythm-black); }
.bc-silueta .sil-grasa   { fill: var(--warning); }
.bc-silueta .sil-musculo { fill: var(--electric-cyan); }
.bc-silueta .sil-resto   { fill: var(--borde); }
.bc-silueta .sil-borde   { fill: none; stroke: var(--steel); stroke-width: 1.6; }

@media print {
  /* El contorno tiene que verse en papel aunque el navegador no imprima
     fondos: por eso va trazado, no relleno. */
  .bc-silueta .sil-borde { stroke: #4F5B66 !important; }
  .bc-silueta .sil-fondo { fill: #fff !important; }
  .bc-silueta .sil-resto { fill: #E8EDF1 !important; }
  .bc-silueta rect, .bc-silueta path, .bc-silueta circle {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}
@media (max-width: 560px) { .bc-silueta { max-width: 88px; } }