/* app.css — MyGym
   ===========================================================================
   REGLA DURA: acá NO va ningún color literal. Ni un hex, ni un rgb(), ni un nombre de color.
   Todo sale de las custom properties que escribe `js/core/marca.js` en :root.

   El motivo es medido, no estético: en el Gym Tracker había 62 colores hex hardcodeados — el
   acento aparecía 22 veces como literal ADEMÁS de existir como variable. Por eso cambiar la
   variable dejaba media app con la marca de otro, y por eso no soportaba marca blanca aunque
   tuviera un sistema de tokens decente.

   Lo vigila `tests/test-sin-hex.js`, que falla el build si aparece un literal.
   =========================================================================== */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/archivo-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/archivo-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/archivo-latin-800-normal.woff2') format('woff2'); }
/* El 900 estaba en `fonts/` desde el principio y no se declaraba: los títulos pedían 800 y el
   navegador servía 800, así que la app entera se veía un peso más liviana que el Gym Tracker,
   donde la marca y los títulos de pantalla son 900. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/archivo-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/hanken-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/space-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/space-mono-latin-700-normal.woff2') format('woff2'); }

:root {
  --sans: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --titulo: 'Archivo', var(--sans);
  --mono: 'Space Mono', ui-monospace, monospace;
  --nav-h: 62px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* Sin selección accidental al mantener apretado, salvo donde hace falta de verdad. */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }

body {
  /* Dos halos muy tenues del color de la marca, uno arriba a la derecha y otro abajo a la
     izquierda. Es lo que hace que el fondo no sea un gris plano y que la app se sienta DE ese
     gimnasio y no de una plantilla — el Gym Tracker usa exactamente el mismo recurso.
     `color-mix` en vez de un rgba literal: la regla de cero colores fuera de `marca.js` sigue en
     pie, y así el halo cambia solo cuando cambia la marca. */
  background:
    radial-gradient(900px 500px at 100% -10%, color-mix(in srgb, var(--marca) 7%, transparent), transparent 60%),
    radial-gradient(700px 500px at -10% 100%, color-mix(in srgb, var(--marca-2) 5%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--txt);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
}

.wrap { width: min(520px, 100%); margin: 0 auto; padding: 14px 14px 20px; }

/* ---------------------------------------------------------------- cabecera */
header.app {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 12px 14px 10px;
}
header.app .fila { display: flex; align-items: center; gap: 10px; width: min(520px, 100%); margin: 0 auto; }
/* Archivo 900 con tracking bien negativo: es la firma tipográfica del Gym Tracker
   (`header .brand`, app.css:63) y lo que hace que el nombre lea como logo y no como un texto. */
.marca-nombre { font-family: var(--titulo); font-weight: 900; font-size: 21px; letter-spacing: -.04em; }
.marca-logo { height: 26px; width: auto; border-radius: var(--r-xs); }
.marca-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--marca); flex: none; }
.ver { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); }

/* ---------------------------------------------------------------- vistas */
.vista { display: none; }
.vista.on { display: block; }

/* ---------------------------------------------------------------- navegación */
/* Fondo translúcido con blur y no un `--surface` sólido: es el `--navbg` del Gym Tracker
   (`rgba(12,13,15,.93)` + `backdrop-filter:blur(14px)`), que deja ver el halo del fondo pasar por
   debajo de la barra. Con el fondo sólido la barra se leía como un bloque pegado abajo.
   `color-mix` en vez del rgba literal: la regla de cero colores fuera de `marca.js` sigue en pie. */
nav.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; align-items: stretch;
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
nav.tabs button {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: none; border: 0; cursor: pointer;
  color: var(--faint); font-family: var(--titulo); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
nav.tabs button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
nav.tabs button.on { color: var(--marca); }

/* ---------------------------------------------------------------- superficies */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 15px;
  margin-bottom: 13px;
}
.card.acento { border-color: var(--marca-borde); background: var(--marca-sutil); }
/* `.eyebrow` y `.titulo` son el par de la `.sec-title` + `.scr-title` del Gym Tracker: el rótulo
   va en Archivo 800 (no en la sans), y el título en 900 con tracking negativo. */
