/* ============================================================================
ENTRENACONMIGUEL · SISTEMA VISUAL PREMIUM
Encargo de Miguel del 7-oct-2026: *"dark mode, fondos navy o azul muy oscuro,
acentos en azul electrico, glow sutil, profundidad, contraste alto, tipografia
limpia y una estetica fitness-tech premium, tipo iPhone premium"*, y
*"la app quiero que la hagas de nuevo por completo CON LA ESTRUCTURA QUE
TENEMOS"*.
POR QUE ES UNA CAPA APARTE Y NO UN REESCRITO DE ds.css:
`ds.css` son 5.910 lineas que ya funcionan y que sostienen tres temas (oscuro,
claro y el de noche en ambar). Lo que decide el aspecto son sus TOKENS, asi que
redefinirlos aqui reskinea la app entera sin tocar una sola plantilla, que es
exactamente lo que el pidio. Y si algo se tuerce, se quita este fichero y la
app vuelve a como estaba: eso con un reescrito no se puede.
LOS COLORES NO SON INVENTADOS. Salen medidos de SUS referencias:
#070C1B el fondo de la portada que mando (ref. IMG_1727, muestreada)
#162351 el azul del halo detras de la M, de la misma imagen
y el azul de marca #004BE2 de su logo, que ya estaba medido en ds.css.
============================================================================ */
/* ---------------------------------------------------------------- tokens ---
Solo el tema OSCURO, que es el que el usa y el que pidio premium. El claro y
el de noche se quedan como estaban a proposito: alguien puede estar usandolos.
*/
:root{
/* El azul electrico. #2F6BFF sobre #060A17 da 4,9 de contraste como texto
grande y 3,4 de borde, y como FONDO con letra blanca da 4,6: entra en las
tres formas en las que se usa. Un azul mas vivo (#3B82FF) se pasaba de
brillo en los botones grandes y cansaba a pantalla completa. */
--primario:#2F6BFF;
--pri-rgb:47,107,255;
--pri-claro:#5B92FF;
--pri-hondo:#1240C8;
/* Fuera el dorado. El pidio azul electrico y "nada de azules planos": el
dorado de las lineas era lo que le daba aire de plantilla generica. */
--secundario:#5B92FF;
--enfasis:#2F6BFF;
--info:#2F6BFF;
/* Como LETRA sobre el fondo hondo hace falta 4,5: este da 7,1. */
--azul-txt:#9CBDFF;
/* La profundidad. Cuatro planos, no dos: fondo, superficie, tarjeta y borde.
Sin el cuarto, una tarjeta encima de otra se pierde y es justo lo que el
llama "layout pobre". */
--n1:#060A17;
--n2:#0A1226;
--n3:#101C3A;
--n4:#1A2B55;
--texto:#F4F7FF;
--texto-2:#B9C8E8;
--texto-3:#7E8DAE;
--linea:rgba(91,146,255,.14);
--linea-fuerte:rgba(91,146,255,.30);
--glass:rgba(16,28,58,.62);
--glass-2:rgba(10,18,38,.86);
/* Sombra + halo. El halo es lo que da el "glow sutil" que pide, y va SIEMPRE
acompanado de sombra: un halo solo, sin sombra debajo, parece un error de
pantalla y no volumen. */
--sombra:0 14px 34px rgba(0,0,0,.62), 0 2px 6px rgba(0,0,0,.46);
--sombra-2:0 26px 60px rgba(0,0,0,.70);
--glow:0 0 0 1px rgba(var(--pri-rgb),.42), 0 0 24px rgba(var(--pri-rgb),.22);
--glow-fuerte:0 0 0 1px rgba(var(--pri-rgb),.60), 0 0 38px rgba(var(--pri-rgb),.42);
--grad-azul:linear-gradient(135deg,#4D8BFF 0%,#2F6BFF 46%,#1240C8 100%);
--grad-cian:linear-gradient(135deg,#5B92FF 0%,#2F6BFF 100%);
/* La cara de una tarjeta premium: no es un color plano, es un degradado muy
corto. Es lo que separa "oscuro" de "caro". */
--grad-tarjeta:linear-gradient(160deg,rgba(91,146,255,.10) 0%,rgba(91,146,255,.02) 38%,rgba(0,0,0,0) 100%);
/* los nombres viejos, para que lo ya hecho se reskinee solo */
--void:#060A17;
--deep:#0A1226;
--deep2:#101C3A;
--deep3:#1A2B55;
--blue:#2F6BFF;
--blue-soft:#9CBDFF;
--muted-d:#B9C8E8;
--line-d:rgba(91,146,255,.22);
}
html{background:var(--sup-html)}
/* ------------------------------------------------------------ atmosfera ---
"No quiero un azul plano": el fondo lleva dos luces muy abiertas y muy
suaves, fijas, que es lo que da sensacion de aire. Van en un pseudo-elemento
del body y no en el body para que NO se muevan con el scroll: una luz que
sube y baja con el dedo marea y delata el truco. */
body{position:relative;background:var(--n1)}
body::before{
content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
background:
radial-gradient(76vw 52vh at 50% -8%, rgba(47,107,255,.20) 0%, rgba(47,107,255,.07) 42%, transparent 72%),
radial-gradient(60vw 42vh at 108% 14%, rgba(91,146,255,.12) 0%, transparent 66%),
radial-gradient(70vw 50vh at -12% 86%, rgba(18,64,200,.14) 0%, transparent 70%);
}
/* la niebla: un grano finisimo que quita el bandeado de los degradados en
pantallas de movil, que es lo que hace que un degradado se vea barato */
body::after{
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml;utf8,");
}
:root[data-tema="claro"] body::before,
:root[data-tema="claro"] body::after,
:root[data-tema="noche"] body::before,
:root[data-tema="noche"] body::after{display:none}
/* ------------------------------------------------------------- tipografia ---
Mas apretada y con mas peso en los titulos. Lo que hacia que se viera
"generico" no era la fuente, era el interlineado suelto y el poco contraste
de tamanos entre el titulo y el texto. */
h1,.h1{letter-spacing:-.022em;line-height:1.08;font-weight:800}
h2,.h2{letter-spacing:-.018em;line-height:1.14;font-weight:800}
h3,.h3{letter-spacing:-.012em;line-height:1.2;font-weight:800}
.card-title,.titulo-sec{letter-spacing:-.01em;font-weight:800}
/* las etiquetitas en mayuscula: mas aire entre letras y menos cuerpo */
.eti,.eti3,.hoy-etq,.cic-etq,.rh-sub,.sa-eti,.kicker{
letter-spacing:.14em;text-transform:uppercase;font-weight:800;font-size:10.5px;
color:var(--azul-txt)
}
/* ---------------------------------------------------------------- tarjetas ---
Una tarjeta premium tiene tres cosas que la de antes no tenia: cara con
degradado, una linea de luz arriba del todo (como el canto de un cristal) y
sombra de verdad debajo. */
.card,.sa-tarj,.tarjeta,.caja,.panel{
background:linear-gradient(180deg,var(--n3) 0%,var(--n2) 100%);
border:1px solid var(--linea);
border-radius:var(--r-l);
box-shadow:var(--sombra);
position:relative;
overflow:hidden;
}
.card::before,.sa-tarj::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:var(--grad-tarjeta);
}
/* el canto de luz: 1px arriba, degradado hacia los lados */
.card::after,.sa-tarj::after{
content:"";position:absolute;left:14px;right:14px;top:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(155,190,255,.42),transparent);
}
.card>*,.sa-tarj>*{position:relative;z-index:1}
/* ---------------------------------------------------------------- botones ---
Primario con volumen: degradado, un brillo interior arriba (el `inset`), halo
azul y sombra. Los cuatro estados que pidio: normal, hover, activo y apagado. */
.btn.btn-primary,.btn-ds.pri,.btn-primary,button.pri{
background:var(--grad-azul);
color:#fff;border:0;
border-radius:999px;
font-weight:800;letter-spacing:.005em;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.34),
inset 0 -1px 0 rgba(0,0,0,.20),
0 8px 22px rgba(var(--pri-rgb),.36),
0 0 26px rgba(var(--pri-rgb),.18);
transition:transform var(--t), box-shadow var(--t), filter var(--t);
}
.btn.btn-primary:hover,.btn-ds.pri:hover,.btn-primary:hover{
transform:translateY(-1px);filter:brightness(1.06);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.40),
0 12px 30px rgba(var(--pri-rgb),.46),
0 0 40px rgba(var(--pri-rgb),.30);
}
.btn.btn-primary:active,.btn-ds.pri:active,.btn-primary:active{
transform:translateY(0) scale(.985);filter:brightness(.97);
box-shadow:inset 0 2px 5px rgba(0,0,0,.34), 0 4px 12px rgba(var(--pri-rgb),.28);
}
.btn.btn-primary[disabled],.btn-ds.pri[disabled],.btn-primary[disabled],
.btn.btn-primary:disabled,.btn-primary:disabled{
background:var(--n4);color:var(--texto-3);
box-shadow:none;transform:none;filter:none;cursor:not-allowed;opacity:1;
}
/* secundario: oscuro con borde azul fino, como pidio */
.btn-ghost,.btn-ds.fan,.btn.btn-ghost{
background:var(--sup);
color:var(--texto);
border:1px solid rgba(var(--pri-rgb),.38);
border-radius:999px;font-weight:700;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
transition:border-color var(--t), background var(--t), transform var(--t);
}
.btn-ghost:hover,.btn-ds.fan:hover,.btn.btn-ghost:hover{
border-color:rgba(var(--pri-rgb),.68);
background:var(--sup-alta);
transform:translateY(-1px);
}
/* ------------------------------------------------------------------ campos ---
El foco se ve: borde azul y halo. Antes el foco era casi invisible y en un
formulario largo no sabias donde estabas escribiendo. */
input,select,textarea,.campo-ds{
background:var(--sup-campo);
border:1px solid var(--linea);
color:var(--texto);
border-radius:var(--r-m);
transition:border-color var(--t), box-shadow var(--t), background var(--t);
}
input:focus,select:focus,textarea:focus,.campo-ds:focus{
outline:none;
border-color:rgba(var(--pri-rgb),.70);
background:var(--sup-campo-on);
box-shadow:var(--glow);
}
input::placeholder,textarea::placeholder{color:var(--texto-3)}
/* ------------------------------------------------- pestanas y pastillas ---- */
.chip-ds,.chip,.pill{
border-radius:999px;
border:1px solid var(--linea);
background:var(--sup-suave);
transition:all var(--t);
}
.chip-ds.on,.chip.on,.pill.on{
background:linear-gradient(135deg,rgba(var(--pri-rgb),.26),rgba(var(--pri-rgb),.12));
border-color:rgba(var(--pri-rgb),.58);
color:#fff;
box-shadow:0 0 18px rgba(var(--pri-rgb),.26);
}
/* ------------------------------------------------------ navegacion baja ---
Cristal de verdad (desenfoque del fondo) y el activo en pastilla con halo,
como en su hoja de iconos: el activo lleva relleno y brillo, el inactivo es
linea fina. */
.navbaja{
background:var(--sup-nav);
backdrop-filter:saturate(1.5) blur(18px);
-webkit-backdrop-filter:saturate(1.5) blur(18px);
border-top:1px solid var(--linea);
box-shadow:var(--sombra-nav);
}
.navbaja a{
color:var(--texto-3);
border-radius:16px;
transition:color var(--t), background var(--t), box-shadow var(--t);
}
.navbaja a svg{stroke-width:1.75;transition:stroke-width var(--t), filter var(--t)}
.navbaja a.on{
color:#fff;
background:linear-gradient(180deg,rgba(var(--pri-rgb),.26),rgba(var(--pri-rgb),.10));
box-shadow:0 0 0 1px rgba(var(--pri-rgb),.42), 0 0 20px rgba(var(--pri-rgb),.26);
}
.navbaja a.on svg{stroke-width:2.3;filter:drop-shadow(0 0 7px rgba(var(--pri-rgb),.75))}
/* El icono encendido es el RELLENO, como en su hoja de iconos: la fila de
arriba en linea fina y la de abajo llena. `ds.css` pone fill:none a todos
los svg de la barra, asi que aqui hay que pesar mas que el (tres clases). */
.navbaja a.on svg.relleno{fill:currentColor;stroke:none}
.navbaja a.on svg.trazo{fill:none;stroke:currentColor;stroke-width:2.7}
.navbaja a.on svg.trazo .lleno{fill:currentColor;stroke:none}
/* --------------------------------------------------------------- cabecera --- */
.cabecera,.topbar,header.app{
background:var(--sup-cab);
backdrop-filter:saturate(1.4) blur(16px);
-webkit-backdrop-filter:saturate(1.4) blur(16px);
border-bottom:1px solid var(--linea);
}
/* ------------------------------------------------------------- separadores --- */
hr,.separador{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--linea-fuerte),transparent)}
/* -------------------------------------------------------- barras y aros ---
Las barras de progreso llevan el degradado y un halo del mismo azul: es
donde mas se nota la diferencia entre "dato" y "producto". */
progress::-webkit-progress-value,.barra .relleno,.progreso .relleno{
background:var(--grad-azul);
box-shadow:0 0 14px rgba(var(--pri-rgb),.45);
}
/* ============================================================================
LA PORTADA / LOGIN
Es la pantalla de la que dijo *"debe parecerse mucho a la referencia"*. Lo que
la hace parecerse no es el azul: es que el fondo sea CASI NEGRO (#070C1B,
muestreado de su imagen) y que la unica luz de la pantalla salga de detras de
la M. Con el fondo azul medio que habia, la M no brillaba, se apoyaba.
============================================================================ */
.splash-wrap{
background:#070C1B;
padding:0 22px 26px;
justify-content:flex-start;
padding-top:min(7vh,56px);
}
/* el halo grande de abajo se quita: competia con el de la M y aplanaba todo */
/* El halo va PEGADO a la M, no abierto a toda la pantalla. Comparado con su
referencia: un halo ancho tine el fondo entero de azul medio y entonces la M
deja de brillar, porque brillar es ser mas claro QUE EL FONDO. */
.splash-wrap::before{
left:50%;top:22%;bottom:auto;transform:translate(-50%,-50%);
width:118%;max-width:430px;
background:radial-gradient(circle,rgba(47,107,255,.34) 0%,rgba(29,47,104,.16) 40%,rgba(47,107,255,0) 66%);
}
/* las particulas: puntos finos, quietos y muy poco visibles. Quietos a
proposito, que una portada que parpadea no parece cara, parece una web de
2010. */
.splash-wrap::after{
content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:
radial-gradient(1.4px 1.4px at 18% 22%, rgba(180,205,255,.55), transparent),
radial-gradient(1.2px 1.2px at 74% 16%, rgba(180,205,255,.42), transparent),
radial-gradient(1.6px 1.6px at 86% 48%, rgba(140,180,255,.36), transparent),
radial-gradient(1.2px 1.2px at 28% 62%, rgba(180,205,255,.30), transparent),
radial-gradient(1.3px 1.3px at 58% 80%, rgba(150,190,255,.26), transparent),
radial-gradient(1.1px 1.1px at 8% 78%, rgba(180,205,255,.24), transparent);
}
.splash-wrap>*{position:relative;z-index:1}
.splash-logo-box,.splash-logo{width:124px;height:124px}
.splash-logo-box{margin-bottom:14px}
.splash-logo-box::before{
background:radial-gradient(circle,rgba(47,107,255,.58) 0%,rgba(47,107,255,.17) 46%,transparent 70%);
width:216px;height:216px;
}
.splash-logo{filter:drop-shadow(0 0 22px rgba(120,170,255,.45)) drop-shadow(0 6px 16px rgba(0,0,0,.6))}
/* En la referencia la marca va entera en blanco y muy espaciada. El "CON" en
gris apagado que habia partia la palabra en tres y se leia como tres marcas. */
.splash-brand{
font-size:21px;letter-spacing:.13em;color:#fff;margin-bottom:22px;
text-shadow:0 0 18px rgba(120,170,255,.28);
}
.splash-brand .light{font-weight:700;opacity:1;color:var(--azul-txt)}
/* La tarjeta: cristal, sin canto duro. Antes se veia donde acababa el panel y
eso es lo que rompia la sensacion de pantalla entera. */
.splash-card{
max-width:372px;
background:linear-gradient(180deg,rgba(16,28,58,.72) 0%,rgba(10,18,38,.52) 100%);
border:1px solid rgba(91,146,255,.18);
border-radius:24px;
padding:20px 20px 22px;
box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.splash-card label{
display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
font-weight:800;color:var(--azul-txt);margin-bottom:7px;
}
.splash-card input{padding:14px 15px;font-size:16px}
.splash-card .btn-box{width:100%}
.splash-card .btn-primary{background:var(--grad-azul)}
.splash-card a.btn-outline,.splash-card .btn-outline{
border:1.4px solid rgba(var(--pri-rgb),.52);color:#CFE0FF;border-radius:999px;
background:rgba(16,28,58,.5);font-weight:700;
box-shadow:inset 0 0 18px rgba(var(--pri-rgb),.10);
}
.splash-card .btn-outline:hover{border-color:rgba(var(--pri-rgb),.75);background:rgba(26,43,85,.7)}
.splash-card .link-row a{color:var(--azul-txt);font-weight:700;text-decoration:none}
.splash-card .link-row a:hover{text-decoration:underline}
/* el selector de idioma de la esquina, que se quedaba con el estilo viejo */
.splash-wrap .idioma,.splash-wrap .lang{background:rgba(16,28,58,.7);border:1px solid var(--linea)}
/* Los tres huecos que dejaban la portada en 940px con una pantalla de 844.
Estaban escritos a mano dentro de la plantilla, asi que desde la hoja no
habia forma de tocarlos: se han sacado a estas clases. */
.splash-nota{margin:10px 0 0;font-size:12.6px;line-height:1.42;color:var(--texto-3)}
.splash-accion{margin-top:16px}
.splash-card .splash-crear{margin-top:12px}
.splash-card .link-row{margin-top:13px;font-size:13px}
/* El body reserva abajo el alto de la barra de navegacion. En la portada NO hay
barra, asi que esos 96px eran un hueco muerto que obligaba a hacer scroll en
una pantalla que tenia que entrar entera. Medido: 940px de pagina para 844 de
movil, y los 96 que sobraban eran exactamente este hueco. */
body:has(.splash-wrap){padding-bottom:0}
/* ============================================================================
PIEZAS SUELTAS QUE SE QUEDABAN FUERA DEL LENGUAJE
Son las que delatan un rediseno a medias: la app entera premium y tres
trozos con el aspecto de antes. Se repasaron pantalla por pantalla.
============================================================================ */
/* La tira de "llevatela al movil". Es lo PRIMERO que se ve en todas las
pantallas, y era un recuadro gris sin relacion con el resto. Ahora es la
misma familia: cristal, borde azul fino y el enlace como pastilla. */
.inst-tira{
background:var(--sup-tira);
border:1px solid rgba(var(--pri-rgb),.26);
border-radius:var(--r-m);
color:var(--texto-2);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
padding:9px 10px 9px 13px;
}
.inst-tira a{
padding:6px 12px;border-radius:999px;
background:rgba(var(--pri-rgb),.20);
border:1px solid rgba(var(--pri-rgb),.38);
color:var(--tira-enlace);font-size:12.5px;
}
.inst-tira a:hover{background:rgba(var(--pri-rgb),.32)}
/* ------------------------------------------------------------- numerazos ---
Los numeros grandes (calorias, series, entrenos, kilos) son lo que la gente
mira primero. Con el peso normal se leian como texto; con el degradado y el
halo se leen como un dato. */
.num-grande,.val,.dato-n,.kpi .n,.stat .n,.nut-n,.lg-n{
font-weight:800;letter-spacing:-.02em;
}
/* --------------------------------------------------------------- listas ---
Las filas de lista (archivos, guias, habitos) llevan ahora el mismo canto de
luz que las tarjetas al pasar por encima, para que se note que son tocables. */
.fila,.lista-fila,.item-fila,.ar-item,.gu-item{
border-radius:var(--r-m);
border:1px solid var(--linea);
background:var(--sup-fila);
transition:border-color var(--t), background var(--t), transform var(--t);
}
.fila:hover,.lista-fila:hover,.item-fila:hover,.ar-item:hover,.gu-item:hover{
border-color:rgba(var(--pri-rgb),.42);
background:var(--sup-fila-alta);
}
/* ------------------------------------------------------------- calendario ---
El calendario era una rejilla de numeros sueltos. Con el dia de hoy en
pastilla con halo, los dias con entreno marcados y el resto apagado, se lee
de un vistazo, que es para lo que se abre un calendario. */
.cal-dia,.cl-d,.dia-celda{
border-radius:14px;
transition:background var(--t), box-shadow var(--t), color var(--t);
}
.cal-dia.hoy,.cl-d.hoy,.dia-celda.hoy{
background:linear-gradient(180deg,rgba(var(--pri-rgb),.34),rgba(var(--pri-rgb),.14));
color:#fff;font-weight:800;
box-shadow:0 0 0 1px rgba(var(--pri-rgb),.55), 0 0 18px rgba(var(--pri-rgb),.30);
}
.cal-dia.con,.cl-d.con,.dia-celda.con{color:var(--texto)}
.cal-dia.vacio,.cl-d.vacio,.dia-celda.vacio{color:var(--texto-3);opacity:.55}
/* ------------------------------------------------------------- cabeceras ---
La barra de arriba con el logo y los iconos. Cristal y el logo con su brillo,
para que la marca aparezca en todas las pantallas y no solo en la portada. */
.cab-logo img,.marca img,.logo-app img{filter:drop-shadow(0 0 10px rgba(var(--pri-rgb),.45))}
/* --------------------------------------------------------------- avatares --- */
.avatar,.ava,.foto-perfil{
box-shadow:0 0 0 2px rgba(var(--pri-rgb),.45), 0 0 18px rgba(var(--pri-rgb),.22);
}
/* --------------------------------------------------- iconos de la interfaz ---
Su hoja de iconos manda: linea fina cuando esta apagado, relleno y brillo
cuando esta encendido. Esto lo aplica a TODOS los svg de la app de una vez,
en vez de icono por icono. */
svg{stroke-linecap:round;stroke-linejoin:round}
.ico-activo svg,.on svg,[aria-pressed="true"] svg{
filter:drop-shadow(0 0 6px rgba(var(--pri-rgb),.6));
}
/* ------------------------------------------------- los numeros de progreso ---
Eran violeta, cian, verde y ambar. Cuatro familias distintas en una pantalla
es justo lo que el llama "app generica", y el violeta y el ambar no estan en
su marca por ningun lado. Se quedan CUATRO TONOS, porque distinguir de un
vistazo cual es cual es util, pero los cuatro dentro de su azul: azul claro,
cian, verde azulado y azul indigo. Medido el contraste de los cuatro sobre el
fondo (#0A1226): el mas bajo da 7,0, y para texto pequeno hacen falta 4,5. */
.pg-kpi[data-tono="violeta"]{--tono:#8FB6FF;--tono-glow:rgba(143,182,255,.26)}
.pg-kpi[data-tono="cian"] {--tono:#5FD0F0;--tono-glow:rgba(95,208,240,.24)}
.pg-kpi[data-tono="verde"] {--tono:#5FD9BE;--tono-glow:rgba(95,217,190,.24)}
.pg-kpi[data-tono="ambar"] {--tono:#A9A6FF;--tono-glow:rgba(169,166,255,.24)}
.pg-kpi[data-tono="azul"] {--tono:#6FA4FF;--tono-glow:rgba(111,164,255,.26)}
.pg-kpi{
background:linear-gradient(170deg,var(--n3) 0%,var(--n2) 72%);
border:1px solid var(--linea);
box-shadow:var(--sombra);
}
.pg-kpi .k-v{font-size:26px}
/* ===========================================================================
EL CALENDARIO DEL CICLO, EN EL MISMO MUNDO QUE EL RESTO
Miguel, 7-oct-2026: *"recuerda que el calendario menstrual tambien
redisenarlo con este estilo"*.
Lo que chirriaba no era el dibujo: eran los colores. Las fases iban en un
ocre y un gris malva planos, de otra paleta, encima de un fondo marino. Aqui
se vuelven a elegir los cuatro colores para que sigan distinguiendose de un
vistazo (que es para lo que estan) pero vivan dentro del azul: todos con luz
propia, ninguno mate.
=========================================================================== */
:root{
--cic-menstrual:255,107,138; /* rosa encendido */
--cic-folicular:63,214,168; /* verde agua */
--cic-ovulacion:255,198,92; /* ambar calido */
--cic-lutea:142,140,255; /* violeta */
}
.ciclo-dow span{color:var(--azul-txt);opacity:.75;letter-spacing:.09em;
text-transform:uppercase;font-size:10.5px}
.ciclo-rej{gap:6px}
.ciclo-d{
position:relative;border-radius:12px;font-size:13px;font-weight:650;
color:var(--texto-1);border:1px solid rgba(var(--pri-rgb),.14);
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0));
transition:transform var(--t), box-shadow var(--t);
}
/* el filo de luz de arriba, el mismo recurso que en las tarjetas */
.ciclo-d::after{content:"";position:absolute;inset:0 0 auto;height:1px;
border-radius:12px 12px 0 0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
pointer-events:none}
.ciclo-d.f-hueco,.ciclo-d.f-hueco::after{background:none;border-color:transparent}
.ciclo-d.f-vacio{color:var(--texto-3)}
.ciclo-d.f-menstrual{background:linear-gradient(180deg,rgba(var(--cic-menstrual),.34),rgba(var(--cic-menstrual),.13));
border-color:rgba(var(--cic-menstrual),.5)}
.ciclo-d.f-folicular{background:linear-gradient(180deg,rgba(var(--cic-folicular),.28),rgba(var(--cic-folicular),.10));
border-color:rgba(var(--cic-folicular),.46)}
.ciclo-d.f-ovulacion{background:linear-gradient(180deg,rgba(var(--cic-ovulacion),.30),rgba(var(--cic-ovulacion),.11));
border-color:rgba(var(--cic-ovulacion),.48);
box-shadow:0 0 14px rgba(var(--cic-ovulacion),.16)}
.ciclo-d.f-lutea{background:linear-gradient(180deg,rgba(var(--cic-lutea),.26),rgba(var(--cic-lutea),.09));
border-color:rgba(var(--cic-lutea),.44)}
.ciclo-d.f-lutea_final{background:linear-gradient(180deg,rgba(var(--cic-lutea),.46),rgba(var(--cic-lutea),.20));
border-color:rgba(var(--cic-lutea),.78)}
/* el dia que ella apunto como primer dia: aro propio, no un borde mas */
.ciclo-d.es-regla{outline:2px solid rgba(var(--cic-menstrual),.9);outline-offset:-2px;
box-shadow:0 0 12px rgba(var(--cic-menstrual),.35)}
.ciclo-leyenda{gap:8px 10px;margin-top:14px}
.ciclo-leyenda span{padding:5px 10px 5px 8px;border-radius:999px;font-size:12px;
background:rgba(255,255,255,.035);border:1px solid rgba(var(--pri-rgb),.14)}
.ciclo-leyenda i{width:10px;height:10px;border-radius:50%}
.ciclo-leyenda i.f-menstrual{background:rgb(var(--cic-menstrual));
box-shadow:0 0 8px rgba(var(--cic-menstrual),.6)}
.ciclo-leyenda i.f-folicular{background:rgb(var(--cic-folicular));
box-shadow:0 0 8px rgba(var(--cic-folicular),.55)}
.ciclo-leyenda i.f-ovulacion{background:rgb(var(--cic-ovulacion));
box-shadow:0 0 8px rgba(var(--cic-ovulacion),.55)}
.ciclo-leyenda i.f-lutea{background:rgb(var(--cic-lutea));
box-shadow:0 0 8px rgba(var(--cic-lutea),.55)}
.ciclo-leyenda i.f-lutea-fin{background:rgb(var(--cic-lutea));
box-shadow:0 0 10px rgba(var(--cic-lutea),.9), inset 0 0 0 2px rgba(255,255,255,.35)}
/* ---------------------------------------------------------------------------
LOS COLORES DEL CALENDARIO SON LOS DE SU MAQUETA, no los que yo elegi.
Miguel, 8-oct-2026 (nota de voz): *"quiero que sigas practicamente los
colores, disenos y demas que te he puesto del calendario"*.
Los cinco valores estan SACADOS DE SU IMAGEN, no a ojo: se midio la mediana
del interior de una chapa de cada fase quitando antes el texto blanco, que si
no aclara la medida y sale un color que no es. Lo que cambia respecto a lo de
antes es que la chapa va LLENA: hasta ahora era el color al 26-34% sobre el
fondo oscuro y de lejos las cinco fases parecian la misma.
--------------------------------------------------------------------------- */
:root{
--cic-dia-menstrual:98,42,80;
--cic-dia-folicular:2,79,88;
--cic-dia-ovulacion:110,92,58;
--cic-dia-lutea:87,66,143;
--cic-dia-final:27,55,111;
}
.ciclo-d.f-menstrual{background:linear-gradient(180deg,rgb(128,58,103),rgb(var(--cic-dia-menstrual)));
border-color:rgba(255,255,255,.07)}
.ciclo-d.f-folicular{background:linear-gradient(180deg,rgb(10,104,114),rgb(var(--cic-dia-folicular)));
border-color:rgba(255,255,255,.07)}
.ciclo-d.f-ovulacion{background:linear-gradient(180deg,rgb(140,118,78),rgb(var(--cic-dia-ovulacion)));
border-color:rgba(255,255,255,.07);box-shadow:none}
.ciclo-d.f-lutea{background:linear-gradient(180deg,rgb(112,86,180),rgb(var(--cic-dia-lutea)));
border-color:rgba(255,255,255,.07)}
.ciclo-d.f-lutea_final{background:linear-gradient(180deg,rgb(40,74,142),rgb(var(--cic-dia-final)));
border-color:rgba(255,255,255,.07)}
/* Con la chapa llena, el numero tiene que ir en blanco o se pierde. */
.ciclo-d.f-menstrual,.ciclo-d.f-folicular,.ciclo-d.f-ovulacion,
.ciclo-d.f-lutea,.ciclo-d.f-lutea_final{color:#fff}
/* Y los puntos de la leyenda, con el mismo color que la chapa que explican: una
leyenda de otro color que lo que senala no es una leyenda. */
.ciclo-leyenda i.f-menstrual{background:rgb(168,74,116);box-shadow:none}
.ciclo-leyenda i.f-folicular{background:rgb(23,133,139);box-shadow:none}
.ciclo-leyenda i.f-ovulacion{background:rgb(176,148,86);box-shadow:none}
.ciclo-leyenda i.f-lutea{background:rgb(126,99,196);box-shadow:none}
.ciclo-leyenda i.f-lutea-fin{background:rgb(52,88,160);box-shadow:none;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}
/* La tarjeta de la fase de hoy: la raya de la izquierda pasa a ser una barra
con degradado, que es lo que da el relieve que el pide. */
.ciclo-hoy{position:relative;overflow:hidden;border-left:none}
.ciclo-hoy::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
border-radius:4px 0 0 4px;background:var(--grad-azul);opacity:.95}
.ciclo-hoy.fase-menstrual::after{background:linear-gradient(180deg,rgba(var(--cic-menstrual),1),rgba(var(--cic-menstrual),.45))}
.ciclo-hoy.fase-folicular::after{background:linear-gradient(180deg,rgba(var(--cic-folicular),1),rgba(var(--cic-folicular),.45))}
.ciclo-hoy.fase-ovulacion::after{background:linear-gradient(180deg,rgba(var(--cic-ovulacion),1),rgba(var(--cic-ovulacion),.45))}
.ciclo-hoy.fase-lutea::after,.ciclo-hoy.fase-lutea_final::after{
background:linear-gradient(180deg,rgba(var(--cic-lutea),1),rgba(var(--cic-lutea),.45))}
.ciclo-fase{letter-spacing:-.02em}
.ciclo-senal{background:rgba(var(--pri-rgb),.10);border-color:rgba(var(--pri-rgb),.26)}
/* Las fases en claro y en noche se quedan como estaban: el brillo de arriba
solo tiene sentido sobre fondo oscuro. */
[data-tema="claro"] .ciclo-d::after{display:none}
/* En la leyenda de energia hay un "Tu energia:" que NO es un color, y con forma
de pastilla parecia una opcion mas. Las pastillas son solo para lo que lleva
punto.
AQUI HABIA UN RETOQUE DEL AMBAR DE LA OVULACION que se ha quitado el
8-oct-2026. Decia que sobre el marino el ambar se iba a oliva y lo subia a
255,186,60. Resulta que en la maqueta que mando Miguel ese dia la ovulacion
ES oliva dorado (110,92,58 medido en su imagen), asi que el "arreglo" estaba
alejando el calendario de lo que el queria. El color bueno lo pone el bloque
de su maqueta, mas arriba. Se deja escrito para que no vuelva a "arreglarse".
El punto de la leyenda se mantiene mas claro que la chapa a proposito: a 10 px
el oliva oscuro no se distingue del fondo. */
.ciclo-leyenda span:not(:has(i)){background:none;border:none;padding:5px 0;
color:var(--texto-3)}
/* ===========================================================================
RUNNING: EL GPS ARRIBA, Y UN SELECTOR DE FICHERO QUE NO SEA DEL NAVEGADOR
Miguel, 7-oct-2026 (audio): *"en running arriba que te salga el gps primero,
antes de todo"* y *"es un archivo nada seleccionado, queda fatal asi"*.
=========================================================================== */
.ru-hero{
position:relative;overflow:hidden;margin:0 0 18px;padding:18px 16px 16px;
border-radius:var(--r-tarjeta,18px);border:1px solid rgba(var(--pri-rgb),.26);
background:
radial-gradient(120% 90% at 12% 0%, rgba(var(--pri-rgb),.22), transparent 62%),
linear-gradient(170deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
box-shadow:0 18px 40px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
}
.ru-hero::after{content:"";position:absolute;inset:0 0 auto;height:1px;
background:linear-gradient(90deg,transparent,rgba(var(--pri-rgb),.75),transparent)}
.ru-hero-cab{display:flex;gap:13px;align-items:flex-start;margin-bottom:14px}
.ru-hero-ico{flex:0 0 42px;height:42px;display:grid;place-items:center;border-radius:13px;
background:var(--grad-azul);box-shadow:0 0 18px rgba(var(--pri-rgb),.5)}
.ru-hero-ico svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round}
.ru-hero-et{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.ru-hero-sub{margin:3px 0 0;font-size:13px;line-height:1.45;color:var(--texto-2)}
/* EL MAPA DE DONDE ESTAS (8-oct-2026). Alto fijo y no proporcion: en un movil
estrecho una proporcion lo dejaba en una tira de 90 px donde no se reconoce
la calle, y en una tableta se comia media pantalla. */
.ru-mapa{position:relative;display:block;height:168px;margin:0 0 12px;border-radius:14px;
overflow:hidden;background:var(--n3);border:1px solid rgba(var(--pri-rgb),.22);
text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.ru-mapa canvas{display:block;width:100%;height:100%}
.ru-mapa-pie{position:absolute;left:0;right:0;bottom:0;padding:16px 12px 8px;
font-size:12px;line-height:1.35;color:#eaf0ff;
background:linear-gradient(transparent,rgba(5,9,20,.82))}
/* Mientras no hay posicion el mapa esta vacio: el aviso se centra para que no
quede una caja gris con un texto pegado abajo. */
.ru-mapa:not(.tiene) .ru-mapa-pie{top:0;display:grid;place-items:center;
text-align:center;padding:14px;background:none;color:var(--texto-2)}
@media (min-width:520px){.ru-mapa{height:200px}}
.ru-hero .btn-primary{margin:0}
.ru-hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ru-hero-chips a{
flex:1 1 auto;text-align:center;min-height:38px;display:inline-flex;
align-items:center;justify-content:center;padding:0 12px;border-radius:999px;
font-size:12.5px;font-weight:600;text-decoration:none;color:var(--azul-txt);
border:1px solid rgba(var(--pri-rgb),.24);background:rgba(var(--pri-rgb),.07);
transition:background var(--t), border-color var(--t)}
.ru-hero-chips a:active{background:rgba(var(--pri-rgb),.16);border-color:rgba(var(--pri-rgb),.45)}
/* El selector de fichero, vestido */
.subir-caja{display:flex;align-items:center;gap:11px;margin:4px 0 12px;
padding:9px 11px 9px 9px;border-radius:13px;cursor:pointer;
border:1px dashed rgba(var(--pri-rgb),.3);background:rgba(var(--pri-rgb),.05);
transition:border-color var(--t), background var(--t)}
.subir-caja:active{background:rgba(var(--pri-rgb),.1)}
.subir-caja.con-fichero{border-style:solid;border-color:rgba(var(--pri-rgb),.5);
background:rgba(var(--pri-rgb),.1)}
.subir-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.subir-boton{flex:none;min-height:36px;display:inline-flex;align-items:center;
padding:0 14px;border-radius:10px;font-size:13px;font-weight:650;color:#fff;
background:var(--grad-azul);box-shadow:0 4px 14px rgba(var(--pri-rgb),.35)}
.subir-nombre{font-size:12.5px;color:var(--texto-2);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.subir-caja.con-fichero .subir-nombre{color:var(--texto-1)}
/* El pulso dentro del corazon lleno: se recorta con el color del fondo de la
pastilla, que es como esta dibujado en su hoja de iconos. */
.navbaja a.on svg.relleno .hueco{fill:none;stroke:var(--pri-hondo);stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round}
/* ===========================================================================
LA REJILLA DE DEPORTES, CON PRESENCIA
El dibujo nuevo no se luce a 20 px dentro de un recuadro plano. Mismo
tratamiento que su hoja: la cara con un poco de luz, el icono mas grande, y
el elegido con brillo azul de verdad.
=========================================================================== */
.ac-tipo .ac-cara{
position:relative;border-radius:15px;padding:13px 7px 10px;
border:1px solid rgba(var(--pri-rgb),.16);
background:linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
transition:border-color var(--t), box-shadow var(--t), background var(--t)}
.ac-tipo .ac-ico svg{width:30px;height:30px;stroke-width:1.55}
.ac-tipo .ac-nom{font-size:11.5px;line-height:1.25}
.ac-tipo input:checked + .ac-cara{
border-color:rgba(var(--pri-rgb),.75);
background:linear-gradient(170deg,rgba(var(--pri-rgb),.26),rgba(var(--pri-rgb),.08));
box-shadow:0 0 0 1px rgba(var(--pri-rgb),.3), 0 8px 24px rgba(var(--pri-rgb),.3)}
.ac-tipo input:checked + .ac-cara .ac-ico svg{stroke:#fff;
filter:drop-shadow(0 0 7px rgba(var(--pri-rgb),.8))}
.ac-gtit{color:var(--azul-txt);opacity:.8;letter-spacing:.09em;text-transform:uppercase;
font-size:10.5px;font-weight:700}
/* ===========================================================================
PESO Y MEDIDAS
Miguel, 7-oct-2026 (audio): *"el recuadro esta fuera... recuadros demasiado
altos, la gente no se va a medir"*. Seis cajas de 48 px con la etiqueta
flotando encima son 400 px de formulario para escribir seis numeros. Aqui la
etiqueta y la unidad van DENTRO de la casilla y la casilla baja a 56 px de
alto total, las seis en dos columnas.
=========================================================================== */
.md-campos{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0 12px}
.md-campo{position:relative;display:block;margin:0 0 10px}
.md-campos .md-campo{margin:0}
.md-campo > span{position:absolute;top:7px;left:12px;font-size:10.5px;font-weight:650;
letter-spacing:.06em;text-transform:uppercase;color:var(--azul-txt);opacity:.75;
pointer-events:none}
.md-campo input{
width:100%;box-sizing:border-box;height:56px;padding:20px 38px 6px 11px;
font-size:16px;font-weight:600;border-radius:13px;
border:1px solid rgba(var(--pri-rgb),.2);background:rgba(255,255,255,.035);
color:var(--texto-1);font-family:inherit;
transition:border-color var(--t), box-shadow var(--t), background var(--t)}
.md-campo input:focus{outline:none;border-color:rgba(var(--pri-rgb),.75);
background:rgba(var(--pri-rgb),.08);box-shadow:0 0 0 3px rgba(var(--pri-rgb),.16)}
.md-campo i{position:absolute;right:12px;bottom:11px;font-style:normal;font-size:12px;
color:var(--texto-3)}
.md-campo.md-fecha input,.md-campo.md-nota input{padding-right:12px;font-weight:500}
.md-campo.md-nota input{font-size:14.5px}
/* ---------------------------------------------------------------------------
El dibujo de cada medida, y como se mide. Miguel, 8-oct-2026 (nota de voz):
*"cuando cliquen en la foto a la medida te explique como se mide cada cosa a
la cinta y todo"*.
LA CASILLA NO CRECE NI UN PIXEL: sigue en 56 px de alto, que es lo que se
acordo el 7-oct cuando dijo que los recuadros eran demasiado altos. El dibujo
se mete DENTRO del hueco que ya existia y lo unico que hace es empujar el
texto a la derecha. La explicacion se abre fuera de la rejilla, de una en una.
--------------------------------------------------------------------------- */
.vis-oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.md-con-ico{position:relative}
.md-con-ico > label{position:absolute;top:7px;left:57px;right:36px;margin:0;
pointer-events:none;z-index:1}
.md-con-ico > label > span{display:block;font-size:10.5px;font-weight:650;
letter-spacing:.06em;text-transform:uppercase;color:var(--azul-txt);opacity:.75;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-con-ico > input{padding-left:57px}
.md-ico{
position:absolute;left:7px;top:7px;width:42px;height:42px;padding:0;z-index:2;
border-radius:11px;border:1px solid rgba(var(--pri-rgb),.28);
background:rgba(var(--pri-rgb),.10);color:var(--azul-txt);
display:flex;align-items:center;justify-content:center;overflow:hidden;
cursor:pointer;-webkit-tap-highlight-color:transparent;
transition:border-color var(--t), box-shadow var(--t), transform var(--t)}
.md-ico img{width:100%;height:100%;object-fit:cover;display:block}
.md-ico .ic-m{width:21px;height:21px}
.md-ico:active{transform:scale(.94)}
.md-ico.activo{border-color:rgba(var(--pri-rgb),.85);
box-shadow:0 0 0 3px rgba(var(--pri-rgb),.18)}
.md-uni{position:absolute;right:12px;bottom:11px;font-style:normal;font-size:12px;
color:var(--texto-3);z-index:1;pointer-events:none}
.md-pista{margin:-4px 0 12px;font-size:12.5px;color:var(--texto-3)}
.md-ayuda{margin:0 0 14px;padding:13px 14px;border-radius:15px;
border:1px solid rgba(var(--pri-rgb),.3);
background:linear-gradient(170deg,rgba(var(--pri-rgb),.13),rgba(var(--pri-rgb),.04))}
.md-ayuda[hidden]{display:none}
.md-ayuda-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.md-ayuda-cab b{font-size:16px;letter-spacing:-.01em}
.md-ayuda-x{width:30px;height:30px;flex:none;padding:0;border:0;border-radius:9px;
background:rgba(255,255,255,.07);color:var(--texto-2);cursor:pointer;
display:flex;align-items:center;justify-content:center}
.md-ayuda-x .ic-m{width:13px;height:13px}
.md-ayuda-lista{margin:10px 0 0}
.md-ayuda-lista dt{font-size:10.5px;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;color:var(--azul-txt);opacity:.8;margin:9px 0 2px}
.md-ayuda-lista dt:first-child{margin-top:0}
.md-ayuda-lista dd{margin:0;font-size:13.5px;line-height:1.5;color:var(--texto-2)}
.md-ayuda-pie{margin:12px 0 0;padding-top:10px;font-size:12.5px;line-height:1.5;
color:var(--texto-3);border-top:1px solid rgba(255,255,255,.08)}
.md-foto{margin:4px 0 14px;padding:12px;border-radius:14px;
border:1px solid rgba(var(--pri-rgb),.14);background:rgba(var(--pri-rgb),.04)}
.md-foto-tit{margin:0 0 2px;font-size:14px;font-weight:650}
.md-foto-sub{margin:0 0 8px;font-size:12.5px;line-height:1.45}
/* Lo que ha cambiado, arriba del todo */
.md-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.md-dato{padding:11px 12px;border-radius:14px;
border:1px solid rgba(var(--pri-rgb),.16);
background:linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.012))}
.md-et{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;color:var(--azul-txt);opacity:.75}
.md-dato b{display:block;margin:2px 0 1px;font-size:21px;letter-spacing:-.02em}
.md-dato b small{margin-left:3px;font-size:12px;font-weight:600;color:var(--texto-3)}
.md-dif{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;
font-weight:700;background:rgba(255,255,255,.06);color:var(--texto-2)}
.md-dato.baja .md-dif{background:rgba(63,214,168,.16);color:#5FD9BE}
.md-dato.sube .md-dif{background:rgba(255,186,60,.16);color:#FFBA3C}
.md-desde{display:block;margin-top:5px;font-size:10.5px;color:var(--texto-3)}
/* Mes a mes */
.md-mes{border-bottom:1px solid var(--linea)}
.md-mes:last-of-type{border-bottom:none}
.md-mes > summary{display:flex;align-items:center;gap:9px;padding:13px 2px;
cursor:pointer;list-style:none}
.md-mes > summary::-webkit-details-marker{display:none}
.md-mes-tit{font-size:15px;font-weight:650}
.md-mes-cuenta{flex:1;font-size:11.5px;color:var(--texto-3)}
.md-flecha{width:17px;height:17px;flex:none;fill:none;stroke:var(--azul-txt);
stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
transition:transform var(--t)}
.md-mes[open] .md-flecha{transform:rotate(180deg)}
.md-tira{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.md-foto-min{position:relative;flex:0 0 92px;scroll-snap-align:start;
border-radius:12px;overflow:hidden;text-decoration:none;
border:1px solid rgba(var(--pri-rgb),.2)}
.md-foto-min img{display:block;width:92px;height:122px;object-fit:cover}
.md-foto-min span{position:absolute;left:0;right:0;bottom:0;padding:4px 6px;
font-size:10.5px;font-weight:650;color:#fff;
background:linear-gradient(0deg,rgba(0,0,0,.72),transparent)}
.md-lista{list-style:none;margin:0;padding:0 0 10px}
.md-lista li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;
border-bottom:1px solid rgba(var(--pri-rgb),.08)}
.md-lista li:last-child{border-bottom:none}
.md-dia{flex:0 0 30px;height:30px;display:grid;place-items:center;border-radius:9px;
font-size:12.5px;font-weight:700;color:var(--azul-txt);
background:rgba(var(--pri-rgb),.1);border:1px solid rgba(var(--pri-rgb),.16)}
.md-fila b{display:block;font-size:15px}
.md-fila small{display:block;font-size:12px;color:var(--texto-2);margin-top:1px}
.md-nota-txt{display:block;margin-top:3px;font-size:12px;color:var(--texto-3);font-style:italic}
/* ===========================================================================
FUERA EL ORO, HASTA EL ULTIMO
Miguel, 7-oct-2026 (audio), hablando de peso y medidas: *"no esa linea
dorada que queda fatal"*.
El oro no estaba solo en esa linea: vivia en tres piezas del sistema
(`--gold`, el `--ok` del tema de noche y el `--marca` del saludo del panel),
asi que quitarlo de una pantalla lo dejaba asomando en las demas. Se cambia
en el token, que es donde se arregla una vez.
=========================================================================== */
:root{
--gold:#5B92FF;
--marca:#2F6BFF;
}
/* En el tema de noche el "hecho" era dorado. Pasa a verde agua: sigue
leyendose como logrado y no mete un color de otra familia. */
[data-tema="noche"]{--ok:#3FD6A8}
.range-field input[type=range]{accent-color:var(--primario)}
/* El saludo del panel llevaba el oro escrito dentro de la plantilla, no en un
token, asi que hay que pisarlo aqui tambien. */
/* ===========================================================================
ENTRENAR: LOS DIAS SE PLIEGAN Y SE DESLIZAN, Y LA TIRA SE TOCA
Miguel, 7-oct-2026 (audio).
El deslizamiento se hace con `grid-template-rows` de 0fr a 1fr, que es la
unica forma de animar "hasta el alto que tenga" sin JavaScript y sin tener
que fijar una altura a mano (que se rompe en cuanto un dia tiene 9
ejercicios en vez de 5).
=========================================================================== */
details.dia{overflow:hidden}
details.dia > summary{display:flex;align-items:center;gap:10px;cursor:pointer;
list-style:none}
details.dia > summary::-webkit-details-marker{display:none}
details.dia .dia-tit{flex:1;min-width:0}
.dia-flecha{width:19px;height:19px;flex:none;fill:none;stroke:var(--azul-txt);
stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
transition:transform .28s cubic-bezier(.4,0,.2,1)}
details.dia[open] .dia-flecha{transform:rotate(180deg)}
.dia-cuerpo{display:grid;grid-template-rows:0fr;
transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1)}
details.dia[open] .dia-cuerpo{grid-template-rows:1fr}
.dia-cuerpo > div{overflow:hidden;min-height:0}
@media (prefers-reduced-motion: reduce){
.dia-cuerpo,.dia-flecha{transition:none}
}
/* La tira de los siete dias, ahora clicable de verdad */
.sc-toca{display:flex;flex-direction:column;align-items:center;gap:2px;
width:100%;padding:7px 0 6px;border-radius:12px;text-decoration:none;
color:inherit;transition:background var(--t), box-shadow var(--t)}
.sc-toca:active{background:rgba(var(--pri-rgb),.16)}
/* UN SOLO recuadro en el dia de hoy. Miguel, 8-oct: "en el calendario sale un
doble recuadro en la semana". Eran dos de verdad: `.sc-dia` ya lleva su
borde (ds.css) y aqui se le anadia encima un anillo interior, asi que el dia
seleccionado salia con dos marcos uno dentro de otro. Se queda el borde de
fuera, que es el que lleva la forma, y aqui solo el fondo. */
.sc-dia.hoy .sc-toca{background:rgba(var(--pri-rgb),.14)}
.sc-fila:target{background:rgba(var(--pri-rgb),.12);border-radius:12px;
box-shadow:inset 0 0 0 1px rgba(var(--pri-rgb),.35)}
/* LA M, EN UN SOLO SITIO.
Miguel, 7-oct (audio): *"me gusta mucho el logo M y demas, pero lo que quiero
que la M sea al final de toda la pantalla o sola arriba, el otro no"*. En
Entrenar salia DOS veces: detras del calendario de la semana y otra vez
detras de la tarjeta de hoy. Se queda la de arriba. */
.dia.es-hoy::before{display:none}
/* La marca de agua estaba calibrada sobre el marino de antes. Sobre el fondo
nuevo, mas oscuro, el mismo 8,5% de blanco deja de ser un halo y se ve como
una mancha angular encima de los numeros de la semana. Baja a 5% y se sube un
poco, que es donde vuelve a leerse como el logo detras y no como un dibujo. */
.sem-card.sem-cal::before,.sem-card:not(.sem-cal)::before{opacity:.05;top:-6px}
/* ===================================================================
PAUSAR Y TERMINAR, SIEMPRE A MANO
Miguel, 7-oct-2026 (audio): "poder pausar en todo momento el entreno
que has hecho, o si esta en inicio poner que he terminado, no solo
que continuar".
Las dos acciones van dentro de la barra de arriba del entreno, que es
lo unico que se ve sin hacer scroll cuando estas cargando una serie.
Terminar baja al formulario de siempre (#fin), no cierra nada por
sorpresa: lo que se gana es no tener que bajar nueve ejercicios para
encontrarlo.
=================================================================== */
.ses-acciones{
display:flex; gap:8px; margin-top:12px;
}
.ses-acciones form{ flex:1 1 0; min-width:0; margin:0 }
.ses-accion{
flex:1 1 0; min-width:0; width:100%;
display:inline-flex; align-items:center; justify-content:center; gap:7px;
padding:10px 12px; border-radius:12px;
font-size:13.5px; font-weight:600; line-height:1; letter-spacing:.01em;
color:var(--texto); text-decoration:none; cursor:pointer;
background:var(--glass-2);
border:1px solid var(--linea-fuerte);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
transition:transform .12s ease, border-color .18s ease, box-shadow .18s ease;
}
.ses-accion:active{ transform:scale(.97) }
.ses-accion svg{
width:16px; height:16px; flex:none;
fill:none; stroke:currentColor; stroke-width:2.2;
stroke-linecap:round; stroke-linejoin:round;
}
.ses-accion svg .lleno{ fill:currentColor; stroke:none }
/* Terminar es la accion que cierra, asi que lleva el azul de la marca.
Pausar se queda en gris: es reversible y no es lo que mas se pulsa. */
.ses-accion.fin{
color:#fff;
background:linear-gradient(180deg, var(--marca,#2F6BFF), color-mix(in srgb, var(--marca,#2F6BFF) 82%, #000));
border-color:color-mix(in srgb, var(--marca,#2F6BFF) 55%, transparent);
box-shadow:0 6px 18px -8px color-mix(in srgb, var(--marca,#2F6BFF) 70%, transparent);
}
.ses-accion.fin:hover{ box-shadow:0 8px 22px -8px color-mix(in srgb, var(--marca,#2F6BFF) 85%, transparent) }
/* Al llegar por #fin, que se vea cual es la tarjeta a la que has bajado. */
.fin-form{ scroll-margin-top:16px }
.fin-form:target .fin-card{
border-color:color-mix(in srgb, var(--marca,#2F6BFF) 60%, transparent);
box-shadow:0 0 0 1px color-mix(in srgb, var(--marca,#2F6BFF) 35%, transparent),
0 14px 40px -18px color-mix(in srgb, var(--marca,#2F6BFF) 80%, transparent);
}
/* Las dos salidas de un entreno a medias, en Inicio. Mitad y mitad para que
ninguna parezca la principal: la principal sigue siendo Continuar. */
.hoy-dos{ display:flex; gap:8px; margin-top:8px }
.hoy-dos > *{ flex:1 1 0; min-width:0; margin:0 }
.hoy-dos .btn{ width:100%; padding:10px 8px; font-size:13.5px }
/* ===================================================================
QUE ES CADA COLOR (calendario del mes)
Miguel, 7-oct (audio): "que explique mejor cada color del mes".
Cada fila: punto de color, que es, de donde sale, y cuantos este mes.
Lo que no tienes ninguna vez se queda apagado a proposito: asi la
leyenda tambien dice lo que te falta.
=================================================================== */
.leyenda{ list-style:none; margin:0; padding:0; display:grid; gap:2px }
.leyenda li{
display:grid; grid-template-columns:10px 1fr auto; align-items:start;
gap:11px; padding:10px 2px; font-size:14px; line-height:1.35;
border-bottom:1px solid var(--linea);
}
.leyenda li:last-of-type{ border-bottom:0 }
/* OJO: aqui NO se pone box-shadow. Dos de los siete colores (el entreno que
te toca y la foto) son un ARO hueco hecho con un box-shadow interior, asi
que poner aqui un brillo se los borraba y salian invisibles. Medido: los
puntos de 'plan' y 'foto' daban fondo transparente y no se veia nada.
La leyenda tiene que pintar el punto EXACTAMENTE igual que el calendario,
asi que se le deja su propio estilo y solo se le da el tamano. */
.leyenda li > i{
width:10px; height:10px; border-radius:50%; margin-top:5px; flex:none;
}
.ley-txt{ min-width:0 }
.ley-txt b{ display:block; font-weight:650; color:var(--texto) }
.ley-txt span{ display:block; margin-top:2px; font-size:12.5px; color:var(--texto-2); opacity:.86 }
.ley-n{
font-style:normal; font-weight:700; font-size:14px; font-variant-numeric:tabular-nums;
color:var(--texto); min-width:22px; text-align:right; padding-top:1px;
}
.leyenda li.vacio{ opacity:.52 }
.leyenda li.vacio .ley-n{ color:var(--texto-3); font-weight:600 }
.ley-pie{ margin:12px 0 0; font-size:12px }
/* ===================================================================
MOVER LOS DIAS DE SITIO
Miguel, 7-oct (audio): "poder mover esos recuadros para cambiar el
orden de los dias". Dos flechas pequenas en la cabecera de cada
recuadro. Discretas a proposito: lo que mas se pulsa ahi es abrir el
dia, no moverlo, asi que no pueden competir con eso.
=================================================================== */
.dia-mov{ display:inline-flex; gap:4px; margin-left:auto; flex:none }
.dia-mov button{
width:30px; height:30px; padding:0; display:grid; place-items:center;
border-radius:9px; cursor:pointer;
background:var(--glass-2); border:1px solid var(--linea);
color:var(--texto-2);
transition:color .15s ease, border-color .15s ease, transform .12s ease;
}
.dia-mov button:hover{ color:var(--texto); border-color:var(--linea-fuerte) }
.dia-mov button:active{ transform:scale(.9) }
.dia-mov svg{
width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4;
stroke-linecap:round; stroke-linejoin:round;
}
/* La chapa de Hecho/En marcha ya empujaba a la derecha; con las flechas
delante, la que tiene que empujar es la primera de las dos. */
.dia-cab .dia-chapa{ margin-left:auto }
.dia-cab .dia-chapa + .dia-mov{ margin-left:8px }
.dia-etq small{
display:block; margin-top:3px; font-size:12px; font-weight:500;
color:var(--texto-3); letter-spacing:0;
}
/* ===================================================================
CALENTAR Y ESTIRAR: su propia pantalla
Miguel, 7-oct (audio): "calentamiento, movilidad y estiramientos
tambien en Entrenar y en Salud". Antes solo vivian dentro de un
entreno abierto, asi que para estirar un domingo habia que abrir un
entreno que no ibas a hacer.
=================================================================== */
/* El acceso desde Entrenar */
.mv-acceso{
display:flex; align-items:center; gap:13px; text-decoration:none;
color:var(--texto); margin-bottom:14px;
}
.mv-acceso:active{ transform:scale(.995) }
.mv-ico{
width:42px; height:42px; flex:none; display:grid; place-items:center;
border-radius:13px;
background:linear-gradient(145deg, rgba(var(--pri-rgb),.26), rgba(var(--pri-rgb),.10));
box-shadow:inset 0 0 0 1px rgba(var(--pri-rgb),.34);
}
.mv-ico svg{
width:23px; height:23px; fill:none; stroke:var(--azul-txt); stroke-width:1.9;
stroke-linecap:round; stroke-linejoin:round;
}
.mv-txt{ min-width:0; flex:1 1 auto }
.mv-txt b{ display:block; font-size:15.5px; font-weight:650 }
.mv-txt small{ display:block; margin-top:2px; font-size:12.5px; color:var(--texto-2); opacity:.86 }
.mv-mas{
width:18px; height:18px; flex:none; fill:none; stroke:var(--texto-3);
stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}
/* Los atajos de arriba de la pantalla. Seis bloques con fotos dentro son
mucho scroll: con esto se salta al que buscas. */
.mv-atajos{
display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px;
scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.mv-atajos::-webkit-scrollbar{ display:none }
.mv-atajos a{
flex:none; padding:8px 14px; border-radius:999px; text-decoration:none;
font-size:13px; font-weight:600; color:var(--texto-2);
background:var(--glass-2); border:1px solid var(--linea);
transition:color .15s ease, border-color .15s ease;
}
.mv-atajos a:hover{ color:var(--texto); border-color:var(--linea-fuerte) }
/* Al saltar a un bloque, que no quede pegado al borde de arriba. */
.mv-grupo{ scroll-margin-top:14px }
.mv-pie{ margin-top:6px }
.mv-cuando{ list-style:none; margin:0; padding:0; display:grid; gap:11px }
.mv-cuando li{
padding-left:13px; border-left:2px solid rgba(var(--pri-rgb),.45);
font-size:14px; line-height:1.4;
}
.mv-cuando b{ display:block; font-weight:650 }
.mv-cuando span{ display:block; margin-top:2px; font-size:12.5px; color:var(--texto-2); opacity:.88 }
/* ===================================================================
SUENO Y PASOS (Salud)
Miguel, 7-oct (audio): "en salud, las horas que has dormido y los
pasos diarios, si estan conectados".
Dos columnas con el dato de hoy, la media de la semana y los siete
dias en barras. Las barras son con la altura en el estilo: sin
JavaScript, asi que si algo falla el numero sigue estando.
=================================================================== */
.vida{ margin-bottom:14px }
.vida-dos{
display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.vida-col{ min-width:0 }
.vida-et{
display:flex; align-items:center; gap:6px;
font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
color:var(--texto-3);
}
.vida-et svg,
.vida-et .ic-m{
width:14px; height:14px; flex:none; fill:currentColor; stroke:none;
}
.vida-col > b{
display:block; margin:6px 0 1px;
font-size:27px; font-weight:700; line-height:1.05; letter-spacing:-.02em;
color:var(--texto); font-variant-numeric:tabular-nums;
}
.vida-col > b i{ font-style:normal; font-size:15px; font-weight:600; color:var(--texto-3); margin-left:2px }
.vida-col > b.flojo{ color:var(--texto-3) }
.vida-col > small{
display:block; font-size:11.5px; line-height:1.35; color:var(--texto-2); opacity:.86;
min-height:31px;
}
.vida-barras{
display:grid; grid-template-columns:repeat(7,1fr); gap:4px;
align-items:end; height:40px; margin-top:9px;
}
.vida-barras i{
display:block; border-radius:3px 3px 1px 1px; min-height:3px;
background:linear-gradient(180deg, rgba(var(--pri-rgb),.95), rgba(var(--pri-rgb),.45));
}
.vida-barras.pasos i{
background:linear-gradient(180deg, rgba(61,214,140,.95), rgba(61,214,140,.42));
}
/* Un dia sin dato NO se pinta como un cero: un cero dice "no anduviste" y la
verdad es "no lo sabemos". Se queda como una marca apagada. */
.vida-barras i.vacia{
background:var(--linea); min-height:3px; height:3px !important;
}
/* Un dia que todavia no ha llegado NO es un dia perdido: se insinua con el
contorno y nada mas. Si no, un lunes la semana entera parece una semana
mala, que es justo lo contrario de lo que cuenta. */
.vida-barras i.futuro{ background:transparent; box-shadow:inset 0 0 0 1px var(--linea) }
.vida-dias span.futuro{ opacity:.45 }
.vida-barras i.hoy{ box-shadow:0 0 0 1px rgba(255,255,255,.22) }
.vida-dias{
display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:5px;
font-size:10px; text-align:center; color:var(--texto-3);
}
.vida-dias span.hoy{ color:var(--texto); font-weight:700 }
.vida-conectar{ margin-top:14px }
/* En pantallas muy estrechas, las dos columnas aprietan los numeros. */
@media (max-width:359px){
.vida-dos{ grid-template-columns:1fr; gap:18px }
.vida-col > small{ min-height:0 }
}
/* ===================================================================
TEST DE RM (Progreso)
Miguel, 7-oct (audio): "el test de RM, que al meter los datos se
queden ahi siempre y la app calcule los tests".
Lo que manda visualmente es la TABLA DE PESOS, no el formulario: el
formulario se usa una vez al mes y la tabla se mira cada semana.
=================================================================== */
.rm-intro{ font-size:13.5px; line-height:1.45; margin:0 0 14px }
.rm-sin{
margin:0 0 14px; padding:13px; border-radius:13px; font-size:13.5px;
color:var(--texto-2); background:var(--glass-2);
border:1px dashed var(--linea-fuerte);
}
.rm-tablas{ display:grid; gap:11px; margin-bottom:14px }
.rm-t{
padding:13px; border-radius:15px;
background:linear-gradient(160deg, rgba(var(--pri-rgb),.13), rgba(var(--pri-rgb),.04));
border:1px solid rgba(var(--pri-rgb),.26);
}
.rm-t-cab{ display:flex; align-items:baseline; gap:10px; margin-bottom:11px }
.rm-t-cab b{ font-size:15px; font-weight:650; min-width:0; flex:1 1 auto }
.rm-max{
flex:none; font-size:16px; font-weight:700; color:var(--azul-txt);
font-variant-numeric:tabular-nums;
}
.rm-max i{
display:block; font-style:normal; font-size:10px; font-weight:600;
letter-spacing:.04em; text-transform:uppercase; color:var(--texto-3);
text-align:right; margin-top:1px;
}
/* Seis pesos en fila. Se deslizan de lado en el movil en vez de apretarse:
un numero de kilos partido en dos lineas no se lee. */
.rm-pesos{
display:grid; grid-template-columns:repeat(6,1fr); gap:5px;
}
.rm-pesos span{
display:block; padding:8px 2px; border-radius:10px; text-align:center;
background:var(--glass-2); border:1px solid var(--linea);
}
.rm-pesos b{
display:block; font-size:14.5px; font-weight:700; line-height:1.1;
font-variant-numeric:tabular-nums;
}
.rm-pesos i{
display:block; font-style:normal; font-size:9.5px; margin-top:2px;
color:var(--texto-3); white-space:nowrap;
}
/* El porcentaje del maximo, debajo de las reps. Mas pequeno y en el azul de la
app: es el dato que explica el peso, no compite con el. */
.rm-pesos .rm-pct{
display:block; font-style:normal; font-size:9.5px; margin-top:3px;
font-weight:700; color:var(--azul-txt); font-variant-numeric:tabular-nums;
}
.rm-pie{ display:block; margin-top:9px; font-size:11.5px; color:var(--texto-3); line-height:1.4 }
/* La explicacion de la tabla, una sola vez debajo de todos los bloques. */
.rm-leyenda{ margin:12px 0 0; font-size:12px; line-height:1.5; color:var(--texto-3) }
.rm-leyenda b{ color:var(--texto-2) }
/* El formulario */
.rm-form > summary, .rm-hist > summary{
cursor:pointer; padding:11px 0; font-size:14px; font-weight:650;
color:var(--azul-txt); list-style:none;
}
.rm-form > summary::-webkit-details-marker,
.rm-hist > summary::-webkit-details-marker{ display:none }
.rm-form > summary::after, .rm-hist > summary::after{ content:' ›'; opacity:.6 }
.rm-form[open] > summary::after, .rm-hist[open] > summary::after{ content:' ⌄' }
.rm-tres{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:8px }
.rm-l{ display:block; position:relative; margin-bottom:10px }
.rm-l > span{
display:block; margin-bottom:5px; font-size:11.5px; font-weight:600;
letter-spacing:.02em; text-transform:uppercase; color:var(--texto-3);
}
.rm-l input{
width:100%; box-sizing:border-box; padding:11px 12px; border-radius:11px;
font-size:15.5px; color:var(--texto); background:var(--n2);
border:1px solid var(--linea); -webkit-appearance:none; appearance:none;
}
.rm-l input:focus{
outline:none; border-color:rgba(var(--pri-rgb),.6);
box-shadow:0 0 0 3px rgba(var(--pri-rgb),.16);
}
.rm-l > em{
position:absolute; right:11px; bottom:12px; font-style:normal;
font-size:12.5px; color:var(--texto-3); pointer-events:none;
}
.rm-nota{ margin:2px 0 13px; font-size:11.5px; line-height:1.45; color:var(--texto-3) }
/* El historial */
.rm-lista{ list-style:none; margin:0; padding:0; display:grid; gap:2px }
.rm-lista li{
display:flex; align-items:center; gap:10px; padding:10px 0;
border-bottom:1px solid var(--linea);
}
.rm-lista li:last-child{ border-bottom:0 }
.rm-li-txt{ flex:1 1 auto; min-width:0 }
.rm-li-txt b{ display:block; font-size:14px; font-weight:600 }
.rm-li-txt small{ display:block; margin-top:1px; font-size:12px; color:var(--texto-3) }
.rm-li-max{
flex:none; font-size:13.5px; font-weight:700; color:var(--azul-txt);
font-variant-numeric:tabular-nums;
}
.rm-lista form{ margin:0; flex:none }
.rm-lista form button{
width:28px; height:28px; padding:0; display:grid; place-items:center;
border-radius:8px; cursor:pointer; background:transparent;
border:1px solid var(--linea); color:var(--texto-3);
}
.rm-lista form button:hover{ color:var(--peligro); border-color:var(--peligro) }
.rm-lista form svg{
width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2;
stroke-linecap:round;
}
@media (max-width:359px){
.rm-pesos{ grid-template-columns:repeat(3,1fr) }
}
/* ===================================================================
COMPARTIR Y BAJAR EL GPX (una actividad)
Miguel, 7-oct (audio): "poder compartirlo y exportarlo tipo Strava,
el gpx". Dos botones a la misma altura: ninguno de los dos es mas
importante que el otro.
=================================================================== */
.av-compartir{ display:flex; gap:9px; margin:16px 0 8px }
.av-compartir > *{
flex:1 1 0; min-width:0; display:inline-flex; align-items:center;
justify-content:center; gap:7px; padding:11px 10px; font-size:14px;
text-decoration:none;
}
.av-compartir svg{
width:16px; height:16px; flex:none; fill:none; stroke:currentColor;
stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;
}
.av-gpx-pie{ margin:0 0 4px; font-size:12px; line-height:1.45; color:var(--texto-3) }
/* ===================================================================
APARECER AL DESLIZAR, como en su web
Miguel, 7-oct (audio): "coge los efectos al deslizar de la pagina
web". Mismos numeros que su web, no parecidos: 28 px, 0,8 s y la
curva cubic-bezier(.16,1,.3,1).
OJO: la regla que esconde cuelga de `html.con-aparecer`, y esa clase
la pone el JavaScript. Si el script no carga, no se esconde nada. Si
estuviera aqui suelta, un fallo del script dejaria la pantalla en
blanco, que es muchisimo peor que no tener animacion.
=================================================================== */
/* LO QUE ROMPIA EL EFECTO ENTERO, encontrado el 8-oct-2026.
`ds.css` ya tenia una clase `.aparece` de antes, con SU animacion de entrada
(`apar`, 8 px, al cargar y no al deslizar). Una animacion CSS gana a una
declaracion normal, asi que ese `apar` se comia el `opacity:0` de aqui y la
tarjeta aparecia sola al cargar la pagina: el efecto al deslizar estaba
puesto y no se veia nunca. Medido en su app: el elemento llegaba con
`CSSAnimation:apar` corriendo y opacidad 1 aunque no tuviera `dentro`.
Se apaga aqui y solo cuando el sistema nuevo esta encendido, asi que si el
JavaScript no carga, la entrada de antes sigue funcionando igual. */
.con-aparecer .aparece,
.con-aparecer .aparece-tanda{animation:none}
.con-aparecer .aparece{
opacity:0; transform:translateY(28px);
transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.con-aparecer .aparece-tanda{
opacity:0; transform:translateY(20px);
transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.con-aparecer .aparece.dentro,
.con-aparecer .aparece-tanda.dentro{ opacity:1; transform:none }
/* Quien pide menos movimiento no ve ninguno, pase lo que pase. */
@media (prefers-reduced-motion: reduce){
.con-aparecer .aparece,
.con-aparecer .aparece-tanda{ opacity:1 !important; transform:none !important; transition:none }
}
/* ===================================================================
CONSTRUYE TU PLATO (interactivo)
Miguel, 7-oct (audio): "en salud, construye tu plato, que sea
interactivo, con los efectos al deslizar de la pagina web".
El plato se llena de verdad al tocar los alimentos. Lo que manda es
el plato: ocupa la primera pantalla entera y las fichas van debajo.
=================================================================== */
.pl-card{ text-align:center }
.pl-plato{
position:relative; width:208px; height:208px; margin:4px auto 18px;
border-radius:50%;
background:
radial-gradient(circle at 50% 42%, rgba(255,255,255,.07), transparent 62%),
var(--n2);
box-shadow:inset 0 0 0 1px var(--linea-fuerte),
inset 0 10px 28px rgba(0,0,0,.42),
0 18px 40px -22px rgba(0,0,0,.8);
}
/* El aro de fuera es el borde del plato: sin el, el circulo parece un grafico
de tarta y no un plato. */
.pl-aro{
position:absolute; inset:9px; border-radius:50%;
box-shadow:inset 0 0 0 1px var(--linea);
pointer-events:none;
}
.pl-relleno{
position:absolute; inset:20px; border-radius:50%;
transition:background .45s cubic-bezier(.16,1,.3,1);
-webkit-mask:radial-gradient(circle, transparent 29%, #000 30%);
mask:radial-gradient(circle, transparent 29%, #000 30%);
}
.pl-centro{
position:absolute; inset:0; display:grid; place-content:center; gap:1px;
pointer-events:none;
}
.pl-centro b{
font-size:34px; font-weight:700; line-height:1; letter-spacing:-.02em;
font-variant-numeric:tabular-nums; color:var(--texto);
}
.pl-centro span{ font-size:11.5px; color:var(--texto-3) }
.pl-veredicto{
margin:0 0 16px; font-size:14px; line-height:1.45; min-height:40px;
color:var(--texto-2);
}
.pl-veredicto.ok{ color:var(--ok); font-weight:600 }
.pl-veredicto.ajusta{ color:var(--texto) }
.pl-barras{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:11px; text-align:left }
.pl-b-cab{ display:flex; align-items:center; gap:8px; font-size:13.5px; margin-bottom:5px }
.pl-punto{ width:9px; height:9px; border-radius:50%; flex:none }
.pl-b-cab b{ flex:1 1 auto; font-weight:600; min-width:0 }
.pl-b-cab em{
flex:none; font-style:normal; font-weight:700; font-variant-numeric:tabular-nums;
color:var(--texto);
}
.pl-b-cab em s{
text-decoration:none; font-weight:500; font-size:11.5px; color:var(--texto-3);
margin-left:3px;
}
.pl-pista{
position:relative; display:block; height:7px; border-radius:4px;
background:var(--n1); box-shadow:inset 0 0 0 1px var(--linea); overflow:visible;
}
.pl-pista i{
display:block; height:100%; border-radius:4px;
transition:width .35s cubic-bezier(.16,1,.3,1);
}
/* La marca de donde tendria que llegar. Sin esto, la barra sube pero no dices
respecto a que. */
.pl-pista u{
position:absolute; top:-3px; width:2px; height:13px; border-radius:2px;
background:var(--texto-2); opacity:.55; transform:translateX(-1px);
}
.pl-barras li.bien .pl-b-cab em{ color:var(--ok) }
.pl-barras li.sobra .pl-b-cab em{ color:var(--aviso) }
.pl-vaciar{ margin-top:2px }
/* Los grupos y sus fichas */
.pl-grupo{ margin-bottom:14px }
.pl-g-cab{ display:flex; align-items:center; gap:11px; margin-bottom:13px }
.pl-g-foto{
width:44px; height:44px; flex:none; border-radius:12px; object-fit:cover;
box-shadow:inset 0 0 0 1px var(--linea);
}
.pl-g-cab small{ display:block; margin-top:2px; font-size:12px; color:var(--texto-3) }
.pl-comidas{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px }
.pl-com{
position:relative; padding:0 0 8px; border-radius:14px; cursor:pointer;
background:var(--glass-2); border:1px solid var(--linea); color:var(--texto);
overflow:hidden; text-align:center;
transition:border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.pl-com:active{ transform:scale(.95) }
.pl-com img{
display:block; width:100%; aspect-ratio:1/1; object-fit:cover; margin-bottom:6px;
}
.pl-com span{ display:block; font-size:11.5px; font-weight:600; line-height:1.2; padding:0 4px }
.pl-com.puesto{
border-color:rgba(var(--pri-rgb),.75);
box-shadow:0 0 0 1px rgba(var(--pri-rgb),.45), 0 0 22px -8px rgba(var(--pri-rgb),.8);
}
/* La cuenta es tambien el boton de quitar: se toca y resta. */
.pl-cuenta{
position:absolute; top:6px; right:6px; min-width:21px; height:21px; padding:0 5px;
display:grid; place-items:center; border-radius:999px; cursor:pointer;
font-style:normal; font-size:12px; font-weight:700; color:#fff;
background:var(--marca,#2F6BFF); box-shadow:0 2px 8px rgba(0,0,0,.45);
}
@media (max-width:359px){
.pl-comidas{ grid-template-columns:repeat(2,1fr) }
.pl-plato{ width:180px; height:180px }
}
/* Los habitos, escritos dentro de la app en vez de en un PDF
(Miguel, 7-oct: "que lo que hay dentro este escrito en la app"). */
.hb-guia{ margin-bottom:14px }
.hb-lista{ list-style:none; margin:0; padding:0; display:grid; gap:13px }
.hb-lista li{ display:flex; gap:11px; align-items:flex-start }
.hb-marca{
width:24px; height:24px; flex:none; margin-top:1px; display:grid; place-items:center;
border-radius:8px;
background:linear-gradient(145deg, rgba(var(--pri-rgb),.3), rgba(var(--pri-rgb),.1));
box-shadow:inset 0 0 0 1px rgba(var(--pri-rgb),.35);
}
.hb-marca svg{
width:14px; height:14px; fill:none; stroke:var(--azul-txt); stroke-width:2.4;
stroke-linecap:round; stroke-linejoin:round;
}
.hb-lista b{ display:block; font-size:14.5px; font-weight:650 }
.hb-lista span{ display:block; margin-top:2px; font-size:13px; line-height:1.45; color:var(--texto-2); opacity:.9 }
/* Un hueco sin dato se dice con palabras, no con un numero enorme ni con un
guion largo (Miguel: nada de guiones largos en nada que salga fuera). */
.vida-col b.vida-nada{ font-size:15px; letter-spacing:0; line-height:1.3; }
/* ---------------------------------------------------------------------------
LOS ICONOS DE LA BARRA SON LOS DE SU HOJA (8-oct-2026)
Miguel: "quiero que sea como en la foto, no son iguales". Van como MASCARA
y no como , para que el color, el apagado/encendido y el brillo los
siga poniendo el CSS. Si manana cambia el azul, cambian con el.
--------------------------------------------------------------------------- */
.navbaja a .nv-ico{
width:23px;height:23px;display:block;
background:currentColor;
-webkit-mask:var(--m) center/contain no-repeat;
mask:var(--m) center/contain no-repeat;
transition:filter var(--t), transform var(--t);
}
.navbaja a.on .nv-ico{
filter:drop-shadow(0 0 7px rgba(var(--pri-rgb),.75));
}
/* Mover un ejercicio de sitio, dentro de la pantalla de preparar el entreno.
Mismo gesto y mismo dibujo que las flechas de los dias (8-oct-2026). */
.pr-lista li{display:flex;align-items:center;gap:6px}
.pr-lista li .pr-fila{flex:1;min-width:0}
.pr-mov{display:flex;flex-direction:column;gap:3px;flex:0 0 auto}
.pr-mov button{appearance:none;background:transparent;cursor:pointer;
border:1px solid rgba(var(--pri-rgb),.30);border-radius:9px;
width:30px;height:25px;display:grid;place-items:center;color:var(--texto-2);
transition:background var(--t), border-color var(--t)}
.pr-mov button:active{background:rgba(var(--pri-rgb),.18);
border-color:rgba(var(--pri-rgb),.6)}
.pr-mov svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
stroke-linecap:round;stroke-linejoin:round}
/* ============================================================================
LOS TRES TEMAS, NO SOLO EL OSCURO
Miguel, 8-oct-2026: *"extrapola todo a tanto modo azul como modo blanco"*.
QUE PASABA. Esta hoja redefinia los TOKENS solo para el tema oscuro, y eso
estaba bien: en claro y en noche mandan los tokens de `ds.css`, que ganan por
especificidad. Lo que no estaba bien son las reglas de COMPONENTE: un
`background:rgba(16,28,58,.72)` escrito a pelo se pinta en los tres temas.
Medido el 8-oct en su app, en modo claro: 6 elementos oscuros sobre fondo
blanco en Inicio, 6 en Running y 2 en Salud. Los botones «He terminado»,
«Pausar» y «Que mi movil mande los pasos» salian gris marengo sobre blanco, y
la barra de abajo se quedaba azul noche con la pantalla en blanco.
COMO SE ARREGLA. Esas 11 reglas ya no llevan el color dentro: llevan un token
de superficie. Aqui se le da valor tres veces, una por tema. Los valores del
tema oscuro son EXACTAMENTE los que habia, asi que el modo que el aprobo
ayer no cambia ni un pixel.
LA EXCEPCION, a proposito: la portada (`.splash-*`) se queda azul profunda en
los tres temas. Es su marca, es la imagen que el mando de referencia, y una
portada blanca con la M no es lo que pidio. Si la quiere clara, se cambia.
============================================================================ */
/* ---- tema oscuro (el de siempre): los mismos valores que ya tenia ---- */
:root{
--sup-html:#060A17;
--sup:rgba(16,28,58,.72);
--sup-alta:rgba(26,43,85,.82);
--sup-suave:rgba(16,28,58,.62);
--sup-campo:rgba(6,10,23,.70);
--sup-campo-on:rgba(10,18,38,.86);
--sup-nav:rgba(6,10,23,.78);
--sup-cab:rgba(6,10,23,.74);
--sup-fila:linear-gradient(180deg,rgba(16,28,58,.72),rgba(10,18,38,.72));
--sup-fila-alta:linear-gradient(180deg,rgba(26,43,85,.80),rgba(16,28,58,.80));
--sombra-nav:0 -10px 30px rgba(0,0,0,.45);
--sup-tira:linear-gradient(135deg,rgba(47,107,255,.14) 0%,rgba(16,28,58,.72) 55%);
--tira-enlace:#DCE7FF;
}
/* ---- modo blanco ----
Las superficies son blancas o casi, y lo que separa una pieza del fondo ya no
es que sea mas oscura: es la sombra fina y el borde. Es como esta montada su
web, que es la referencia que el mando. El azul del texto sobre estas
superficies es #0830B4 (el --primario del claro), que sobre #F7F9FC da 8,4
de contraste: entra de sobra. */
:root[data-tema="claro"]{
--sup-html:#FFFFFF;
--sup:#F2F5FA;
--sup-alta:#E7EDF7;
--sup-suave:#F7F9FC;
--sup-campo:#FFFFFF;
--sup-campo-on:#FFFFFF;
--sup-nav:rgba(255,255,255,.88);
--sup-cab:rgba(255,255,255,.86);
--sup-fila:linear-gradient(180deg,#FFFFFF,#F7F9FC);
--sup-fila-alta:linear-gradient(180deg,#F2F5FA,#E9EFF9);
--sombra-nav:0 -10px 30px rgba(14,23,41,.10);
--sup-tira:linear-gradient(135deg,rgba(8,48,180,.07) 0%,#F2F5FA 55%);
--tira-enlace:#0830B4;
}
/* En claro, el boton secundario con fondo casi blanco necesita que el borde
haga el trabajo que en oscuro hacia el fondo. Y el brillo interior de arriba,
que en oscuro da relieve, sobre blanco no se ve y solo lava el color. */
:root[data-tema="claro"] .btn-ghost,
:root[data-tema="claro"] .btn-ds.fan,
:root[data-tema="claro"] .btn.btn-ghost{
border-color:rgba(var(--pri-rgb),.30);
color:var(--primario);
box-shadow:0 1px 2px rgba(14,23,41,.06);
}
:root[data-tema="claro"] .btn-ghost:hover,
:root[data-tema="claro"] .btn-ds.fan:hover,
:root[data-tema="claro"] .btn.btn-ghost:hover{
border-color:rgba(var(--pri-rgb),.52);
}
/* La barra de abajo en claro: el activo en pastilla azul clara, no en halo.
Un halo azul sobre blanco no se ve, solo ensucia. */
:root[data-tema="claro"] .navbaja a.on{
color:var(--primario);
background:rgba(var(--pri-rgb),.10);
box-shadow:0 0 0 1px rgba(var(--pri-rgb),.22);
}
:root[data-tema="claro"] .navbaja a.on svg{filter:none}
/* Y las pastillas encendidas: en oscuro el texto va blanco sobre un azul
translucido; en claro ese mismo azul al 26% es casi blanco y el texto blanco
desaparece. */
:root[data-tema="claro"] .chip-ds.on,
:root[data-tema="claro"] .chip.on,
:root[data-tema="claro"] .pill.on{
background:rgba(var(--pri-rgb),.10);
border-color:rgba(var(--pri-rgb),.40);
color:var(--primario);
box-shadow:none;
}
/* ---- modo noche (el ambar) ----
Mismo problema y misma solucion: el azul noche de esta hoja sobre un tema
calido se veia como una mancha fria. Las superficies salen de sus propios
tokens (--n2, --n3, --n4), que ya estan medidos en ds.css. */
:root[data-tema="noche"]{
--sup-html:#0A0406;
--sup:rgba(36,19,24,.78);
--sup-alta:rgba(48,26,32,.88);
--sup-suave:rgba(28,14,18,.70);
--sup-campo:rgba(10,4,6,.72);
--sup-campo-on:rgba(21,10,13,.88);
--sup-nav:rgba(10,4,6,.82);
--sup-cab:rgba(10,4,6,.78);
--sup-fila:linear-gradient(180deg,rgba(36,19,24,.78),rgba(21,10,13,.78));
--sup-fila-alta:linear-gradient(180deg,rgba(48,26,32,.86),rgba(36,19,24,.86));
--sombra-nav:0 -10px 30px rgba(0,0,0,.55);
--sup-tira:linear-gradient(135deg,rgba(217,113,75,.14) 0%,rgba(36,19,24,.78) 55%);
--tira-enlace:#F3E4D8;
}
/* ---- la foto del ejercicio abre su ficha, dentro del entreno (8-oct-2026) ----
Miguel: *"a la hora de ver los ejercicios en entreno que se puedan ver mas
info y volver"*. La foto ya estaba ahi y ya ocupaba su hueco, asi que
convertirla en el enlace no le quita ni un pixel al nombre del ejercicio.
La chapita de abajo a la derecha es lo que avisa de que se puede tocar: una
foto sin ninguna marca no se lee como un boton. */
.ej-mini-enl{
flex:none;position:relative;display:block;width:40px;height:40px;
/* Sin margenes a proposito: `.ej-cab` ya tiene `gap:10px`, asi que poner
ademas un margen sumaba los dos y le robaba 26 px al nombre del ejercicio.
Medido: con margenes el nombre bajaba a 92 px (antes tenia 104); sin
ellos sube a 118, o sea que ahora cabe MAS nombre que antes del cambio. */
border-radius:10px;
-webkit-tap-highlight-color:transparent;
}
/* El area que se toca llega a 44 px aunque la foto mida 40: un blanco de 40 en
un movil sudado se falla, y eso no se nota hasta ver a alguien entrenando. */
.ej-mini-enl::after{content:"";position:absolute;left:-2px;right:-2px;top:-2px;bottom:-2px}
.ej-mini-enl .ej-mini{margin:0;display:block;transition:filter var(--t)}
.ej-mini-enl:hover .ej-mini,.ej-mini-enl:focus-visible .ej-mini{filter:brightness(1.12)}
.ej-mini-enl:focus-visible{outline:2px solid var(--primario);outline-offset:2px}
.ej-mini-lupa{
position:absolute;right:-3px;bottom:-3px;
width:17px;height:17px;border-radius:50%;
display:grid;place-items:center;
background:var(--primario);color:#fff;
box-shadow:0 0 0 2px var(--n2);
}
.ej-mini-lupa svg{width:11px;height:11px}
/* El boton de desplegar ya no lleva la foto dentro, asi que su hueco de la
izquierda sobra. */
.ej-cab > .ej-mini-enl + .ej-tapa{padding-left:0}
/* ============================================================
La pastilla de «Vista cliente» tapaba dos botones de la cabecera
------------------------------------------------------------
Miguel, 8-oct-2026, con DOS capturas suyas que son justo la prueba: sin
deslizar la pastilla se ve en su sitio y todo bien; al deslizar se le pone
encima de los iconos de arriba a la derecha.
La causa, medida y no supuesta: la cinta es `position:fixed` arriba y la
cabecera `.mbar` es `position:sticky; top:0`. Sin deslizar no chocan porque
el body lleva un padding arriba que baja la cabecera. En cuanto se desliza,
la cabecera se pega al 0 y se mete DEBAJO de la pastilla, que va por encima
con z-index 9000. Medido con elementFromPoint en el centro de cada boton,
a 390x844 y con la pantalla bajada: «Hablar con Miguel» y «Perfil y
ajustes» daban tocable=false, los otros tres true.
El arreglo no mueve la pastilla de sitio (ahi es donde el pidio tenerla en
septiembre): hace que la cabecera se pegue DONDE ACABA LA CINTA en vez de
en 0. El alto lo mide el JS de base.html, que ya lo medía para el padding
del body, y lo deja en --alto-cinta. Si el JS no corriera, el valor por
defecto es 0 y se queda exactamente como estaba. */
body.mirando .mbar,
body.mirando .appbar{top:var(--alto-cinta,0px)}
@media (min-width:1024px){
body.mirando .lateral{top:var(--alto-cinta,0px);height:calc(100svh - var(--alto-cinta,0px))}
}
/* ============================================================
EL ORDEN DE LOS DIAS SE CAMBIA ARRASTRANDO, Y UNA SOLA FLECHA
------------------------------------------------------------
Miguel, 8-oct-2026 (audio): *"en vez de esas dos flechitas pon solo una
flechita, y luego unos puntos o algo que tu puedas deslizar y cambiar el
orden de lo de tu dia directamente"*, y despues *"quiero que si mantienes
ese recuadro te deje deslizar y salga como una luz abajo azul que quede muy
chulo"*.
El motivo de fondo es un fallo mio: la flecha de BAJAR el dia y la de PLEGAR
la tarjeta eran el mismo dibujo, una al lado de la otra. Por eso decia *"aqui
hoy te toca no puedo minimizarlo"*: le daba a la que parecia de plegar y le
movia el dia de sitio.
============================================================ */
.dia-asa{
flex:none;width:34px;height:34px;padding:0;border:0;border-radius:10px;
background:none;color:var(--texto-3);cursor:grab;
display:flex;align-items:center;justify-content:center;
touch-action:none; /* sin esto el navegador se lleva el gesto */
-webkit-tap-highlight-color:transparent;
transition:color var(--t),background var(--t);
}
.dia-asa:active{cursor:grabbing;color:var(--azul-txt);background:rgba(var(--pri-rgb),.14)}
.dia-asa svg{width:19px;height:19px;fill:currentColor;stroke:none;display:block}
/* LA LUZ AZUL DE DEBAJO. Es lo que pidio: mientras arrastras, el hueco de
donde sale la tarjeta se queda marcado con un resplandor que respira, y la
tarjeta que llevas en el dedo va con su propia sombra azul. */
details.dia.llevandose{opacity:.35}
.dia-fantasma{
position:fixed;z-index:9500;pointer-events:none;
display:flex;align-items:center;padding:0 18px;
font-size:16.5px;font-weight:700;color:#fff;
border-radius:var(--r-l,18px);
background:linear-gradient(180deg,rgba(26,43,85,.96),rgba(16,28,58,.96));
border:1px solid rgba(var(--pri-rgb),.55);
box-shadow:0 18px 44px rgba(0,0,0,.50), 0 0 26px rgba(var(--pri-rgb),.45);
transform:scale(1.02);
}
/* El sitio donde va a caer: una linea de luz azul, arriba o abajo segun por
donde entres. Va en ::before y ::after para no pelearse con el borde que ya
lleva la tarjeta. */
details.dia.hueco-arriba::after,
details.dia.hueco-abajo::after{
content:"";position:absolute;left:10px;right:10px;height:3px;border-radius:3px;
background:var(--primario);
box-shadow:0 0 14px 2px rgba(var(--pri-rgb),.85);
animation:luz-respira 1.1s ease-in-out infinite;
}
details.dia{position:relative}
details.dia.hueco-arriba::after{top:-2px}
details.dia.hueco-abajo::after{bottom:-2px}
@keyframes luz-respira{
0%,100%{opacity:.55;transform:scaleX(.97)}
50% {opacity:1;transform:scaleX(1)}
}
/* Mientras se arrastra, que el dedo no seleccione texto por el camino. */
html.arrastrando-plan, html.arrastrando-plan body{user-select:none;-webkit-user-select:none}
/* ============================================================
EL LATIDO DE LO QUE TIENES PENDIENTE
Miguel, 8-oct-2026: *"en botones de revisiones de inicio salga tambien como
que se mueve como recordatorio suavemente"*.
Es un recordatorio, no un adorno: late despacio (2,6 s), se para sola a los
pocos ciclos para no marear, y quien tenga el movil en "reducir movimiento"
no ve nada.
============================================================ */
@media (prefers-reduced-motion: no-preference){
.pend-btn{animation:late-suave 2.6s ease-in-out 1.2s 6 both}
.nov-card{animation:late-card 2.8s ease-in-out .8s 5 both}
.nov-punto{animation:late-punto 1.8s ease-in-out infinite}
}
@keyframes late-suave{
0%,100%{transform:none;box-shadow:0 0 0 0 rgba(var(--pri-rgb),0)}
45% {transform:translateY(-1.5px);box-shadow:0 0 0 5px rgba(var(--pri-rgb),.16)}
70% {transform:none;box-shadow:0 0 0 0 rgba(var(--pri-rgb),0)}
}
@keyframes late-card{
0%,100%{box-shadow:var(--sombra)}
50% {box-shadow:var(--sombra), 0 0 22px rgba(var(--pri-rgb),.34)}
}
@keyframes late-punto{
0%,100%{opacity:1;transform:scale(1)}
50% {opacity:.45;transform:scale(.78)}
}
/* ============================================================
LOS ICONOS DE MIGUEL, RECORTADOS DE SU HOJA
------------------------------------------------------------
Miguel, 8-oct-2026: me pidio la lista de los que no eran suyos, se los
rediseno el y me los mando en una hoja. De los 17 que le pase, esta hoja
cubre 13.
Entran como MASCARA y no como imagen pegada, igual que los cinco de la barra
de abajo: asi siguen cogiendo el color, el brillo y el estado encendido del
CSS, exactamente igual que hacia un svg. Una imagen normal se quedaria azul
fija y en el modo blanco no se veria.
El tamano de cada hueco esta MEDIDO en su app antes de tocar nada (19 px en
la barra de arriba, 20 en los cuadros de Salud, 20 en la flecha de volver y
18 en el play), para que al cambiar el dibujo no se mueva ni un pixel. */
.ic-m{
display:block;flex:none;background:currentColor;
-webkit-mask:var(--m) center/contain no-repeat;
mask:var(--m) center/contain no-repeat;
}
.icono-btn .ic-m{width:19px;height:19px}
.sa-ico .ic-m{width:20px;height:20px}
.fx-atras.ic-m{width:20px;height:20px}
.rc-play.ic-m {width:18px;height:18px}
/* El sol y la luna se turnan segun el tema, igual que cuando eran dos svg. */
.tema-btn .ic-m.luna{display:none}
:root[data-tema="claro"] .tema-btn .ic-m.sol{display:none}
:root[data-tema="claro"] .tema-btn .ic-m.luna{display:block}
/* Entrenos sin dia fijo dentro de "Tu semana". 8-oct-2026: no salian en ningun
sitio porque semana() descarta los que no tienen dia. Eran 7 entrenos de 3
clientes, invisibles. */
.sc-libres{
margin:12px 0 0;padding:11px 13px;
border:1px dashed var(--linea);border-radius:var(--r-l,18px);
background:transparent;
}
.sc-libres > b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3)}
.sc-libres > small{display:block;margin-top:2px;font-size:12.5px;color:var(--texto-3)}
.sc-libres ul{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.sc-libres li{margin:0}
.sc-libres a{
display:inline-flex;align-items:center;padding:7px 13px;
font-size:14px;font-weight:700;color:var(--azul-txt);text-decoration:none;
border:1px solid rgba(var(--pri-rgb),.34);border-radius:999px;
background:rgba(var(--pri-rgb),.10);
transition:background var(--t),border-color var(--t);
}
.sc-libres a:hover,.sc-libres a:focus-visible{background:rgba(var(--pri-rgb),.20);border-color:rgba(var(--pri-rgb),.58)}
/* El cronometro de Miguel en el chip de descanso. Sin esto sale 0x0: la regla
de al lado solo medía el dibujo viejo (.chip-reloj svg). */
.chip-reloj .ic-m{width:16px;height:16px}
/* El calendario de Miguel en el boton "Ver el mes". */
.sc-mes{display:inline-flex;align-items:center;gap:7px}
.sc-mes .ic-m{width:15px;height:15px}
/* EL AVISO PREVIO DE UN EJERCICIO (mantener pulsado).
Miguel, 8-oct-2026. Sale de abajo como una hoja, que es lo que se espera en
el movil, y en pantalla ancha se queda centrado. */
.av-ej{
border:0;padding:0;background:none;color:inherit;
width:100%;max-width:520px;max-height:92svh;
margin:auto auto 0; /* pegado abajo en el movil */
}
.av-ej::backdrop{background:rgba(4,9,20,.62);backdrop-filter:blur(3px)}
.av-caja{
position:relative;
padding:18px 18px calc(18px + env(safe-area-inset-bottom));
border:1px solid var(--linea);border-top-color:rgba(var(--pri-rgb),.45);
border-radius:22px 22px 0 0;
background:var(--fondo-2,var(--glass));
box-shadow:0 -22px 60px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion: no-preference){
.av-ej[open] .av-caja{animation:av-sube .26s cubic-bezier(.22,.8,.3,1) both}
}
@keyframes av-sube{from{transform:translateY(16px);opacity:.4}to{transform:none;opacity:1}}
.av-cerrar{
position:absolute;top:12px;right:12px;width:34px;height:34px;padding:0;
display:flex;align-items:center;justify-content:center;
border:1px solid var(--linea);border-radius:50%;
background:var(--glass);color:var(--texto-2);cursor:pointer;
}
.av-cerrar .ic-m{width:14px;height:14px}
.av-foto{
display:block;width:100%;height:170px;object-fit:cover;
border-radius:16px;margin:0 0 13px;background:var(--n2,rgba(255,255,255,.04));
}
.av-nom{display:block;font-size:19px;line-height:1.25;padding-right:38px}
.av-ser{margin:5px 0 0;font-size:14.5px;font-weight:700;color:var(--azul-txt)}
.av-datos{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:13px 0 0}
.av-datos dt{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-3);font-weight:700}
.av-datos dd{margin:0;font-size:14.5px;color:var(--texto-2)}
.av-claves{
margin:13px 0 0;padding:11px 13px;font-size:14.5px;line-height:1.45;
color:var(--texto-2);
border-left:3px solid var(--primario);border-radius:0 12px 12px 0;
background:rgba(var(--pri-rgb),.10);
}
.av-ficha{display:block;margin:15px 0 0;text-align:center}
.pista-manten{display:block;margin:9px 0 0;font-size:12px;color:var(--texto-3)}
/* GRUPOS MUSCULARES EN PROGRESO, calcado de las dos laminas que mando Miguel el
8-oct-2026: el dibujo del musculo a la izquierda, el nombre con las sesiones y
la mejor marca en medio, y a la derecha el numero grande con su chapa de
tendencia. Reutiliza `.pg-etq`, que es la chapa que ya usan sus ejercicios, en
vez de inventar otra igual con otro nombre. */
.gm-lista{list-style:none;margin:0;padding:0}
.gm{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:11px;
padding:10px 0;border-bottom:1px solid var(--linea)}
.gm:last-child{border-bottom:0;padding-bottom:2px}
.gm-img{width:54px;height:54px;border-radius:12px;object-fit:cover;display:block;
border:1px solid rgba(var(--pri-rgb),.3);background:rgba(var(--pri-rgb),.08)}
.gm-txt{min-width:0}
.gm-txt b{display:block;font-size:15px;font-weight:700;line-height:1.25}
.gm-txt small{display:block;font-size:10.5px;color:var(--texto-3);margin-top:2px;
line-height:1.35}
.gm-num{text-align:right}
.gm-num b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;
line-height:1.05}
.gm-num b i{margin-left:3px;font-style:normal;font-size:11.5px;font-weight:600;
color:var(--texto-3)}
.gm-num .pg-etq{margin-top:4px}
/* EL MUSCULO QUE TRABAJA, con el dibujo de Miguel (8-oct-2026, nota de voz:
*"que aunque este en mis fotografias que se vea lo que se va a trabajar
tambien para que la gente lo entienda"*).
En la fila va solo el dibujo, a 26 px: la lista de un dia tiene hasta nueve
ejercicios y meterle a cada uno el nombre del musculo la alargaria una linea
por fila. El nombre si sale en el aviso y en la ficha, que es donde hay sitio.
Los dibujos son los suyos, recortados de sus dos laminas. */
.dia-ejs .e-mus{flex:none;display:block;width:26px;height:26px;border-radius:8px;
overflow:hidden;border:1px solid rgba(var(--pri-rgb),.3);
background:rgba(var(--pri-rgb),.1)}
.dia-ejs .e-mus img{width:100%;height:100%;object-fit:cover;display:block}
.av-mus{display:flex;align-items:center;gap:11px;margin:10px 0 2px;padding:9px 11px;
border-radius:13px;border:1px solid rgba(var(--pri-rgb),.26);
background:rgba(var(--pri-rgb),.09)}
.av-mus[hidden]{display:none}
.av-mus-img{width:52px;height:52px;flex:none;border-radius:11px;object-fit:cover;
border:1px solid rgba(var(--pri-rgb),.3)}
.av-mus small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;color:var(--azul-txt);opacity:.8}
.av-mus b{font-size:16.5px;letter-spacing:-.01em}
.dia-ejs li[data-ej]{-webkit-tap-highlight-color:transparent}
.dia-ejs li[data-ej]:focus-visible{outline:2px solid var(--primario);outline-offset:2px;border-radius:10px}
@media (min-width:560px){
.av-ej{margin:auto}
.av-caja{border-radius:22px;border-top-color:var(--linea)}
}
/* EL RECUADRO AZUL DE HOY, como la maqueta que mando Miguel el 8-oct-2026.
La M ya estaba, pero centrada, desenfocada y al 8%: no se veia. En su maqueta
va arriba a la derecha y nitida. */
/* La M de la maqueta NO se pone aqui: Miguel pidio el 7-oct que saliera UNA
sola vez por pantalla, y en Entrenar ya esta detras del calendario de la
semana. La regla de mas arriba que la esconde se queda como esta. */
.dia.es-hoy .dia-tit b{font-size:21px;letter-spacing:-.01em}
.dia.es-hoy .dia-tit small{font-size:13.5px}
/* La barra de avance. Ocupa su propia linea dentro de la cabecera. */
.dia-prog{
flex:1 0 100%;display:flex;align-items:center;gap:10px;
margin:12px 0 0;
}
.dia-prog small{flex:none;font-size:12.5px;font-weight:700;color:var(--texto-2)}
.dia-prog b{flex:none;font-size:12.5px;color:var(--azul-txt);min-width:30px;text-align:right}
.dia-barra{
flex:1;height:6px;border-radius:99px;overflow:hidden;
background:rgba(255,255,255,.13);
}
:root[data-tema="claro"] .dia-barra{background:rgba(10,24,54,.12)}
.dia-barra i{
display:block;height:100%;border-radius:99px;
background:linear-gradient(90deg,var(--primario),#6aa8ff);
box-shadow:0 0 10px rgba(var(--pri-rgb),.55);
transition:width .45s cubic-bezier(.22,.8,.3,1);
}
/* Sin esto la barra de avance se mete en la misma linea que el titulo y lo
aplasta: .dia-cab no envolvia. */
.dia.es-hoy .dia-cab{flex-wrap:wrap}
/* El titulo cede ancho para que el asa y la flecha quepan en la MISMA linea.
Con flex:1 1 auto se quedaba a 223 px y las empujaba a un renglon suyo, y la
cabecera salia de tres pisos. */
.dia.es-hoy .dia-cab > .dia-tit{flex:1 1 120px;min-width:0}
/* OJO: .dia-tit choca con otra regla del panel de Miguel (ds.css 2779) que la
pone en fila. Por eso el titulo y el "5 ejercicios" peleaban por el ancho y
"Torso A" se partia en dos lineas. Aqui vuelve a apilarse. */
.dia.es-hoy .dia-tit{display:block;margin:0}
/* LOS 17 ICONOS NUEVOS DE MIGUEL (8-oct-2026).
Cada uno necesita su medida: las reglas de al lado median el