/* Brutus v3 — Global Styles */
 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 :root {
   --bg: #0a0a1a;
   --card: #1a1a2e;
   --card-hover: #222244;
   --accent: #ff6b35;
   --accent-hover: #e85d2c;
   --text: #f0f0f0;
   --text-dim: #999;
   --border: #2a2a4a;
   --danger: #e74c3c;
   --success: #2ecc71;
   --radius: 16px;
   --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
   /* Derivados del accent (#ff6b35) — default que usa el tema oscuro; el
      custom theme los sobrescribe vía setProperty() en profile.js. */
   --accent-light: rgb(255, 137, 73);
   --accent-glow: rgba(255, 107, 53, 0.35);
   --accent-glow-soft: rgba(255, 107, 53, 0.15);
   --accent-border: rgba(255, 107, 53, 0.30);
   --accent-bg-subtle: rgba(255, 107, 53, 0.12);
   --accent-bg-medium: rgba(255, 107, 53, 0.16);
   /* Nav: píldora semitransparente sobre el fondo oscuro */
   --nav-bg: rgba(26, 26, 46, 0.95);
   --nav-bg-hover: rgba(26, 26, 46, 0.85);
   /* Alto de la píldora de navegación y ancho de la media luna de
      notificaciones pegada a su derecha. Los comparten .c-stage y .notif-bell
      para que encajen exactamente sin números mágicos duplicados. */
   --nav-h: 76px;
   --nav-bell-w: 42px;
   color-scheme: dark;
 }

 html,
 body {
   height: 100%;
   font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
   background: var(--bg);
   color: var(--text);
   line-height: 1.5;
   overflow-x: hidden;
   overflow-y: hidden;
 }

 /* ─── Normalización iOS / Safari ─────────────────────────────────────────
    Diferencias de WebKit móvil que descuadran la UI respecto a Android/web:
    - text-size-adjust: iOS "infla" textos por su cuenta (sobre todo en
      horizontal) y rompe los anchos calculados.
    - tap-highlight: el flash gris al tocar elementos con onclick.
    - appearance en inputs de texto: iOS mete sombras interiores y bordes
      redondeados propios que desalinean los formularios.
    - input[type=date]: iOS lo pinta como control nativo — centra el valor,
      colapsa la altura si está vacío y no respeta el padding. Se fuerza
      alineación izquierda, altura mínima y ancho completo para que quede
      como el resto de campos. */
 html {
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
 }

 body {
   -webkit-tap-highlight-color: transparent;
 }

 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
 textarea {
   -webkit-appearance: none;
   appearance: none;
 }

 button {
   font-family: inherit;
 }

 input[type="date"],
 input[type="datetime-local"],
 input[type="time"] {
   min-height: 48px;
   width: 100%;
   display: block;
   -webkit-appearance: none;
   appearance: none;
 }

 input[type="date"]::-webkit-date-and-time-value {
   text-align: left;
 }

 /* ─── Font Size Classes ─────────────────────────── */
 .font-small {
   font-size: 14px;
 }

 .font-standard {
   font-size: 16px;
 }

 .font-large {
   font-size: 20px;
 }

 .font-custom {
   /* fontSize set via inline style */
 }

 /* ─── Layout ────────────────────────────────────── */
 .app-container {
   max-width: 480px;
   margin: 0 auto;
   min-height: 100vh;
   min-height: 100dvh;
   padding-bottom: 0;
   /* Notch en horizontal (iPhone): sin esto el contenido queda debajo */
   padding-left: env(safe-area-inset-left, 0px);
   padding-right: env(safe-area-inset-right, 0px);
 }

 .screen {
   display: none;
   padding: 20px;
   animation: fadeIn 0.3s ease;
 }

 #screen-content {
   overflow-y: auto;
   max-height: 100vh;
   /* fallback */
   max-height: 100dvh;
   /* dvh descuenta la barra del navegador en móvil */
   /* Padding lateral GLOBAL: antes cada pantalla ponía (o no) el suyo y en
      "Mis WODs" las tarjetas tocaban el borde físico del teléfono.
      Reducido a 8px (jul-2026) para aprovechar más ancho en pantallas con
      datos (rankings, métricas...) manteniendo un mínimo respiro visual. */
   padding: calc(12px + env(safe-area-inset-top, 0px)) 8px 0;
   scrollbar-width: none;
   -ms-overflow-style: none;
   /* Navegación por deslizamiento: el navegador nos cede el gesto horizontal
     (solo permite pan vertical) y no dispara su "atrás" nativo por overscroll. */
   touch-action: pan-y;
   overscroll-behavior-x: none;
   will-change: transform;
 }

 /* Espaciador automático al final de cada pantalla — evita que el nav tape el último elemento */
 #screen-content::after {
   content: '';
   display: block;
   height: calc(100px + env(safe-area-inset-bottom, 0px));
 }

 /* En Mis WODs el paginador (◀ Página X de Y ▶) queda al final del scroll y el
    FAB flotante de "Registrar" lo tapa. Cuando el paginador entra en la franja
    del FAB (wods.js lo detecta y pone esta clase en <body>), el espaciador
    crece 60px más: la última fila se puede bajar un poco más y el paginador
    queda libre, por encima del botón. */
 body.wod-pagination-inview #screen-content::after {
   height: calc(160px + env(safe-area-inset-bottom, 0px));
 }

 #screen-content::-webkit-scrollbar {
   display: none;
   width: 0;
   height: 0;
 }

 .screen.active {
   display: block;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(10px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* ─── Cards ─────────────────────────────────────── */
 .card {
   background: var(--card);
   border-radius: var(--radius);
   /* 14px (antes 20px, jul-2026): junto al padding lateral reducido de
      #screen-content gana ancho útil para los datos sin tocar el borde. */
   padding: 14px;
   margin-bottom: 16px;
   border: 1px solid var(--border);
   box-shadow: var(--card-shadow);
 }

 /* ─── Barra de acciones de pantalla ───────────────
    Sustituye a las cabeceras "<h2>emoji Título</h2>": el carrusel de
    navegación ya dice dónde estás, así que cada pantalla muestra solo
    sus acciones (registrar, buscar, crear...) alineadas a la derecha. */
 .screen-toolbar {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 8px;
   margin-bottom: 14px;
 }

 /* ─── Navegación de mes compacta (Mis WODs) ─────── */
 .month-nav-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
 }

 .month-nav-btn {
   width: 38px;
   height: 38px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--bg);
   color: var(--text-dim);
   border: 1px solid var(--border);
   border-radius: 12px;
   font-size: 0.95rem;
   cursor: pointer;
   transition: border-color 0.2s, color 0.2s;
 }

 .month-nav-btn:hover {
   border-color: var(--accent);
   color: var(--text);
 }

 .month-nav-btn:disabled {
   opacity: 0.35;
   cursor: default;
 }

 .month-nav-label {
   font-weight: 700;
   font-size: 1rem;
   text-align: center;
   flex: 1;
   text-transform: capitalize;
 }

 .card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
 }

 /* ─── Forms ─────────────────────────────────────── */
 .form-group {
   margin-bottom: 16px;
 }

 label {
   display: block;
   font-size: 0.85rem;
   color: var(--text-dim);
   margin-bottom: 6px;
 }

 input,
 select,
 textarea {
   width: 100%;
   /* Sin esto, un input dentro de una fila flex (HH:MM:SS, campos en columna...)
      se niega a encoger por debajo de su ancho de contenido y desborda la
      tarjeta en pantallas estrechas (iPhone) en vez de repartirse el espacio. */
   min-width: 0;
   padding: 12px 16px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 10px;
   color: var(--text);
   font-size: 1rem;
   outline: none;
   transition: border-color 0.2s;
 }

 /* Inputs numéricos angostos (series, reps, peso por serie...): el padding
    por defecto (12px 16px) más las flechas nativas de type=number no caben
    en anchos pequeños y cortan la cifra en cuanto tiene 3+ dígitos o
    decimales (p. ej. "137.5" kg) — este modificador libera ese espacio. */
 .input-compact {
   padding: 8px 2px;
   text-align: center;
   -moz-appearance: textfield;
 }

 .input-compact::-webkit-inner-spin-button,
 .input-compact::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }

 select {
   -webkit-appearance: none;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999999' fill-rule='evenodd' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 14px center;
   background-size: 11px 8px;
   padding-right: 38px;
   cursor: pointer;
   transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
 }

 select:hover:not(:disabled) {
   border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
 }

 select:disabled {
   opacity: 0.55;
   cursor: not-allowed;
 }

 select option,
 select optgroup {
   background: var(--card);
   color: var(--text);
 }

 input:focus,
 select:focus,
 textarea:focus {
   border-color: var(--accent);
 }

 /* ─── Buttons ───────────────────────────────────── */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 14px 24px;
   background: var(--accent);
   color: #fff;
   border: none;
   border-radius: 10px;
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
   width: 100%;
   text-decoration: none;
 }

 .btn:hover {
   background: var(--accent-hover);
   transform: translateY(-1px);
 }

 .btn-secondary {
   background: var(--card);
   border: 1px solid var(--border);
   color: var(--text);
 }

 .btn-danger {
   background: var(--danger);
 }

 .btn-sm {
   padding: 8px 16px;
   font-size: 0.85rem;
   width: auto;
 }

 /* ─── CTA principal (add/register actions) ─────────
    Botón de acción principal para "añadir" algo (WOD, ejercicio, etc.):
    bloque a ancho completo con degradado y sombra suave, alineado con
    las cards de la pantalla para que se sienta parte del layout y no
    un botón de formulario genérico flotando en una esquina. */
 .btn-cta {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   padding: 13px 18px;
   background: linear-gradient(135deg, var(--accent), var(--accent-light));
   color: #fff;
   border: none;
   border-radius: 14px;
   font-size: 0.95rem;
   font-weight: 700;
   letter-spacing: 0.02em;
   cursor: pointer;
   box-shadow: 0 4px 14px var(--accent-glow-soft);
   transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
 }

 .btn-cta svg {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
 }

 .btn-cta:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px var(--accent-glow);
   filter: brightness(1.05);
 }

 .btn-cta:active {
   transform: translateY(0);
   box-shadow: 0 2px 8px var(--accent-glow-soft);
   filter: brightness(0.97);
 }

 .filter-btn {
   flex: 1;
   min-width: 0;
   max-width: none;
   text-align: center;
   justify-content: center;
   padding: 5px 3px !important;
   font-size: 0.6rem;
   line-height: 1.2;
   border-radius: 3px;
   white-space: normal;
   background: var(--card) !important;
   color: var(--text-dim) !important;
   border: 1px solid var(--border) !important;
   font-weight: 500;
   opacity: 0.85;
   transition: all 0.15s;
 }

 .filter-btn:hover:not(.filter-active) {
   opacity: 1;
   border-color: var(--accent) !important;
 }

 .filter-btn.filter-active {
   background: var(--accent) !important;
   color: #fff !important;
   font-weight: 700;
   box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 55%, transparent);
   border: 1px solid var(--accent) !important;
   opacity: 1;
   transform: scale(1.03);
 }

 /* ─── WOD Cards ─────────────────────────────────── */
 .wod-card {
   cursor: pointer;
   transition: all 0.2s;
   border-left: 3px solid var(--accent);
 }

 .wod-card:hover {
   background: var(--card-hover);
   transform: translateX(4px);
 }

 .wod-score {
   font-size: 2rem;
   font-weight: 800;
   color: var(--accent);
   line-height: 1;
 }

 .wod-level {
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   opacity: 0.7;
 }

 /* ─── Barra social de la tarjeta (like · comentar · compartir) ──────────
    Los iconos son SVG de trazo (social.js: _SOC_ICONS) en vez de emoji: el
    emoji lo pintaba cada sistema con su color y su tamaño y no seguía el
    tema. Aquí el icono hereda `currentColor`, así que basta con dar color al
    botón para que icono y contador vayan a una. */
 .soc-bar {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   row-gap: 6px;
   margin-top: 10px;
   padding-top: 9px;
   border-top: 1px solid var(--border);
 }

 /* Cada acción es una píldora, no un icono suelto: sobre el fondo de la
    tarjeta un icono a pelo se leía como decoración y la gente no lo tocaba.
    La píldora le da superficie, contorno y un área de toque de 34 px. */
 .soc-act {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   min-height: 34px;
   padding: 0 13px;
   border: 1px solid var(--border);
   border-radius: 999px;
   background: color-mix(in srgb, var(--text) 6%, transparent);
   color: var(--text);
   font-family: inherit;
   font-size: 0.82rem;
   font-weight: 700;
   line-height: 1;
   cursor: pointer;
   transition: color 0.16s, background 0.16s, border-color 0.16s, transform 0.12s, box-shadow 0.16s;
 }

 .soc-act svg {
   width: 20px;
   height: 20px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.9;
   stroke-linecap: round;
   stroke-linejoin: round;
   transition: fill 0.16s;
 }

 /* En modo compacto la fila comparte sitio con Fijar/Editar/Borrar. Baja un
    punto de tamaño, pero mantiene la píldora: es lo que la hace visible. */
 .soc-act--sm {
   gap: 6px;
   min-height: 30px;
   padding: 0 11px;
   font-size: 0.76rem;
 }

 .soc-act--sm svg {
   width: 17px;
   height: 17px;
 }

 /* Like y comentarios van juntos en el grupo (ahí cuelga el id que rellena los
    contadores), pero son dos botones separados: cada uno hace lo suyo. */
 .soc-acts {
   display: inline-flex;
   align-items: center;
 }

 /* Un contador a 0 no se pinta: sin esto el `gap` dejaría un hueco fantasma. */
 .soc-act span:empty {
   display: none;
 }

 /* El número de me gusta es su propio botón y abre la lista de quién lo dio.
    Va más discreto que el corazón — es un dato al que se puede entrar, no una
    acción principal — y `display` propio porque `inline-flex` de .soc-act
    ganaría al `display:none` que trae el atributo `hidden`. */
 .soc-act--likers {
   padding: 0 11px;
   color: var(--text-dim);
 }

 .soc-act--likers[hidden] {
   display: none;
 }

 .soc-act:hover {
   color: var(--accent);
   background: color-mix(in srgb, var(--accent) 14%, transparent);
   border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
   transform: translateY(-1px);
   box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 22%, transparent);
 }

 .soc-act:active {
   transform: scale(0.94);
   box-shadow: none;
 }

 .soc-act:disabled {
   opacity: 0.55;
   cursor: default;
   transform: none;
   box-shadow: none;
 }

 /* Ya le he dado like: la píldora se tiñe de acento y el corazón se rellena
    — se ve de un vistazo cuáles has apoyado. */
 .soc-act--like.is-liked {
   color: var(--accent);
   background: color-mix(in srgb, var(--accent) 16%, transparent);
   border-color: color-mix(in srgb, var(--accent) 50%, transparent);
 }

 .soc-act--like.is-liked svg {
   fill: currentColor;
 }

 /* Ya hay gráfica de pulsaciones adjunta: la píldora se tiñe de acento igual
    que el like, para que se note de un vistazo aunque la tarjeta esté
    plegada y no se vea el panel. */
 .soc-act--hr.is-active {
   color: var(--accent);
   background: color-mix(in srgb, var(--accent) 16%, transparent);
   border-color: color-mix(in srgb, var(--accent) 50%, transparent);
 }

 @keyframes soc-pop {
   0% {
     transform: scale(1);
   }

   40% {
     transform: scale(1.32);
   }

   70% {
     transform: scale(0.94);
   }

   100% {
     transform: scale(1);
   }
 }

 .soc-act svg.soc-pop {
   animation: soc-pop 0.35s ease-out;
 }

 /* Compartir tarda lo que tarde el PNG del servidor: el botón se convierte en
    spinner en su sitio, sin mover la fila. */
 .soc-spin {
   display: inline-block;
   width: 16px;
   height: 16px;
   border: 2px solid color-mix(in srgb, var(--text-dim) 40%, transparent);
   border-top-color: var(--accent);
   border-radius: 50%;
   animation: soc-spin 0.7s linear infinite;
 }

 @keyframes soc-spin {
   to {
     transform: rotate(360deg);
   }
 }

 @media (prefers-reduced-motion: reduce) {
   .soc-act svg.soc-pop {
     animation: none;
   }
 }

 /* ─── Pulsaciones desde foto: controles del panel ───────────────────────────
    Viven DENTRO de "más detalles", pegados a su gráfica: solo existen cuando
    hay gráfica y solo se ven con la tarjeta desplegada. Se visten con las
    mismas píldoras que la barra social para que la tarjeta hable un idioma
    solo. */
 .whrp-ctrls {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 8px;
 }

 /* Ajuste manual de la ventana del WOD dentro de la grabación. Vacío no ocupa
    nada; con contenido, su propia caja. Los `range` necesitan medidas propias
    por lo mismo que el checkbox de abajo: la regla global de input les mete un
    padding de 12px que deja el control en un hilo. */
 .whrp-adjust:not(:empty) {
   margin-top: 8px;
   padding: 9px 10px;
   background: var(--card-hover);
   border: 1px solid var(--border);
   border-radius: var(--radius);
 }

 .whrp-adjust input[type="range"] {
   accent-color: var(--accent);
   height: 20px;
   padding: 0;
   margin: 0;
   cursor: pointer;
 }

 /* Campo para escribir el minuto exacto (mm:ss) cuando arrastrar no basta. */
 .whrp-adjust-time {
   flex: none;
   width: 56px;
   padding: 3px 4px;
   text-align: center;
   font-size: 0.72rem;
   font-weight: 800;
   font-variant-numeric: tabular-nums;
   color: var(--text);
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 7px;
 }

 .whrp-adjust-time:focus {
   outline: none;
   border-color: var(--accent);
 }

 /* Fila del modal "Repartir esta gráfica": checkbox + descripción del bloque.
    El checkbox necesita medida propia porque la regla global de arriba estira
    TODO input al 100% del ancho — pensada para campos de formulario, letal
    para una casilla: se comía 276 de los 285 px de la fila y el texto se
    apilaba en una columna de una letra. Mismo remedio que .checkbox-opt, pero
    en una fila que sí puede tener varias líneas. */
 .whrp-day-row {
   display: flex;
   gap: 9px;
   align-items: flex-start;
   padding: 9px 0;
   border-top: 1px solid var(--border);
   cursor: pointer;
 }

 .whrp-day-row input[type="checkbox"] {
   accent-color: var(--accent);
   width: 15px;
   height: 15px;
   min-width: 15px;
   margin: 3px 0 0;
   flex: none;
   cursor: pointer;
 }

 /* Interruptor de vista (🔍 Solo el WOD / Sesión): segmentado, no dos botones
    sueltos — son dos caras de lo mismo y solo una puede estar activa. */
 .whrp-seg {
   display: inline-flex;
   gap: 3px;
   padding: 3px;
   border: 1px solid var(--border);
   border-radius: 999px;
   background: color-mix(in srgb, var(--text) 6%, transparent);
 }

 .whrp-seg button {
   border: none;
   border-radius: 999px;
   padding: 5px 12px;
   background: transparent;
   color: var(--text-dim);
   font-family: inherit;
   font-size: 0.74rem;
   font-weight: 700;
   line-height: 1;
   cursor: pointer;
   transition: background 0.16s, color 0.16s;
 }

 .whrp-seg button:hover {
   color: var(--text);
 }

 .whrp-seg button[aria-pressed="true"] {
   background: var(--accent);
   color: #fff;
 }

 /* Ampliar la gráfica a pantalla completa: va justo antes de Borrar, y es
    ella la que lleva el `margin-left:auto` — así el par Ampliar+Borrar viaja
    junto pegado a la derecha (con el margen en los dos habría un hueco entre
    ambos: el espacio libre se reparte entre TODOS los márgenes auto de la fila,
    no solo en el primero). El interruptor de vista se queda libre a la izquierda. */
 .whrp-expand {
   margin-left: auto;
 }

 /* Borrar las pulsaciones: misma píldora que el resto de acciones, teñida de
    peligro. No es una acción de cabecera — va al lado de su interruptor. */
 .whrp-del {
   color: var(--danger);
   background: color-mix(in srgb, var(--danger) 10%, transparent);
   border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
 }

 .whrp-del:hover {
   color: var(--danger);
   background: color-mix(in srgb, var(--danger) 18%, transparent);
   border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
   box-shadow: 0 3px 10px color-mix(in srgb, var(--danger) 22%, transparent);
 }

 /* ─── Stars ─────────────────────────────────────── */
 .stars {
   color: #ffd700;
   font-size: 1.2rem;
   letter-spacing: 2px;
 }

 .stars-empty {
   color: var(--border);
 }

 /* ─── Navigation — Fixed Layout — invisible bar, modern glass nav only */
 .bottom-nav {
   position: fixed;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   max-width: 480px;
   height: calc(80px + env(safe-area-inset-bottom, 0px));
   background: transparent;
   border-top: none;
   z-index: 100;
   display: flex;
   align-items: flex-start;
   padding-top: 4px;
 }

 /* ─── 3D Carousel Navigation ─────────────────────────────────────────── */

 /* Stage: the perspective viewport — translucent pill bar with double border */
 .c-stage {
   position: relative;
   height: var(--nav-h);
   /* Ocupa casi todo el ancho: antes dejaba 40px muertos a cada lado y en
      teléfonos pequeños los items se apelotonaban. A la derecha encaja SIN
      hueco la media luna de notificaciones: las dos piezas juntas forman una
      única barra (por eso este lado va sin redondeo ni borde). */
   width: calc(100% - 8px - var(--nav-bell-w) - 8px);
   margin-left: 8px;
   perspective: 360px;
   overflow: hidden;
   /* Fondo SÓLIDO por defecto. Antes era rgba(...,0.15) y toda la opacidad la
      ponía `backdrop-filter`: en muchos WebView de Android (y con la
      aceleración por GPU o el "ahorro de datos/batería" desactivando el
      desenfoque) ese filtro se ignora, la barra se queda casi transparente y
      el contenido de la pantalla se lee A TRAVÉS de la navegación. Solo
      aclaramos el cristal cuando el navegador confirma que sabe desenfocar. */
   background: var(--nav-bg);
   /* Media píldora: redondeada solo por fuera; el lado derecho lo cierra la
      campana (.notif-bell), que aporta la curva de ese extremo. */
   border-radius: calc(var(--nav-h) / 2) 0 0 calc(var(--nav-h) / 2);
   /* Outer subtle border + inner accent gold border */
   border: 2px solid var(--accent-border);
   border-right: none;
   box-shadow:
     inset 0 0 0 1px var(--accent-glow-soft),
     0 0 0 1px rgba(0, 0, 0, 0.35),
     0 6px 22px rgba(0, 0, 0, 0.5);
 }

 @supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
   .c-stage {
     background: var(--nav-bg-hover);
     backdrop-filter: blur(18px) saturate(1.5);
     -webkit-backdrop-filter: blur(18px) saturate(1.5);
   }
 }

 /* Each nav item — absolutely centered, shifted by JS */
 .c-item {
   position: absolute;
   left: 50%;
   top: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
   text-decoration: none;
   cursor: pointer;
   padding: 8px 10px;
   will-change: transform, opacity;
   transform-origin: center center;
   -webkit-tap-highlight-color: transparent;
   user-select: none;
   white-space: nowrap;
   /* Gris claro (antes rgba(153,153,153,0.6)): los items laterales ya pierden
      opacidad por el propio carrusel, así que partir de un gris apagado los
      dejaba casi invisibles en pantallas poco brillantes o a pleno sol. */
   color: rgba(228, 228, 242, 0.8);
   /* Sombra de texto: garantiza contraste aunque el cristal deje pasar algo
      de color de fondo (tarjetas naranjas/rojas detrás de la barra). */
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
 }

 .c-item.c-active {
   color: var(--accent);
   background: var(--accent-bg-medium);
   border-radius: 16px;
 }

 /* Icons remain fully opaque and sharp regardless of stage translucency */
 .c-icon {
   font-size: 1.4rem;
   display: block;
   transition: transform 0.3s ease;
   filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
 }

 /* Icono de la barra como imagen (formato `img:<ruta>` en carousel-nav.js).
    Tamaño = el máximo que cabe en la píldora de 76px: 8px pad + icono + 4px
    gap + etiqueta + 8px pad ≈ 2.5rem de icono sin que el item se recorte por
    el overflow:hidden del stage. La fuente va recortada al contorno y
    centrada, así el gato LLENA el cuadro (no va encajonado con transparente).
    El drop-shadow de .c-icon recorta su contorno por el alpha y el glow del
    item activo funciona igual que con emoji. */
 .c-icon img {
   width: 3.5em;
   height: 3.5rem;
   object-fit: contain;
   display: block;
 }

 .c-item.c-active .c-icon {
   transform: scale(1.15);
   filter: drop-shadow(0 0 8px var(--accent));
 }

 .c-label {
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.02em;
 }

 /* Los dos items más alejados del centro muestran SOLO el icono: con etiqueta
    se pisaban entre ellas ("Evaluación"/"Ranking"/"Comunidad" superpuestas) en
    cuanto el teléfono era estrecho. Sin ellas cabe más separación real. */
 .c-item.c-far .c-label {
   display: none;
 }

 /* Glow bar — slim, modern */
 .c-glow {
   position: absolute;
   bottom: 6px;
   left: 50%;
   transform: translateX(-50%);
   width: 28px;
   height: 2px;
   background: var(--accent);
   border-radius: 3px;
   box-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent-glow);
   pointer-events: none;
 }

 /* ─── Campana de notificaciones — media luna que cierra la barra ───────────
    Antes era un círculo flotante que se solapaba con el último item del
    carrusel y le robaba ancho. Ahora es el EXTREMO DERECHO de la propia barra:
    plana por dentro (contra el carrusel, solo las separa un filo fino) y
    redondeada hacia fuera, del mismo alto que la píldora. Queda fija, siempre
    bajo el pulgar, y el carrusel sabe cuánto espacio le queda (--nav-bell-w).
    La nav (.bottom-nav) se centra con max-width:480px, así que en pantallas
    más anchas anclamos al borde REAL de la barra, no al del viewport. */
 .notif-bell {
   position: fixed;
   bottom: env(safe-area-inset-bottom, 0px);
   right: calc(max(0px, (100vw - 480px) / 2) + 8px);
   /* Mismo nivel que .bottom-nav (z-index:100): antes 8500 la ponía por
      encima de CUALQUIER modal/formulario (.modal-overlay va a 1000), así
      que la campana quedaba flotando sobre diálogos abiertos igual que
      pasaba con el propio carrusel de navegación antes de esta regla. */
   z-index: 100;
   width: var(--nav-bell-w);
   height: var(--nav-h);
   border-radius: 0 calc(var(--nav-h) / 2) calc(var(--nav-h) / 2) 0;
   border: 2px solid var(--accent-border);
   /* Filo fino de separación con el carrusel (el borde de 2px de la píldora
      termina aquí): marca que es un botón distinto sin partir la barra. */
   border-left: 1px solid var(--accent-glow-soft);
   /* Mismo motivo que .c-stage: sin desenfoque disponible tiene que tapar por
      sí sola, o la campana se pierde sobre el contenido de la pantalla. */
   background: var(--nav-bg);
   color: rgba(240, 240, 240, 0.9);
   font-size: 1.3rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   /* El centro óptico de un semicírculo cae hacia su lado curvo: sin esto el
      🔔 parece pegado al carrusel. */
   padding-left: 3px;
   box-shadow:
     inset 0 0 0 1px var(--accent-glow-soft),
     0 4px 16px rgba(0, 0, 0, 0.35);
   transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
 }

 @supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
   .notif-bell {
     background: var(--nav-bg-hover);
     backdrop-filter: blur(18px) saturate(1.5);
     -webkit-backdrop-filter: blur(18px) saturate(1.5);
   }
 }

 /* Origen en el lado plano: si encogiera desde el centro se despegaría del
   carrusel y se abriría una ranura en la barra al pulsarla. */
 .notif-bell:active {
   transform: scale(0.94);
   transform-origin: left center;
 }

 /* Con pendientes: se enciende como un item activo del carrusel */
 .notif-bell.has-unread {
   color: var(--accent);
   filter: drop-shadow(0 0 6px var(--accent));
   box-shadow:
     inset 0 0 0 1px var(--accent-glow),
     0 0 0 1px var(--accent-glow-soft),
     0 4px 18px var(--accent-glow-soft);
 }

 /* Sobre la curva exterior de la media luna: antes sobresalía por la esquina
    del círculo flotante y ahora se saldría de la pantalla. */
 .notif-badge {
   position: absolute;
   top: 8px;
   right: 2px;
   background: var(--danger);
   color: #fff;
   border-radius: 10px;
   min-width: 17px;
   height: 17px;
   font-size: 0.62rem;
   font-weight: 700;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 0 4px;
   box-shadow: 0 0 0 2px var(--bg);
 }

 .notif-panel {
   position: fixed;
   /* Justo encima de la barra completa (la media luna ocupa todo su alto). */
   bottom: calc(env(safe-area-inset-bottom, 0px) + var(--nav-h) + 8px);
   right: calc(max(0px, (100vw - 480px) / 2) + 10px);
   /* Mismo criterio que .notif-bell: por debajo de cualquier modal (1000+). */
   z-index: 100;
   width: min(320px, calc(100vw - 28px));
   max-height: 60vh;
   overflow-y: auto;
   border-radius: var(--radius);
   background: var(--card);
   backdrop-filter: blur(14px) saturate(1.5);
   -webkit-backdrop-filter: blur(14px) saturate(1.5);
   border: 2px solid rgba(42, 42, 74, 0.6);
   box-shadow:
     inset 0 0 0 1px var(--accent-glow-soft),
     0 8px 30px rgba(0, 0, 0, 0.4);
   padding: 10px;
 }

 .notif-panel-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 2px 4px 8px;
   margin-bottom: 4px;
   border-bottom: 1px solid var(--border);
 }

 .notif-panel-title {
   font-size: 0.85rem;
   font-weight: 700;
   color: var(--text);
 }

 .notif-item {
   position: relative;
   transition: background 0.35s ease;
   touch-action: pan-y;
 }

 /* Botón ✕ para descartar una notificación (o deslizarla hacia la
    izquierda) — se queda en el panel hasta que el usuario la quita a
    propósito, no solo por haberla visto. */
 .notif-dismiss-btn {
   position: absolute;
   top: 4px;
   right: 2px;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   border: 1px solid var(--border);
   background: var(--card-hover);
   color: var(--text);
   font-size: 0.85rem;
   line-height: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   flex-shrink: 0;
   transition: transform 0.15s ease, opacity 0.2s ease, color 0.15s ease;
 }

 .notif-dismiss-btn:active {
   transform: scale(0.88);
   color: var(--danger);
 }

 /* ─── Chat (AI Coach) ───────────────────────────── */
 .chat-container {
   display: flex;
   flex-direction: column;
   gap: 10px;
   overflow-y: auto;
   padding: 4px 0;
 }

 .chat-msg {
   padding: 11px 16px;
   border-radius: 15px;
   max-width: 87%;
   word-wrap: break-word;
   font-size: 1rem;
   line-height: 1.5;
 }

 .chat-user {
   background: var(--accent);
   color: #fff;
   align-self: flex-end;
   margin-left: auto;
   border-bottom-right-radius: 4px;
 }

 .chat-ai {
   background: var(--card);
   border: 1px solid var(--border);
   align-self: flex-start;
   border-bottom-left-radius: 4px;
 }

 .coach-header {
   padding: 13px 0 9px;
   border-bottom: 1px solid var(--border);
   margin-bottom: 9px;
 }

 .coach-suggestions {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   padding: 7px 0;
 }

 .suggest-chip {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 22px;
   padding: 7px 14px;
   font-size: 0.88rem;
   cursor: pointer;
   color: var(--text);
   transition: background .15s;
   white-space: nowrap;
 }

 .suggest-chip:hover {
   background: var(--border);
 }

 /* WOD config panel */
 .coach-config {
   border: 1px solid var(--border);
   border-radius: 13px;
   padding: 11px 14px;
   margin: 7px 0;
   background: var(--card);
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .config-row {
   display: flex;
   align-items: center;
   gap: 9px;
   flex-wrap: wrap;
 }

 .config-label {
   font-size: 0.77rem;
   color: var(--text-dim);
   text-transform: uppercase;
   letter-spacing: .5px;
   min-width: 64px;
   flex-shrink: 0;
 }

 .radio-group {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 }

 .radio-opt {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 6px 12px;
   border-radius: 9px;
   border: 1px solid var(--border);
   font-size: 0.88rem;
   cursor: pointer;
   transition: border-color .15s, background .15s;
   white-space: nowrap;
 }

 .radio-opt:hover {
   border-color: var(--accent);
 }

 .radio-opt input[type="radio"] {
   accent-color: var(--accent);
   width: 14px;
   height: 14px;
   margin: 0;
   cursor: pointer;
   flex-shrink: 0;
 }

 .radio-opt:has(input:checked) {
   border-color: var(--accent);
   background: var(--accent-bg-subtle);
   color: var(--accent);
 }

 .checkbox-opt {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 6px 12px;
   border-radius: 9px;
   border: 1px solid var(--border);
   font-size: 0.88rem;
   cursor: pointer;
   transition: border-color .15s, background .15s;
   white-space: nowrap;
 }

 .checkbox-opt:hover {
   border-color: var(--accent);
 }

 .checkbox-opt input[type="checkbox"] {
   accent-color: var(--accent);
   width: 14px;
   height: 14px;
   margin: 0;
   cursor: pointer;
   flex-shrink: 0;
 }

 .checkbox-opt:has(input:checked) {
   border-color: var(--accent);
   background: var(--accent-bg-subtle);
   color: var(--accent);
 }

 /* Bloque de ayuda plegable (ej. "¿Cómo repartir el trabajo?" en WODs de
    equipo): colapsado por defecto para no ocupar sitio permanentemente. */
 .wod-help-details {
   border-radius: 9px;
   overflow: hidden;
 }

 .wod-help-details>summary {
   cursor: pointer;
   list-style: none;
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .wod-help-details>summary::-webkit-details-marker {
   display: none;
 }

 .wod-help-details>summary .wod-help-chev {
   display: inline-block;
   transition: transform .15s;
   flex-shrink: 0;
 }

 .wod-help-details[open]>summary .wod-help-chev {
   transform: rotate(90deg);
 }

 /* Config tag in user chat bubble */
 .wod-config-tag {
   display: inline-block;
   background: rgba(255, 255, 255, .2);
   border-radius: 7px;
   padding: 2px 8px;
   font-size: 0.83rem;
   font-weight: 600;
   letter-spacing: .3px;
   margin-right: 4px;
 }

 .coach-input-row {
   display: flex;
   gap: 9px;
   padding: 9px 0 5px;
   align-items: center;
 }

 .typing-dots {
   display: inline-flex;
   gap: 5px;
   align-items: center;
   padding: 3px 0;
 }

 .typing-dots span {
   width: 8px;
   height: 8px;
   background: var(--text-dim);
   border-radius: 50%;
   animation: typingBounce 1.2s infinite ease-in-out;
 }

 .typing-dots span:nth-child(2) {
   animation-delay: .2s;
 }

 .typing-dots span:nth-child(3) {
   animation-delay: .4s;
 }

 @keyframes typingBounce {

   0%,
   60%,
   100% {
     transform: translateY(0);
     opacity: .5;
   }

   30% {
     transform: translateY(-5px);
     opacity: 1;
   }
 }

 /* ─── Progress Bars ─────────────────────────────── */
 .progress-bar {
   height: 8px;
   background: var(--bg);
   border-radius: 4px;
   overflow: hidden;
   margin-top: 8px;
 }

 .progress-fill {
   height: 100%;
   background: linear-gradient(90deg, var(--accent), var(--accent-light));
   border-radius: 4px;
   transition: width 0.5s ease;
 }

 /* ─── Utility ───────────────────────────────────── */
 .text-center {
   text-align: center;
 }

 .text-dim {
   color: var(--text-dim);
   font-size: 0.85rem;
 }

 .required-star {
   color: #ef4444;
 }

 .mt-2 {
   margin-top: 16px;
 }

 .mb-2 {
   margin-bottom: 16px;
 }

 .flex-between {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

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

 /* ─── Theme Toggle Button ───────────────────────── */
 .theme-toggle-btn {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--card);
   border: 1px solid var(--border);
   font-size: 1.1rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }

 .theme-toggle-btn:hover {
   transform: scale(1.1);
   border-color: var(--accent);
 }

 /* ─── Theme Variants ────────────────────────────── */
 [data-theme="light"] {
   --bg: #f2f2f7;
   --card: #ffffff;
   --card-hover: #ebebf4;
   --accent: #e85d2c;
   --accent-hover: #d14f20;
   --text: #1a1a2e;
   --text-dim: #656b76;
   --border: #d8d8e8;
   --danger: #dc2626;
   --success: #16a34a;
   --radius: 16px;
   --card-shadow: 0 2px 10px rgba(20, 20, 40, 0.08);
 }

 /* Light theme — fix hardcoded dark sections */
 [data-theme="light"] .eval-history-card,
 [data-theme="light"] .uneval-card {
   background: var(--bg);
 }

 [data-theme="light"] .stat-card.eval-stat {
   background: var(--card);
 }

 [data-theme="light"] .eval-header h2 {
   -webkit-text-fill-color: unset;
   color: var(--text);
 }

 [data-theme="light"] .chat-ai {
   background: var(--bg);
 }

 [data-theme="light"] .coach-config {
   background: var(--bg);
 }

 [data-theme="light"] .category-legend,
 [data-theme="glass-light"] .category-legend {
   background: var(--bg);
 }

 [data-theme="light"] .result-card,
 [data-theme="glass-light"] .result-card {
   background: var(--card);
 }

 /* Nav carrusel: en oscuro es una píldora tintada de azul-noche; en claro
    ese mismo tinte queda sucio, así que la aclaramos a cristal blanco
    (mismo patrón que .notif-bell justo debajo). */
 [data-theme="light"] .c-stage,
 [data-theme="glass-light"] .c-stage {
   background: rgba(255, 255, 255, 0.98);
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
   border: 2px solid rgba(232, 93, 44, 0.3);
   border-right: none;
   box-shadow:
     inset 0 0 0 1px rgba(232, 93, 44, 0.18),
     0 0 0 1px rgba(20, 20, 40, 0.06),
     0 6px 18px rgba(20, 20, 40, 0.14);
 }

 @supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {

   [data-theme="light"] .c-stage,
   [data-theme="glass-light"] .c-stage {
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(18px) saturate(1);
     -webkit-backdrop-filter: blur(18px) saturate(1);
   }
 }

 /* Sobre cristal blanco la sombra negra del texto ensucia: aquí basta con
    subir el contraste del propio color. */
 [data-theme="light"] .c-item,
 [data-theme="glass-light"] .c-item {
   color: rgba(26, 26, 46, 0.72);
   text-shadow: none;
 }

 [data-theme="light"] .c-icon,
 [data-theme="glass-light"] .c-icon {
   filter: none;
 }

 /* El `color` va repetido a propósito: `[data-theme] .c-item` tiene la misma
    especificidad que `.c-item.c-active` y va después, así que sin esto el
    item activo se quedaba gris en tema claro (no se veía cuál era). */
 [data-theme="light"] .c-item.c-active,
 [data-theme="glass-light"] .c-item.c-active {
   color: var(--accent);
   background: rgba(232, 93, 44, 0.16);
 }

 [data-theme="light"] .notif-bell,
 [data-theme="glass-light"] .notif-bell {
   /* `border` es shorthand: sin repetir el filo izquierdo volvería a dibujar
      una línea gruesa entre la campana y el carrusel, partiendo la barra. */
   border: 2px solid rgba(232, 93, 44, 0.28);
   border-left: 1px solid rgba(232, 93, 44, 0.22);
   background: rgba(255, 255, 255, 0.98);
   color: rgba(26, 26, 46, 0.85);
   box-shadow:
     inset 0 0 0 1px rgba(232, 93, 44, 0.2),
     0 0 0 1px rgba(232, 93, 44, 0.1),
     0 4px 16px rgba(20, 20, 40, 0.12);
 }

 @supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {

   [data-theme="light"] .notif-bell,
   [data-theme="glass-light"] .notif-bell {
     background: rgba(255, 255, 255, 0.9);
   }
 }

 [data-theme="light"] .notif-panel,
 [data-theme="glass-light"] .notif-panel {
   background: rgba(255, 255, 255, 0.96);
   border: 2px solid rgba(216, 216, 232, 0.8);
   box-shadow:
     inset 0 0 0 1px rgba(232, 93, 44, 0.15),
     0 8px 30px rgba(20, 20, 40, 0.15);
 }

 /* Legacy aliases */
 [data-theme="glass-light"] {
   --bg: #f2f2f7;
   --card: #ffffff;
   --card-hover: #ebebf4;
   --accent: #e85d2c;
   --accent-hover: #d14f20;
   --text: #1a1a2e;
   --text-dim: #656b76;
   --border: #d8d8e8;
   --danger: #dc2626;
   --success: #16a34a;
 }

 [data-theme="deep-dark"] {
   --bg: #000;
   --accent: #00ff88;
   --border: #1a3a2a;
 }

 [data-theme="pro-orange"] {
   --bg: #1a0f00;
   --card: #2a1a0a;
   --accent: #ff8c00;
   --border: #4a2a0a;
 }

 /* ─── Font Size Modes ───────────────────────────── */
 html.font-small {
   font-size: 14px;
 }

 html.font-standard {
   font-size: 16px;
 }

 html.font-large {
   font-size: 20px;
 }

 /* font-custom is set dynamically via inline style */

 /* Scale typography relative to base font-size */
 body {
   font-size: 1rem;
 }

 h2 {
   font-size: 1.5rem;
 }

 h3 {
   font-size: 1.25rem;
 }

 .text-dim {
   font-size: 0.85rem;
 }

 input,
 select,
 textarea {
   font-size: 1rem;
 }

 .btn {
   font-size: 1rem;
 }

 .chat-msg {
   font-size: 1rem;
 }

 /* ─── Font Size Selector UI ────────────────────── */
 .font-size-selector {
   display: flex;
   gap: 8px;
   align-items: center;
 }

 .font-size-btn {
   flex: 1;
   padding: 10px 8px;
   border-radius: 12px;
   background: var(--card);
   border: 2px solid var(--border);
   color: var(--text);
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
   text-align: center;
 }

 .font-size-btn:hover {
   border-color: var(--accent);
 }

 .font-size-btn.active {
   background: var(--accent);
   border-color: var(--accent);
   color: #fff;
   box-shadow: 0 2px 12px var(--accent-border);
 }

 .font-size-btn.small {
   font-size: 0.75rem;
 }

 .font-size-btn.standard {
   font-size: 0.9rem;
 }

 .font-size-btn.large {
   font-size: 1.1rem;
 }

 .font-size-btn.custom-btn {
   font-size: 0.85rem;
 }

 .font-custom-input {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 12px;
   padding: 12px;
   background: var(--bg);
   border-radius: 10px;
   border: 1px solid var(--border);
 }

 .font-custom-input label {
   margin-bottom: 0;
   font-size: 0.85rem;
 }

 .font-custom-input input[type="range"] {
   flex: 1;
   padding: 0;
   height: 6px;
   border: none;
   background: var(--border);
   border-radius: 3px;
   -webkit-appearance: none;
   appearance: none;
 }

 .font-custom-input input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--accent);
   cursor: pointer;
 }

 .font-custom-input input[type="range"]::-moz-range-thumb {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--accent);
   cursor: pointer;
   border: none;
 }

 .font-size-value {
   font-weight: 700;
   color: var(--accent);
   min-width: 42px;
   text-align: right;
   font-size: 0.9rem;
 }

 /* ─── Responsive ────────────────────────────────── */
 @media (min-width: 768px) {
   .app-container {
     max-width: 600px;
   }
 }

 /* ─── Spinner ───────────────────────────────────── */
 .spinner {
   width: 40px;
   height: 40px;
   margin: 16px auto;
   border: 3px solid var(--border);
   border-top-color: var(--accent);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }

 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
 }

 /* ─── Evaluation Screen — Futuristic Design ───────── */
 .eval-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 24px;
   padding-bottom: 16px;
   border-bottom: 1px solid var(--border);
 }

 .eval-header h2 {
   font-size: 1.5rem;
   background: linear-gradient(90deg, #f39c12, #e74c3c);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   margin: 0;
 }

 .eval-badge {
   background: rgba(243, 156, 18, 0.15);
   color: #f39c12;
   padding: 4px 12px;
   border-radius: 20px;
   font-size: 0.75rem;
   font-weight: 600;
   border: 1px solid rgba(243, 156, 18, 0.3);
 }

 .eval-section {
   margin-bottom: 28px;
 }

 .eval-history-hidden {
   display: none !important;
 }

 .section-title {
   font-size: 1.1rem;
   color: var(--text-dim);
   margin-bottom: 14px;
   padding-left: 4px;
   border-left: 3px solid var(--accent);
 }

 .eval-empty {
   padding: 20px 0;
   text-align: center;
 }

 /* Unevaluated cards */
 .uneval-card {
   background: var(--card);
   border: 1px solid var(--border);
   position: relative;
   overflow: hidden;
 }

 .uneval-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 3px;
   height: 100%;
   background: linear-gradient(180deg, #f39c12, #e74c3c);
 }

 .eval-btn {
   background: linear-gradient(135deg, #f39c12, #e67e22);
   border: none;
   color: #fff;
   font-weight: 600;
   width: auto;
   padding: 8px 16px;
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s;
 }

 .eval-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);
 }

 /* Chart card — usa variables de tema, no gradientes oscuros fijos */
 .chart-card {
   background: var(--card);
   border: 1px solid var(--border);
   padding: 0;
   position: relative;
   display: flex;
   flex-direction: column;
   max-height: calc(100dvh - 160px);
   min-height: 0;
   overflow: hidden;
 }

 /* En landscape la nav inferior (80px) es lo único que hay que reservar:
    con menos alto de por medio, la gráfica debe aprovechar casi todo el dvh. */
 @media (orientation: landscape) {
   .chart-card {
     max-height: calc(100dvh - 110px);
   }
 }

 /* .chart-card-fill: las tarjetas con una gráfica de verdad dentro (no el
    mensaje de "faltan evaluaciones") usan esto en vez de solo max-height.
    max-height únicamente TOPA el alto -- un flex column sin alto propio se
    ajusta al contenido y deja hueco muerto debajo en landscape en vez de
    dárselo al hijo flex:1 (el área de la gráfica) para que crezca. */
 .chart-card-fill {
   height: calc(100dvh - 330px);
   min-height: 160px;
 }

 @media (orientation: landscape) {
   .chart-card-fill {
     height: calc(100dvh - 220px);
   }
 }

 .chart-card::after {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: var(--radius);
   box-shadow: inset 0 0 30px rgba(243, 156, 18, 0.05);
   pointer-events: none;
 }

 /* weight-chart (body-metrics): igual que recovery — el canvas vive en un
    envoltorio de ALTO FIJO para que la tarjeta se ajuste a él y no quede
    "muy alargada". Antes el canvas era hijo directo de la tarjeta (flex:1)
    y llenaba lo que .chart-card-fill dejaba libre (calc(100dvh - 330px),
    ~410px en portrait): la línea se estiraba en exceso. NO toco .chart-card-fill
    porque la comparte la gráfica de Evaluación. */
 .weight-chart-wrap {
   position: relative;
   height: 150px;
 }

 @media (orientation: landscape) {
   .weight-chart-wrap {
     height: 190px;
   }
 }

 #weight-chart {
   width: 100%;
   height: 100%;
   display: block;
 }

 /* Historial de Recovery — compacto en móvil.
    Antes usaba .chart-card-fill = calc(100dvh - 330px) (~410px en portrait),
    y como el canvas no tenía alto propio, Chart.js (maintainAspectRatio:false)
    estiraba la línea a llenar la tarjeta: "muy alargada". Este wrapper da un
    alto fijo acotado (150px) y la tarjeta .chart-card se ajusta a él.
    (No toco .chart-card-fill: la comparte la gráfica de peso de body-metrics.) */
 .recovery-chart-wrap {
   position: relative;
   height: 150px;
 }

 @media (orientation: landscape) {
   .recovery-chart-wrap {
     height: 190px;
   }
 }

 /* Historial de Recovery: la gráfica es el ÚLTIMO elemento de la pantalla,
    así que un espaciador extra SOLO aquí no afecta a las demás. En móvil
    portrait el pie del canvas (puntos de actividad + etiquetas) quedaba
    bajo la píldora de nav y el FAB "Registrar" al llegar al fondo. */
 .recovery-history-section {
   margin-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
 }

 /* Gráfica de Evaluación — mismo problema y misma solución que
    .recovery-chart-wrap: antes vivía en .chart-card-fill (calc(100dvh - 330px),
    pensada para pantallas de swipe táctil completo) y Chart.js estiraba las
    líneas a llenar ese alto variable. Necesita algo más que recovery porque
    la leyenda de categorías vive DENTRO del canvas (encima de la curva). */
 .eval-chart-wrap {
   position: relative;
   height: 230px;
 }

 @media (orientation: landscape) {
   .eval-chart-wrap {
     height: 270px;
   }
 }

 /* Time range selector */
 .chart-time-selector {
   display: flex;
   gap: 6px;
   margin-bottom: 12px;
   flex-wrap: wrap;
 }

 .time-btn {
   background: var(--bg);
   border: 1px solid var(--border);
   color: var(--text-dim);
   padding: 3px 8px;
   border-radius: 6px;
   cursor: pointer;
   font-size: 0.7rem;
   transition: all 0.2s;
 }

 .time-btn:hover {
   background: var(--card-hover);
   color: var(--text);
 }

 .time-btn.active {
   background: var(--accent);
   border-color: var(--accent);
   color: #fff;
   font-weight: 600;
   box-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
 }

 /* Category charts grid */
 .category-charts-grid {
   display: grid;
   gap: 16px;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   margin-bottom: 16px;
 }

 /* Category toggle legend */
 .category-legend {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 12px;
   padding: 12px;
   background: var(--bg);
   border-radius: 8px;
   border: 1px solid var(--border);
 }

 .category-toggle {
   display: flex;
   align-items: center;
   gap: 6px;
   cursor: pointer;
   user-select: none;
   font-size: 0.8rem;
   color: var(--text);
   padding: 4px 8px;
   border-radius: 6px;
   transition: all 0.2s;
   background: var(--card);
 }

 .category-toggle:hover {
   background: var(--card-hover);
 }

 .toggle-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--text-dim);
   transition: all 0.2s;
   flex-shrink: 0;
 }

 .global-dot {
   background: #f39c12 !important;
 }

 .category-toggle input:checked+.toggle-dot {
   background: var(--cat-color, #4CAF50);
   box-shadow: 0 0 8px var(--cat-color, #4CAF50);
 }

 .toggle-label {
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .toggle-avg {
   font-weight: 600;
   font-size: 0.75rem;
   margin-left: 4px;
 }

 /* Stats grid */
 .eval-stats {
   gap: 10px;
 }

 .stat-card.eval-stat {
   background: var(--bg);
   border: 1px solid var(--border);
   padding: 12px 8px;
   text-align: center;
   border-radius: var(--radius);
   transition: all 0.3s;
 }

 .stat-card.eval-stat:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
   border-color: rgba(243, 156, 18, 0.3);
 }

 /* Week past button hover — avoids JS inline style hacks */
 .week-past-btn:hover {
   border-color: var(--accent);
   color: var(--text);
   background: var(--card-hover);
 }

 .stat-value {
   display: block;
   font-size: 1.8rem;
   font-weight: 800;
   margin-bottom: 4px;
 }

 .stat-label {
   font-size: 0.75rem;
   color: var(--text-dim);
   text-transform: uppercase;
   letter-spacing: 1px;
 }

 /* History cards */
 .eval-history-card {
   background: var(--card);
   border: 1px solid var(--border);
   padding: 14px;
   margin-bottom: 10px;
   position: relative;
 }

 .eval-history-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 3px;
   height: 100%;
   background: var(--accent);
 }

 /* Grid for unevaluated WODs */
 .eval-grid {
   display: grid;
   gap: 12px;
 }

 /* Animations */
 @keyframes glowPulse {

   0%,
   100% {
     box-shadow: 0 0 5px rgba(243, 156, 18, 0.3);
   }

   50% {
     box-shadow: 0 0 20px rgba(243, 156, 18, 0.6);
   }
 }

 .eval-btn {
   animation: glowPulse 2s ease-in-out infinite;
 }

 /* ─── Gear Screen — Modern Affiliate Store (3D Carousel) ────────────── */

 .gear-page {
   display: flex;
   flex-direction: column;
   gap: 24px;
 }

 /* ── Gear Hero ─────────────────────────────────── */
 .gear-hero {
   animation: fadeInDown .4s ease;
   margin-bottom: 8px;
 }

 @keyframes fadeInDown {
   from {
     opacity: 0;
     transform: translateY(-12px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* ── Gear Promo Banner Shimmer ─────────────────── */
 .gear-promo {
   position: relative;
   overflow: hidden;
 }

 .gear-promo::after {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 60%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .04), transparent);
   animation: gearShimmer 3s ease-in-out infinite;
 }

 @keyframes gearShimmer {
   0% {
     left: -100%;
   }

   100% {
     left: 200%;
   }
 }

 /* ── Gear Section Spacing ─────────────────────── */
 .gear-section {
   margin-bottom: 36px;
   padding-top: 8px;
   /* Espacio extra para evitar solapamiento */
 }

 /* ── Platform Badge Pulse ─────────────────────── */
 .platform-badge {
   animation: gearPulse 2.5s ease-in-out infinite;
 }

 @keyframes gearPulse {

   0%,
   100% {
     opacity: .85;
   }

   50% {
     opacity: 1;
   }
 }

 /* ── Code Pill Active State ───────────────────── */
 .code-pill:active {
   transform: scale(.96);
 }

 /* ═══════════════════════════════════════════════
   3D CAROUSEL STAGE — Core Perspective Engine
   ═══════════════════════════════════════════════ */

 .gear-3d-stage {
   position: relative;
   height: 240px;
   perspective: 1200px;
   perspective-origin: center center;
   overflow: hidden;
   margin-bottom: 12px;
 }

 /* ── 3D Card — Absolute positioned within stage ─ */
 .gear-3d-card {
   position: absolute;
   width: 280px;
   left: 50%;
   margin-left: -140px;
   top: 0;
   transition: transform .6s cubic-bezier(.25, .1, .25, 1),
     opacity .6s ease,
     z-index .6s step-end;
 }

 /* Card interior */
 .gear-3d-card .gear-card {
   position: relative;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 18px 16px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
   transition: border-color .3s, box-shadow .3s;
 }

 /* Center card gets extra glow */
 .gear-3d-card[data-pos="center"] .gear-card {
   border-color: var(--accent);
   box-shadow: 0 8px 40px var(--accent-glow-soft),
     0 0 60px var(--accent-glow-soft);
 }

 /* Side cards dim on hover */
 .gear-3d-card[data-pos="left"] .gear-card:hover,
 .gear-3d-card[data-pos="right"] .gear-card:hover {
   border-color: var(--accent);
   box-shadow: 0 6px 25px rgba(0, 0, 0, .4);
 }

 /* ── CTA Button Hover Effects ─────────────────── */
 .gear-cta-btn:hover {
   transform: translateY(-2px) !important;
   box-shadow: 0 6px 20px rgba(0, 0, 0, .35) !important;
 }

 /* ── Dot Navigation ───────────────────────────── */
 .gear-dot:hover {
   opacity: .8;
   transform: scale(1.2);
 }

 /* ── 3D Nav Buttons ──────────────────────────── */
 .gear-3d-btn:hover {
   transform: scale(1.1) !important;
 }

 /* ── Responsive Adjustments ───────────────────── */
 @media (max-width: 480px) {
   .gear-hero h2 {
     font-size: 1.3rem;
   }

   .gear-3d-stage {
     height: 210px;
   }

   .gear-3d-card {
     width: 240px !important;
     margin-left: -120px !important;
   }
 }

 /* ─── Toast Notifications ──────────────────────── */
 /* Contenedor apilable: centra arriba y coloca las notificaciones en columna
    (varias a la vez ya no se solapan). Bajo el notch/isla dinámica en iPhone. */
 #brutus-toast-host {
   position: fixed;
   top: calc(16px + env(safe-area-inset-top, 0px));
   left: 50%;
   transform: translateX(-50%);
   z-index: 9999;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   width: min(93vw, 480px);
   pointer-events: none;
 }

 .toast {
   pointer-events: auto;
   cursor: pointer;
   width: 100%;
   box-sizing: border-box;
   padding: 14px 20px;
   border-radius: 14px;
   font-size: 0.95rem;
   font-weight: 600;
   line-height: 1.4;
   text-align: center;
   color: #fff;
   /* Multilínea: los avisos largos (p. ej. los pesos que faltan) se leen
      enteros — ya no se recortan con "…". */
   white-space: pre-line;
   overflow-wrap: anywhere;
   border: 1px solid rgba(255, 255, 255, 0.16);
   animation: toastIn 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
 }

 .toast.toast-out {
   animation: toastOut 0.3s ease forwards;
 }

 .toast-success {
   background: linear-gradient(135deg, #2ecc71, #27ae60);
   box-shadow: 0 10px 34px rgba(46, 204, 113, 0.45);
 }

 .toast-info {
   background: linear-gradient(135deg, #3498db, #2980b9);
   box-shadow: 0 10px 34px rgba(52, 152, 219, 0.45);
 }

 .toast-error {
   background: linear-gradient(135deg, #e74c3c, #c0392b);
   box-shadow: 0 10px 34px rgba(231, 76, 60, 0.5);
 }

 .toast-warning {
   background: linear-gradient(135deg, #f39c12, #e67e22);
   box-shadow: 0 10px 34px rgba(243, 156, 18, 0.5);
 }

 @keyframes toastIn {
   from {
     opacity: 0;
     transform: translateY(-16px) scale(0.96);
   }

   to {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
 }

 @keyframes toastOut {
   from {
     opacity: 1;
     transform: translateY(0);
   }

   to {
     opacity: 0;
     transform: translateY(-16px);
   }
 }

 /* ─── Modal Overlay ────────────────────────────── */
 .modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.7);
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   animation: fadeIn 0.2s ease;
 }

 .modal-overlay.hidden {
   display: none;
 }

 .modal-box {
   background: var(--card);
   border-radius: var(--radius);
   padding: 24px;
   width: 100%;
   max-width: 480px;
   max-height: 90vh;
   /* dvh: en iOS Safari 100vh incluye la barra de URL colapsada y el pie del
      modal queda oculto tras ella — dvh mide el viewport realmente visible */
   max-height: 90dvh;
   overflow-y: auto;
   border: 1px solid var(--border);
   position: relative;
 }

 /* Registrar WOD por un miembro (gestor de comunidad): el formulario de "Mis
    WODs" es grande y en un modal centrado de ~480px se ve apretado y como
    "apilado". Al montarlo, el modal pasa a ocupar toda la pantalla del
    dispositivo. */
 .modal-box.modal-box--full {
   /* position:fixed + inset:0 en vez de dejar que el flex/padding del
      overlay lo centre: el overlay tiene padding:20px, así que un hijo
      "height:100dvh" centrado quedaba ~20px más alto que el hueco
      disponible y el final (pie con el botón) se salía del viewport. */
   position: fixed;
   inset: 0;
   max-width: none;
   width: 100%;
   height: 100dvh;
   max-height: 100dvh;
   margin: 0;
   border-radius: 0;
   border: none;
 }

 /* Antes era solo texto (font-size:1.5rem, padding:4px 8px): letra fina sobre
    fondo transparente, poco visible y con un área táctil pequeña. Ahora es un
    círculo con fondo propio, más grande y con contraste real en cualquier tema. */
 .modal-close {
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   background: var(--card-hover);
   border: 1px solid var(--border);
   border-radius: 50%;
   color: var(--text);
   font-size: 1.4rem;
   line-height: 1;
   cursor: pointer;
 }

 .modal-close:hover {
   color: #fff;
   background: var(--danger);
   border-color: var(--danger);
 }

 .modal-title {
   font-size: 1.3rem;
   margin-bottom: 20px;
   padding-right: 48px;
 }

 /* Sport selector grid */
 .sport-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 8px;
   margin-bottom: 20px;
 }

 /* En móvil (todo el rango de iPhone) 4 columnas dejan nombres largos
    ("Powerlifting", "CrossFit / Metcon") apretados a 2-3 líneas ilegibles
    y el botón por debajo del tamaño táctil recomendado — 3 columnas les
    da margen de sobra. */
 @media (max-width: 480px) {
   .sport-grid {
     grid-template-columns: repeat(3, 1fr);
   }
 }

 .sport-btn {
   background: var(--bg);
   border: 2px solid var(--border);
   border-radius: 10px;
   padding: 12px 6px;
   text-align: center;
   cursor: pointer;
   transition: all 0.2s;
   color: var(--text);
 }

 .sport-btn:hover {
   border-color: var(--accent);
 }

 .sport-btn.selected {
   border-color: var(--accent);
   background: var(--accent-glow-soft);
 }

 .sport-btn .sport-icon {
   font-size: 1.5rem;
   display: block;
   margin-bottom: 4px;
 }

 .sport-btn .sport-name {
   font-size: 0.65rem;
   color: var(--text-dim);
 }

 /* Dynamic form fields */
 .dynamic-fields {
   animation: fadeIn 0.2s ease;
 }

 .field-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
 }

 .field-label {
   font-size: 0.8rem;
   color: var(--text-dim);
   margin-bottom: 4px;
 }

 /* Preferencias de ejercicios (perfil): chips + diálogo selector de catálogo */
 .exercise-chip-list {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 }

 /* Vista compacta en el perfil: una sola línea, el resto se compacta en el
    chip "+N" (el JS mide el ancho real y decide cuántos caben). */
 .exercise-chip-list--oneline {
   flex-wrap: nowrap;
   overflow: hidden;
 }

 .ex-chip {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   padding: 6px 6px 6px 12px;
   border-radius: 999px;
   font-size: 0.8rem;
   font-weight: 600;
   background: var(--card-hover);
   border: 1px solid var(--border);
   max-width: 100%;
 }

 .ex-chip--fav {
   color: #2ecc71;
   border-color: rgba(46, 204, 113, 0.35);
 }

 .ex-chip--dislike {
   color: #e74c3c;
   border-color: rgba(231, 76, 60, 0.35);
 }

 .ex-chip button {
   background: none;
   border: none;
   color: inherit;
   font-size: 1rem;
   line-height: 1;
   cursor: pointer;
   padding: 4px 6px;
   opacity: 0.7;
 }

 .ex-chip button:hover {
   opacity: 1;
 }

 /* Chip "+N más": compacta la lista cuando hay muchos ejercicios elegidos,
    para no alargar la pantalla de perfil — abre el detalle en un diálogo aparte. */
 .ex-chip--more {
   cursor: pointer;
   background: none;
   border-style: dashed;
   color: var(--text-dim);
   font-weight: 600;
   padding: 6px 12px;
 }

 .ex-chip--more:hover {
   color: var(--text);
   border-color: var(--text-dim);
 }

 #exercise-prefs-viewall-list .exercise-chip-list {
   max-height: 50vh;
   overflow-y: auto;
   padding: 2px;
 }

 /* Diálogo selector: pantalla completa en móvil (modal-box--full) para que
    elegir muchos ejercicios no deje la pantalla del perfil apretada/cortada.
    El listado (100+ ejercicios) no puede depender de sticky + scroll del
    modal entero: en algunos WebView de Android el scroll no queda contenido
    y da sensación de desplazamiento infinito. En su lugar, el modal es un
    flex column donde solo la lista central hace scroll (título/búsqueda/
    botón "Listo" quedan fijos arriba y abajo). */
 #exercise-picker-modal .modal-box--full {
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }

 #exercise-picker-modal .modal-title,
 #exercise-picker-modal>.modal-box--full>p {
   flex-shrink: 0;
 }

 .exercise-picker-search {
   flex-shrink: 0;
   background: var(--card);
   padding-bottom: 10px;
 }

 .exercise-picker-list {
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   display: flex;
   flex-direction: column;
   gap: 2px;
   padding-bottom: 8px;
 }

 .exercise-picker-group-title {
   font-size: 0.72rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   color: var(--text-dim);
   margin: 16px 4px 6px;
 }

 .exercise-picker-row {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 8px;
   border-radius: 10px;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 }

 .exercise-picker-row:hover {
   background: var(--card-hover);
 }

 .exercise-picker-row.selected {
   background: var(--accent-bg-subtle);
 }

 .exercise-picker-check {
   width: 24px;
   height: 24px;
   min-width: 24px;
   border-radius: 7px;
   border: 2px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.9rem;
   color: #fff;
 }

 .exercise-picker-row.selected .exercise-picker-check {
   background: var(--accent);
   border-color: var(--accent);
 }

 .exercise-picker-footer {
   flex-shrink: 0;
   background: var(--card);
   padding-top: 10px;
   margin-top: 4px;
   border-top: 1px solid var(--border);
 }

 /* Result card */
 .result-card {
   background: var(--card);
   border: 1px solid var(--accent);
   border-radius: var(--radius);
   padding: 20px;
   text-align: center;
   margin-top: 16px;
 }

 .result-score {
   font-size: 3rem;
   font-weight: 800;
   color: var(--accent);
   line-height: 1;
 }

 /* Chart time selector */
 .chart-time-selector {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
 }

 .time-btn {
   padding: 6px 12px;
   border-radius: 8px;
   background: var(--bg);
   color: var(--text-dim);
   border: 1px solid var(--border);
   cursor: pointer;
   font-size: 0.75rem;
   transition: all 0.2s;
 }

 .time-btn:hover {
   border-color: var(--accent);
   color: var(--text);
 }

 .time-btn.active {
   background: var(--accent);
   color: #fff;
   border-color: var(--accent);
 }

 /* COROS-style category metric buttons */
 .cat-btn {
   padding: 6px 12px;
   border-radius: 8px;
   background: var(--bg);
   color: var(--text-dim);
   border: 1px solid var(--border);
   cursor: pointer;
   font-size: 0.75rem;
   transition: all 0.2s;
   display: flex;
   align-items: center;
   gap: 4px;
   white-space: nowrap;
 }

 .cat-btn:hover {
   border-color: var(--accent);
   color: var(--text);
 }

 .cat-btn.active {
   background: var(--btn-color, var(--accent));
   color: #fff;
   border-color: var(--btn-color, var(--accent));
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }

 /* Navigation buttons */
 .nav-btn {
   width: 36px;
   height: 36px;
   border-radius: 8px;
   background: var(--bg);
   color: var(--text-dim);
   border: 1px solid var(--border);
   cursor: pointer;
   font-size: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
 }

 .nav-btn:hover {
   border-color: var(--accent);
   color: var(--text);
 }

 /* Category legend */
 .category-legend {
   padding: 12px;
   background: var(--card);
   border-radius: var(--radius);
   margin-bottom: 16px;
   border: 1px solid var(--border);
 }

 .category-toggle {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 0;
   cursor: pointer;
   font-size: 0.85rem;
 }

 .category-toggle input[type="checkbox"] {
   width: auto;
   accent-color: var(--accent);
 }

 .toggle-dot {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: var(--cat-color, #888);
   flex-shrink: 0;
 }

 .toggle-label {
   flex: 1;
   color: var(--text-dim);
 }

 .toggle-avg {
   font-weight: 600;
   font-size: 0.8rem;
 }

 .global-toggle {
   border-top: 1px solid var(--border);
   margin-top: 8px;
   padding-top: 12px;
 }

 .global-dot {
   background: #f39c12 !important;
 }

 /* Body metrics cards */
 .metrics-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   margin-bottom: 16px;
 }

 .metric-card {
   background: var(--card);
   border-radius: var(--radius);
   padding: 12px;
   text-align: center;
   border: 1px solid var(--border);
 }

 .metric-value {
   font-size: 1.8rem;
   font-weight: 700;
   color: var(--accent);
   line-height: 1.2;
 }

 .metric-label {
   font-size: 0.75rem;
   color: var(--text-dim);
   margin-top: 4px;
 }

 /* Form styles */
 .form-section {
   background: var(--card);
   border-radius: var(--radius);
   padding: 14px;
   margin-bottom: 16px;
   border: 1px solid var(--border);
 }

 .form-title {
   font-size: 1rem;
   font-weight: 600;
   margin-bottom: 16px;
   color: var(--text);
 }

 .result-level {
   font-size: 0.9rem;
   margin-top: 8px;
   text-transform: uppercase;
   letter-spacing: 2px;
 }

 /* Evaluation chart — category checkboxes */
 .cat-btn-label {
   display: inline-flex !important;
   align-items: center !important;
   gap: 4px !important;
   padding: 6px 10px !important;
   border-radius: 8px !important;
   background: var(--card) !important;
   border: 1px solid var(--border) !important;
   cursor: pointer !important;
   font-size: 12px !important;
   transition: all .2s !important;
 }

 .cat-btn-label:hover {
   background: var(--card-hover) !important;
 }

 .cat-btn-label input[type="checkbox"] {
   accent-color: var(--accent);
   width: 14px;
   height: 14px;
   cursor: pointer;
 }

 /* Evaluation chart — time buttons */
 .time-btn {
   padding: 6px 12px !important;
   border-radius: 8px !important;
   background: var(--card) !important;
   border: 1px solid var(--border) !important;
   color: var(--text-dim) !important;
   font-size: 12px !important;
   cursor: pointer !important;
   transition: all .2s !important;
 }

 .time-btn.active {
   background: var(--accent) !important;
   color: #fff !important;
   border-color: var(--accent) !important;
 }

 /* Evaluation chart — nav buttons */
 .nav-btn {
   width: 32px;
   height: 32px;
   border-radius: 8px;
   background: var(--card);
   border: 1px solid var(--border);
   color: var(--text-dim);
   font-size: 16px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all .2s;
 }

 .nav-btn:hover {
   background: var(--card-hover);
 }

 /* Evaluation chart — canvas container */
 .chart-card {
   padding: 0 !important;
   overflow: hidden;
 }

 /* ─── Date Picker Styling ────────────────────────────── */
 input[type="date"] {
   background: var(--card);
   color: var(--text);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 12px 16px;
   font-size: 1rem;
   outline: none;
   transition: border-color 0.2s;
 }

 input[type="date"]:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 2px var(--accent-glow-soft);
 }

 /* Native date picker popup styling (webkit) */
 input[type="date"]::-webkit-calendar-picker-indicator {
   background: transparent;
   filter: invert(1) hue-rotate(180deg);
   opacity: 0.6;
   cursor: pointer;
 }

 /* Date picker internal styling via shadow DOM (limited support) */
 input[type="date"]::before {
   content: '';
 }

 /* ─── Fecha + hora del WOD en una sola línea (registro) ──────────
    Los inputs globales type=date/time traen width:100%+display:block;
    aquí se convierten en hijos flexibles de una fila para móvil. La fecha
    se lleva ~60% y la hora ~40%; ambos conservan el alto táctil de 48px. */
 .wod-date-time-row {
   display: flex;
   gap: 8px;
 }

 .wod-date-time-row .wod-dt-date,
 .wod-date-time-row .wod-dt-time {
   display: block;
   width: auto;
   min-width: 0;
   background: var(--card);
   color: var(--text);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 10px 12px;
   font-size: 1rem;
 }

 .wod-date-time-row .wod-dt-date { flex: 3; }

 .wod-date-time-row .wod-dt-time {
   flex: 2;
   padding: 10px 8px;
   box-sizing: border-box;
 }

 .wod-date-time-row input:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 2px var(--accent-glow-soft);
   outline: none;
 }

 /* ─── Select Styling ────────────────────────────────── */
 /* background-color (no el shorthand "background") para no pisar el
    background-image de la flecha personalizada definida más arriba. */
 select {
   background-color: var(--card);
   color: var(--text);
 }

 select:hover:not(:disabled) {
   background-color: var(--card-hover);
 }

 select:focus {
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
 }

 /* ─── Pantalla de login ─────────────────────────────── */
 .auth-screen {
   max-width: 400px;
   margin: 0 auto;
   /* Los 16px laterales los pone ya #screen-content */
   padding: 16px 0 20px;
   min-height: calc(100dvh - 40px);
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .auth-hero {
   text-align: center;
   margin-bottom: 22px;
 }

 .auth-logo {
   width: 116px;
   height: 116px;
   filter: drop-shadow(0 8px 28px var(--accent-glow));
   animation: authLogoIn 0.45s ease;
 }

 @keyframes authLogoIn {
   from {
     opacity: 0;
     transform: translateY(-8px) scale(0.92);
   }

   to {
     opacity: 1;
     transform: translateY(0) scale(1);
   }
 }

 .auth-wordmark {
   margin-top: 10px;
   font-size: 2.6rem;
   font-weight: 900;
   letter-spacing: 0.08em;
   line-height: 1.1;
   background: linear-gradient(100deg, var(--accent), #ffa64d);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
 }

 .auth-claim {
   font-weight: 600;
   color: var(--text);
   margin-top: 2px;
 }

 .auth-tagline {
   color: var(--text-dim);
   font-size: 0.85rem;
   margin-top: 6px;
 }

 /* Escalera de niveles: de Huevito a El Brutus */
 .auth-levels {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 7px;
   margin-top: 10px;
   font-size: 1.1rem;
 }

 .auth-levels .lvl-sep {
   color: var(--text-dim);
   font-size: 0.7rem;
   opacity: 0.7;
 }

 .auth-card {
   padding: 24px;
 }

 .auth-card h2 {
   margin-bottom: 4px;
 }

 .auth-sub {
   color: var(--text-dim);
   font-size: 0.9rem;
   margin-bottom: 18px;
 }

 /* El botón de Google es un iframe con estética propia; el contenedor lo
    centra y el halo/radio lo funde con la tarjeta en claro y oscuro. */
 .google-btn-wrap {
   display: flex;
   justify-content: center;
   min-height: 44px;
 }

 .google-btn-wrap>div {
   border-radius: 22px;
   overflow: hidden;
   box-shadow: 0 3px 14px rgba(0, 0, 0, 0.28);
 }

 [data-theme="light"] .google-btn-wrap>div,
 [data-theme="glass-light"] .google-btn-wrap>div {
   box-shadow: 0 3px 12px rgba(20, 20, 40, 0.14);
 }

 /* Botón "Continuar con Google" de la app NATIVA: allí el iframe de Google
    Identity Services no funciona y lo pintamos nosotros siguiendo las guías de
    marca de Google (píldora, "G" a color a la izquierda). Mismas medidas que la
    píldora web y que el botón de Apple para que no bailen entre sí. */
 .btn-google-native {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   width: 290px;
   height: 44px;
   border-radius: 22px;
   border: 1px solid #8E918F;
   background: #131314;
   color: #E3E3E3;
   font-size: 0.95rem;
   font-weight: 600;
   font-family: inherit;
   cursor: pointer;
   box-shadow: 0 3px 14px rgba(0, 0, 0, 0.28);
 }

 .btn-google-native:hover {
   background: #1e1f20;
 }

 .btn-google-native:disabled {
   opacity: 0.6;
   cursor: default;
 }

 .btn-google-native svg {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
 }

 [data-theme="light"] .btn-google-native,
 [data-theme="glass-light"] .btn-google-native {
   background: #fff;
   color: #1F1F1F;
   border-color: #747775;
   box-shadow: 0 3px 12px rgba(20, 20, 40, 0.14);
 }

 [data-theme="light"] .btn-google-native:hover,
 [data-theme="glass-light"] .btn-google-native:hover {
   background: #f7f8f8;
 }

 /* Botón "Continuar con Apple" (guías de Apple: píldora negra, logo  a la
    izquierda), mismo ancho/altura que la píldora de Google. Vacío = sin hueco
    (entornos sin Apple configurado no dejan margen fantasma). */
 .apple-btn-wrap {
   display: flex;
   justify-content: center;
   margin-top: 10px;
 }

 .apple-btn-wrap:empty {
   display: none;
   margin: 0;
 }

 .btn-apple {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   width: 290px;
   height: 44px;
   border-radius: 22px;
   border: 1px solid rgba(255, 255, 255, 0.18);
   background: #000;
   color: #fff;
   font-size: 0.95rem;
   font-weight: 600;
   font-family: inherit;
   cursor: pointer;
   box-shadow: 0 3px 14px rgba(0, 0, 0, 0.28);
 }

 .btn-apple:hover {
   background: #1a1a1a;
 }

 .btn-apple svg {
   width: 15px;
   height: 15px;
   fill: currentColor;
   flex-shrink: 0;
 }

 [data-theme="light"] .btn-apple,
 [data-theme="glass-light"] .btn-apple {
   border-color: #000;
   box-shadow: 0 3px 12px rgba(20, 20, 40, 0.14);
 }

 .auth-divider {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 18px 0;
   color: var(--text-dim);
   font-size: 0.8rem;
 }

 .auth-divider::before,
 .auth-divider::after {
   content: '';
   flex: 1;
   height: 1px;
   background: var(--border);
 }

 .auth-links {
   text-align: center;
   margin-top: 14px;
   font-size: 0.9rem;
   color: var(--text-dim);
 }

 .auth-links a {
   color: var(--accent);
   font-weight: 600;
   text-decoration: none;
 }

 .auth-links a:hover {
   text-decoration: underline;
 }

 .auth-google-fail {
   text-align: center;
 }

 .auth-google-fail p {
   color: var(--text-dim);
   font-size: 0.9rem;
   margin-bottom: 10px;
 }

 /* ─── Auth Info Screen ───────────────────────────────────────────── */
 .auth-info-card {
   display: none;
   animation: fadeIn 0.3s ease;
 }

 .auth-info-content {
   text-align: center;
 }

 .auth-info-header h2 {
   margin-bottom: 6px;
   font-size: 1.4rem;
 }

 .auth-info-sections {
   text-align: left;
   margin: 20px 0;
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 .auth-info-section {
   display: flex;
   gap: 14px;
   align-items: flex-start;
   padding: 14px;
   background: var(--bg);
   border-radius: 12px;
   border: 1px solid var(--border);
   transition: border-color 0.2s, transform 0.2s;
 }

 .auth-info-section:hover {
   border-color: var(--accent);
   transform: translateY(-2px);
 }

 .auth-info-icon {
   font-size: 1.8rem;
   flex-shrink: 0;
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--card);
   border-radius: 10px;
 }

 .auth-info-text h3 {
   font-size: 1rem;
   margin-bottom: 4px;
   color: var(--accent);
 }

 .auth-info-text p {
   font-size: 0.88rem;
   color: var(--text-dim);
   line-height: 1.4;
 }

 .auth-info-tech {
   margin: 20px 0;
   padding: 16px;
   background: var(--bg);
   border-radius: 12px;
   border: 1px solid var(--border);
 }

 .auth-info-tech h3 {
   font-size: 1rem;
   margin-bottom: 12px;
   text-align: center;
 }

 .auth-info-tech-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   justify-content: center;
 }

 .tech-badge {
   padding: 6px 14px;
   background: var(--card);
   border: 1px solid var(--accent);
   border-radius: 20px;
   font-size: 0.8rem;
   color: var(--accent);
   font-weight: 600;
 }

 .btn-auth-info {
   background: var(--card);
   border: 1px solid var(--border);
   color: var(--text-dim);
   font-size: 0.9rem;
   padding: 10px 24px;
   transition: all 0.2s;
 }

 .btn-auth-info:hover {
   border-color: var(--accent);
   color: var(--accent);
 }

 .btn-auth-info-back {
   background: transparent;
   border: 1px solid var(--border);
   color: var(--text-dim);
   margin-top: 16px;
   font-size: 0.9rem;
   padding: 10px 24px;
   transition: all 0.2s;
 }

 .btn-auth-info-back:hover {
   border-color: var(--accent);
   color: var(--accent);
 }

 /* ── Complex (Coach → RM): fila de cada movimiento encadenado ─────────
    reps × ejercicio (RM opcional) ✕ — con flex-wrap:wrap ya no desborda,
    pero el <select> del ejercicio se encogía tanto en iPhone que el
    nombre quedaba ilegible. En móvil lo subimos a su propia línea a
    ancho completo y el resto de campos pasa debajo. */
 .cx-chain-row {
   display: flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 6px;
   flex-wrap: wrap;
 }

 .cx-chain-reps {
   flex: 0 0 46px;
   width: 46px;
   text-align: center;
 }

 .cx-chain-select {
   flex: 1 1 140px;
   min-width: 140px;
 }

 .cx-chain-rm {
   flex: 0 0 80px;
   width: 80px;
 }

 .cx-chain-remove {
   flex: 0 0 auto;
 }

 @media (max-width: 480px) {
   .cx-chain-select {
     order: -1;
     flex: 1 1 100%;
     margin-bottom: 4px;
   }
 }

 /* ── Rejilla "por serie" (opción B: reps y peso independientes por serie) ──
    Usada en la pestaña Pesos (series con peso, peso corporal) y en el peso por
    ronda del complex. Móvil-first: cada serie/ronda es una fila compacta con su
    nº, sus reps y (opcional) su peso, en vez de una hilera de inputs minúsculos.
    La MEJOR serie (la que define el e1RM / la capacidad) se resalta con ★. */
 .rm-sets-grid {
   display: flex;
   flex-direction: column;
   gap: 6px;
   margin-top: 8px;
 }

 .rm-set-row {
   display: flex;
   align-items: center;
   gap: 8px;
   background: var(--card-hover);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 6px 10px;
 }

 .rm-set-row.is-top {
   border-color: var(--accent);
   box-shadow: inset 0 0 0 1px var(--accent);
 }

 .rm-col-tag {
   flex: 0 0 30px;
   font-size: 0.72rem;
   font-weight: 800;
   color: var(--text-dim);
 }

 .rm-set-row.is-top .rm-col-tag {
   color: var(--accent);
 }

 .rm-col-reps,
 .rm-col-weight {
   flex: 1 1 0;
   min-width: 0;
   width: 100%;
   box-sizing: border-box;
 }

 .rm-set-sep {
   flex: 0 0 auto;
   font-weight: 700;
   color: var(--text-dim);
 }

 .rm-col-star {
   flex: 0 0 16px;
   text-align: center;
   font-size: 0.82rem;
   color: var(--accent);
   line-height: 1;
 }

 /* ── Interruptor (switch) reutilizable — usado en Privacidad del Perfil ── */
 .privacy-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   padding: 12px 0;
   border-bottom: 1px solid var(--border);
 }

 .privacy-row:last-child {
   border-bottom: none;
 }

 .privacy-row.is-disabled {
   opacity: 0.45;
   pointer-events: none;
 }

 .privacy-row .privacy-label {
   font-weight: 600;
   font-size: 0.9rem;
   color: var(--text);
 }

 .privacy-row .privacy-desc {
   font-size: 0.75rem;
   color: var(--text-dim);
   margin-top: 2px;
 }

 .brutus-switch {
   position: relative;
   flex: 0 0 auto;
   width: 46px;
   height: 26px;
 }

 .brutus-switch input {
   opacity: 0;
   width: 0;
   height: 0;
   position: absolute;
 }

 .brutus-switch .slider {
   position: absolute;
   inset: 0;
   cursor: pointer;
   background: var(--border);
   border-radius: 26px;
   transition: background .2s;
 }

 .brutus-switch .slider::before {
   content: "";
   position: absolute;
   height: 20px;
   width: 20px;
   left: 3px;
   top: 3px;
   background: #fff;
   border-radius: 50%;
   transition: transform .2s;
 }

 .brutus-switch input:checked+.slider {
   background: var(--accent);
 }

 .brutus-switch input:checked+.slider::before {
   transform: translateX(20px);
 }

 /* ═══════════════════════════════════════════════════════════════════════
    PANTALLA DE FUERZA UNIFICADA — rework estilo METCOM (ago-2026)
    Secciones siempre visibles (ejercicio, esquema, resultado) + secciones
    colapsables (<details>) para modificadores, 1RM, multi-ejercicio y
    progresión. Mobile-first: targets táctiles ≥44px, inputs grandes,
    flex-wrap para que nada desborde.
    ═══════════════════════════════════════════════════════════════════════ */

 /* Cabecera de sección: etiqueta pequeña en mayúsculas + icono. */
 .rm-sec-label {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 0.62rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-dim);
   margin: 0 0 6px 2px;
   white-space: nowrap;
 }
 .rm-sec-label .rm-sec-icon {
   font-size: 0.8rem;
   line-height: 1;
 }

 /* Bloque de sección siempre visible. */
 .rm-section {
   margin-bottom: 14px;
 }
 .rm-section:last-child {
   margin-bottom: 0;
 }

 /* Separador sutil entre secciones. */
 .rm-sep {
   border: none;
   border-top: 1px solid var(--border);
   margin: 14px 0;
 }

 /* ── <details> colapsable (estilo metcon) ── */
 .rm-details {
   margin-bottom: 10px;
   border: 1px solid var(--border);
   border-radius: 12px;
   background: var(--card);
   overflow: hidden;
 }
 .rm-details:last-child {
   margin-bottom: 0;
 }
 .rm-details>summary {
   cursor: pointer;
   list-style: none;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 12px 14px;
   min-height: 44px;
   font-size: 0.88rem;
   font-weight: 700;
   color: var(--text);
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   transition: background 0.15s;
 }
 .rm-details>summary:hover {
   background: var(--card-hover);
 }
 .rm-details>summary::-webkit-details-marker {
   display: none;
 }
 .rm-details>summary .rm-sum-icon {
   font-size: 1rem;
   line-height: 1;
   flex-shrink: 0;
 }
 .rm-details>summary .rm-sum-text {
   flex: 1;
   min-width: 0;
 }
 .rm-details>summary .rm-sum-hint {
   font-size: 0.72rem;
   font-weight: 600;
   color: var(--text-dim);
   white-space: nowrap;
   flex-shrink: 0;
 }
 .rm-details>summary .rm-sum-hint.is-active {
   color: var(--accent);
 }
 .rm-details>summary .rm-sum-chev {
   display: inline-block;
   transition: transform 0.15s;
   font-size: 0.7rem;
   color: var(--text-dim);
   flex-shrink: 0;
 }
 .rm-details[open]>summary .rm-sum-chev {
   transform: rotate(90deg);
 }
 .rm-details>.rm-details-body {
   padding: 4px 14px 14px;
   border-top: 1px solid var(--border);
 }

 /* ── Campos de esquema (series × reps) — inputs grandes mobile-first ── */
 .rm-scheme-row {
   display: flex;
   /* Centrado (antes flex-end): desde el rework de tarjetas los dos campos ya
      no llevan su propio <label> encima — la sección se titula una sola vez
      ("SERIES × REPS"), así que la "×" y la unidad se alinean con el centro
      de los inputs, no con su base. */
   align-items: center;
   gap: 10px;
 }
 .rm-scheme-field {
   flex: 1;
   min-width: 0;
 }
 .rm-scheme-x {
   font-size: 1.4rem;
   font-weight: 800;
   color: var(--text-dim);
   flex-shrink: 0;
 }
 .rm-scheme-input {
   width: 100%;
   box-sizing: border-box;
   min-height: 48px;
   font-size: 1.3rem;
   font-weight: 800;
   text-align: center;
   padding: 8px 6px;
   border-radius: 12px;
   border: 1px solid var(--border);
   background: var(--bg, #0f0f1a);
   color: var(--text);
   outline: none;
   transition: border-color 0.15s;
   -moz-appearance: textfield;
 }
 .rm-scheme-input::-webkit-inner-spin-button,
 .rm-scheme-input::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 .rm-scheme-input:focus {
   border-color: var(--accent);
 }

 /* ── Resultado (siempre visible, estilo metcon card) ── */
 .rm-result-card {
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 14px;
 }
 .rm-result-headline {
   display: flex;
   align-items: baseline;
   gap: 10px;
   flex-wrap: wrap;
 }
 .rm-result-value {
   font-size: 2rem;
   font-weight: 800;
   color: var(--accent);
   line-height: 1;
 }
 .rm-result-unit {
   font-size: 0.8rem;
   color: var(--text-dim);
 }
 .rm-result-desc {
   font-size: 0.85rem;
   margin: 8px 0 0;
   line-height: 1.4;
 }
 .rm-result-breakdown {
   font-size: 0.72rem;
   color: var(--text-dim);
   margin: 6px 0 0;
   line-height: 1.4;
 }
 /* Desglose colapsable dentro del resultado. */
 .rm-result-details {
   margin-top: 8px;
   border: none;
   border-radius: 0;
   background: transparent;
 }
 .rm-result-details>summary {
   padding: 8px 0 0;
   min-height: 36px;
   font-size: 0.78rem;
   font-weight: 600;
   color: var(--text-dim);
 }
 .rm-result-details>summary:hover {
   background: transparent;
 }
 .rm-result-details>.rm-details-body {
   padding: 4px 0 0;
   border-top: none;
 }

 /* ── Fila de cadena (estilo metcon: nombre arriba, campos abajo) ── */
 .cx-chain-card {
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 10px;
   border-radius: 12px;
   border: 1px solid var(--border);
   background: var(--card-hover);
   margin-bottom: 8px;
 }
 .cx-chain-card .cx-chain-name {
   width: 100%;
 }
 .cx-chain-card .cx-chain-fields {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
 }
 .cx-chain-card .cx-chain-reps {
   flex: 0 0 56px;
   width: 56px;
   text-align: center;
   min-height: 44px;
   font-size: 1rem;
   font-weight: 700;
 }
 .cx-chain-card .cx-chain-rm {
   flex: 1 1 80px;
   min-width: 70px;
   min-height: 44px;
   font-size: 0.95rem;
 }
 .cx-chain-card .cx-chain-remove {
   flex: 0 0 auto;
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(148,163,184,0.14);
   border: none;
   color: var(--text-dim);
   cursor: pointer;
   font-size: 0.9rem;
   transition: color 0.15s, background 0.15s;
 }
 .cx-chain-card .cx-chain-remove:hover {
   color: #ef4444;
   background: rgba(239,68,68,0.16);
 }
 /* RM opcional colapsado: la fila de cadena queda limpia (reps × ejercicio).
    El toggle se abre solo si el atleta quiere ajustar el máximo del eslabón. */
 .cx-chain-card .cx-chain-rm-details {
   flex: 0 0 auto;
   margin: 0;
 }
 /* El contenedor es flex: el <details> nativo a veces no oculta su cuerpo
    (el summary sí queda visible, que es el toggle). Ocultamos explícitamente
    el cuerpo cuando está cerrado; el summary (toggle) se queda siempre a la vista. */
 .cx-chain-card .cx-chain-rm-details:not([open]) .cx-chain-rm-body {
   display: none;
 }
 .cx-chain-card .cx-chain-rm-toggle {
   list-style: none;
   cursor: pointer;
   font-size: 0.68rem;
   font-weight: 700;
   color: var(--text-dim);
   background: rgba(148,163,184,0.12);
   border-radius: 6px;
   padding: 4px 8px;
   user-select: none;
   white-space: nowrap;
 }
 .cx-chain-card .cx-chain-rm-toggle::-webkit-details-marker { display: none; }
 .cx-chain-card .cx-chain-rm-toggle:hover { color: var(--text); background: rgba(148,163,184,0.22); }
 .cx-chain-card .cx-chain-rm-details[open] .cx-chain-rm-toggle { color: var(--accent); }
 .cx-chain-card .cx-chain-rm-body {
   margin-top: 6px;
 }
 .cx-chain-card .cx-chain-rm-body .cx-chain-rm {
   flex: none;
   width: 92px;
   min-width: 92px;
 }
 .cx-chain-limiter-chip {
   font-size: 0.6rem;
   font-weight: 800;
   color: #fff;
   background: var(--accent);
   border-radius: 4px;
   padding: 2px 5px;
   white-space: nowrap;
   letter-spacing: 0.04em;
 }

 /* Botón "añadir" estilo metcon (dashed). */
 .rm-add-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   width: 100%;
   padding: 10px;
   font-size: 0.82rem;
   font-weight: 700;
   border-radius: 10px;
   cursor: pointer;
   background: transparent;
   color: var(--accent);
   border: 1px dashed var(--accent);
   transition: background 0.15s;
   min-height: 44px;
 }
 .rm-add-btn:hover {
   background: var(--card-hover);
 }
 .rm-add-btn:disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }

 /* ── Botón de registro (pie) ── */
 .rm-register-btn {
   width: 100%;
   padding: 14px;
   font-size: 0.95rem;
   font-weight: 800;
   background: var(--accent);
   color: #fff;
   border: none;
   border-radius: 12px;
   cursor: pointer;
   min-height: 52px;
   transition: opacity 0.15s;
 }
 .rm-register-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
 .rm-register-hint {
   font-size: 0.68rem;
   color: var(--text-dim);
   margin: 8px 0 0;
   text-align: center;
   line-height: 1.4;
 }

 /* ═══════════════════════════════════════════════════════════════════════
    TARJETA DE EJERCICIO DE FUERZA (.rm-ex-card) — ago-2026
    Una sesión de Fuerza es una LISTA de tarjetas iguales, con el mismo
    lenguaje visual que las filas de ejercicio del METCON (_MEX_CARD_STYLE /
    _MEX_TOGGLE_* en wods.js): nº + buscador + ✕ en la cabecera, chips de
    opciones debajo y los campos dentro. El ejercicio 1 (el que define la nota)
    solo se distingue por el borde acentuado y la etiqueta "PRINCIPAL"; el
    resto de la maquetación es idéntica, para que no haya dos formularios
    distintos que aprender.
    ═══════════════════════════════════════════════════════════════════════ */

 .rm-ex-card {
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 10px;
   border-radius: 12px;
   border: 1px solid var(--border);
   background: var(--card-hover);
 }

 .rm-ex-card.is-main {
   border-color: var(--accent);
 }

 .rm-ex-head {
   display: flex;
   align-items: center;
   gap: 8px;
 }

 /* Numeral de la tarjeta: mismo sitio que el asa de arrastre del METCON. */
 .rm-ex-num {
   flex: 0 0 22px;
   height: 22px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 7px;
   background: var(--border);
   color: var(--text);
   font-size: 0.72rem;
   font-weight: 800;
 }

 .rm-ex-card.is-main .rm-ex-num {
   background: var(--accent);
   color: #fff;
 }

 .rm-ex-del {
   flex: 0 0 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   border-radius: 50%;
   background: rgba(148, 163, 184, 0.14);
   color: var(--text-dim);
   font-size: 0.85rem;
   line-height: 1;
   cursor: pointer;
   transition: color 0.15s, background 0.15s;
 }
 .rm-ex-del:hover {
   color: #fff;
   background: rgba(239, 68, 68, 0.6);
 }

 /* Línea de rol: qué es esta tarjeta dentro de la sesión. */
 .rm-ex-role {
   display: flex;
   align-items: center;
   gap: 6px;
   flex-wrap: wrap;
   }
 .rm-role-tag {
   font-size: 0.62rem;
   font-weight: 800;
   letter-spacing: 0.06em;
   color: var(--accent);
 }
 .rm-role-note {
   font-size: 0.66rem;
   color: var(--text-dim);
 }

 /* Chips de opciones de la tarjeta — píldoras idénticas a las del METCON. */
 .rm-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   }
 .rm-chip {
   display: inline-flex;
   align-items: center;
   gap: 3px;
   border: 1px solid transparent;
   background: rgba(148, 163, 184, 0.14);
   color: var(--text-dim);
   border-radius: 999px;
   padding: 6px 10px;
   font-size: 0.7rem;
   font-weight: 700;
   line-height: 1;
   cursor: pointer;
   white-space: nowrap;
   min-height: 30px;
   transition: background 0.15s, color 0.15s, box-shadow 0.15s;
 }
 .rm-chip.is-on {
   background: linear-gradient(135deg, var(--accent), var(--accent-light));
   color: #fff;
   font-weight: 800;
   box-shadow: 0 2px 8px var(--accent-glow);
 }

 /* Cuerpo de la tarjeta: sangrado al mismo eje que los chips. */
 .rm-ex-body {
 }

 /* Nota corta bajo los chips (por qué un complementario suma, por qué un
    movimiento cíclico no lleva tempo…). Sustituye a los párrafos fijos. */
 .rm-ex-hint {
   font-size: 0.66rem;
   line-height: 1.35;
   margin: -2px 0 0;
   }

 /* Atajos de esquema (5×5, 3×3…): más pequeños que antes — son un atajo, no
    la forma principal de rellenar el esquema. */
 .rm-presets {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
   margin-bottom: 8px;
 }
 .rm-preset {
   padding: 5px 10px;
   font-size: 0.72rem;
   font-weight: 700;
   border-radius: 8px;
   cursor: pointer;
   background: var(--card);
   color: var(--text);
   border: 1px solid var(--border);
 }
 .rm-preset:hover {
   border-color: var(--accent);
 }

 /* Eslabones de una cadena (complex) dentro de la tarjeta del principal. */
 .rm-chain-list {
 }

 /* ── SUPERSERIE ────────────────────────────────────────────────────────
    Ejercicios que se hacen seguidos, sin descanso. Es un GRUPO de tarjetas
    normales (cada una con su ejercicio, sus reps y su peso), no una lista de
    campos dentro de otra tarjeta — lo que las une es el raíl acentuado de la
    izquierda y el conector "🔗 sin descanso" entre ellas. No confundir con
    "misma barra" (complex), que sí comparte peso. */
 .rm-ex-card.is-super {
   border-left: 3px solid var(--accent);
 }

 .rm-super-link {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 0.6rem;
   font-weight: 800;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--accent);
   margin: -4px 0;
   }

 /* Botón secundario (superserie / añadir movimiento a la barra): borde sólido
    y color apagado, para que no compita con el "➕ Añadir ejercicio" en
    acentuado que cierra la lista. */
 .rm-add-btn.is-super {
   border-style: solid;
   border-color: var(--border);
   color: var(--text);
 }
 .rm-add-btn.is-super:hover {
   border-color: var(--accent);
   color: var(--accent);
 }

 .rm-super-hint {
   font-size: 0.66rem;
   line-height: 1.35;
   margin: 6px 0 0;
   text-align: center;
 }

 /* Cabecera de la card de sesión (título + contador de ejercicios). */
 .rm-sess-head {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 10px;
 }

 /* ── Progresión (dentro de details) ── */
 .rm-prog-row {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 0;
   border-bottom: 1px solid var(--border);
 }
 .rm-prog-row:last-child {
   border-bottom: none;
 }
 .rm-prog-date {
   font-size: 0.72rem;
   color: var(--text-dim);
   min-width: 74px;
   flex-shrink: 0;
 }
 .rm-prog-set {
   font-size: 0.85rem;
   font-weight: 600;
   flex: 1;
   min-width: 0;
 }
 .rm-prog-metric {
   font-size: 0.82rem;
   font-weight: 800;
   color: var(--accent);
   white-space: nowrap;
   flex-shrink: 0;
 }
 .rm-prog-delta {
   font-size: 0.72rem;
   font-weight: 700;
   flex-shrink: 0;
   min-width: 36px;
   text-align: right;
 }

 /* ── Sugerencia de peso: UNA línea, no un bloque ──────────────────────────
    Antes ocupaba media pantalla con el kilaje gigante, el % y el desglose del
    cálculo, por delante del campo donde de verdad se registra lo levantado.
    Ahora es una línea con botón "usar" y el porqué a un clic. */
 .rm-suggest-line {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
 }
 /* Fila única: [input peso] kg  |  Sugerido · kg · % · usar — todo en una línea. */
 .rm-used-row {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
 }
 .rm-suggest-sep {
   width: 1px;
   align-self: stretch;
   margin: 4px 2px;
   background: var(--border);
 }
 .rm-suggest-label {
   font-size: 0.62rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-dim);
 }
 .rm-suggest-value {
   font-size: 1.35rem;
   font-weight: 800;
   color: var(--accent);
   line-height: 1;
 }
 .rm-suggest-use {
   margin-left: auto;
   min-height: 36px;
   padding: 6px 14px;
   font-size: 0.78rem;
   font-weight: 700;
   border-radius: 8px;
   cursor: pointer;
   background: var(--card-hover);
   color: var(--text);
   border: 1px solid var(--accent);
 }

 /* Peso usado: el input protagonista del registro, no uno más de la fila. */
 #rm-used-zone .input-compact {
   min-height: 48px;
   font-size: 1.3rem;
   font-weight: 800;
   text-align: center;
   border-radius: 12px;
 }

 /* ── Ajustes: siempre visibles, 2 filas compactas ── */
 .rm-mods-section {
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding: 10px;
   margin-bottom: 10px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 10px;
 }
 .rm-mods-row {
   display: flex;
   gap: 8px;
   align-items: flex-end;
 }
 .rm-mods-field {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 3px;
 }
 .rm-mods-field--rir {
   flex: 0 0 72px;
 }
 .rm-mods-lbl {
   font-size: 0.62rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--text-dim);
   white-space: nowrap;
 }
 .rm-mods-result {
   flex-shrink: 0;
   padding-bottom: 10px;
   color: var(--accent);
   font-weight: 700;
 }