/* ═══════════════════════════════════════════════════════════════════════
 * MI COLISEO — la superficie del socio, en la mano.
 *
 * Hereda TODOS los tokens de `coliseo.css`: esto no es un segundo sistema de
 * diseño, es el mismo sistema resuelto para un ancho de 360 px y para alguien
 * que mira la pantalla de pie, con una mano, delante de una puerta.
 *
 * TESIS: LA TÉSERA.
 * En Roma la tessera hospitalis era una ficha pequeña e inscrita que probaba
 * que pertenecías y te franqueaba una puerta. Es, literalmente, el objeto que
 * este producto emite. Así que la llave del socio no es una tarjeta con
 * esquinas redondas ni un QR dentro de una caja: es una pieza grabada —doble
 * filete de oro, capitales lapidarias, sello en el centro— y es lo único
 * enfático de toda la aplicación. Todo lo demás calla para que ella hable.
 *
 * TRES REGLAS DE ESTA CAPA
 *   · Nada importante por debajo de la barra de pestañas ni del indicador de
 *     inicio del iPhone: `env(safe-area-inset-*)` no es un adorno.
 *   · 44 px de diana mínima, sin excepciones, también en los enlaces de texto
 *     que hacen de acción.
 *   · El oro es jerarquía y acción. Nunca texto corrido.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
  --mi-tabs: 64px;              /* alto de la barra, sin la safe area */
  --mi-gutter: clamp(16px, 4.4vw, 24px);
}

/* ═══ Armazón ══════════════════════════════════════════════════════════ */

.mi {
  /* El colchón inferior es la barra MÁS el indicador de inicio. Sin sumar los
     dos, el último control de la página queda debajo de la raya del iPhone y
     sólo se puede tocar si el dedo acierta a un milímetro del canto. */
  padding-bottom: calc(var(--mi-tabs) + env(safe-area-inset-bottom, 0px) + var(--sp-6));
}

.mi__wrap {
  width: 100%;
  max-width: 34rem;             /* en tableta y escritorio la columna no se estira */
  margin-inline: auto;
  padding-inline: var(--mi-gutter);
}

/* La cabecera de la aplicación instalada. Compacta: en standalone no hay barra
   de navegador y esta es la única línea fija de arriba. */
.mi-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-5) var(--sp-4);
}
.mi-top__saludo {
  font-family: var(--font-body); font-size: var(--t-label);
  color: var(--muted); margin: 0 0 2px; letter-spacing: 0.01em;
}
.mi-top__nombre {
  font-family: var(--font-inscription);
  font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 700;
  letter-spacing: 0.02em; color: var(--bone); margin: 0; line-height: 1.05;
}
.mi-top__marca {
  font-family: var(--font-athletic); font-size: 0.6875rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); text-align: right; text-decoration: none;
  white-space: nowrap; padding-top: 2px;
}
.mi-top__marca span { display: block; color: var(--faint); letter-spacing: 0.11em; }

/* ═══ La tésera ════════════════════════════════════════════════════════
 * La pieza. Doble filete: el exterior es el canto de la piedra, el interior
 * es la línea grabada. Entre los dos hay aire, que es lo que separa una pieza
 * labrada de un rectángulo con borde.                                     */

.llave {
  position: relative;
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--line-gold);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(212,165,68,0.09), transparent 62%),
    linear-gradient(178deg, #16130D 0%, #100F0C 46%, #0B0B0C 100%);
  padding: var(--sp-5) var(--sp-5) var(--sp-5);
  color: inherit; text-decoration: none;
  box-shadow: var(--shadow-lift);
}
/* El filete interior. `inset` y no un segundo elemento: una línea grabada no
   es una caja, y meterla como caja obligaría a mantener dos cajas alineadas. */
.llave::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid rgba(212,165,68,0.20);
}
.llave--stop { border-color: rgba(242,89,110,0.45); }
.llave--stop::before { border-color: rgba(242,89,110,0.22); }
.llave--warn { border-color: rgba(240,169,58,0.42); }
.llave--warn::before { border-color: rgba(240,169,58,0.20); }