.eyebrow { font-family: var(--titulo); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.titulo { font-family: var(--titulo); font-weight: 900; font-size: 23px; letter-spacing: -.03em; }
.sub { font-size: 12.5px; color: var(--muted); }
.num { font-family: var(--mono); }
.vacio { text-align: center; color: var(--muted); font-size: 13px; padding: 26px 14px; }
.vacio b { display: block; color: var(--txt); font-size: 15px; margin-bottom: 5px; }

/* ---------------------------------------------------------------- botones */
/* Archivo 800 con un poco de tracking positivo, igual que el `.btn` del Gym Tracker
   (app.css:74): en la sans a 700 el botón leía como un control de formulario y no como la
   acción principal de la pantalla. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 13px;
  background: var(--marca); color: var(--marca-texto);
  border: 0; border-radius: var(--r-md);
  font-family: var(--titulo); font-size: 14px; font-weight: 800; letter-spacing: .02em; cursor: pointer;
}
.btn:hover { background: var(--marca-hover); }
.btn:active { background: var(--marca-activo); transform: scale(.99); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: none; color: var(--txt); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--marca-borde); color: var(--marca); background: none; }
.btn.chico { width: auto; padding: 9px 13px; font-size: 12px; border-radius: var(--r-sm); }

/* ---------------------------------------------------------------- ejercicio */
.ej { border-bottom: 1px solid var(--line); padding: 9px 0; }
.ej:last-child { border-bottom: 0; }
.ej-cab { display: flex; align-items: baseline; gap: 8px; }
.ej-nom { font-weight: 700; font-size: 15px; flex: 1; min-width: 0; }
.ej-grupo { font-size: 11px; color: var(--faint); }
.ej-plan { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* Series: el estado de cada una se distingue por forma Y color, nunca solo por color. */
.series { display: flex; gap: 7px; flex-wrap: wrap; }
.serie {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: var(--surface2);
  color: var(--muted); font-family: var(--mono); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.serie.hecha { border-color: var(--marca); background: var(--marca-sutil); color: var(--marca); }
.serie.hecha::after { content: '✓'; margin-left: 2px; font-size: 10px; }

/* ---------------------------------------------------------------- propuesta del motor */
.prop { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface2); margin-top: 9px; }
/* `.tag` es autónomo: se usa en la propuesta del motor, en los reportes y en los ciclos. Estaba
   anidado bajo `.prop` y fuera de ahí salía sin ningún estilo — un "bajo" en texto plano que no
   se distingue de un dato. */
.tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-xs); flex: none;
  background: var(--marca-sutil); color: var(--marca); border: 1px solid var(--marca-borde);
}
.tag.frena { background: none; color: var(--warn); border-color: var(--warn); }
/* `ok` existe porque sin él la buena noticia usa el tag de MARCA, y en un gimnasio con marca roja
   "vino ayer" y "hace 19 días que no viene" se ven casi iguales. Un estado positivo tiene que
   leerse como positivo sin depender del color que eligió el gimnasio. */
.tag.ok { background: none; color: var(--ok); border-color: var(--ok); }
.tag.alerta { background: none; color: var(--bad); border-color: var(--bad); }
.prop .motivo { font-size: 12px; color: var(--muted); line-height: 1.45; }

/* ---------------------------------------------------------------- ajustes / marca */
.campo { margin-bottom: 13px; }
.campo label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.campo input[type=text] {
  width: 100%; padding: 10px 12px; font-family: var(--sans); font-size: 14px;
  background: var(--surface2); color: var(--txt);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.campo input[type=text]:focus { outline: 2px solid var(--marca); outline-offset: 1px; border-color: var(--marca); }
.colores { display: flex; gap: 10px; }
.color-item { flex: 1; }
.color-item input[type=color] {
  width: 100%; height: 42px; padding: 0; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface2); cursor: pointer;
}
.aviso { padding: 11px 13px; border-radius: var(--r-md); font-size: 12.5px; line-height: 1.5; margin-top: 10px; border: 1px solid; }
.aviso.mal { color: var(--bad); border-color: var(--bad); background: none; }
.aviso.bien { color: var(--ok); border-color: var(--ok); background: none; }
/* `--warn`, no `--bad`: una meseta es un hallazgo accionable, no un error. Pintarla de rojo la
   sobre-actúa y, en un gimnasio con marca roja, la vuelve indistinguible de la marca — que es
   justo lo que la separación entre familia de marca y familia semántica existe para evitar. */
.aviso.ojo { color: var(--warn); border-color: var(--warn); background: none; }
.aviso.ojo b { color: var(--warn); }
.aviso b { display: block; margin-bottom: 3px; }

.segmento { display: flex; gap: 6px; background: var(--surface2); padding: 4px; border-radius: var(--r-md); margin-bottom: 12px; }
.segmento button {
  flex: 1; padding: 8px; border: 0; border-radius: var(--r-xs); cursor: pointer;
  background: none; color: var(--muted); font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  white-space: nowrap;
}
.segmento button.on { background: var(--marca); color: var(--marca-texto); }

@media (prefers-reduced-motion: no-preference) {
  .btn, .serie, nav.tabs button { transition: background-color .15s, border-color .15s, color .15s; }
}

/* --- indicador de sincronización ---------------------------------------------------------
   Los colores salen de la familia SEMÁNTICA (--ok/--warn/--bad), no de la marca: si un gimnasio
   elige rojo de marca, el rojo de "error al sincronizar" tiene que seguir leyéndose como error.
   Es la separación de las dos familias aplicada al caso donde más se nota. */