.llave__eyebrow {
  font-family: var(--font-athletic); font-size: 0.6875rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 var(--sp-3);
}
.llave__estado {
  font-family: var(--font-inscription); font-size: 1.5rem; font-weight: 700;
  letter-spacing: 0.015em; line-height: 1.1; margin: 0 0 var(--sp-2);
  color: var(--bone);
}
.llave__detalle {
  margin: 0; font-size: var(--t-label); line-height: 1.5; color: var(--bone-dim);
  max-width: 40ch;
}
.llave__pie {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid rgba(212,165,68,0.16);
}
/* El punto del pie habla de PRESENCIA —dentro o fuera del club—, no del estado
   de la llave. Se separó a propósito: heredando el tono de la tésera salía un
   punto verde junto a «fuera del club», y dos significados en la misma fila es
   como se lee mal un dato de una ojeada. El estado de la llave ya lo dicen el
   titular y el filete de la pieza. Y va ACOMPAÑADO de texto siempre: el color
   solo no informa a quien no lo distingue. */
.llave__punto {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint);
}
.llave__punto--dentro {
  background: var(--gold); box-shadow: 0 0 0 3px rgba(212,165,68,0.18);
}
.llave__pie-texto {
  font-family: var(--font-athletic); font-size: 0.8125rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--bone-dim);
}
.llave__ir {
  margin-left: auto; font-family: var(--font-athletic); font-size: 0.8125rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold);
}

/* ── El sello: el QR dentro de la tésera ──────────────────────────────
 * Sobre hueso, no sobre oro ni sobre textura. Un QR necesita contraste real
 * para que una cámara de gama baja lo lea a la primera con lluvia y guantes;
 * la marca del club puede esperar a los cuatro milímetros de alrededor.     */
.sello {
  margin: var(--sp-5) auto 0; width: min(272px, 74vw);
  background: var(--bone); padding: 14px;
  box-shadow: 0 0 0 1px rgba(212,165,68,0.55), 0 18px 44px rgba(0,0,0,0.6);
}
.sello img, .sello svg { display: block; width: 100%; height: auto; }
.sello--velado { position: relative; }
/* Cuando el código ha caducado no se borra: se vela y se dice por qué. Quitarlo
   dejaría un hueco y el hueco se lee como que la aplicación se ha roto. */
.sello--velado::after {
  content: ""; position: absolute; inset: 0; background: rgba(11,11,12,0.72);
}
.sello__cuenta {
  display: block; text-align: center; margin-top: var(--sp-3);
  font-family: var(--font-evidence); font-size: var(--t-evidence);
  color: var(--faint); letter-spacing: 0.06em;
}

/* ═══ Bloques de la portada ════════════════════════════════════════════ */

.bloque { margin-top: var(--sp-6); }
.bloque__titulo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin: 0 0 var(--sp-3);
  font-family: var(--font-athletic); font-size: 0.75rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  font-weight: 500;
}
.bloque__titulo a {
  color: var(--gold); text-decoration: none; letter-spacing: 0.13em;
  /* Diana táctil: el enlace de cabecera es un acto, no una etiqueta. */
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-3); margin: calc(var(--sp-2) * -1) 0;
}

.ficha {
  display: block; border: 1px solid var(--line); background: var(--surface);
  padding: var(--sp-4) var(--sp-5); color: inherit; text-decoration: none;
  border-left: 3px solid var(--accent, var(--line-strong));
}
.ficha + .ficha { margin-top: var(--sp-3); }
.ficha__cuando {
  font-family: var(--font-athletic); font-size: 0.8125rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 2px;
}
.ficha__que {
  font-family: var(--font-inscription); font-size: 1.1875rem; font-weight: 700;
  color: var(--bone); margin: 0 0 4px; line-height: 1.2;
}
.ficha__donde { margin: 0; font-size: var(--t-label); color: var(--muted); }
.ficha__cola {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-3);
}

/* Un vacío explicado. No es una caja de error: no lleva borde de alarma ni
   icono de aviso, porque no ha fallado nada. */
.vacio {
  border: 1px dashed var(--line-strong); background: transparent;
  padding: var(--sp-5); text-align: left;
}
.vacio__titulo {
  display: block; font-family: var(--font-inscription); font-size: 1.0625rem;
  font-weight: 700; color: var(--bone-dim); margin-bottom: 4px;
}
.vacio p { margin: 0; font-size: var(--t-label); color: var(--muted); line-height: 1.5; }
.vacio .btn { margin-top: var(--sp-4); }

/* La línea de la membresía. Dos datos y ni uno más: modalidad y si está viva. */
.cinta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) 0 0;
}
.cinta__plan {
  font-family: var(--font-athletic); font-size: 0.8125rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim);
}
.cinta__cuota { font-size: var(--t-label); color: var(--faint); }

/* ═══ Barra de pestañas ════════════════════════════════════════════════
 * Cinco destinos, ni uno más. `Acceso` es una clave de bóveda: la misma
 * celda, más alta y con el filete de oro encima. No flota ni es un círculo:
 * la piedra de este sistema no tiene esquinas redondas y un botón flotante
 * taparía justo la última línea de la lista que hay debajo.                 */

.tabs {
  position: fixed; z-index: 80; inset: auto 0 0 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(12,12,14,0.94);
  backdrop-filter: saturate(1.3) blur(14px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-height: var(--mi-tabs); padding: var(--sp-2) 2px;
  text-decoration: none; color: var(--muted);
  font-family: var(--font-athletic); font-size: 0.6875rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  border-top: 2px solid transparent; margin-top: -1px;
}
.tab svg { width: 22px; height: 22px; display: block; }
.tab[aria-current="page"] { color: var(--bone); border-top-color: var(--gold); }
.tab--clave { color: var(--gold); }
.tab--clave svg { width: 25px; height: 25px; }
.tab--clave[aria-current="page"] { color: var(--gold-bright); }
.tab:focus-visible {
  outline: 2px solid var(--gold-bright); outline-offset: -3px;
}

/* ═══ Instalación ══════════════════════════════════════════════════════ */

.instalar { padding-block: var(--sp-6) var(--sp-7); }
.instalar__marca { display: flex; align-items: center; gap: var(--sp-4); }
.instalar__icono {
  width: 76px; height: 76px; flex: none; display: block;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}
.instalar h1 {
  font-family: var(--font-inscription); font-size: clamp(1.75rem, 8vw, 2.5rem);
  letter-spacing: 0.02em; margin: 0; line-height: 1.05; color: var(--bone);
}
.instalar__byline {
  font-family: var(--font-athletic); letter-spacing: 0.18em; text-transform: uppercase;
  font-size: 0.75rem; color: var(--gold); margin: 4px 0 0;
}

/* Los pasos de iPhone. Numerados porque AQUÍ el orden sí es información: el
   menú de compartir hay que abrirlo antes de poder pulsar «Añadir». */
.pasos { list-style: none; margin: var(--sp-5) 0 0; padding: 0; counter-reset: paso; }
.pasos li {
  counter-increment: paso; position: relative;
  padding: 0 0 var(--sp-5) 46px; color: var(--bone-dim);
  font-size: var(--t-body); line-height: 1.5;
}
.pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; display: grid; place-items: center;
  font-family: var(--font-athletic); font-size: 0.9375rem; color: var(--gold-ink);
  background: var(--gold);
}
/* La línea que une los pasos: la escalera se lee como una, no como tres cosas. */
.pasos li:not(:last-child)::after {
  content: ""; position: absolute; left: 14px; top: 34px; bottom: 10px;
  width: 1px; background: var(--line-gold);
}
.pasos b { color: var(--bone); font-weight: 600; }

.qr-cartel {
  margin: var(--sp-6) 0 0; padding: var(--sp-5);
  border: 1px solid var(--line-gold); background: var(--surface);
  text-align: center;
}
.qr-cartel img { width: min(220px, 62vw); height: auto; background: var(--bone); padding: 12px; }
.qr-cartel figcaption {
  margin-top: var(--sp-3); font-size: var(--t-label); color: var(--muted);
}
.qr-cartel code {
  display: block; margin-top: var(--sp-2); font-family: var(--font-evidence);
  font-size: var(--t-evidence); color: var(--faint); word-break: break-all;
}

.retrato {
  width: 64px; height: 64px; flex: none; object-fit: cover;
  border: 1px solid var(--line-gold); border-radius: 50%;
}