.sync-punto {
  width: 11px; height: 11px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--muted);
  margin-left: auto; cursor: pointer; flex: none;
}
.sync-punto[data-s="sincronizado"]  { background: var(--ok);   border-color: var(--ok); }
.sync-punto[data-s="pendiente"]     { background: var(--warn); border-color: var(--warn); }
.sync-punto[data-s="sincronizando"] { background: var(--warn); border-color: var(--warn); opacity: .5; }
.sync-punto[data-s="sinConexion"]   { background: var(--muted); border-color: var(--line); }
.sync-punto[data-s="error"]         { background: var(--bad);  border-color: var(--bad); }
.sync-punto:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }

/* --- sub-navegación dentro de un módulo -------------------------------------------------------
   Distinta de la barra de abajo a propósito: esa la genera el shell desde el registro y dice en
   qué MÓDULO estás; esta es interna al módulo y dice qué estás mirando dentro de él. Si se vieran
   iguales, "Entreno · Historial" y "Ajustes" parecerían el mismo nivel de navegación. */
/* Control SEGMENTADO (una pista `--surface2` con la pestaña activa en acento sólido), no cuatro
   botones con borde: es el `.seg` del Gym Tracker (app.css:207) y es lo primero que se ve al
   entrar, así que era la diferencia visual más cara de todas. Sigue siendo distinta de la barra
   de abajo —esa es del shell y dice en qué MÓDULO estás; esta es interna al módulo— pero ahora
   se diferencia por FORMA (pista embutida vs barra fija) y no por ser de otra app. */
.subnav { display: flex; gap: 6px; background: var(--surface2); padding: 4px; border-radius: var(--r-md); margin-bottom: 14px; }
.subnav button {
  flex: 1; padding: 8px 4px; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap;
  background: none; color: var(--muted);
  border: 0; border-radius: var(--r-xs); cursor: pointer;
}
.subnav button.on { background: var(--marca); color: var(--marca-texto); }
.subnav button:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* --- chips de selección --- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 12px; }
.chip {
  padding: 7px 11px; font: inherit; font-size: 11px;
  background: var(--surface2); color: var(--muted);
  border: 1px solid var(--line); border-radius: 99px; cursor: pointer;
}
/* Seleccionado = acento SÓLIDO, como en el Gym Tracker (app.css:175). El fondo sutil con texto de
   marca que había acá se lee como "resaltado", no como "elegido": a un metro de distancia, con el
   celular en la mano, no se distinguía del chip apagado. */
.chip.on { background: var(--marca); color: var(--marca-texto); border-color: var(--marca); }
.chip-n { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-left: 3px; }
.chip.on .chip-n { color: var(--marca); }

/* RIR por serie, en la sesión en vivo: mismo componente que los chips de arriba, más chico para
   que 6 opciones entren bajo la fila de la serie sin empujar el peso/reps de al lado. */
.chips-mini { gap: 4px; margin: 0; }
.chips-mini .chip { padding: 4px 8px; font-size: 11px; }