/* ═══ Escritorio ═══════════════════════════════════════════════════════
 * Secundario a propósito: la superficie del socio se usa en el móvil. En
 * pantalla ancha no se reparte en columnas —eso sería inventar una segunda
 * arquitectura de información—: se centra la misma columna y la barra de
 * pestañas se despega del canto para no parecer un móvil estirado.          */

@media (min-width: 46rem) {
  .tabs {
    inset: auto 0 var(--sp-5) 0; width: min(34rem, calc(100% - 2 * var(--sp-5)));
    margin-inline: auto; border: 1px solid var(--line);
  }
  .mi { padding-bottom: calc(var(--mi-tabs) + var(--sp-8)); }
}

@media (prefers-reduced-motion: reduce) {
  .sello, .llave { transition: none !important; }
}

/* ═══ Pantallas de entrenamiento heredadas ═════════════════════════════
 * Entrenamientos, historial y marcas se escribieron contra el armazón de la
 * web pública, que trae su propio registro y su propia caja de ancho. Dentro
 * de la aplicación del socio ese armazón lo pone ya el shell, así que aquí se
 * neutraliza el de dentro. Es una desactivación de tres líneas y no la
 * reescritura de tres pantallas: el contenido de esas páginas está bien, y
 * tocarlo por estética sería tocar código sellado sin defecto que lo pida.
 */
.mi .register { padding-top: 0; padding-bottom: var(--sp-6); border-top: 0; }
.mi .wrap, .mi .wrap--narrow { max-width: none; padding-inline: 0; }

/* La navegación secundaria de entrenamiento. Vive DENTRO de la pestaña
   «Entreno», así que no compite con la barra de abajo: es el segundo nivel. */
.mi .tr-tabs { margin-bottom: var(--sp-5); }

/* La llamada de un estado vacío no compite con la llave. El oro macizo es de
   la tésera y de la pestaña de acceso; aquí basta un contorno. Se vio en la
   primera hoja de capturas: tres botones dorados en una pantalla y el ojo ya
   no sabe cuál es el importante. */
.vacio .btn {
  background: transparent; color: var(--gold);
  border: 1px solid var(--line-gold); box-shadow: none;
}
.vacio .btn:hover, .vacio .btn:focus-visible {
  background: rgba(212,165,68,0.10); color: var(--gold-bright);
}

/* ═══ El cuadrante ═════════════════════════════════════════════════════
 * Una semana del club son más de cien sesiones. Con una ficha por sesión la
 * pantalla medía cuarenta y ocho mil píxeles de alto y era un muro de botones
 * dorados: se vio en la primera captura de página completa. La ficha se queda
 * para lo que el socio TIENE; el cuadrante es una lista que se recorre.
 */
.sesiones { list-style: none; margin: 0; padding: 0; }
.sesion {
  display: grid; grid-template-columns: 3.6rem 1fr auto;
  align-items: center; gap: var(--sp-3);
  min-height: 56px; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--accent, var(--line-strong));
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.sesion:first-child { border-top: 1px solid var(--line); }
/* La que ya es suya se marca, no se esconde: verla en el cuadrante es lo que
   le dice al socio que ese hueco de su semana está ocupado. */