/* --- curva de progreso --- */
.curva-cab { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.curva-nom { font-weight: 700; font-size: 15px; flex: 1; min-width: 0; }
.curva-val { font-family: var(--mono); font-size: 12.5px; color: var(--marca); }
.curva { width: 100%; height: 64px; display: block; margin: 8px 0 2px; overflow: visible; }
.curva-pie {
  display: flex; justify-content: space-between; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; color: var(--faint);
}

/* --- lista de semanas del historial --- */
.sem { border-bottom: 1px solid var(--line); }
.sem:last-child { border-bottom: 0; }
.sem-cab {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left;
}
.sem-fecha { font-family: var(--mono); font-size: 12.5px; font-weight: 700; }
.sem-dato { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.sem-flecha { font-family: var(--mono); color: var(--faint); width: 12px; text-align: center; }
.sem-detalle { padding-bottom: 10px; }

/* --- fila compacta (detalle de semana, ciclos anteriores) --- */
.fila-hist { display: flex; align-items: baseline; gap: 9px; padding: 5px 0; font-size: 12.5px; }
.fila-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-dato { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.fila-res { font-size: 11px; color: var(--faint); min-width: 82px; text-align: right; }

/* --- formularios en línea --- */
.form-fila { display: flex; gap: 7px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.form-fila input, .form-fila select {
  flex: 1; min-width: 62px; padding: 8px 10px; font: inherit;
  /* 16px SIEMPRE, no solo en pantallas chicas: por debajo de 16px iOS hace zoom al enfocar un
     campo y no vuelve solo, así que el socio termina registrando su serie con la app ampliada y
     cortada. El viewport no lleva `maximum-scale=1` a propósito — eso lo arregla rompiendo el
     zoom a quien lo necesita para leer. */
  font-size: 16px;
  background: var(--surface2); color: var(--txt);
  border: 1px solid var(--line); border-radius: var(--r-xs);
}
.form-fila input:focus-visible, .form-fila select:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.form-fila .btn { flex: 0 0 auto; width: auto; }

/* --- aviso con el color de la marca (no semántico: no es un error ni un acierto) --- */
.aviso.marca { color: var(--txt); border-color: var(--marca-borde); background: var(--marca-sutil); }
.aviso.marca b { color: var(--marca); }

/* --- sesión en vivo ---------------------------------------------------------------------------
   Pantalla que se mira con UNA mano, entre serie y serie, con el brazo cansado. De ahí que los
   objetivos táctiles sean grandes, el cronómetro se lea de lejos y no haya nada más en pantalla. */
.ses-cab { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.ses-vivo {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--marca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ses-timer { font-family: var(--titulo); font-weight: 900; font-size: 25px; margin-top: 1px; }
.ses-cab .btn { margin: 0; }

.ses-descanso { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 12px; }
.ses-descanso.listo { display: flex; align-items: center; gap: 10px; border-color: var(--ok); }
.ses-descanso.listo .ses-desc-txt { color: var(--ok); font-weight: 700; flex: 1; }
.ses-desc-fila { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.ses-desc-txt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ses-desc-num { font-family: var(--titulo); font-weight: 900; font-size: 21px; margin-left: auto; }
.ses-barra { height: 6px; border-radius: var(--r-xs); background: var(--surface2); overflow: hidden; }
/* `transform:scaleX` y no `width`: la barra se re-anima una vez por segundo durante todo el
   descanso, y animar `width` obliga al navegador a recalcular layout en cada frame. Con transform
   la animación vive en el compositor. El valor va de 0 a 1, no de 0 a 100%. */
.ses-barra-in { height: 100%; width: 100%; transform-origin: left; background: var(--marca); transition: transform 1s linear; }

.ses-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 13px; margin-bottom: 8px; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.ses-item.actual { border-color: var(--marca-borde); background: var(--marca-sutil); }
.ses-punto { flex: 0 0 16px; text-align: center; color: var(--faint); }
.ses-punto.ok { color: var(--ok); }
.ses-punto.act { color: var(--marca); }
.ses-item-nom { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ses-item-dato { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.ses-item-n { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

/* --- el ejercicio en vivo, con la forma del Gym Tracker -----------------------------------------
   Un número grande entre dos steppers para el peso, y por serie `N [−] 10 reps [+] (✓)`. El detalle
   de la serie (RIR, peso propio, dropsets) no está a la vista: sale con el tap largo sobre el ✓. */
.lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 13px 0 5px; font-weight: 700; }
.lbl span { color: var(--faint); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Campo de texto de ancho completo. Existe en el Gym Tracker (`.inp`) y acá no estaba: los inputs
   se estilaban sueltos desde `.form-fila input` y `.ses-lbl input`, que sirven adentro de una fila
   pero no para un campo solo. 16px SIEMPRE, para que iOS no haga zoom al enfocarlo. */
.inp {
  width: 100%; padding: 12px; font-family: inherit; font-size: 16px;
  background: var(--surface2); color: var(--txt);
  border: 1px solid var(--line); border-radius: var(--r-sm); outline: none;
}
.inp:focus { border-color: var(--marca); }
.inp:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

.stepRow { display: flex; align-items: stretch; gap: 8px; }
.stepBtn {
  width: 50px; flex: 0 0 auto; background: var(--surface2); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--txt); font-size: 23px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.stepBtn:active { background: var(--line); }
/* 36px es el mínimo cómodo para un ± al lado de un número; el ✓ de al lado se queda en 38 porque es
   el objetivo principal de la fila. */
.stepBtn.chico { width: 36px; height: 36px; font-size: 17px; border-radius: 9px; }
.stepVal {
  flex: 1; min-width: 0; text-align: center; font-family: var(--titulo); font-weight: 900;
  font-size: 24px; background: transparent; border: 0; color: var(--txt); padding: 0;
}
.stepVal:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: var(--r-xs); }

.ses-ej-nom { font-family: var(--titulo); font-weight: 800; font-size: 19px; margin: 3px 0 1px; }
.ses-fila-wrap { padding: 7px 0; border-top: 1px solid var(--line); }
.ses-fila-wrap:first-of-type { border-top: 0; }
.ses-fila { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ses-n { font-family: var(--mono); font-size: 11px; color: var(--faint); flex: 0 0 14px; }
.ses-reps {
  flex: 1; min-width: 0; text-align: center;
  font-family: var(--titulo); font-weight: 800; font-size: 17px; color: var(--muted);
}
.ses-reps.hecha { color: var(--txt); }
.ses-reps .ses-u { font-size: 11px; font-weight: 400; color: var(--faint); }
/* Redondo y con borde grueso: es el objetivo táctil principal de la pantalla y tiene que
   distinguirse de los ± cuadrados de al lado sin depender del color. */
.ses-check {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--line); background: transparent; color: var(--faint);
  font-size: 16px; font-weight: 800; cursor: pointer; user-select: none;
}
.ses-check.hecha { border-color: var(--marca); background: var(--marca); color: var(--marca-texto); }
.ses-badge {
  font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 6px; margin-left: 5px;
  white-space: nowrap;
}
.ses-badge.rir  { background: var(--marca-2-sutil); color: var(--marca-2); }
.ses-badge.peso { background: var(--marca-sutil); color: var(--marca); }
.ses-badge.drop { background: var(--marca-3-sutil); color: var(--marca-3); }
.ses-drop-linea { font-family: var(--mono); font-size: 11px; color: var(--marca-3); padding-left: 20px; margin-top: 2px; }
.ses-detalle { margin-top: 8px; }

/* Día cerrado: el sello, con el link para levantarlo. Verde semántico (no de marca): "cerrado" es
   un estado del dato, y tiene que leerse igual en un gimnasio con marca roja. */
.dia-cerrado { margin-top: 10px; padding: 11px 12px; border: 1px solid var(--ok); border-radius: var(--r-sm); }
.dia-cerrado-fila { display: flex; align-items: center; gap: 10px; }
.dia-cerrado-tit { flex: 1; font-family: var(--titulo); font-weight: 800; font-size: 12px; color: var(--ok); }
.dia-cerrado-link {
  flex: 0 0 auto; background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--muted); text-decoration: underline;
}
.dia-cerrado-link:hover { color: var(--txt); }
.dia-cerrado-link:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.rir-frenado { border: 1px solid var(--marca); border-radius: var(--r-sm); padding: 8px 10px; background: var(--marca-sutil); margin-top: 10px; }
.segmento.rir { flex-wrap: wrap; }
.ses-proximo {
  display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 12px;
  background: var(--surface); border-radius: var(--r-sm); font-size: 11px; min-width: 0;
}
.ses-proximo-ej { flex: 1; min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ses-proximo-ej b { color: var(--txt); }
.card.acento-sutil { border-color: var(--marca-borde); }

.ses-serie { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
/* El botón de la serie es grande a propósito: se toca con el pulgar, de pie y con la mano
   transpirada. 44px es el mínimo táctil que recomienda Apple y acá no es un lujo. */
.ses-serie .serie { width: 46px; height: 46px; font-size: 15px; flex: 0 0 auto; }
.ses-serie input {
  flex: 1; min-width: 0; padding: 11px 10px; font: inherit; font-size: 16px; text-align: center;
  background: var(--surface2); color: var(--txt); border: 1px solid var(--line); border-radius: var(--r-xs);
}
.ses-serie input:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.ses-u { font-size: 11px; color: var(--faint); flex: 0 0 auto; }

.ses-lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); flex: 1; }
.ses-lbl input {
  display: block; width: 100%; margin-top: 4px; padding: 10px; font: inherit; font-size: 16px;
  background: var(--surface2); color: var(--txt); border: 1px solid var(--line); border-radius: var(--r-xs);
}
.ses-lbl input:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

/* --- reportes --- */
.vol-fila { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.vol-grupo { font-size: 12.5px; width: 78px; flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vol-spark { width: 90px; height: 26px; flex: 0 0 auto; }
.vol-num { font-family: var(--mono); font-size: 13px; font-weight: 700; width: 34px; text-align: right; }
.vol-num.bajo { color: var(--warn); }
.adh-fila { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.adh-barra { flex: 1; height: 7px; border-radius: var(--r-xs); background: var(--surface2); overflow: hidden; }
.adh-barra-in { height: 100%; background: var(--marca); }

/* --- navegación de semanas y editor --- */
.nav-sem { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.nav-sem .btn { margin: 0; }
.nav-sem-txt { flex: 1; text-align: center; font-family: var(--mono); font-size: 12.5px; font-weight: 700; }
.nav-sem-n { color: var(--faint); font-weight: 400; margin-left: 7px; font-size: 11px; }

.ej-agarre { margin-top: 3px; }

/* El ejercicio que la semana de descarga saca. Se pinta, no se esconde: escondido es
   indistinguible de uno borrado. Atenuado y sin controles — no hay nada que registrar. */
.ej-fuera { opacity: .5; }
.ej-fuera .ej-nom { text-decoration: line-through; text-decoration-thickness: 1px; }
.ej-editar {
  flex: 0 0 auto; background: none; border: 0; color: var(--faint);
  font-size: 17px; line-height: 1; padding: 2px 6px; cursor: pointer; border-radius: var(--r-xs);
}
.ej-editar:hover { color: var(--marca); }
.ej-editar[aria-expanded="true"] { color: var(--marca); background: var(--marca-sutil); }

.editor { margin-top: 11px; padding: 12px; background: var(--surface2); border-radius: var(--r-md); }
.editor select {
  display: block; width: 100%; margin-top: 4px; padding: 10px; font: inherit; font-size: 16px;
  background: var(--surface); color: var(--txt); border: 1px solid var(--line); border-radius: var(--r-xs);
}

/* --- login --- */
.login { max-width: 380px; margin: 40px auto; }
.login input {
  display: block; width: 100%; margin-top: 5px; padding: 12px; font: inherit; font-size: 16px;
  background: var(--surface2); color: var(--txt); border: 1px solid var(--line); border-radius: var(--r-xs);
}
.login input:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

/* --- panel del entrenador --- */
.panel-datos { display: flex; gap: 8px; margin-top: 11px; }
.panel-datos > div { flex: 1; background: var(--surface2); border-radius: var(--r-sm); padding: 9px; text-align: center; }
.panel-num { display: block; font-family: var(--titulo); font-weight: 800; font-size: 17px; }
.panel-num.alto { color: var(--warn); }
.panel-lbl { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }

/* --- toggle de configuración ---
   NO reusa `.ses-lbl`: ahí el input es `display:block; width:100%`, que para un campo de texto es
   lo correcto y para un checkbox lo estira a todo el ancho y empuja la etiqueta al otro lado. Se
   vio en Chrome: "EL SOCIO REGISTRA RIR" quedaba alineado a la derecha en dos líneas con el
   checkbox suelto a la izquierda. */
.cfg-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cfg-toggle input { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; accent-color: var(--marca); }
.cfg-toggle span { font-size: 13px; color: var(--txt); text-transform: none; letter-spacing: 0; }

/* --- FILA DE DÍA (colapsable) ---
   Un día es una LÍNEA, no una tarjeta abierta. Con tres días y once ejercicios, la semana entera
   desplegada obligaba a scrollear tres pantallas para llegar al día que se va a entrenar; así la
   semana completa entra de una y se abre lo que se necesita. */
.dia-fila {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 13px 4px; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--txt); text-align: left;
}
.dia-fila.vacio .dia-nom, .dia-fila.vacio .dia-res { color: var(--faint); }
.dia-nom { font-size: 14px; font-weight: 600; }
.dia-fecha { font-size: 11px; color: var(--faint); }
.dia-foco { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dia-res { margin-left: auto; font-size: 11.5px; color: var(--muted); flex: 0 0 auto; }
.dia-flecha { color: var(--faint); font-size: 12px; flex: 0 0 auto; }

/* --- FILA DE EJERCICIO ---
   Densa a propósito: nombre, lo que pasó, el plan y el veredicto del motor en dos líneas. La
   versión anterior usaba una tarjeta por ejercicio y entraban tres en una pantalla. */
.ej-fila { display: flex; align-items: flex-start; gap: 9px; }
/* CUADRADO, como el Gym Tracker: el círculo se confundía con el indicador de estado, que es
   redondo en la mayoría de las interfaces. Dos ejes distintos, dos formas distintas. */
.ej-punto { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; margin-top: 6px; }
.ej-txt { flex: 1; min-width: 0; }

/* El delta contra la semana pasada: texto suelto, no un tag con borde. Un badge acá compite con el
   nombre del ejercicio y con el estado; el original lo deja como un dato más de la fila. */
.ej-delta {
  font-size: 12px; font-weight: 700; color: var(--faint);
  flex: 0 0 auto; min-width: 46px; text-align: right; margin-top: 2px;
}
.ej-delta.sube { color: var(--marca); }

/* El ✓ recuadrado a la derecha: es el control principal de la fila y abre el registro.
   44px de lado, que es el piso de un objetivo táctil. */
.ej-check {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: transparent;
  color: var(--faint); font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s, background .15s;
  /* El área táctil llega a 44px sin agrandar la caja visible. */
  position: relative;
}
.ej-check::before { content: ''; position: absolute; inset: -3px; }
.ej-check.ok   { color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.ej-check.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.ej-check.bad  { color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.ej-check.info { color: var(--marca-2); border-color: color-mix(in srgb, var(--marca-2) 45%, transparent); }
.ej-check:hover { border-color: var(--marca); color: var(--marca); }
.ej-check[aria-expanded="true"] { background: var(--marca-sutil); border-color: var(--marca); color: var(--marca); }
.ej-sub { font-size: 11px; color: var(--muted); font-family: var(--mono); margin-top: 1px; }
.ej-sub .ok { color: var(--ok); }

/* EL ESTADO DEL EJERCICIO. Es un eje distinto del punto de color de la izquierda, que codifica el
   grupo muscular y sale de la marca del gimnasio: un mismo punto no puede decir las dos cosas.
   Los colores salen de la familia SEMÁNTICA (--ok/--warn/--bad), no de la marca — que un
   entrenamiento no se haya hecho significa lo mismo en cualquier gimnasio. */
.ej-estado { color: var(--muted); }
.ej-estado.ok   { color: var(--ok); }
.ej-estado.warn { color: var(--warn); }
.ej-estado.bad  { color: var(--bad); font-weight: 600; }
/* Un sustituido NO es un incumplimiento: hacer otro ejercicio es haber entrenado. Por eso va en el
   color de información y no en --warn, que lo leería como una falta. */
.ej-estado.info { color: var(--marca-2); }
.ej-simbolo { display: inline-block; min-width: 9px; font-weight: 700; }

.ej-sub.info  { color: var(--marca-2); }
.ej-sub.bad   { color: var(--bad); font-weight: 600; }
.ej-sub.tenue { color: var(--faint); }
.ej-plan { font-size: 11.5px; color: var(--muted); flex: 0 0 auto; }
.ej-series { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ej-rir-lbl { font-size: 11px; color: var(--muted); }
.ej-rir {
  width: 52px; padding: 5px 7px; background: var(--surface2); color: var(--txt);
  border: 1px solid var(--line); border-radius: var(--r-xs); font-family: var(--mono); font-size: 14px;
}
/* La propuesta del motor, donde se toma la decisión: al lado del ejercicio y no escondida hasta
   generar la semana siguiente. */
.ej-prox {
  /* Sin la barra lateral y pegada a la fila: con ocho ejercicios, ocho barras verticales hacían
     que la lista se leyera como ocho bloques sueltos en vez de una rutina. */
  /* Sin margen propio: vive dentro de `.ej-txt`, así que se alinea sola con el nombre y el
     estado. Colgada afuera arrancaba en el margen izquierdo y se leía como si fuera de otra cosa. */
  margin-top: 3px; font-size: 11.5px; color: var(--ok); line-height: 1.4;
}
.ej-prox.tenue { color: var(--muted); }
/* La recomendación que advierte. Antes salía siempre con ✅, incluso diciendo que el rendimiento
   cayó: el ícono contradecía al texto. */
.ej-prox.alerta { color: var(--bad); }
.ej-prox.alerta .ej-prox-por { color: var(--bad); opacity: .8; }
.ej-prox-por { display: block; color: var(--muted); margin-top: 2px; }

/* Progresando / Estancado, lado a lado: se leen COMPARANDO, no como dos listas separadas por
   media pantalla de scroll. En pantallas angostas caen una debajo de la otra. */
.prog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
@media (max-width: 430px) { .prog-grid { grid-template-columns: 1fr; } }
.prog-item { padding: 6px 0; border-top: 1px solid var(--line); }
.prog-item:first-of-type { border-top: 0; }
.prog-ej { font-size: 12.5px; }
.prog-det { font-size: 11px; color: var(--muted); font-family: var(--mono); }
/* Las dos acciones de semana, del mismo ancho: son alternativas, no una principal y una menor. */
.acciones-sem { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.acciones-sem .btn { width: 100%; }

/* El agarre para arrastrar. `touch-action:none` es obligatorio: sin eso el navegador se queda el
   gesto para hacer scroll y el pointermove nunca llega — el arrastre "no anda" solo en el celular,
   que es justo donde tiene que andar. */
.ej-agarre {
  background: none; border: 0; color: var(--faint); cursor: grab; font-size: 15px;
  padding: 2px 3px; line-height: 1; touch-action: none; flex: 0 0 auto;
}
.ej.arrastrando {
  position: relative; z-index: 5; opacity: .92;
  /* La sombra sale del token de fondo, no de un rgba negro: en tema claro una sombra negra
     al 45% se ve como una mancha, y el punto de la sombra es separar la fila del resto. */
  box-shadow: 0 8px 24px color-mix(in srgb, var(--bg) 70%, transparent); border-radius: var(--r-sm);
  background: var(--surface2); cursor: grabbing;
}

/* El hito de la semana: el intento de marca, señalado arriba de todo. Usa el color de ATENCIÓN y
   no el de error — es una meta, no un problema; mismo criterio que `.aviso.ojo`. */
.card.hito { border-color: var(--warn); }
.card.hito .eyebrow { color: var(--warn); }
.hito-ej { font-weight: 800; font-size: 15px; margin-top: 3px; }

/* El bloque de instalación en Ajustes: plegado y en segundo plano. Lo ve solo el dueño, y aun para
   él es algo que se toca una vez —al instalar— y nunca más. */
.sync-tecnico { border-top: 1px solid var(--line); padding-top: 12px; }
.sync-tecnico > summary { list-style: none; color: var(--muted); }
.sync-tecnico > summary::-webkit-details-marker { display: none; }
.sync-tecnico > summary::before { content: '▸ '; display: inline-block; transition: transform .15s; }
.sync-tecnico[open] > summary::before { content: '▾ '; }

/* ===================================================================== LOGIN

   Una pantalla con un solo trabajo: tipear un DNI. Todo lo que no sea eso compite con eso.

   Hasta 0.26.1 se veía en BLANCO sobre una app oscura entera, y no era un problema de diseño:
   `app.js` pintaba el login antes de llamar a `aplicarMarca()`, así que ningún `var(--*)` de color
   resolvía. Los colores de acá siguen saliendo de la marca del gimnasio como en el resto. */

body.en-login > header.app,
body.en-login > nav { display: none; }

.login-pantalla {
  min-height: 100dvh;                 /* dvh y no vh: en iOS la barra del navegador se come 60px */
  display: flex; align-items: center; justify-content: center;
  padding: 24px 20px;
  /* En la PWA instalada el notch se come el borde superior de la card. */
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.login-card {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column;
}

.login-marca { text-align: center; margin-bottom: 30px; }
.login-logo { max-height: 64px; max-width: 220px; object-fit: contain; }
.login-nombre {
  font-family: var(--titulo); font-weight: 800; font-size: 34px; letter-spacing: -0.02em;
  color: var(--txt);
}

.login-lbl {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}

/* El campo es el protagonista: grande, monoespaciado y espaciado como se lee un documento.
   `font-size` de 24px también evita el zoom automático de iOS al enfocar un input (<16px lo
   dispara), que en una PWA deja la pantalla corrida y no vuelve sola. */
.login-dni {
  width: 100%; box-sizing: border-box;
  font-family: var(--mono); font-size: 24px; letter-spacing: .16em; text-align: center;
  padding: 16px 12px;
  color: var(--txt); background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px;
  transition: border-color .18s, box-shadow .18s;
}
.login-dni::placeholder { color: var(--faint); letter-spacing: .16em; }
.login-dni:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 26%, transparent);
}
.login-dni:disabled { opacity: .45; }

.login-ayuda {
  font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 9px; text-align: center;
}

.login-btn {
  margin-top: 18px;
  min-height: 52px;                   /* muy por encima del piso de 44px: es el único botón */
  font-size: 15px;
}
.login-btn:disabled { opacity: .45; cursor: not-allowed; }

.login-card .aviso { margin-top: 14px; }

/* El error entra desde arriba, corto. Quien lo ve ya está frustrado: que aparezca, no que actúe. */
@media (prefers-reduced-motion: no-preference) {
  .login-card .aviso[role="alert"]:not([hidden]) { animation: loginErr .18s ease-out; }
  @keyframes loginErr { from { opacity: 0; transform: translateY(-4px); } }
}

/* El campo inválido: borde rojo ADEMÁS del mensaje. El color nunca es el único indicador. */
.login-dni[aria-invalid="true"] { border-color: var(--bad); }
.login-dni[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 26%, transparent);
}

/* --- BORRADOR DE LA SEMANA SIGUIENTE ---
   La propuesta del motor antes de que sea el plan. Cada fila muestra `antes → después` porque el
   resultado solo no dice si eso fue una subida, una repetición más o exactamente lo mismo. */
.borrador .brr-dia {
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
  margin: 13px 0 6px;
}
.brr-ej { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; margin-bottom: 7px; }
.brr-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brr-nom { font-size: 12.5px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brr-cambio { font-size: 11.5px; color: var(--muted); margin: 3px 0; }
.brr-motivo { font-size: 11.5px; color: var(--faint); line-height: 1.4; margin-bottom: 6px; }
.brr-nums { display: flex; gap: 5px; align-items: center; }
.brr-nums input { width: 52px; padding: 6px; text-align: center; }
.brr-nums span { font-size: 11px; color: var(--faint); }
/* El aviso de rango se rellena por JS al tipear, así que la caja existe siempre y crece sola: si
   apareciera y desapareciera del flujo, la fila saltaría bajo el dedo mientras se escribe. */
.brr-aviso { font-size: 11px; color: var(--warn); line-height: 1.4; }
.brr-aviso:empty { display: none; }

/* --- LA HISTORIA DEL EJERCICIO, en el editor ---
   Va arriba del formulario que la va a cambiar: en otra pantalla es información, al lado del input
   del peso es un argumento. */
.ej-stats {
  background: var(--surface2); border-radius: var(--r-sm); padding: 8px 10px;
  font-size: 11.5px; line-height: 1.65; color: var(--muted); margin-top: 6px;
}
.ej-stats b { color: var(--txt); font-weight: 600; }
.ej-stats .tenue { color: var(--faint); }
.ej-stats .alerta { color: var(--warn); }
.ej-stats .mal { color: var(--bad); }
.ej-stats .alerta b, .ej-stats .mal b { color: inherit; }

/* --- «✓ el plan» ---
   El registro de un día completo a mano son 3-5 taps por ejercicio; esto lo deja en uno. Aparece
   solo mientras no hay registro: después es ruido al lado del estado. */
.ej-plan-btn {
  flex: 0 0 auto; background: none; border: 1px solid var(--line); border-radius: var(--r-xs);
  color: var(--muted); font-size: 11px; font-weight: 700; padding: 6px 8px; cursor: pointer;
  white-space: nowrap; margin-top: 2px;
  transition: border-color .15s, color .15s;
}
.ej-plan-btn:hover { border-color: var(--marca); color: var(--marca); }
/* El RIR que falta: el registro está escrito pero incompleto, y sin RIR el motor no puede
   progresar el ejercicio NUNCA. Se marca el campo, no se bloquea nada. */
.ej-rir.pide { border-color: var(--marca); background: var(--marca-sutil); }
.ej-pide-rir { font-size: 11px; color: var(--marca); line-height: 1.4; margin-top: 5px; }

/* El ejercicio que la descarga sacó, dentro de la lista de la sesión: se muestra para que el
   contador cierre con lo que se ve, pero no se puede entrar. */
.ses-item.fuera { opacity: .45; cursor: default; }
.ses-item.fuera .ses-item-nom { text-decoration: line-through; text-decoration-thickness: 1px; }