.sesion--mia { background: rgba(212,165,68,0.05); }
.sesion__hora {
  font-family: var(--font-athletic); font-size: 1.0625rem;
  letter-spacing: 0.04em; color: var(--gold); font-variant-numeric: tabular-nums;
}
.sesion__que { min-width: 0; }
.sesion__que b {
  display: block; font-family: var(--font-body); font-size: var(--t-body);
  font-weight: 600; color: var(--bone); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sesion__que > span {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 0.8125rem; color: var(--muted); margin-top: 2px;
}
/* Botón deshabilitado: sigue leyéndose, porque «Tuya» es información, no un
   control apagado. Lo que no hace es pedir el ojo. */
.sesion .btn[disabled] { opacity: 1; color: var(--faint); border-color: var(--line); }

/* ── El selector de día ────────────────────────────────────────────────
 * Siete casillas que se desplazan a lo ancho. No es una decoración: es lo que
 * convierte una semana de catorce mil píxeles en una pantalla que cabe en una
 * mano, sin ocultar ni un solo día.                                        */
.dias {
  display: flex; gap: var(--sp-2); overflow-x: auto; margin-top: var(--sp-5);
  padding-bottom: var(--sp-2); scrollbar-width: none;
  /* El día de hoy queda pegado al canto izquierdo y los demás a su derecha:
     se lee como un calendario, no como una fila de botones sueltos. */
  scroll-snap-type: x proximity;
}
.dias::-webkit-scrollbar { display: none; }
.dia {
  position: relative; flex: 0 0 auto; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-width: 52px; min-height: 60px; padding: var(--sp-2);
  border: 1px solid var(--line); background: var(--surface);
  text-decoration: none; color: var(--muted);
}
.dia--on {
  border-color: var(--line-gold); background: rgba(212,165,68,0.08); color: var(--bone);
}
.dia__nombre {
  font-family: var(--font-athletic); font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.dia__num {
  font-family: var(--font-inscription); font-size: 1.125rem; font-weight: 700;
  line-height: 1;
}
.dia--on .dia__num { color: var(--gold); }
/* Un punto donde hay algo que reservar. Va ACOMPAÑADO del número de sesiones
   en la cabecera del día: el punto solo no dice cuántas. */
.dia__punto {
  position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--bronze);
}
.dia--on .dia__punto { background: var(--gold); }
.dia:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }

/* La fila del cuadrante, en cuatro columnas. La ocupación tiene la suya: metida
   en la misma línea que el recurso, «Sala de máquinas» partía en dos y dejaba
   el punto separador colgando en una línea sola. Se vio en la captura. */
.sesion { grid-template-columns: 3.6rem 1fr auto auto; }
.sesion__que > span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sesion__plazas {
  font-family: var(--font-evidence); font-size: var(--t-evidence);
  color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sesion__plazas--lleno { color: var(--warn); }

/* El botón de la fila, más estrecho: con el interletraje de la condensada se
   comía la columna del nombre y «Sala de máquinas» salía recortada a la mitad. */
.sesion .btn { padding-inline: var(--sp-3); letter-spacing: 0.08em; }

/* El nombre de la actividad NO se recorta: se envuelve. «Sala de máquinas»
   salía como «Sala de máq…», que es peor que una fila un poco más alta —el
   nombre de la clase es justo el dato por el que se busca en la lista—. Lo que
   sí se recorta es el sitio, que casi siempre se deduce del nombre. */
.sesion__que b { white-space: normal; overflow: visible; line-height: 1.2; }
.sesion { align-items: center; }

/* =======================================================================
 * MI COLISEO SOBRE CLARO - gate 14
 *
 * Misma tesis que en Gestion: el negro sigue siendo el lienzo y lo que gana
 * luz es la superficie de trabajo. Aqui la superficie de trabajo es la ficha
 * de una reserva, la fila de una clase y la tarjeta de un aviso: lo que el
 * socio lee de pie, en el vestuario, con el movil a media luz.
 *
 * La llave NO se toca. El codigo de acceso vive sobre hueso desde su gate y
 * ese contraste es el que hace que una camara barata lo lea a la primera.
 * ======================================================================= */

.ficha {
  background: var(--surface-card-primary);
  border-color: var(--surface-card-line);
  color: var(--text-on-light);
}
.ficha__que { color: var(--text-on-light); }
.ficha__donde { color: var(--text-on-light-mute); }
.ficha__cuando { color: var(--gold-on-light); }

.sesion {
  background: var(--surface-card-primary);
  border-bottom-color: var(--surface-card-line-soft);
  color: var(--text-on-light);
}
.sesion:first-child { border-top-color: var(--surface-card-line-soft); }
.sesion--mia { background: #FBF3DF; }
.sesion__hora { color: var(--gold-on-light); }
.sesion__que b { color: var(--text-on-light); }
.sesion__que > span { color: var(--text-on-light-mute); }
.sesion .btn { border-color: var(--surface-card-line); color: var(--text-on-light); }
.sesion .btn[disabled] { color: var(--text-on-light-mute);
                         border-color: var(--surface-card-line-soft); }

.vacio {
  background: var(--surface-card-primary);
  border-color: var(--surface-card-line);
  color: var(--text-on-light);
}
.vacio__titulo { color: var(--text-on-light); }
.vacio p { color: var(--text-on-light-soft); }

/* -- El centro de avisos ----------------------------------------------- */
.hilos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.hilo {
  background: var(--surface-card-primary);
  border: 1px solid var(--surface-card-line);
  border-radius: var(--r-2);
  min-width: 0;
}
.hilo--nuevo { border-left: 3px solid var(--gold); }
.hilo__link {
  display: grid; gap: var(--sp-1);
  padding: var(--sp-4);
  min-height: var(--tap);
  text-decoration: none; color: var(--text-on-light);
}
.hilo__cab { display: flex; align-items: baseline; gap: var(--sp-2); }
.hilo__asunto { flex: 1 1 auto; min-width: 0; font-weight: 600;
                overflow-wrap: anywhere; }
/* El contador de no leidos: circulo de ancho intrinseco, nunca una columna.
   Un badge dentro de una rejilla estrecha es la otra mitad del defecto de las
   palabras partidas. */
.hilo__punto {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; padding-inline: 0.4rem;
  border-radius: 999px; background: var(--gold); color: var(--gold-ink);
  font-size: var(--t-label); font-weight: 700; line-height: 1;
}
.hilo__extracto {
  color: var(--text-on-light-mute); font-size: var(--t-label); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hilo__pie { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.hilo__cat, .hilo__cerrado {
  display: inline-flex; width: max-content; max-width: 100%;
  padding: 2px var(--sp-2);
  border: 1px solid var(--surface-card-line); border-radius: 999px;
  background: var(--surface-card-secondary);
  color: var(--text-on-light-soft); font-size: var(--t-label); white-space: nowrap;
}
.mi-volver { margin: 0 0 var(--sp-4); font-size: var(--t-label); }
.mi-volver a { display: inline-flex; align-items: center; min-height: var(--tap);
               color: var(--muted); }

/* -- El acceso a avisos en la barra ------------------------------------ */
.appbar__avisos {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap); padding-inline: var(--sp-2);
  color: var(--bone-dim); text-decoration: none;
  font-family: var(--font-athletic); font-size: var(--t-label);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.appbar__avisos svg { width: 20px; height: 20px; flex: none; }
.appbar__avisos:hover, .appbar__avisos.is-on { color: var(--gold); }
/* A 360 px la palabra «AVISOS» junto a «SALIR» y la marca no cabe. El icono
   solo sigue diciendo lo mismo, y el nombre accesible viaja en el enlace. */
.appbar__avisos span:not(.appbar__badge) { display: none; }
@media (min-width: 480px) { .appbar__avisos span:not(.appbar__badge) { display: inline; } }
.appbar__badge {
  position: absolute; top: 4px; left: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.1rem; height: 1.1rem; padding-inline: 0.25rem;
  border-radius: 999px; background: var(--gold); color: var(--gold-ink);
  font-size: 0.6875rem; font-weight: 700; line-height: 1;
}
@media (min-width: 480px) { .appbar__badge { position: static; margin-left: -4px; } }

/* -- La conversacion, en la superficie del socio ------------------------ */
.mi .conversacion { list-style: none; margin: 0 0 var(--sp-5); padding: 0;
                    display: grid; gap: var(--sp-3); }
.mi .msg--member { border-left: 3px solid var(--line-strong); }

/* El enlace de cabecera de cada bloque —«VER CLASES», «MIS MARCAS»— es un
   destino real y se quedaba en 35 px de alto. Y el acceso a avisos, con el
   rotulo oculto en pantallas estrechas, se quedaba en 36 px de ancho. Los dos
   son controles: los dos llegan al minimo tactil. */
.bloque__titulo a { display: inline-flex; align-items: center; min-height: var(--tap); }
.appbar__avisos { min-width: var(--tap); justify-content: center; }

/* Recurso oficial de Google Wallet: el SVG no se redibuja ni se deforma. */
.wallet-oficial {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 55px; padding: 8px; border: 0; border-radius: 0;
  background: transparent; cursor: pointer;
}
.wallet-oficial img { display: block; width: 199px; height: 55px; }
.wallet-oficial:disabled { cursor: not-allowed; opacity: .48; }
.wallet-oficial:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }