/* El fondo del y el esquema oscuro declarado. Sin esto, el navegador
pinta su lienzo por defecto (blanco) en tres sitios que se ven todo el rato:
al estirar mas alla del principio de la pantalla, en el parpadeo entre pantalla
y pantalla (esta app recarga entera en cada seccion), y en los desplegables y
teclados de numero, que salian en modo claro sobre un diseno oscuro.
Medido el 26-ago: html tenia fondo transparente y el body #081020. */
html{background:#060A14;color-scheme:dark}
/* ============================================================
Sistema de diseño MIGUEL PERFORMANCE
Sacado de los mockups de Miguel del 24-ago.
Se carga DESPUES de app.css: redefine los tokens y añade
la carcasa nueva (barra lateral, tarjetas de cristal, anillos).
============================================================ */
:root{
/* Paleta sacada de SUS ficheros, no inventada: el azul #004BE2 esta medido
pixel a pixel sobre su logo y el #3B63FF leido de su web. Fuera el morado
y los dos neones, que era lo que daba aire de videojuego. */
--primario:#2E6BC4;
--secundario:#E0C060;
--enfasis:#C9A227;
--acento:#30D158;
--info:#2E6BC4;
/* el azul en RGB, para las transparencias: asi cambian solas al cambiar de tema */
--pri-rgb:46,107,196;
/* El azul de marca vale de fondo, pero como LETRA sobre fondo oscuro se
queda en 3,5 y hace falta 4,5. Este es el que se usa para texto. */
--azul-txt:#8FB6EA;
--n1:#0B1526;
--n2:#122038;
--n3:#172A49;
--n4:#1F3860;
--texto:#F1F5FB;
--texto-2:#BACAE0;
--texto-3:#8E8E93;
--linea:rgba(201,162,39,.16);
--linea-fuerte:rgba(201,162,39,.30);
--ok:#30D158;
--aviso:#FF9F0A;
--peligro:#FF453A;
--glass:rgba(23,42,73,.64);
--glass-2:rgba(18,32,56,.84);
--sombra:0 14px 34px rgba(0,0,0,.60), 0 2px 6px rgba(0,0,0,.44);
--sombra-2:0 26px 60px rgba(0,0,0,.66);
--glow:0 0 0 1px rgba(var(--pri-rgb),.35), 0 0 28px rgba(var(--pri-rgb),.18);
--r-s:14px;
--r-m:20px;
--r-l:26px;
--r-xl:32px;
--t:180ms cubic-bezier(.22,.68,.24,1);
--t-lento:280ms cubic-bezier(.22,.68,.24,1);
--grad-azul:linear-gradient(135deg,#2E6BC4 0%,#17407E 100%);
--grad-cian:linear-gradient(135deg,#E0C060 0%,#C9A227 100%);
/* se reaprovechan los nombres viejos para que TODO lo ya hecho
se reskinee solo, sin tocar plantilla por plantilla */
--void:#0B1526;
--deep:#122038;
--deep2:#172A49;
--deep3:#1F3860;
--blue:#2E6BC4;
--blue-soft:#8FB6EA;
--white:#FFFFFF;
--muted-d:#BACAE0;
--line-d:rgba(201,162,39,.22);
--danger:#FF453A;
--warn:#FF9F0A;
--radius:20px;
--lateral:248px;
}
/* ---------- tema claro ---------- */
:root[data-tema="claro"]{
--primario:#0830B4;
--secundario:#2449D6;
--enfasis:#004BE2;
--info:#2449D6;
--pri-rgb:8,48,180;
--azul-txt:#0B3AC8;
--n1:#FFFFFF;
--n2:#F7F9FC;
--n3:#FFFFFF;
--n4:#EDF1F7;
--texto:#0E1729;
--texto-2:#445572;
--texto-3:#5F6E88;
--linea:rgba(14,23,41,.09);
--linea-fuerte:rgba(14,23,41,.16);
--glass:rgba(255,255,255,.92);
--glass-2:rgba(247,249,252,.96);
--sombra:0 8px 22px rgba(14,23,41,.07);
--sombra-2:0 16px 38px rgba(14,23,41,.10);
--ok:#0F7A50;
--aviso:#9A5B00;
--peligro:#C4322C;
--grad-azul:linear-gradient(135deg,#2B52E8 0%,#004BE2 100%);
--grad-cian:linear-gradient(135deg,#4265E6 0%,#2B52E8 100%);
--void:#FFFFFF;
--deep:#F7F9FC;
--deep2:#FFFFFF;
--deep3:#EDF1F7;
--white:#0E1729;
--muted-d:#445572;
--line-d:rgba(14,23,41,.16);
--blue:#0F43EF;
--danger:#C4322C;
--warn:#9A5B00;
/* El azul claro se quedaba sin cambiar en el tema claro: un enlace #7FC0FF
sobre fondo blanco da 1,8 de contraste y no se lee. Se oscurece aqui, que
ademas mejora el blanco sobre el boton azul en vez de empeorarlo. */
--blue-soft:#0B3AC8;
}
/* ---------- tema noche ----------
Para entrenar de madrugada sin quemarse los ojos. NO es un filtro naranja
por encima: es un tema entero, con su propio azul (que aqui es ambar) y sus
propios contrastes medidos. */
:root[data-tema="noche"]{
--primario:#D9714B;
--secundario:#E08A63;
--enfasis:#B85434;
--info:#E08A63;
--pri-rgb:217,113,75;
--azul-txt:#EFA383;
--n1:#0A0406;
--n2:#150A0D;
--n3:#1C0E12;
--n4:#241318;
--texto:#F3E4D8;
--texto-2:#C9AC98;
--texto-3:#9C8271;
--linea:rgba(255,220,200,.09);
--linea-fuerte:rgba(255,220,200,.16);
--glass:rgba(28,14,18,.66);
--glass-2:rgba(21,10,13,.8);
--sombra:0 12px 32px rgba(0,0,0,.5);
--sombra-2:0 20px 48px rgba(0,0,0,.62);
--ok:#C9A227;
--aviso:#D9954B;
--peligro:#E0563F;
--grad-azul:linear-gradient(135deg,#D9714B 0%,#B85434 100%);
--grad-cian:linear-gradient(135deg,#E08A63 0%,#D9714B 100%);
--void:#0A0406;
--deep:#150A0D;
--deep2:#1C0E12;
--deep3:#241318;
--blue:#D9714B;
--blue-soft:#E08A63;
--white:#F3E4D8;
--muted-d:#C9AC98;
--line-d:rgba(255,220,200,.09);
--danger:#E0563F;
--warn:#D9954B;
}
/* en noche el boton principal es ambar claro: la letra encima va oscura */
:root[data-tema="noche"] .btn-pri,
:root[data-tema="noche"] .btn.pri,
:root[data-tema="noche"] .btn-primario{color:#2A0F08}
/* ---------- base ---------- */
html{ -webkit-text-size-adjust:100% }
body{
background:var(--n1);
color:var(--texto);
font-family:-apple-system,"SF Pro Display",BlinkMacSystemFont,"Manrope",system-ui,Segoe UI,Roboto,sans-serif;
font-size:15px;
letter-spacing:-.005em;
}
/* 16px como MINIMO en cualquier casilla donde se escribe.
Por debajo de 16 el iPhone hace zoom solo al tocarla: la pantalla se queda
descolocada y hay que pellizcar para volver. No es estetica, es que la app se
vuelve incomoda justo cuando estas apuntando una serie.
Medido el 23-sep-2026 pasando la app por cuatro moviles: 120 casillas iban a
15px, en Perfil, Medidas, Actividad, Check-in, Logros, Avisos y Revision.
Va aqui arriba y con poca fuerza a proposito: las casillas que ya son mas
grandes (los kilos y las reps, a 20 y 24px) mandan sobre esta. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea{ font-size:16px }
/* el fondo con grano y luz del mockup */
body::before{
content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
background:
radial-gradient(70% 55% at 62% 28%, rgba(var(--pri-rgb),.20) 0%, transparent 62%),
radial-gradient(52% 42% at 12% 8%, rgba(var(--pri-rgb),.10) 0%, transparent 60%),
radial-gradient(46% 40% at 92% 76%, rgba(var(--pri-rgb),.07) 0%, transparent 62%);
}
:root[data-tema="claro"] body::before{
background:
radial-gradient(70% 55% at 62% 24%, rgba(var(--pri-rgb),.16) 0%, transparent 62%),
radial-gradient(52% 42% at 10% 6%, rgba(var(--pri-rgb),.08) 0%, transparent 60%);
}
body::after{
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
:root[data-tema="claro"] body::after{opacity:.28}
h1,h2,h3,.disp{font-family:inherit;letter-spacing:-.02em}
/* ---------- escala tipografica del mockup ---------- */
.t1{font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.02em}
.t2{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.015em}
.tx1{font-size:16px;line-height:24px;font-weight:500}
.tx2{font-size:14px;line-height:20px;font-weight:400}
.tx3{font-size:13px;line-height:18px;font-weight:400}
.cap{font-size:11px;line-height:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3)}
/* ---------- carcasa con barra lateral ---------- */
.shell{display:block}
@media (min-width:1024px){
.shell{display:grid;grid-template-columns:var(--lateral) 1fr;min-height:100svh}
body.tiene-lateral{padding-bottom:0}
}
.lateral{display:none}
@media (min-width:1024px){
.lateral{
display:flex;flex-direction:column;gap:6px;
position:sticky;top:0;height:100svh;overflow:auto;
padding:22px 16px 18px;
background:var(--glass-2);
border-right:1px solid var(--linea);
}
}
.lat-marca{display:flex;align-items:center;gap:11px;padding:2px 8px 20px}
.lat-marca img{width:38px;height:38px;object-fit:contain}
.lat-marca span{font-size:12px;line-height:14px;font-weight:800;letter-spacing:.09em;color:var(--texto-2)}
.lat-link{
display:flex;align-items:center;gap:12px;
padding:11px 12px;border-radius:var(--r-m);
color:var(--texto-2);font-size:14.5px;font-weight:600;
border:1px solid transparent;
transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
}
.lat-link svg{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9}
.lat-link:hover{background:rgba(var(--pri-rgb),.10);color:var(--texto);transform:translateX(2px)}
.lat-link.on{
background:linear-gradient(90deg,rgba(var(--pri-rgb),.22),rgba(var(--pri-rgb),.06));
color:var(--texto);border-color:rgba(var(--pri-rgb),.35);
box-shadow:inset 2px 0 0 var(--primario);
}
.lat-link .cuenta{
margin-left:auto;min-width:20px;padding:1px 6px;border-radius:100px;
background:var(--peligro);color:#fff;font-size:11px;font-weight:800;text-align:center
}
.lat-sep{flex:1 1 auto;min-height:14px}
.lat-plan{
border-radius:var(--r-l);padding:16px;margin-bottom:12px;
background:linear-gradient(150deg,rgba(var(--pri-rgb),.18),rgba(var(--pri-rgb),.05));
border:1px solid rgba(var(--pri-rgb),.28);
}
.lat-plan .cab{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.lat-plan .cab svg{width:17px;height:17px;stroke:var(--secundario);fill:none;stroke-width:2}
.lat-plan p{margin:5px 0 12px;font-size:12px;color:var(--texto-2)}
.lat-user{
display:flex;align-items:center;gap:11px;padding:11px;border-radius:var(--r-m);
background:var(--glass);border:1px solid var(--linea);
}
.lat-user img,.lat-user .ini{
width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;
background:var(--grad-azul);display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:14px;color:#fff
}
.lat-user b{display:block;font-size:13.5px;font-weight:700;line-height:17px}
.lat-user small{font-size:11.5px;color:var(--texto-3)}
/* ---------- barra superior ---------- */
/* nada de backdrop-filter en barras fijas: en escritorio deja el scroll a tirones */
.appbar{
display:flex;align-items:center;gap:14px;
padding:16px 20px;border-bottom:1px solid var(--linea);
background:var(--n2);
position:sticky;top:0;z-index:40;
}
.appbar .saludo{min-width:0}
.appbar .saludo b{display:block;font-size:20px;line-height:26px;font-weight:700;letter-spacing:-.02em}
.appbar .saludo small{font-size:12.5px;color:var(--texto-3)}
.appbar .hueco{flex:1}
.buscar-ds{
display:flex;align-items:center;gap:9px;min-width:0;flex:0 1 320px;
padding:9px 13px;border-radius:100px;
background:var(--n3);border:1px solid var(--linea);
transition:border-color var(--t),box-shadow var(--t);
}
.buscar-ds:focus-within{border-color:rgba(var(--pri-rgb),.5);box-shadow:var(--glow)}
.buscar-ds svg{width:16px;height:16px;flex:none;stroke:var(--texto-3);fill:none;stroke-width:2}
.buscar-ds input{
flex:1;min-width:0;border:0;background:transparent;color:var(--texto);
font:inherit;font-size:14px;outline:none
}
.buscar-ds input::placeholder{color:var(--texto-3)}
.icono-btn{
position:relative;width:44px;height:44px;flex:none;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--n3);border:1px solid var(--linea);color:var(--texto-2);
cursor:pointer;transition:background var(--t),color var(--t),transform var(--t);
}
.icono-btn:hover{background:var(--n4);color:var(--texto);transform:translateY(-1px)}
.icono-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}
.icono-btn .punto{
position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;border-radius:100px;
background:var(--peligro);color:#fff;font-size:10.5px;font-weight:800;
display:flex;align-items:center;justify-content:center;padding:0 4px
}
/* ---------- tarjetas de cristal ---------- */
.gcard{
background:var(--glass);
border:1px solid var(--linea);
border-radius:var(--r-l);
box-shadow:var(--sombra);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
padding:18px;
transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.gcard:hover{transform:translateY(-2px);box-shadow:var(--sombra-2);border-color:var(--linea-fuerte)}
.gcard.plana:hover{transform:none;box-shadow:var(--sombra)}
.gcard .gc-cab{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.gcard .gc-cab h3{font-size:16px;line-height:22px;font-weight:700;letter-spacing:-.015em}
.gcard .gc-cab a{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--azul-txt);
display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin-right:-6px}
.gcard .gc-cab a:hover{color:var(--secundario)}
/* tarjeta de metrica */
.mcard{
background:var(--glass);border:1px solid var(--linea);border-radius:var(--r-l);
padding:16px 18px;box-shadow:var(--sombra);
transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.mcard:hover{transform:translateY(-2px);box-shadow:var(--sombra-2);border-color:rgba(var(--pri-rgb),.32)}
.mcard .mc-top{display:flex;align-items:center;gap:10px;color:var(--texto-2);font-size:13px;font-weight:600}
.mcard .mc-ico{
width:32px;height:32px;border-radius:10px;flex:none;
display:flex;align-items:center;justify-content:center;
background:rgba(var(--pri-rgb),.16);color:var(--azul-txt)
}
.mcard .mc-ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.mcard .mc-num{font-size:32px;line-height:38px;font-weight:800;letter-spacing:-.03em;margin:8px 0 2px}
.mcard .mc-pie{font-size:12px;font-weight:600;color:var(--texto-3)}
.mcard .mc-pie.sube{color:var(--acento)}
.mcard .mc-pie.baja{color:var(--aviso)}
.rejilla-metricas{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:900px){.rejilla-metricas{grid-template-columns:repeat(4,1fr);gap:16px}}
/* ---------- chapas de estado ---------- */
.chapa{
display:inline-flex;align-items:center;gap:5px;
padding:3px 9px;border-radius:100px;
font-size:11.5px;font-weight:700;line-height:16px;white-space:nowrap
}
.chapa.azul{background:rgba(var(--pri-rgb),.16);color:var(--azul-txt)}
.chapa.verde{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.chapa.ambar{background:rgba(255,182,72,.16);color:var(--aviso)}
.chapa.roja{background:rgba(255,92,114,.16);color:var(--peligro)}
.chapa.morada{background:color-mix(in srgb,var(--enfasis) 20%,transparent);color:var(--secundario)}
.chapa.gris{background:var(--n4);color:var(--texto-2)}
/* ---------- barra de adherencia ---------- */
.adh{display:flex;align-items:center;gap:9px;min-width:120px}
.adh .pista{flex:1;height:6px;border-radius:100px;background:var(--n4);overflow:hidden}
.adh .relleno{height:100%;border-radius:100px;background:var(--grad-azul);transition:width var(--t-lento)}
.adh .relleno.bien{background:linear-gradient(90deg,var(--primario),var(--ok))}
.adh .relleno.medio{background:linear-gradient(90deg,var(--primario),var(--aviso))}
.adh .relleno.mal{background:linear-gradient(90deg,#FF5C72,#FFB648)}
.adh b{font-size:12.5px;font-weight:700;color:var(--texto-2);min-width:34px;text-align:right}
/* ---------- anillo de progreso ---------- */
.anillo{position:relative;width:150px;height:150px;flex:none;margin:0 auto}
.anillo svg{width:100%;height:100%;transform:rotate(-90deg)}
.anillo .pista{stroke:var(--n4);fill:none}
.anillo .val{stroke:url(#gradAnillo);fill:none;stroke-linecap:round;transition:stroke-dasharray var(--t-lento)}
.anillo .centro{
position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;text-align:center
}
.anillo .centro b{font-size:30px;line-height:34px;font-weight:800;letter-spacing:-.03em}
.anillo .centro small{font-size:11px;line-height:14px;color:var(--texto-3);max-width:82px}
/* ---------- lista de personas / atencion ---------- */
.fila-p{
display:flex;align-items:center;gap:12px;padding:11px 8px;border-radius:var(--r-m);
transition:background var(--t);
}
.fila-p:hover{background:rgba(var(--pri-rgb),.08)}
.fila-p .av{
width:38px;height:38px;border-radius:50%;flex:none;object-fit:cover;
background:var(--grad-azul);display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:800;font-size:14px
}
.fila-p .txt{min-width:0;flex:1}
.fila-p .txt b{display:block;font-size:14px;font-weight:700;line-height:19px}
.fila-p .txt small{display:block;font-size:12.5px;color:var(--texto-2);line-height:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-p .txt em{display:block;font-size:11.5px;font-style:normal;color:var(--texto-3)}
.fila-p .flecha{color:var(--texto-3);flex:none}
.fila-p .flecha svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}
/* ---------- lista de tareas ---------- */
.tarea{display:flex;align-items:flex-start;gap:11px;padding:10px 6px;border-radius:var(--r-m);transition:background var(--t)}
.tarea:hover{background:rgba(var(--pri-rgb),.07)}
.tarea .marca{
width:19px;height:19px;border-radius:50%;flex:none;margin-top:2px;
border:2px solid var(--texto-3);display:flex;align-items:center;justify-content:center;
transition:border-color var(--t),background var(--t)
}
.tarea.hecha .marca{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 20%,transparent)}
.tarea.hecha .marca svg{width:11px;height:11px;stroke:var(--acento);fill:none;stroke-width:3}
.tarea .cuerpo{flex:1;min-width:0}
.tarea .cuerpo b{display:block;font-size:14px;font-weight:600;line-height:19px}
.tarea.hecha .cuerpo b{color:var(--texto-3);text-decoration:line-through}
.tarea .hora{font-size:12px;color:var(--texto-3);flex:none;font-weight:600}
/* ---------- tabla ---------- */
.tabla-ds{width:100%;border-collapse:collapse;font-size:13.5px}
.tabla-ds th{
text-align:left;padding:10px 12px;font-size:11px;font-weight:700;
letter-spacing:.07em;text-transform:uppercase;color:var(--texto-3);
border-bottom:1px solid var(--linea)
}
.tabla-ds td{padding:12px;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla-ds tbody tr{transition:background var(--t)}
.tabla-ds tbody tr:hover{background:rgba(var(--pri-rgb),.07)}
.tabla-ds tbody tr:last-child td{border-bottom:0}
.tabla-envoltura{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* ---------- botones ---------- */
.btn-ds{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:10px 18px;border-radius:100px;border:1px solid transparent;
font:inherit;font-size:14px;font-weight:700;cursor:pointer;
transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t);
}
.btn-ds svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}
.btn-ds.pri{background:var(--grad-azul);color:#fff;box-shadow:0 6px 18px rgba(var(--pri-rgb),.28)}
.btn-ds.pri:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(var(--pri-rgb),.42)}
.btn-ds.pri:active{transform:translateY(0);box-shadow:0 4px 12px rgba(var(--pri-rgb),.3)}
.btn-ds.pri[disabled]{background:var(--n4);color:var(--texto-3);box-shadow:none;cursor:not-allowed;transform:none}
.btn-ds.fan{background:var(--n3);color:var(--texto);border-color:var(--linea)}
.btn-ds.fan:hover{background:var(--n4);transform:translateY(-1px)}
.btn-ds.mini{padding:7px 13px;font-size:12.5px;min-height:44px}
/* ---------- rejillas del panel ---------- */
.rej-3{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:900px){.rej-3{grid-template-columns:1fr 1fr 1fr;gap:16px}}
.rej-2-1{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:1180px){.rej-2-1{grid-template-columns:2fr 1fr;gap:16px}}
.zona{padding:20px;max-width:1500px;margin:0 auto}
@media (max-width:1023px){.zona{padding:16px 14px 96px}}
.zona > * + *{margin-top:14px}
@media (min-width:900px){.zona > * + *{margin-top:16px}}
/* ---------- estado vacio ---------- */
.vacio-ds{padding:26px 14px;text-align:center;color:var(--texto-3);font-size:13.5px}
/* ---------- notas rapidas ---------- */
.nota-ds{display:flex;gap:9px;font-size:13px;line-height:19px;color:var(--texto-2);padding:7px 0}
.nota-ds::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--primario);flex:none;margin-top:7px}
/* ---------- navegacion inferior en movil ---------- */
.navbaja{
position:fixed;left:0;right:0;bottom:0;z-index:60;
display:flex;justify-content:space-around;align-items:center;
padding:8px 4px calc(8px + env(safe-area-inset-bottom));
background:var(--n2);border-top:1px solid var(--linea);
}
/* El descanso flotante se apoya en esta medida. En escritorio la barra no
existe, asi que ahi vale 0 y no queda un hueco raro debajo. */
:root{--alto-nav:68px}
@media (min-width:1024px){.navbaja{display:none} :root{--alto-nav:0px}}
.navbaja a{
display:flex;flex-direction:column;align-items:center;gap:3px;
font-size:10.5px;font-weight:700;color:var(--texto-3);
padding:5px 8px;border-radius:12px;min-width:56px;
transition:color var(--t),background var(--t)
}
.navbaja a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9}
.navbaja a.on{color:var(--azul-txt);background:rgba(var(--pri-rgb),.12)}
/* ---------- cabecera movil ---------- */
.mbar{
display:flex;align-items:center;gap:12px;padding:14px 16px;
border-bottom:1px solid var(--linea);background:var(--n2);
position:sticky;top:0;z-index:40;
}
@media (min-width:1024px){.mbar{display:none}}
.mbar .marca{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--texto-2)}
.mbar .marca img{width:30px;height:30px;object-fit:contain}
.mbar .hueco{flex:1}
/* ---------- interruptor de tema ---------- */
.tema-btn svg.luna{display:none}
:root[data-tema="claro"] .tema-btn svg.sol{display:none}
:root[data-tema="claro"] .tema-btn svg.luna{display:block}
/* ---------- entrada suave ---------- */
@media (prefers-reduced-motion:no-preference){
.aparece{animation:apar var(--t-lento) both}
@keyframes apar{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
/* ---------- ajustes sobre lo que ya existia ---------- */
.card{
background:var(--glass);border:1px solid var(--linea);
border-radius:var(--r-l);box-shadow:var(--sombra)
}
.btn-primary{background:var(--grad-azul);border-color:transparent;box-shadow:0 6px 18px rgba(var(--pri-rgb),.28)}
.topnav,.mtop{background:var(--n2);backdrop-filter:none;-webkit-backdrop-filter:none}
.bottomnav{background:var(--n2);backdrop-filter:none;-webkit-backdrop-filter:none;border-top:1px solid var(--linea)}
/* ---------- que nada empuje el ancho en movil ----------
Un hijo de grid trae min-width:auto, asi que una tabla ancha
estira la tarjeta entera y desborda la pagina. Aqui se corta. */
.shell > *,
.rej-3 > *,
.rej-2-1 > *,
.rejilla-metricas > *,
.rej-2-1 > * > *{min-width:0}
.tabla-envoltura{max-width:100%}
.gcard,.mcard{max-width:100%}
/* ---------- remates ---------- */
/* las tarjetas se ajustan a su contenido: si no, la mas corta
se queda con un hueco enorme al lado de la mas larga */
.rej-3,.rej-2-1{align-items:start}
/* en movil solo se queda pegada arriba la barra de la marca.
Con las dos en top:0 se montaban una encima de la otra al bajar. */
@media (max-width:1023px){
.appbar{position:static;padding:14px 16px}
.appbar .saludo b{font-size:18px;line-height:24px}
}
/* En el movil, los dos botones de "verlo como un cliente" se comian el sitio y
el titulo se partia en tres lineas. Se bajan a su propia fila, que ademas los
deja mas grandes para el dedo. El titulo no se recorta: debajo va otra vez
entero en el H1 de la pantalla, pero un titulo cortado con puntos suspensivos
en la barra se lee como un fallo. */
@media (max-width:760px){
.appbar{flex-wrap:wrap; row-gap:10px}
.appbar .saludo{flex:1 1 100%; order:1}
.appbar .hueco{display:none}
.appbar > .icono-btn{order:3}
.btn-vista-cliente{order:2; flex:1 1 auto; justify-content:center}
.btn-vista-otro{order:2; flex:0 0 auto; margin-left:0}
}
/* la tabla no se estruja: se desplaza dentro de su caja */
@media (max-width:900px){
.tabla-ds{min-width:540px}
}
/* ---------- el tema claro necesita sus propios acentos ----------
El verde y el ambar del tema oscuro sobre blanco no se leen.
Aqui se oscurecen solo para el tema claro. */
:root[data-tema="claro"]{
--primario:#0830B4;
--secundario:#2449D6;
--acento:#0F7A50;
--aviso:#9A5B00;
--peligro:#C7263C;
--enfasis:#004BE2;
--blue:#0830B4;
/* faltaban estos dos y por eso en tema claro se leian a 1,3 sobre blanco:
el verde de "entrenamiento completado" y el ambar de los rotulos */
--ok:#0F7A50;
--gold-soft:#8A5200;
--gold:#8A5200;
--champagne:#7A4A00;
--bronze:#7A4A00;
--danger:#C7263C;
}
:root[data-tema="claro"] .chapa.verde{background:rgba(4,131,90,.12);color:#04835A}
:root[data-tema="claro"] .chapa.ambar{background:rgba(154,91,0,.13);color:#8A5200}
:root[data-tema="claro"] .chapa.roja{background:rgba(199,38,60,.11);color:#B01E33}
:root[data-tema="claro"] .chapa.azul{background:rgba(22,104,212,.12);color:#1257B5}
:root[data-tema="claro"] .chapa.morada{background:rgba(0,75,226,.10);color:#0B3FBF}
:root[data-tema="claro"] .chapa.gris{background:#E7EDF7;color:#4C5D7D}
:root[data-tema="claro"] .mcard .mc-pie.sube{color:#04835A}
:root[data-tema="claro"] .mcard .mc-pie.baja{color:#8A5200}
:root[data-tema="claro"] .adh .pista{background:#DFE7F3}
:root[data-tema="claro"] .lat-user .ini,
:root[data-tema="claro"] .fila-p .av{color:#fff}
/* ---------- contraste medido, no a ojo ----------
El gris mas apagado se quedaba en 4.38 (oscuro) y 3.53 (claro)
sobre su fondo real. Subido hasta pasar 4.5 en los dos temas. */
:root{--texto-3:#96A9C4}
:root[data-tema="claro"]{--texto-3:#5F6E88}
:root[data-tema="noche"]{--texto-3:#A98D79}
:root[data-tema="claro"] .chapa.verde{background:rgba(11,95,62,.12);color:#0B5F3E}
/* ---------- botones de relleno: el azul claro con letra blanca no se lee ----------
Medido: blanco sobre #4DA3FF da 2,58 y hace falta 4,5. El azul claro se
queda para textos y acentos sobre fondo oscuro, que ahi va sobrado; los
botones rellenos usan una version mas honda del mismo azul. */
.btn.btn-primary,
button.btn-primary,
a.btn-primary,
.btn-ds.pri{
background:linear-gradient(135deg,#3B63FF 0%,#003FC4 100%);
background-color:#2247D8;
color:#fff;
border-color:transparent;
}
:root[data-tema="claro"] .btn.btn-primary,
:root[data-tema="claro"] button.btn-primary,
:root[data-tema="claro"] a.btn-primary,
:root[data-tema="claro"] .btn-ds.pri{
background:linear-gradient(135deg,#2B52E8 0%,#0038B5 100%);
background-color:#1C41CC;
color:#fff;
}
/* En NOCHE el azul de arriba se colaba entero: la regla de los botones tenia el
color escrito a mano y no salia de ningun token, asi que el tema lo cambiaba
todo menos el boton mas grande de la pantalla. Y un azul electrico en un tema
de baja luz es justo lo que el tema viene a evitar. */
:root[data-tema="noche"] .btn.btn-primary,
:root[data-tema="noche"] button.btn-primary,
:root[data-tema="noche"] a.btn-primary,
:root[data-tema="noche"] .btn-ds.pri{
/* El extremo oscuro del degradado no puede bajar de #C25F3C: con el ambar
mas hondo que habia, la letra se quedaba en 3,95 y hace falta 4,5. Medido
contra los DOS extremos, no solo contra el claro. */
background:linear-gradient(135deg,#E07B53 0%,#C25F3C 100%);
background-color:#C25F3C;
color:#120400;
box-shadow:0 6px 18px rgba(217,113,75,.20);
}
/* y el logo de la barra, que es lo unico azul que quedaba a la vista */
:root[data-tema="noche"] .marca-logo,
:root[data-tema="noche"] .logo-m img,
:root[data-tema="noche"] .marca img{filter:hue-rotate(-160deg) saturate(.85)}
/* ---------- pantallas internas: clientes ---------- */
.solo-esc{display:none}
.solo-mov{display:block}
@media (min-width:900px){
.solo-esc{display:block}
.solo-mov{display:none}
}
/* cabecera de pagina: titulo a la izquierda, acciones a la derecha */
.cab-pag{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cab-pag h1{font-size:24px;line-height:30px;font-weight:800;letter-spacing:-.02em;margin:0}
.cab-pag .sub{font-size:13px;color:var(--texto-3);margin-top:3px}
.cab-pag .der{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
/* barra de herramientas: buscador + chips de filtro */
.herr{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.herr .buscar-ds{flex:1 1 220px;min-width:0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip-ds{
display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:100px;
border:1px solid var(--linea);background:var(--n3);color:var(--texto-2);
font-size:12.5px;font-weight:700;cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t);white-space:nowrap;
}
.chip-ds:hover{background:var(--n4);color:var(--texto)}
.chip-ds.on{background:rgba(var(--pri-rgb),.16);border-color:rgba(var(--pri-rgb),.45);color:var(--azul-txt)}
.chip-ds .n{font-size:11.5px;opacity:.8;font-weight:800}
/* avatar con inicial, tamanos */
.av-ds{
width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
font-weight:800;font-size:15px;color:#fff;background:var(--grad-azul);letter-spacing:-.01em;
}
.av-ds.g{width:60px;height:60px;font-size:23px}
/* celda de nombre dentro de la tabla */
.cel-nom{display:flex;align-items:center;gap:11px;min-width:0}
.cel-nom b{display:block;font-size:14px;font-weight:700;line-height:19px}
.cel-nom small{display:block;font-size:12px;color:var(--texto-3);line-height:16px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px}
/* ficha: cabecera del cliente */
.ficha-cab{display:flex;align-items:flex-start;gap:15px;flex-wrap:wrap}
.ficha-cab .quien{min-width:0;flex:1 1 220px}
.ficha-cab .quien h1{font-size:23px;line-height:29px;font-weight:800;letter-spacing:-.02em;margin:0}
.ficha-cab .quien p{font-size:13px;color:var(--texto-3);margin:4px 0 0;
overflow:hidden;text-overflow:ellipsis}
.ficha-cab .chapas{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.ficha-cab .acc{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
/* pares dato / valor */
.datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
@media (min-width:700px){.datos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dato .k{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-3)}
.dato .v{font-size:16px;font-weight:700;line-height:22px;margin-top:3px}
/* volver */
.volver{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
color:var(--texto-3);transition:color var(--t)}
.volver:hover{color:var(--azul-txt)}
.volver svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}
/* bloque plegable con aire */
.pleg{border:1px solid var(--linea);border-radius:var(--r-m);background:var(--n2);overflow:hidden}
.pleg + .pleg{margin-top:10px}
/* La lista de videos de un cliente en su ficha del panel (20-sep-2026).
preload="none" a proposito: con diez videos en la pagina, precargarlos se
baja decenas de megas cada vez que Miguel abre una ficha. */
.vid-f{display:flex;gap:12px;align-items:flex-start;padding:10px 0}
.vid-f + .vid-f{border-top:1px solid var(--linea)}
.vid-m{flex:none;width:128px;max-width:38vw;aspect-ratio:9/16;border-radius:10px;
background:#000;object-fit:cover}
.vid-d{min-width:0;display:flex;flex-direction:column;gap:3px;padding-top:2px}
.vid-d b{font-size:14px;font-weight:700;line-height:1.3}
.vid-d small{font-size:12.5px;color:var(--texto-2)}
.vid-t{font-size:13px;line-height:1.5;color:var(--texto-2);margin-top:3px;
overflow-wrap:anywhere}
/* El aviso de "tu revision ya esta" en el inicio del cliente (20-sep-2026). */
.nov-card{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
border:1px solid rgba(59,99,255,.42);background:rgba(59,99,255,.10)}
.nov-punto{flex:none;width:9px;height:9px;border-radius:50%;background:var(--acento,#2563eb);
box-shadow:0 0 0 4px rgba(59,99,255,.20)}
.nov-txt{min-width:0;flex:1}
.nov-txt b{display:block;font-size:15px;font-weight:700;line-height:1.3}
.nov-txt small{display:block;font-size:13px;line-height:1.45;color:var(--texto-2);margin-top:2px}
.nov-flecha{flex:none;width:19px;height:19px;opacity:.6}
.pleg > summary{padding:13px 15px;cursor:pointer;font-size:14px;font-weight:700;
display:flex;align-items:center;gap:10px;list-style:none;transition:background var(--t)}
.pleg > summary::-webkit-details-marker{display:none}
.pleg > summary:hover{background:rgba(var(--pri-rgb),.07)}
.pleg > summary .cuando{margin-left:auto;font-size:12px;font-weight:600;color:var(--texto-3)}
.pleg > .cuerpo{padding:0 15px 15px;font-size:13.5px;line-height:21px;color:var(--texto-2)}
.pleg > .cuerpo strong{color:var(--texto)}
/* campos de formulario dentro del sistema nuevo */
.campo-ds{width:100%;padding:10px 12px;border-radius:var(--r-m);border:1px solid var(--linea);
background:var(--n1);color:var(--texto);font:inherit;font-size:14px;transition:border-color var(--t)}
.campo-ds:focus{outline:none;border-color:rgba(var(--pri-rgb),.55);box-shadow:var(--glow)}
.campo-ds::placeholder{color:var(--texto-3)}
textarea.campo-ds{min-height:90px;resize:vertical;line-height:20px}
.etq{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--texto-3);display:block;margin-bottom:6px}
/* mensaje del entrenador ya enviado */
.msg-ds{border-left:2px solid var(--primario);padding:8px 0 8px 12px;margin-bottom:10px}
.msg-ds .cuando{font-size:11.5px;color:var(--texto-3);font-weight:600}
.msg-ds .txt{font-size:13.5px;line-height:20px;margin-top:3px;white-space:pre-wrap}
/* aviso suave */
.aviso-ds{display:flex;gap:11px;padding:13px 15px;border-radius:var(--r-m);
border:1px solid rgba(255,182,72,.35);background:rgba(255,182,72,.08);font-size:13.5px;line-height:20px}
.aviso-ds b{display:block;margin-bottom:3px;color:var(--texto)}
.aviso-ds .enl{word-break:break-all;font-size:12px;font-family:ui-monospace,Menlo,Consolas,monospace;
background:var(--n1);padding:9px 11px;border-radius:10px;margin-top:8px;display:block;color:var(--texto-2)}
/* control segmentado de dos opciones (sin cambios / cambios) */
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:100px;background:var(--n1);border:1px solid var(--linea)}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg span{display:block;padding:7px 15px;border-radius:100px;font-size:12.5px;font-weight:700;
color:var(--texto-3);transition:background var(--t),color var(--t);white-space:nowrap}
.seg label:hover span{color:var(--texto-2)}
.seg input:checked + span{background:var(--grad-azul);color:#fff}
.seg input:focus-visible + span{outline:2px solid var(--primario);outline-offset:2px}
/* bloque de dia de entrenamiento */
.dia-ds{border:1px solid var(--linea);border-radius:var(--r-m);background:var(--n2);padding:15px}
.dia-ds + .dia-ds{margin-top:12px}
.dia-ds > h3{font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0 0 10px}
.ej-ds{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--linea)}
.ej-ds:last-of-type{border-bottom:0}
.ej-ds .nom{flex:1;min-width:0;font-size:13.5px;font-weight:600}
.ej-ds .met{font-size:12.5px;color:var(--texto-3);font-weight:700;white-space:nowrap}
.rej-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* columnas de rej-2-1 / rej-3: separar lo que se apila dentro */
.rej-2-1 > div > * + *,
.rej-3 > div > * + *{margin-top:14px}
/* una etiqueta larga (el objetivo del cliente) no puede empujar la pagina */
.ficha-cab .chapas .chapa{max-width:100%;white-space:normal;text-align:left}
/* ---------- contraste medido, no a ojo (25-ago) ---------- */
/* El azul de marca es precioso de fondo pero con letra blanca encima se queda
en 3,0 y hace falta 4,5. Se usa una version mas honda SOLO donde hay texto. */
:root{
--grad-av:linear-gradient(135deg,#2E56E8 0%,#0038B5 100%);
--badge:#C7263C; /* blanco encima: 5,6 */
--morado-txt:#8FA6FF;
}
:root[data-tema="claro"]{
--grad-av:linear-gradient(135deg,#2444D4 0%,#0032A6 100%);
--badge:#B81F35;
--morado-txt:#0B3FBF;
}
.av-ds,
.lat-user .ini,
.fila-p .av,
.seg input:checked + span{background:var(--grad-av)}
.lat-link .cuenta,
.icono-btn .punto{background:var(--badge)}
.chapa.morada{color:var(--morado-txt)}
:root[data-tema="claro"] .chip-ds.on{color:#0F55B8}
/* iconos de actividad: el verde y el azul de marca sobre su propio velo claro
se quedan en 4,36 y 4,45. Version honda solo para ese glifo. */
:root{--ico-verde:var(--acento);--ico-azul:var(--primario)}
:root[data-tema="claro"]{--ico-verde:#02603F;--ico-azul:#0F55B8}
/* en movil el boton de tema salia DOS veces (barra de marca y barra de pagina) */
@media (max-width:1023px){ .appbar [data-tema-toggle]{display:none} }
/* que se vea que un bloque plegable se abre */
.pleg > summary::after{
content:"";width:8px;height:8px;margin-left:auto;flex:none;
border-right:2px solid var(--texto-3);border-bottom:2px solid var(--texto-3);
transform:rotate(45deg) translateY(-2px);transition:transform var(--t);
}
.pleg > summary .cuando + ::after{margin-left:10px}
.pleg[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.pleg > summary .cuando{margin-left:auto}
.pleg > summary .cuando ~ *{margin-left:10px}
/* en movil el boton principal de la ficha ocupa todo, no colgando a la derecha */
@media (max-width:699px){
.ficha-cab .acc{margin-left:0;width:100%}
.ficha-cab .acc > *{width:100%;justify-content:center}
}
/* ============================================================
Tokens que faltaban del sistema: espaciado, tipografia y
movimiento. Se anaden sin tocar nada de lo de arriba.
============================================================ */
:root{
/* espaciado de ocho en ocho */
--e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px;
--e-6:32px; --e-7:40px; --e-8:48px; --e-9:64px;
/* escala de texto */
--t-cap:12px; --t-min:13px; --t-base:15px; --t-med:17px;
--t-h3:20px; --t-h2:25px; --t-h1:31px; --t-disp:39px;
--lh-apretado:1.2; --lh-normal:1.5; --lh-suelto:1.7;
/* area de toque minima en movil */
--toque:44px;
}
/* Quien pide menos movimiento en su movil, no lo tiene. No es un detalle
estetico: a algunas personas las animaciones les marean de verdad. */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
}
/* Foco visible para quien navega con el teclado. Sin esto no se sabe donde
esta uno al ir con el tabulador. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
outline:3px solid var(--primario);
outline-offset:2px;
border-radius:6px;
}
/* Nada interactivo por debajo del dedo. */
@media (max-width:900px){
.btn,nav a,nav button,.tabbar a{min-height:var(--toque)}
}
/* ============================================================
FASE 1 - pantalla de Inicio, Progreso y Coach del cliente.
Los colores salen de los tokens de arriba, no hay ninguno
escrito a mano, para que el tema claro siga funcionando.
============================================================ */
.ini-cab{margin:4px 0 18px}
.ini-cab h1{font-size:26px;line-height:1.15;margin:0 0 4px;font-weight:700;color:var(--texto)}
.ini-cab p{margin:0;color:var(--texto-2);font-size:14px}
/* --- el entreno de hoy, la tarjeta grande --- */
.hoy-card{
position:relative;border-radius:var(--r-l);padding:20px 18px 18px;margin-bottom:16px;
background:var(--glass);border:1px solid var(--linea-fuerte);box-shadow:var(--sombra);
overflow:hidden;
}
.hoy-card::before{
content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--grad-azul);
}
.hoy-card.completado::before{background:var(--ok)}
.hoy-card.sin_plan::before{background:var(--texto-3)}
.hoy-etq{
font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);
margin-bottom:6px;font-weight:600;
}
.hoy-card h2{margin:0 0 4px;font-size:21px;line-height:1.2;color:var(--texto);font-weight:700}
.hoy-sub{margin:0 0 14px;color:var(--texto-2);font-size:14px}
.hoy-card.completado .hoy-sub{color:var(--ok)}
/* --- la semana: anillo + siete dias --- */
.sem-cuerpo{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.anillo-sem{
--pct:0;
flex:0 0 auto;width:88px;height:88px;border-radius:50%;
background:conic-gradient(var(--primario) calc(var(--pct)*1%), var(--linea) 0);
display:grid;place-items:center;
}
/* El disco central lleva el texto DENTRO en vez de ser un hermano detras.
Asi el fondo del texto es su propio padre y cualquier medidor de contraste
lo ve: con el disco aparte, el texto medía sobre el degradado del anillo y
daba 1,05 sin estar mal de verdad, que es peor que un fallo, es ruido. */
.anillo-sem{position:relative}
.anillo-txt{
position:relative;z-index:1;width:68px;height:68px;border-radius:50%;
background:var(--n2);display:grid;align-content:center;
text-align:center;line-height:1.05;
}
.anillo-txt b{display:block;font-size:19px;color:var(--texto);font-weight:700}
.anillo-txt b span{font-size:13px;color:var(--texto-3);font-weight:600}
.anillo-txt small{font-size:10.5px;color:var(--texto-3);letter-spacing:.04em}
.sem-dias{list-style:none;display:flex;gap:8px;margin:0;padding:0;flex:1 1 190px}
.sem-dias li{flex:1;text-align:center;min-width:26px}
.sem-dias .l{display:block;font-size:11px;color:var(--texto-3);margin-bottom:6px;font-weight:600}
.sem-dias .p{
display:block;height:30px;border-radius:8px;
background:var(--linea);border:1px solid transparent;
}
.sem-dias li.hecho .p{background:var(--grad-azul);border-color:transparent}
.sem-dias li.hecho .l{color:var(--texto)}
.sem-dias li.hoy .p{background:transparent;border:1px dashed var(--primario)}
.sem-dias li.hoy .l{color:var(--azul-txt)}
.sem-pie{font-size:12.5px;margin:14px 0 0}
/* La semana con dias fijos: que toca cada dia, no siete puntos vacios. */
.sd-lista{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column}
.sd-dia{display:flex;align-items:flex-start;gap:12px;padding:9px 0;
border-bottom:1px solid var(--linea)}
.sd-dia:last-child{border-bottom:0}
.sd-n{flex:0 0 34px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
font-weight:700;color:var(--texto-3);padding-top:2px}
.sd-dia.hoy .sd-n{color:var(--azul-txt)}
.sd-dia.vacio .sd-ses small{color:var(--texto-3)}
.sd-ses{flex:1 1 auto;min-width:0;font-size:14px}
.sd-ses b{display:block;font-weight:600;line-height:1.3}
.sd-ses small{display:block;font-size:11px;color:var(--texto-3);margin-top:1px}
.sd-mover summary{font-size:11.5px;color:var(--azul-txt);cursor:pointer;
padding:7px 0;min-height:32px;display:flex;align-items:center}
.sd-mover form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sd-mover select{min-height:44px;font-size:14px;flex:1 1 130px}
.sd-devolver{margin-top:4px}
/* Plan de carrera, lado de Miguel. */
.rpl{list-style:none;margin:0;padding:0}
.rpl-fila{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--linea)}
.rpl-fila:last-child{border-bottom:0}
.rpl-dia{flex:0 0 36px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
font-weight:700;color:var(--texto-3)}
.rpl-txt{flex:1 1 auto;min-width:0}
.rpl-txt b{display:block;font-size:14px;font-weight:600}
.rpl-txt small{display:block;font-size:12px;color:var(--texto-3);margin-top:1px}
/* Los pasos de una sesion, con su barra de colores. Los colores van de fondo
y nunca de texto, asi que valen igual en los tres temas. */
.pb-barra{display:flex;gap:2px;height:14px;margin:4px 0 14px;border-radius:7px;overflow:hidden}
.pb-barra i{display:block;min-width:6px;border-radius:2px}
.pb-lista{list-style:none;margin:0;padding:0}
.pb-tramo{padding:2px 0}
.pb-tramo.engrupo{border-left:2px solid var(--linea);padding-left:11px;margin:9px 0}
.pb-grupo-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.pb-veces{font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
color:var(--texto-3)}
.pb-veces-form{display:flex;gap:6px;align-items:center;margin-left:auto}
.pb-veces-form .campo-ds.mini{width:74px;min-height:44px;font-size:14px}
/* El boton de guardar las veces se quedaba en 33px de alto: la regla de 44
solo cubria los de .pb-btns, y este vive en .pb-veces-form. */
.pb-veces-form .btn-ds.mini{min-height:44px;min-width:44px}
.pb-paso{display:flex;align-items:center;gap:10px;padding:9px 0;
border-bottom:1px solid var(--linea)}
.pb-paso:last-child{border-bottom:0}
.pb-punto{flex:0 0 10px;height:10px;border-radius:50%}
.pb-txt{flex:1 1 auto;min-width:0;font-size:14px;font-weight:600;line-height:1.45}
.pb-btns{display:flex;gap:6px;flex:0 0 auto}
.pb-btns form{margin:0}
.pb-btns .btn-ds.mini{min-height:44px;min-width:44px}
@media (max-width:520px){
.pb-paso{flex-wrap:wrap}
.pb-txt{flex:1 1 100%;order:2}
.pb-btns{order:3;margin-left:20px}
}
/* Seguir la sesion mientras se corre. Letra grande a proposito: se mira de
reojo, en movimiento y a veces con sol de cara. */
.ses{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-m);
padding:15px 16px;margin-bottom:14px}
.ses-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-bottom:9px}
.ses-etq,.ses-cuenta{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
font-weight:700;color:var(--texto-3)}
.ses-ahora{display:flex;align-items:center;gap:11px}
.ses-punto{flex:0 0 14px;height:14px;border-radius:50%;background:#8b93a5}
.ses-ahora b{display:block;font-size:19px;font-weight:700;line-height:1.25}
.ses-ahora small{display:block;font-size:12px;color:var(--texto-3);margin-top:1px}
.ses-falta{display:flex;align-items:baseline;gap:9px;margin-top:11px;flex-wrap:wrap}
.ses-falta b{font-size:38px;font-weight:800;line-height:1;letter-spacing:-.02em}
.ses-falta small{font-size:12px;color:var(--texto-3)}
.ses-progreso{height:8px;border-radius:4px;background:var(--linea);overflow:hidden;
margin-top:11px}
.ses-progreso i{display:block;height:100%;width:0;border-radius:4px;
transition:width .35s ease}
.ses-luego{font-size:13px;color:var(--texto-3);margin:10px 0 0;line-height:1.5}
.ses-saltar{margin-top:12px;min-height:44px}
/* Los pasos, en la pantalla del cliente: se leen, no se editan. */
.rs-pasos{list-style:none;margin:10px 0 0;padding:0}
.rs-tramo{padding:1px 0}
.rs-tramo.engrupo{border-left:2px solid var(--linea);padding-left:10px;margin:7px 0}
.rs-veces{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
font-weight:700;color:var(--texto-3);margin-bottom:2px}
.rs-paso{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14px;
font-weight:600;line-height:1.45}
.rs-paso i{flex:0 0 9px;height:9px;border-radius:50%}
.rs-ir{margin-top:13px}
/* Y en la pantalla del cliente: lo de hoy y la semana. */
.rh{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-m);
padding:14px 16px;margin-bottom:14px}
.rh-etq{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
color:var(--azul-txt);margin-bottom:4px}
.rh-tit{font-size:19px;margin:0 0 4px;line-height:1.2}
.rh-sub{font-size:14px;color:var(--texto-2);margin:0}
/* "Ver mes" dentro del titulo de Tu semana. Va a la derecha del todo y con el
area de toque de 44px que pide el iPhone, no solo el texto. */
.sem-tit{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sem-mes{font-size:12px;letter-spacing:.02em;text-transform:none;font-weight:600;
color:var(--azul-txt);text-decoration:none;border-radius:8px;
/* 44px de alto minimo: es el area de toque de iPhone, y medida salia en 39 */
display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin:-11px -6px}
.sem-mes:active{opacity:.6}
/* --- avisos suaves, sin gritar --- */
.aviso-suave{border-color:color-mix(in srgb, var(--aviso) 38%, transparent)}
/* --- listas de una linea (ultimos entrenos, guias) --- */
.lista-simple{list-style:none;margin:0 0 12px;padding:0}
.lista-simple li{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:11px 0;border-bottom:1px solid var(--linea);
}
.lista-simple li:last-child{border-bottom:0}
.lista-simple b{display:block;font-size:14.5px;color:var(--texto);font-weight:600}
.lista-simple small{display:block;font-size:12.5px;color:var(--texto-3);margin-top:2px}
.lista-simple .fecha{font-size:13px;color:var(--texto-2);white-space:nowrap}
@media(max-width:400px){
.anillo-sem{width:74px;height:74px}
.anillo-txt{width:58px;height:58px}
.sem-dias{gap:5px}
}
.nada{color:var(--texto-3);font-size:14px;font-weight:600}
.anillo-txt b.nada{font-size:15px}
/* ============================================================
FASE 2 - registrar un entreno y la ficha del ejercicio.
Todo pensado para una mano y para leerse de un vistazo entre
serie y serie, no para mirarlo sentado en casa.
============================================================ */
.ej-card{padding:18px 16px;margin-bottom:14px}
.ej-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ej-nombre{font-size:18px;font-weight:700;color:var(--texto);text-decoration:none;line-height:1.2}
a.ej-nombre{border-bottom:1px dotted var(--texto-3)}
a.ej-nombre:hover{border-bottom-color:var(--primario);color:var(--azul-txt)}
.ej-pauta{font-size:13px;color:var(--texto-2);white-space:nowrap;font-weight:600}
.ej-objetivo{font-size:13.5px;color:var(--texto-2);margin:0 0 10px;line-height:1.45}
.ej-objetivo b{color:var(--texto)}
.ej-ultima{font-size:13.5px;color:var(--texto-2);margin:0 0 12px;line-height:1.45}
.ej-ultima b{color:var(--texto)}
.ej-ultima.vacia{color:var(--texto-3)}
/* Las cajitas de "La ultima vez". Transparentes a proposito: el fondo y el
borde salen de --linea y --linea-fuerte, que ya cambian solos en los tres
temas, asi que no hay un color escrito a mano que se quede viejo. */
.ej-ultima-tit{display:block;font-weight:700;color:var(--texto);margin:0 0 7px}
.ej-ultima-cajas{display:flex;flex-wrap:wrap;gap:6px}
.ej-caja{display:inline-flex;align-items:baseline;gap:4px;padding:6px 10px;
border-radius:10px;background:var(--linea);border:1px solid var(--linea-fuerte);
color:var(--texto);font-size:13px;line-height:1.25;font-variant-numeric:tabular-nums}
.ej-caja b{font-weight:700}
/* Las cajas se TOCAN para copiar ese peso y esas reps al hueco de abajo
(Miguel, 25-sep). Como ahora son , hay que quitarles la tipografia
del navegador y dejar claro que se pueden pulsar: sin esto parecen texto y
nadie las toca. */
button.ej-caja{font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;
text-align:left;transition:transform .08s ease, background .15s ease, border-color .15s ease}
button.ej-caja:hover{border-color:var(--acento,#3b63ff)}
button.ej-caja:active{transform:scale(.96)}
button.ej-caja:focus-visible{outline:2px solid var(--acento,#3b63ff);outline-offset:2px}
/* Y que se note que ha copiado, porque el hueco esta mas abajo y no se ve. */
button.ej-caja.copiada{background:var(--acento,#3b63ff);border-color:var(--acento,#3b63ff);color:#fff}
button.ej-caja.copiada .ej-x,button.ej-caja.copiada .ej-rir{color:#fff}
.ej-x{color:var(--texto-3)}
.ej-rir{color:var(--texto-2);font-size:12px}
.ej-cambiado{
font-size:13px;color:var(--texto-2);line-height:1.45;margin:0 0 12px;
padding:10px 12px;border-radius:var(--r-s);
background:color-mix(in srgb, var(--aviso) 12%, transparent);
border:1px solid color-mix(in srgb, var(--aviso) 34%, transparent);
}
.ej-cambiado b{color:var(--texto)}
.en-linea{display:inline}
.enlace-boton{
background:none;border:0;padding:0;font:inherit;color:var(--azul-txt);
text-decoration:underline;cursor:pointer;
}
/* --- las series ya guardadas --- */
.series{list-style:none;margin:0 0 14px;padding:0}
.series li{
display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;
padding:9px 0;border-bottom:1px solid var(--linea);
}
.series li:last-child{border-bottom:0}
.series .n{
width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
font-size:12px;font-weight:700;background:var(--n4);color:var(--texto-2);
}
.series li.efe .n{background:var(--azul-txt);color:#06101F}
.series .d{font-size:14.5px;color:var(--texto);font-weight:600}
.series .t{font-size:11px;color:var(--texto-3);text-transform:uppercase;letter-spacing:.06em}
.series .nt{grid-column:2 / -1;font-size:12.5px;color:var(--texto-2);line-height:1.4}
.series .nt.vid{color:var(--azul-txt)}
/* --- apuntar una serie --- */
.serie-form{margin:0}
.tipo-serie{display:flex;gap:8px;margin-bottom:12px}
.tipo-serie label{flex:1;margin:0}
.tipo-serie input{position:absolute;opacity:0;pointer-events:none}
.tipo-serie span{min-height:44px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
padding:9px 6px;border-radius:var(--r-s);
border:1px solid var(--linea-fuerte);background:transparent;
font-size:13.5px;font-weight:600;color:var(--texto-2);cursor:pointer;
}
.tipo-serie input:checked + span{background:var(--n4);color:var(--texto);border-color:var(--primario)}
.tipo-serie input:focus-visible + span{outline:2px solid var(--primario);outline-offset:2px}
.serie-campos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
/* La serie es lo que se hace en esta pantalla, asi que es lo que se ve primero:
numeros grandes y campos altos. Se toca con la mano sudada y mirando de
reojo entre serie y serie. */
.serie-campos label{font-size:11.5px;color:var(--texto-2);display:block;margin-bottom:5px;
font-weight:600;letter-spacing:.02em}
.serie-campos input{width:100%;font-size:24px;font-weight:700;text-align:center;
padding:14px 6px;font-variant-numeric:tabular-nums}
.mas-serie{margin-bottom:12px}
.mas-serie summary{font-size:13px;color:var(--texto-2);cursor:pointer;
min-height:44px;display:flex;align-items:center;gap:6px}
.mas-serie .et{display:block;font-size:11px;color:var(--texto-3);margin:10px 0 4px}
.mas-serie input[type=text]{width:100%}
.ej-pie{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
/* --- el descanso, fijo abajo para que le siga --- */
.descanso{
position:fixed;left:12px;right:12px;bottom:calc(var(--alto-nav, 68px) + env(safe-area-inset-bottom) + 12px);z-index:60;
display:flex;flex-direction:column;gap:9px;
padding:12px 14px;border-radius:var(--r-l);
background:var(--n3);border:1px solid var(--primario);box-shadow:var(--sombra-2);
}
.descanso[hidden]{display:none}
/* La burbuja del descanso. Pablo, 22-sep: al escribir los pesos con el teclado
abierto la tarjeta se comia la pantalla. Asi que se puede mover a donde no
estorbe y encoger a un circulo con el tiempo dentro. */
.d-mover{position:relative;display:flex;align-items:center;justify-content:center;
margin:-5px -4px 1px;padding:5px 0;cursor:grab;touch-action:none}
.d-mover:active{cursor:grabbing}
.d-grip{width:40px;height:4px;border-radius:2px;background:var(--linea-fuerte)}
.d-min{position:absolute;right:0;top:-2px;width:30px;height:30px;padding:0;
border:0;background:transparent;color:var(--texto-3);
font-size:20px;line-height:1;border-radius:9px;cursor:pointer}
.descanso.moviendo{opacity:.94;box-shadow:var(--sombra-2),0 0 0 2px var(--primario)}
/* Encogida: un circulo y el tiempo DENTRO del anillo, que es lo que pidio
Pablo. Todo lo demas se esconde, no se achica. */
.descanso.mini{width:auto;left:auto;padding:7px;border-radius:100px;gap:0}
.descanso.mini .d-mover,.descanso.mini .d-mandos,.descanso.mini .d-mios,
.descanso.mini #dFin,.descanso.mini .d-txt small{display:none}
.descanso.mini .d-fila{gap:0}
.descanso.mini .d-anillo{width:58px;height:58px}
.descanso.mini .d-anillo svg{width:58px;height:58px}
.descanso.mini .d-txt{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
flex:none;text-align:center;pointer-events:none}
.descanso.mini b{font-size:15px;font-weight:800}
/* En bola se arrastra la bola ENTERA, no el asa, porque el asa esta oculta aqui
arriba. El gesto tiene que ser nuestro: sin `touch-action:none` el navegador
se queda el arrastre como desplazamiento de la pagina y los pointermove dejan
de llegar a mitad de camino, asi que la bola se quedaba pegada al dedo dos
dedos y luego se soltaba sola. */
.descanso.mini{touch-action:none;cursor:grab;
-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.descanso.mini.moviendo{cursor:grabbing}
/* El reloj y el boton de terminar van en una fila; los mandos del cliente
debajo. En una sola fila no caben en un movil de 390 sin partirse. */
.d-fila{display:flex;align-items:center;gap:10px}
.d-mandos{display:flex;gap:8px}
.d-mandos .btn{flex:1}
.d-mandos .btn.on{color:var(--n2);background:var(--primario);border-color:transparent}
.d-mios .d-mios-t{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--texto-3);margin-bottom:7px}
/* La ruleta de tiempo: se gira con el dedo como el reloj del movil.
Por debajo son dos listas que se desplazan con imanes (scroll-snap), asi que
el gesto y la inercia son los del sistema y no unos inventados a mano.
Las tres alturas van atadas: fila 42, ventana 126 (tres filas) y el relleno
de arriba y abajo 42, que es lo que deja centrar la primera y la ultima. */
.ruleta{position:relative;display:flex;align-items:center;justify-content:center;gap:2px;
height:126px;margin:2px 0 10px;
/* se difuminan las puntas para que se vea que la lista sigue */
-webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent)}
.rul{height:126px;overflow-y:auto;scroll-snap-type:y mandatory;
scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-y;
border-radius:12px;outline:none}
.rul::-webkit-scrollbar{display:none}
.rul:focus-visible{box-shadow:0 0 0 2px var(--primario)}
.rul ul{list-style:none;margin:0;padding:42px 0}
.rul li{height:42px;line-height:42px;scroll-snap-align:center;
min-width:66px;text-align:center;
font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;
color:var(--texto-3);opacity:.45;transition:color var(--t),opacity var(--t)}
.rul li.on{color:var(--texto);opacity:1}
.rul-sep{font-size:22px;font-weight:800;color:var(--texto-3);align-self:center;margin-bottom:2px}
/* La banda del centro dice cual es el valor elegido. No escucha nada: el dedo
tiene que llegar a la lista de debajo. */
.rul-banda{position:absolute;left:0;right:0;top:50%;height:42px;transform:translateY(-50%);
border-top:1px solid var(--linea-fuerte);border-bottom:1px solid var(--linea-fuerte);
background:rgba(43,90,255,.07);border-radius:10px;pointer-events:none}
.d-chips{display:flex;flex-wrap:wrap;gap:6px}
.d-chips .d-chip-poner{flex:1 0 100%;color:var(--n2);background:var(--primario);border-color:transparent;
padding:9px 11px;font-size:13.5px}
.d-chips button{appearance:none;cursor:pointer;
padding:7px 11px;border-radius:100px;font:inherit;font-size:12.5px;font-weight:700;
color:var(--texto-2);background:var(--n4);border:1px solid var(--linea-fuerte);
transition:all var(--t)}
.d-chips button.on{color:var(--n2);background:var(--primario);border-color:transparent}
.d-chips .d-chip-plan{color:var(--primario);background:transparent;border-color:var(--primario)}
.d-chips .d-chip-plan.on{color:var(--n2);background:var(--primario)}
.descanso .d-txt{flex:1;min-width:0;line-height:1.15}
.descanso b{display:block;font-size:22px;color:var(--texto);font-variant-numeric:tabular-nums}
.descanso small{display:block;font-size:12px;color:var(--texto-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* --- la hoja de cambiar ejercicio --- */
dialog.hoja{
border:0;padding:0;background:transparent;max-width:520px;width:calc(100% - 24px);
}
dialog.hoja::backdrop{background:rgba(4,8,18,.7)}
dialog.hoja form{
background:var(--n2);border:1px solid var(--linea-fuerte);border-radius:var(--r-l);
padding:20px 18px;box-shadow:var(--sombra-2);
}
dialog.hoja h3{margin:0 0 6px;font-size:18px;color:var(--texto)}
dialog.hoja .muted{font-size:13px;margin:0 0 14px;line-height:1.45}
dialog.hoja .et{display:block;font-size:11px;color:var(--texto-3);margin:12px 0 4px}
dialog.hoja input[type=text]{width:100%}
.alts{display:grid;gap:8px}
.alt{
text-align:left;padding:11px 12px;border-radius:var(--r-s);cursor:pointer;
background:var(--n3);border:1px solid var(--linea-fuerte);color:var(--texto);
}
.alt b{display:block;font-size:14.5px}
.alt small{display:block;font-size:12.5px;color:var(--texto-2);margin-top:2px}
.alt:hover{border-color:var(--primario)}
/* --- el buscador de alternativas (Miguel, 28-sep) --- */
dialog.hoja input[type=search].alt-buscar{
width:100%;padding:11px 12px;border-radius:var(--r-s);
background:var(--n2);border:1px solid var(--linea-fuerte);color:var(--texto);
font-size:16px; /* menos de 16 y el movil hace zoom solo al tocarlo */
}
dialog.hoja input[type=search].alt-buscar:focus{
outline:none;border-color:var(--primario);
}
/* Alto tope y scroll propio: con 12 resultados dentro de una hoja que ya trae
motivo y casilla, el boton de guardar se iba fuera de la pantalla del movil. */
.alt-res{display:grid;gap:6px;margin-top:8px;max-height:44vh;overflow-y:auto}
.alt-res:empty{margin-top:0}
.alt-hit{width:100%}
.alt-nada{font-size:12.5px;color:var(--texto-3);margin:6px 0 0}
/* La alternativa: el ejercicio del plan manda y esto va DEBAJO, a lo ancho de
la tarjeta. Dentro de la columna del titulo no cabia (unos 120 px en un
movil, con la foto y los puntos al lado) y el nombre salia como "Zanc...". */
.ej-alt{
display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
margin:0;padding:7px 14px 9px;
font-size:12.5px;color:var(--texto-2);
}
.ej-alt-et{
flex:none;
font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;
padding:1px 6px;border-radius:999px;
background:rgba(var(--pri-rgb),.14);color:var(--azul-txt);
}
.ej-alt-plan{color:var(--texto-3);font-size:11.5px}
.hoja-pie{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.fin-form{margin-top:22px}
/* --- ficha del ejercicio --- */
.ej-video,.ej-foto{width:100%;height:auto;border-radius:var(--r-m);display:block}
.texto-ficha{font-size:14.5px;color:var(--texto-2);line-height:1.55;margin:0;white-space:pre-line}
.texto-ficha b{color:var(--texto)}
@media(max-width:360px){
.serie-campos{grid-template-columns:1fr 1fr}
.serie-campos div:last-child{grid-column:1 / -1}
}
/* En tema claro el azul primario es oscuro, asi que el numero de la serie
necesita letra blanca encima. Con la misma letra oscura de los dos temas
daba 3,6 y hay que llegar a 4,5. */
:root[data-tema="claro"] .series li.efe .n{color:#FFFFFF}
/* ---------- FASE 3: actividad y calendario ---------- */
/* minmax(0,1fr) y no 1fr: un `1fr` pelado es minmax(AUTO,1fr), y ese auto
respeta el ancho natural del control. Un input de hora trae el suyo de
fabrica y es ancho, asi que en un movil de 360px la columna no podia
encoger y la fila se salia 12px de la pantalla. Medido el 23-sep-2026. */
.dos-campos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.dos-campos label{display:block;font-size:11px;color:var(--texto-3);margin-bottom:4px}
.dos-campos input{width:100%}
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cal-nav b{font-size:16px;color:var(--texto);text-transform:capitalize}
.cal-cabecera{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal-cabecera span{text-align:center;font-size:11px;color:var(--texto-3);font-weight:700}
.cal-semana{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.cal-dia{
min-height:46px;border-radius:var(--r-s);padding:5px 3px 4px;
background:var(--n3);border:1px solid transparent;
display:flex;flex-direction:column;align-items:center;gap:4px;
}
.cal-dia.fuera{opacity:.4}
.cal-dia.hoy{border-color:var(--primario)}
.cal-dia .num{font-size:12px;color:var(--texto-2);font-weight:600}
.cal-dia.hoy .num{color:var(--azul-txt)}
.cal-dia .puntos{display:flex;gap:3px;flex-wrap:wrap;justify-content:center}
.cal-dia i,.leyenda i{width:7px;height:7px;border-radius:50%;display:inline-block}
.p-entreno{background:var(--primario)}
.p-actividad{background:var(--secundario)}
.p-revision{background:var(--enfasis)}
.p-foto{background:var(--aviso)}
.leyenda{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.leyenda li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--texto-2)}
.aviso-ds p{margin:0}
/* ---------- su plan y sus datos ---------- */
.plan-nombre{font-size:19px;font-weight:700;color:var(--texto);margin:0 0 12px}
.datos-plan{list-style:none;margin:0;padding:0}
.datos-plan li{
display:flex;align-items:baseline;justify-content:space-between;gap:12px;
padding:9px 0;border-bottom:1px solid var(--linea);
}
.datos-plan li:last-child{border-bottom:0}
.datos-plan span{font-size:13px;color:var(--texto-3)}
.datos-plan b{font-size:14.5px;color:var(--texto);text-align:right;word-break:break-word}
.plan-aviso{font-size:14px;color:var(--texto-2);line-height:1.5;margin:14px 0 0}
.plan-aviso b{color:var(--texto)}
/* ---------- FASE 4: la revision por pasos ---------- */
.rev-borrador{
font-size:13.5px;color:var(--texto-2);line-height:1.5;margin-bottom:14px;
padding:11px 13px;border-radius:var(--r-s);
background:color-mix(in srgb, var(--primario) 12%, transparent);
border:1px solid color-mix(in srgb, var(--primario) 34%, transparent);
}
.pasos-barra{display:flex;gap:5px;margin-bottom:8px}
.pasos-barra i{flex:1;height:4px;border-radius:2px;background:var(--linea)}
.pasos-barra i.hecho{background:var(--primario)}
.pasos-barra i.ahora{background:var(--secundario)}
.pasos-txt{font-size:12.5px;color:var(--texto-3);margin:0 0 16px}
.pasos-pie{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.pasos-pie .btn{flex:1}
.pasos-guardado{font-size:12.5px;color:var(--texto-3);margin:10px 0 0;text-align:right;min-height:16px}
.paso[hidden]{display:none}
/* ---------- puntuacion por area del feedback ---------- */
.notas-area{list-style:none;margin:0;padding:0}
.notas-area li{
display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline;
padding:10px 0;border-bottom:1px solid var(--linea);
}
.notas-area li:last-child{border-bottom:0}
.notas-area span{font-size:14px;color:var(--texto-2)}
.notas-area b{font-size:17px;color:var(--texto);font-weight:700}
.notas-area b i{font-size:12px;color:var(--texto-3);font-style:normal;font-weight:600}
.notas-area em{
grid-column:1 / -1;height:4px;border-radius:2px;background:var(--linea);
display:block;position:relative;
}
.notas-area em::after{
content:"";position:absolute;inset:0 auto 0 0;width:var(--pct,0);
border-radius:2px;background:var(--grad-azul);
}
.notas-area li.sin b{font-size:13px}
/* Un `hidden` no gana a una regla que pone display: los botones se seguian
viendo estando ocultos. Solo se ve en el navegador, no leyendo el HTML. */
.pasos-pie .btn[hidden]{display:none}
/* ---------- FASE 5: progreso, mapa muscular y estadisticas ---------- */
.ej-progreso{padding:12px 0;border-bottom:1px solid var(--linea)}
.ej-progreso:last-of-type{border-bottom:0}
.ep-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.ep-cab b{font-size:15px;color:var(--texto)}
.ep-barras{display:flex;align-items:flex-end;gap:4px;height:44px;margin-bottom:6px}
.ep-barras.alto{height:64px}
.ep-barras i{
flex:1;min-width:6px;border-radius:3px 3px 0 0;
height:var(--h,4%);min-height:3px;background:var(--grad-azul);
}
.ej-progreso small,.card > small{display:block;font-size:12.5px;color:var(--texto-3);line-height:1.45}
.fis-cambio{font-size:14.5px;color:var(--texto-2);margin:0 0 12px;line-height:1.5}
.fis-cambio b{font-size:22px;color:var(--texto);display:block}
.mapa{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mapa-cuerpo{text-align:center}
.mapa-cuerpo svg{width:100%;max-width:150px;height:auto}
.mc-etq{display:block;font-size:11.5px;color:var(--texto-3);margin-bottom:6px;font-weight:600}
.barras-h{list-style:none;margin:0;padding:0}
.barras-h li{
display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:baseline;
padding:9px 0;border-bottom:1px solid var(--linea);
}
.barras-h li:last-child{border-bottom:0}
.barras-h span{font-size:14px;color:var(--texto-2)}
.barras-h b{font-size:13.5px;color:var(--texto);white-space:nowrap}
.barras-h em{grid-column:1 / -1;height:5px;border-radius:3px;background:var(--linea);position:relative;display:block}
.barras-h em::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--pct,0);border-radius:3px;background:var(--grad-azul)}
/* ============ FASE 7 · logros, tarjeta para compartir y avisos ============ */
.lg-nums{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:520px){.lg-nums{grid-template-columns:repeat(4,1fr)}}
.lg-num{background:var(--n3);border:1px solid var(--linea);border-radius:var(--r-m);
padding:14px 10px;text-align:center}
.lg-num b{display:block;font-size:26px;font-weight:800;color:var(--texto);line-height:1.1}
.lg-num span{display:block;margin-top:4px;font-size:12px;color:var(--texto-2)}
.lg-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lg-item{display:flex;gap:12px;align-items:flex-start;background:var(--n3);
border:1px solid var(--linea);border-radius:var(--r-m);padding:12px 14px}
.lg-item b{color:var(--texto);font-size:15px}
.lg-item p{margin:2px 0 0;font-size:13px}
.lg-fecha{color:var(--texto-3);font-size:12px;margin-top:4px !important}
.lg-marca{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
background:var(--grad-azul);box-shadow:0 0 0 3px rgba(var(--pri-rgb),.14);margin-top:2px}
.lg-marca-off{background:var(--n4);box-shadow:none}
.lg-lista-off .lg-item{opacity:.72}
.lg-check{display:grid;gap:8px;margin:12px 0}
.lg-check label{display:flex;gap:10px;align-items:center;background:var(--n3);
border:1px solid var(--linea);border-radius:var(--r-s);padding:11px 13px;
font-size:14px;color:var(--texto);cursor:pointer;min-height:44px}
.lg-check input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--primario)}
.lg-canvas{width:100%;max-width:340px;height:auto;display:block;margin:0 auto;
border-radius:var(--r-m);border:1px solid var(--linea)}
.lg-botones{margin-top:14px;display:flex;justify-content:center}
.lg-salta{background:var(--n3);border:1px solid rgba(var(--pri-rgb),.34);
border-radius:var(--r-m);padding:14px 16px;margin-bottom:14px}
.lg-salta-t{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
color:var(--azul-txt);font-weight:700;margin-bottom:6px}
.lg-salta-l{font-size:14px;color:var(--texto);margin-top:2px}
.lg-salta-a{display:inline-block;margin-top:8px;font-size:13px;color:var(--azul-txt)}
.av-inicio{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.av-inicio li{background:var(--n3);border:1px solid var(--linea);border-left:3px solid var(--aviso);
border-radius:var(--r-s);padding:11px 14px;font-size:14px;color:var(--texto)}
.plan-aviso{background:var(--n3);border:1px solid var(--linea);border-radius:var(--r-m);
padding:13px 16px;margin-bottom:14px;font-size:14px;color:var(--texto)}
.plan-aviso.cerca{border-left:3px solid var(--aviso)}
.plan-aviso.vencido{border-left:3px solid var(--peligro)}
.plan-aviso a{display:inline-block;margin-left:6px;color:var(--azul-txt)}
.av-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.av-lista label{display:flex;gap:12px;align-items:flex-start;background:var(--n3);
border:1px solid var(--linea);border-radius:var(--r-m);padding:13px 15px;cursor:pointer}
.av-lista input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--primario)}
.av-lista b{color:var(--texto);font-size:14px;font-weight:600}
.av-lista i{font-style:normal;font-size:13px}
:root[data-tema="claro"] .lg-num,
:root[data-tema="claro"] .lg-item,
:root[data-tema="claro"] .lg-check label,
:root[data-tema="claro"] .av-inicio li,
:root[data-tema="claro"] .av-lista label,
:root[data-tema="claro"] .lg-salta,
:root[data-tema="claro"] .plan-aviso{background:var(--n3)}
/* ============ repaso estetico 25-ago: lo que se toca, 44 px ============ */
/* Medido en el navegador, no supuesto: los filtros salian a 33 px, el enlace de
volver a 17 y el logo de la barra a 30. En un movil eso se falla al tocar y la
persona cree que la app no responde. El tamano de la LETRA no cambia: lo que
crece es el area que se puede tocar. */
.chip-ds{min-height:44px;padding-top:0;padding-bottom:0}
.volver{min-height:44px;padding:11px 2px;margin-top:-6px}
.volver a{display:inline-flex;align-items:center;min-height:44px;padding:11px 2px}
p.volver{margin-top:0}
.mbar .marca{min-height:44px}
/* Los campos de fecha, hora y los deslizadores se quedaban por debajo de 44 px:
el navegador NO les aplica la altura de los demas campos. Se ve solo midiendo. */
input[type="date"],input[type="time"],input[type="datetime-local"]{min-height:48px}
input[type="range"]{min-height:44px}
.enlace-boton{min-height:44px;padding:11px 4px;display:inline-flex;align-items:center}
/* --- Enlaces de pie de las pantallas de acceso -----------------------------
Eran de 18 px de alto: se pulsan mal con el dedo. Se les da area sin
moverlos de sitio, porque el margen de arriba se compensa. */
.link-row{margin-top:12px}
.link-row a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:0 10px;
}
/* --- Tarjeta de check-in --------------------------------------------------
En tema claro los tokens dorados se oscurecen a proposito para poder usarse
como TEXTO sobre fondo blanco. Esta tarjeta los usaba como FONDO, y con la
letra casi negra encima se quedaba en 2,9 de contraste: el mismo token no
puede hacer los dos trabajos. Aqui se le da su propio par. */
/* Ya no hace falta el par propio: la tarjeta usa los tokens del tema, que estan
medidos en los tres. Se deja solo el rail, que en claro pide mas cuerpo. */
:root[data-tema="claro"] .checkin-cta{border-left-color:#B36A00}
/* --- Cinta de "estas viendo como un cliente" ------------------------------
Fija arriba y con color propio, para que no haya duda de que lo que se ve no
es tu cuenta. El cuerpo se baja para que no tape el contenido. */
.cinta-mirando{
position:fixed; top:0; left:0; right:0; z-index:9000;
display:flex; align-items:center; justify-content:center;
flex-wrap:wrap; gap:6px 14px;
background:#0038B5; color:#FFFFFF;
font-size:13px; font-weight:600;
padding:10px 14px; text-align:center;
}
.cinta-mirando a{
display:inline-flex; align-items:center; min-height:44px;
padding:0 14px; border-radius:100px;
background:#FFFFFF; color:#0B2E9E; font-weight:700; white-space:nowrap;
}
body.mirando{ padding-top:64px }
@media (max-width:430px){ body.mirando{ padding-top:88px } }
/* La cinta se pliega (Miguel, 22-sep). Plegada deja de ser una banda de lado a
lado y pasa a ser una pastilla arriba a la derecha: asi no tapa el entreno,
que es lo que quiere mirar, y se sigue viendo que esta en vista cliente. */
.cinta-plegar{
position:absolute; right:8px; top:8px;
width:32px; height:32px; padding:0; border:0; cursor:pointer;
display:flex; align-items:center; justify-content:center;
border-radius:50%; background:rgba(255,255,255,.18); color:#FFFFFF;
-webkit-tap-highlight-color:transparent;
}
.cinta-plegar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;
stroke-linecap:round;stroke-linejoin:round;display:block}
.cinta-mini-txt{display:none}
.cinta-mirando.plegada{
left:auto; right:8px; top:8px;
width:auto; padding:5px 8px 5px 13px; gap:7px;
border-radius:100px; font-size:11.5px; cursor:pointer;
box-shadow:0 4px 14px rgba(0,0,0,.30);
}
/* Plegada se esconde TODO lo de dentro y se enseña solo el rotulo corto. El
boton se queda en el flujo, no absoluto, o se saldria de la pastilla. */
.cinta-mirando.plegada > *{display:none}
.cinta-mirando.plegada .cinta-mini-txt{display:inline;font-weight:700;letter-spacing:.01em}
.cinta-mirando.plegada .cinta-plegar{
display:flex; position:static; width:22px; height:22px;
}
.cinta-mirando.plegada .cinta-plegar svg{width:14px;height:14px;transform:rotate(180deg)}
/* --- Campo de contrasena con boton de mostrar ------------------------------
El boton va DENTRO del campo, y el campo reserva sitio a la derecha para que
el texto no pase por debajo del boton al escribir una contrasena larga. */
.campo-clave{position:relative;display:block}
.campo-clave input{width:100%;padding-right:50px}
.campo-clave .ver-clave{
position:absolute; right:2px; top:50%; transform:translateY(-50%);
display:inline-flex; align-items:center; justify-content:center;
width:44px; height:44px; min-width:0; padding:0;
border:none; border-radius:10px;
background:transparent; color:var(--texto-2);
cursor:pointer;
}
.campo-clave .ver-clave:hover{color:var(--texto)}
.campo-clave .ver-clave[aria-pressed="true"]{color:var(--acento)}
.campo-clave .ver-clave svg{display:block;pointer-events:none}
/* Cuando el llavero del movil rellena un campo, Safari y Chrome le pintan un
fondo amarillo suyo que no hay forma de quitar con background: solo cede con
una sombra interior enorme. Sin esto, sobre el diseno oscuro sale una caja
amarilla con letra negra y parece que algo esta roto. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-text-fill-color:var(--texto);
-webkit-box-shadow:0 0 0 1000px var(--n4) inset;
box-shadow:0 0 0 1000px var(--n4) inset;
caret-color:var(--texto);
transition:background-color 9999s ease-in-out 0s;
}
/* El cliente de pruebas lleva otro color: si la cinta fuera igual, un dia tocaria
creyendo que esta en el suyo y estaria en el de una persona de verdad. */
.cinta-mirando.pruebas{background:#04835A}
.cinta-mirando.pruebas a{color:#04563C}
/* Ponerse una rutina sin salir del cliente de pruebas. La altura de la cinta la
mide el JS de base.html y la pasa al padding del body: aqui crece de una a tres
lineas segun el ancho, y un numero fijo se quedaria corto o de mas. */
.cinta-rutina{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.cinta-rutina select{
min-height:44px; max-width:230px; padding:0 10px;
border:1px solid rgba(255,255,255,.55); border-radius:9px;
background:rgba(255,255,255,.14); color:#FFFFFF;
font-size:13px; font-weight:600;
}
.cinta-rutina select option{color:#12222C;background:#FFFFFF}
.cinta-rutina button{
display:inline-flex; align-items:center; min-height:44px;
padding:0 14px; border:0; border-radius:100px; cursor:pointer;
background:#FFFFFF; color:#04563C; font-size:13px; font-weight:700; white-space:nowrap;
}
.cinta-rutina button.flojo{
background:transparent; color:#FFFFFF; border:1px solid rgba(255,255,255,.6);
}
.cinta-nota{font-weight:500;opacity:.95}
/* --- caja de aviso amable en las pantallas de acceso (crear cuenta, recuperar) --- */
.caja-info{
text-align:left;margin-top:6px;padding:16px 16px 14px;
border-radius:14px;border:1px solid var(--linea);
background:color-mix(in srgb, var(--primario) 8%, var(--fondo-2));
}
.caja-info-t{
font-weight:700;font-size:14.5px;line-height:1.4;
color:var(--texto);margin-bottom:8px;
}
.caja-info p{
margin:0 0 8px;font-size:13.5px;line-height:1.65;color:var(--texto-2);
}
.caja-info p:last-child{margin-bottom:0}
/* --- Recursos: hábitos, ordenar la comida y calentamiento (26-ago) ----------
Las tres zonas que pidió Miguel son la misma pantalla con distinta categoría,
así que el estilo es uno solo. */
.sub{font-size:13.5px;line-height:20px;color:var(--texto-3);margin:4px 0 16px}
.min-w-0{min-width:0}
.rec-grupo{margin-bottom:22px}
.rec-grupo-t{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--texto-3);margin-bottom:2px}
.rec-grupo-p{font-size:12.5px;color:var(--texto-3);margin-bottom:9px}
.rec-item{display:flex;align-items:center;gap:12px;margin-bottom:10px;min-height:56px;
text-decoration:none;color:inherit}
.rec-item .t{font-size:15px;font-weight:700;line-height:20px;word-break:break-word}
.rec-item .d{font-size:12.5px;line-height:18px;color:var(--texto-3);margin-top:2px}
.rec-flecha{flex:none;font-size:17px;color:var(--texto-3)}
.rec-cat{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--azul-txt);margin-bottom:2px}
/* El texto se escribe con saltos de línea normales y se respetan: si no, todo
se pega en un párrafo y no hay quien lo lea. */
.rec-texto{white-space:pre-wrap;font-size:14.5px;line-height:23px}
.rec-media{margin:14px 0 0}
/* Las fotos suyas son anchas (dos poses una al lado de otra). A pantalla completa
ocupaban una pantalla cada una y para diez ejercicios eso es scroll infinito.
Con object-fit:contain se ven enteras y no se deforman: nunca "fill". */
.rec-media img,.rec-media video{width:100%;display:block;border-radius:12px}
/* La lamina se queda del tamano que le toca y NO se estira a lo ancho de la
pantalla: asi no sobra sitio a los lados y no hay marco que pintar.
Antes era width:100% con object-fit:contain y el hueco de los lados salia
BLANCO (Miguel, 17-sep: "sale fondo blanco"). Poner ese hueco del azul de
las laminas tampoco valia: las dos verticales de tren inferior traen un azul
mas oscuro que el resto y la juntura se veia (46 y 34 de diferencia de canal,
medido en pantalla). Sin hueco no hay juntura posible.
El degradado queda de red por si una lamina no llega a cargar. */
.rec-media img{width:auto;max-width:100%;max-height:190px;margin:0 auto;
object-fit:contain;
background:linear-gradient(180deg,#011E7E 0%,#002189 50%,#012FB4 100%)}
.rec-media video{height:auto;background:#000}
.rec-media figcaption{font-size:12.5px;line-height:18px;color:var(--texto-3);margin-top:6px}
.rec-media form{margin-top:8px}
/* El PDF dentro de la ficha (21-sep). Lo pinta pdf.js en un lienzo por pagina,
asi que aqui no hay visor de navegador al que pedirle nada: son imagenes que
dibuja la propia pagina y se comportan igual en todos los telefonos. */
.rec-pdf{margin:14px 0 0;display:flex;flex-direction:column;gap:10px}
.rec-pdf-pag{width:100%;height:auto;display:block;border-radius:12px;
background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.rec-pdf-cargando{font-size:13px;color:var(--texto-3);padding:18px 0;text-align:center}
.rec-pdf-abrir{margin-top:12px}
.rec-chip{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:100px;font-size:10.5px;
font-weight:800;background:rgba(180,120,10,.16);color:#B4780A;vertical-align:middle}
.fila-check{display:flex;align-items:center;gap:9px;min-height:44px;margin-top:10px;
font-size:14px;font-weight:600}
.fila-check input{width:20px;height:20px;flex:none}
.btn-fuera{border:1px solid var(--linea-fuerte);background:transparent;color:var(--texto-3)}
/* --- Diario de comidas (26-ago) --------------------------------------------
El aproximado se enseña SIEMPRE como rango y con su explicación al lado. Un
número solo, sin decir de dónde sale, se lee como si fuera exacto. */
.cm-dias{display:flex;gap:7px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px;
-webkit-overflow-scrolling:touch}
.cm-dia{flex:none;display:inline-flex;align-items:center;min-height:38px;padding:0 12px;
border-radius:100px;border:1px solid var(--linea);font-size:12.5px;font-weight:700;
color:var(--texto-2);text-decoration:none;white-space:nowrap}
.cm-dia.activo{background:var(--primario);border-color:var(--primario);color:#fff}
.cm-resumen{text-align:left}
.cm-res-k{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-3)}
.cm-res-v{font-size:23px;font-weight:800;margin-top:2px}
.cm-res-p{font-size:12.5px;line-height:18px;color:var(--texto-3);margin-top:6px}
.cm-item input[type=file],.card input[type=file]{min-height:44px;padding:10px 0}
.cm-porc-t{margin-top:16px;font-size:13.5px;font-weight:700}
.cm-porc-t span{display:block;font-size:12px;font-weight:500;color:var(--texto-3);margin-top:2px}
/* La etiqueta va ENCIMA, no al lado. En una fila, "Proteína ... palmas" no cabia
en cuatro columnas y el texto de una se metia encima de la siguiente. No se
veia midiendo contra el ancho de la ventana porque se salia de su TARJETA,
no de la pantalla. */
.cm-porc{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:9px;margin-top:9px}
/* El margen viene de la regla global `form label{margin:16px 0 6px}` de app.css,
y como la PRIMERA lleva `:first-child{margin-top:0}`, esa quedaba 16px mas
arriba que sus companeras. Eso era el "los textos no estan alineados". */
.cm-p{display:flex;flex-direction:column;align-self:stretch;margin:0 !important;
padding:9px 10px;border:1px solid var(--linea);border-radius:10px;min-width:0}
.cm-p .k{display:block;font-size:12.5px;font-weight:700;margin:0 0 5px}
.cm-p-in{display:flex;align-items:center;gap:7px;min-width:0}
.cm-p input{width:62px;flex:none;min-height:44px;text-align:center;padding:0 4px;margin:0 !important}
.cm-p .u{font-size:12px;color:var(--texto-3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-item{margin-bottom:12px}
.cm-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cm-mom{font-size:15px;font-weight:700}
.cm-kcal{font-size:12.5px;font-weight:700;color:var(--texto-3);white-space:nowrap}
.cm-foto{width:100%;max-height:230px;object-fit:cover;border-radius:12px;margin-top:9px;display:block}
.cm-nota{font-size:13.5px;line-height:20px;margin-top:8px}
.cm-porciones{font-size:12.5px;color:var(--texto-3);margin-top:6px}
.cm-item form{margin-top:10px}
.cm-borrar-todo{margin-top:20px}
.cm-borrar-todo .notilla{font-size:12px;color:var(--texto-3);margin-top:6px}
.ref-fila{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:10px 0;
border-top:1px solid var(--linea)}
.ref-fila:first-child{border-top:none}
.ref-k{flex:1 1 130px;min-width:0;font-size:14px;font-weight:700}
.ref-k span{display:block;font-size:12px;font-weight:500;color:var(--texto-3)}
.ref-n{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--texto-3)}
.ref-n input{width:74px;min-height:44px;text-align:center;margin:0}
.ref-u{font-size:12.5px;color:var(--texto-3)}
/* --- Lo que come, dentro de la ficha del cliente --------------------------- */
.ref-enlace{margin-left:auto;font-size:12px;font-weight:700;color:var(--azul-txt);text-decoration:none}
.cmd-dia{padding:12px 0;border-top:1px solid var(--linea)}
.cmd-dia:first-of-type{border-top:none}
.cmd-fecha{font-size:12.5px;font-weight:800}
.cmd-fecha span{font-weight:600;color:var(--texto-3);margin-left:8px}
.cmd-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:9px;margin-top:9px}
.cmd-c{min-width:0}
.cmd-c img{width:100%;height:96px;object-fit:cover;border-radius:9px;display:block}
.cmd-sinfoto{height:96px;border-radius:9px;border:1px dashed var(--linea);display:flex;
align-items:center;justify-content:center;font-size:12px;color:var(--texto-3)}
.cmd-mom{font-size:12px;font-weight:700;margin-top:5px}
.cmd-nota{font-size:11.5px;line-height:16px;color:var(--texto-2);margin-top:2px;word-break:break-word}
.cmd-porc{font-size:11px;color:var(--texto-3);margin-top:3px}
.cmd-aviso{font-size:12px;line-height:17px;color:var(--texto-3);margin-top:12px}
/* "La vez anterior": el entreno entero de la ultima vez, para comparar de un
vistazo. Solo se pinta si de verdad hay con que comparar. */
.vez-anterior{margin:0 0 16px;border:1px solid var(--linea);border-radius:12px;
background:var(--n3);overflow:hidden}
.vez-anterior>summary{list-style:none;cursor:pointer;padding:13px 14px;min-height:44px;
font-weight:700;font-size:14px;display:flex;align-items:center}
.vez-anterior>summary::-webkit-details-marker{display:none}
.vez-anterior>summary::after{content:'⌄';margin-left:auto;opacity:.6}
.vez-anterior[open]>summary::after{content:'⌃'}
.va-in{padding:0 14px 12px}
.va-linea{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
border-bottom:1px solid var(--linea);font-size:13.5px}
.va-linea:last-child{border-bottom:none}
.va-linea .f{color:var(--texto-2);font-weight:700;max-width:52%}
.va-linea .v{font-weight:800;text-align:right;min-width:0}
/* El peso que sale del test de RM. Va marcado como estimacion a proposito: es
una tabla general, no una medida de esa persona. */
.ej-rm{margin:8px 0 0;padding:10px 12px;border-radius:10px;font-size:13.5px;line-height:1.5;
background:rgba(var(--pri-rgb),.10);border:1px solid rgba(var(--pri-rgb),.28);color:var(--texto)}
.ej-rm-pie{display:block;margin-top:4px;font-size:12px;color:var(--texto-2);line-height:1.45}
/* SU TEST SE HA QUEDADO CORTO. Va en el amarillo del test de RM, que es el que
ya se usa en toda la app para hablar del maximo: inventar un segundo amarillo
para lo mismo solo hace que parezcan dos cosas distintas. */
.ej-recalc{margin:8px 0 0;padding:11px 13px;border-radius:12px;
background:rgba(var(--rec-rgb),.12);border:1px solid rgba(var(--rec-rgb),.34)}
.ej-recalc-t{margin:0;font-size:13.5px;font-weight:800;color:var(--rec-txt);
display:flex;align-items:center;gap:6px;line-height:1.35}
.ej-recalc-ic{display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;border-radius:50%;flex:none;
background:var(--rec);color:var(--rec-tinta);font-size:11px;font-weight:900}
.ej-recalc-c{margin:5px 0 9px;font-size:13.5px;line-height:1.5;color:var(--texto)}
.ej-recalc form{margin:0}
.ej-recalc-pie{margin:8px 0 0;font-size:12px;line-height:1.45;color:var(--texto-2)}
.nt.rir-est{color:var(--texto-3)}
.nt.rir-est.ojo{color:var(--aviso)}
/* El formulario del test de RM. Las casillas se estrechan pero no se aplastan:
por debajo de su minimo la fila se parte sola. */
.rm-form{margin:10px 0 14px}
.rm-campos{display:flex;flex-wrap:wrap;gap:10px}
.rm-c{display:flex;flex-direction:column;gap:5px;margin:0 !important;flex:1 1 92px;min-width:92px;
font-size:12px;font-weight:700;color:var(--texto-2)}
.rm-c.ancho{flex:1 1 100%}
.rm-c input{margin:0 !important;min-height:44px}
.rm-form>.rm-c{margin-top:10px !important}
.rm-form button{margin-top:12px}
.vacio-mini{font-size:13.5px;color:var(--texto-3);margin:6px 0 0;line-height:1.5}
.rm-enlace{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:10px 0 14px}
.rm-enlace select{margin:0 !important;min-height:44px}
.rm-enlace button{margin:0}
.rm-enlace .gc-pie{flex:1 1 100%;margin:0}
/* ============================================================
FASE 2 · La pantalla de entrenar
Antes esta pantalla era un formulario largo con TODOS los ejercicios
abiertos a la vez. En mitad de un entreno lo unico que importa es el
ejercicio en el que estas, asi que ahora solo hay uno abierto.
============================================================ */
/* --- la barra de progreso de la sesion --- */
.ses-barra{
position:sticky;top:0;z-index:30;
margin:0 -16px 16px;padding:12px 16px 14px;
background:var(--glass-2);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
border-bottom:1px solid var(--linea);
}
.ses-l1{display:flex;align-items:baseline;gap:10px}
.ses-dia{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--texto);min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ses-cuenta{margin-left:auto;flex:none;font-size:12.5px;font-weight:700;color:var(--texto-2);
font-variant-numeric:tabular-nums}
.ses-pista{height:4px;border-radius:99px;background:var(--n4);margin-top:9px;overflow:hidden}
.ses-pista i{display:block;height:100%;border-radius:99px;background:var(--grad-azul);
transition:width var(--t-lento)}
.ses-pie{margin:8px 0 0;font-size:12.5px;color:var(--texto-3);line-height:1.35}
/* --- la lista de ejercicios --- */
.ejs{display:flex;flex-direction:column;gap:10px}
.ej{
border-radius:var(--r-l);border:1px solid var(--linea);
background:var(--n2);overflow:hidden;
transition:border-color var(--t),box-shadow var(--t);
}
.ej.abierto{border-color:rgba(var(--pri-rgb),.42);box-shadow:var(--sombra)}
.ej.listo:not(.abierto){opacity:.72}
.ej-tapa{
width:100%;min-height:64px;display:flex;align-items:center;gap:12px;
padding:13px 14px;background:none;border:0;text-align:left;cursor:pointer;
color:var(--texto);font:inherit;
transition:background var(--t);
}
.ej-tapa:active{background:var(--n3)}
.ej-tapa:focus-visible{outline:2px solid var(--primario);outline-offset:-2px}
/* La cabecera son DOS botones: el numero, que marca el ejercicio como hecho, y
el resto, que abre y cierra. Miguel, 22-sep. El numero sale del boton grande
porque un boton no puede llevar otro dentro. */
.ej-cab{display:flex;align-items:stretch}
.ej-marca{flex:none;display:flex;align-items:center;padding:13px 4px 13px 14px;
background:none;border:0;cursor:pointer;color:inherit;
-webkit-tap-highlight-color:transparent}
.ej-marca:focus-visible{outline:2px solid var(--primario);outline-offset:-2px;border-radius:12px}
.ej-cab .ej-tapa{flex:1;min-width:0;padding-left:12px}
.ej-orden{
flex:none;width:26px;height:26px;border-radius:50%;
display:grid;place-items:center;position:relative;
font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;
background:var(--n4);color:var(--texto-2);
transition:background var(--t),color var(--t);
}
.ej-tic{display:none;width:15px;height:15px}
.ej.marcado .ej-orden{background:var(--primario);color:#fff}
.ej.marcado .ej-orden-n{display:none}
.ej.marcado .ej-tic{display:block}
/* El toque mide 44x52 aunque la bolita mida 26: el area la pone el relleno del
boton, no el circulo, para no deformarlo. */
.ej.abierto .ej-orden{background:var(--primario);color:#fff}
.ej.listo .ej-orden{background:color-mix(in srgb,var(--ok) 26%,transparent);color:var(--ok)}
/* La foto del ejercicio dentro del entreno. 40px: entra al lado del numero sin
robarle sitio al nombre, y se sigue reconociendo el movimiento de un vistazo
con todos los ejercicios cerrados. */
.ej-mini{flex:none;width:40px;height:40px;border-radius:10px;object-fit:cover;
background:var(--n4);border:1px solid var(--linea)}
.ej-tit{flex:1;min-width:0;display:block}
.ej-tit b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ej-tit small{display:block;margin-top:2px;font-size:12px;color:var(--texto-3)}
.ej-puntos{flex:none;display:flex;gap:4px;align-items:center}
.ej-puntos i{width:7px;height:7px;border-radius:50%;background:var(--n4);
border:1px solid var(--linea-fuerte);transition:background var(--t)}
.ej-puntos i.on{background:var(--primario);border-color:transparent}
.ej.listo .ej-puntos i.on{background:var(--ok)}
.ej-puntos i.extra{background:var(--aviso)}
.ej-chevron{flex:none;width:10px;height:10px;border-right:2px solid var(--texto-3);
border-bottom:2px solid var(--texto-3);transform:rotate(45deg) translate(-2px,-2px);
transition:transform var(--t)}
.ej.abierto .ej-chevron{transform:rotate(-135deg) translate(-2px,-2px)}
/* el cuerpo se ABRE moviendo la altura, no redibujando: asi la pagina no
pega un salto debajo del dedo en mitad de una serie */
.ej-cuerpo{max-height:0;overflow:hidden;transition:max-height var(--t-lento)}
.ej-dentro{padding:2px 14px 15px;border-top:1px solid var(--linea)}
@media (prefers-reduced-motion:reduce){ .ej-cuerpo{transition:none} }
.ej-ficha{
/* Mas pequenito, pedido por Miguel el 17-sep. Lo que se VE baja a 34px, pero
el area que se toca sigue siendo de 44: la estira el ::after de abajo. Un
boton de 34px de alto en un movil se falla, y el no lo iba a notar hasta
tener a alguien entrenando con el movil sudado en la mano. */
position:relative;
display:inline-flex;align-items:center;min-height:34px;margin:11px 0 0;
padding:0 12px;border-radius:100px;font-size:12px;font-weight:700;
color:var(--azul-txt);background:rgba(var(--pri-rgb),.10);
border:1px solid rgba(var(--pri-rgb),.26);
}
.ej-ficha::after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px}
/* Cuando el ejercicio tiene video de Miguel haciendolo, el boton lo dice y
lleva el triangulo delante: "Ver como se hace" y "Ver el video" no prometen
lo mismo, y hasta ahora los dos casos se veian igual. */
.ej-ficha.con-video::before{content:"";flex:none;width:0;height:0;margin-right:7px;
border-left:8px solid currentColor;border-top:5px solid transparent;
border-bottom:5px solid transparent}
/* --- la caja de apuntar una serie --- */
.serie-cab{display:flex;align-items:center;gap:10px;margin:14px 0 10px;flex-wrap:wrap}
.serie-n{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--texto-3);flex:none}
/* 1 0 100%: fila entera para el par, siempre. En el movil ya caia asi solo;
en ancho compartia linea y dejaba a las bolas sin sitio a la derecha. */
.serie-cab .tipo-serie{margin:0;flex:1 0 100%}
/* Un toque en vez de teclear tres numeros. NO rellena nada solo: hay que
pulsarlo, asi que nunca se guarda un peso que el cliente no haya elegido. */
.atajos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.atajo{
flex:1 1 auto;min-height:44px;display:flex;flex-direction:column;justify-content:center;
gap:1px;padding:6px 12px;border-radius:var(--r-m);cursor:pointer;
background:rgba(var(--pri-rgb),.10);border:1px solid rgba(var(--pri-rgb),.30);
color:var(--texto-2);font:inherit;font-size:11.5px;text-align:left;
transition:background var(--t),transform var(--t);
}
.atajo b{font-size:13.5px;font-weight:700;color:var(--texto);font-variant-numeric:tabular-nums}
.atajo:active{background:rgba(var(--pri-rgb),.20);transform:scale(.98)}
.serie-campos input{min-height:52px;font-weight:700}
/* --- el descanso, con su anillo --- */
.descanso{gap:12px}
.descanso.acabado{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok),var(--sombra-2)}
.d-anillo{flex:none;width:44px;height:44px;position:relative}
.d-anillo svg{width:44px;height:44px;transform:rotate(-90deg)}
.d-anillo circle{fill:none;stroke-width:3.5}
.d-pista{stroke:var(--n4)}
.d-linea{stroke:var(--primario);stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.descanso.acabado .d-linea{stroke:var(--ok)}
/* con el descanso puesto, el final de la pagina no se queda debajo */
/* La reserva de abajo sale de la altura REAL del panel, que ya no es fija:
con las opciones de "Mi tiempo" abiertas crece 50px. Con un numero a mano
el panel tapaba el boton del ejercicio de abajo. */
body.con-descanso{padding-bottom:calc(var(--alto-descanso, 90px) + var(--alto-nav, 68px) + 34px)}
.fin-card{margin-top:16px}
/* "Lo hice otro dia": plegado por defecto para que quien entrena en directo no
vea nada nuevo, y con el campo de fecha a ancho completo, que en el movil un
input de tipo date pequeno es imposible de tocar. */
.fijo-check{display:flex;align-items:flex-start;gap:9px;margin:12px 0 2px;
font-size:13px;line-height:1.35;cursor:pointer}
.fijo-check input{width:20px;height:20px;flex:none;margin-top:1px}
.fin-dia{margin:0 0 14px}
.fin-dia>summary{cursor:pointer;font-size:13px;opacity:.75;list-style:none}
.fin-dia>summary::-webkit-details-marker{display:none}
.fin-dia>summary::before{content:"+ ";font-weight:700}
.fin-dia[open]>summary::before{content:"− "}
/* Calendario propio para apuntar un entreno de otro dia. Se dibuja en la app en
vez de usar el del sistema: el del movil se ve distinto en cada telefono, sale
en el idioma del aparato, y no puede ensenar de un vistazo que dias valen. */
.fcal{margin:10px 0 0;padding:10px;border-radius:14px;border:1px solid var(--linea);
background:rgba(128,128,128,.06)}
.fcal-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.fcal-mes{font-size:14px;text-transform:capitalize}
.fcal-flecha{width:36px;height:36px;border-radius:10px;border:1px solid var(--linea);
background:transparent;color:inherit;font-size:18px;line-height:1;cursor:pointer}
.fcal-flecha:disabled{opacity:.25;cursor:default}
.fcal-cabecera,.fcal-rejilla{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.fcal-cabecera{margin-bottom:4px}
.fcal-cabecera span{text-align:center;font-size:11px;font-weight:700;color:var(--texto-3)}
/* 38px de alto: por debajo de eso, en un movil se falla el dia de al lado. */
.fcal-dia{height:38px;border-radius:10px;border:1px solid transparent;background:transparent;
color:inherit;font:inherit;font-size:14px;cursor:pointer}
.fcal-dia:disabled{opacity:.22;cursor:default}
.fcal-dia.es-hoy{border-color:var(--linea-fuerte);font-weight:700}
.fcal-dia.es-hoy.elegido{border-color:var(--primario)}
.fcal-dia.elegido{background:var(--primario);color:#fff;border-color:var(--primario);font-weight:800}
.fcal-pie{margin:10px 0 0;font-size:12px;color:var(--texto-3)}
/* --- Inicio: todo lo pendiente en una tarjeta, con acciones secundarias ---
Antes eran tres tarjetas seguidas con tres botones azules identicos: el
entreno de hoy, la revision y el check-in pesaban lo mismo, y a lo que se
entra en esta app es a entrenar. Ahora solo el de hoy va en azul. */
.pend-card{margin-bottom:16px}
.pend-fila{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--linea)}
.pend-fila:first-of-type{border-top:0;padding-top:4px}
.pend-punto{flex:none;width:7px;height:7px;border-radius:50%;background:var(--aviso);
box-shadow:0 0 0 4px color-mix(in srgb,var(--aviso) 18%,transparent)}
.pend-txt{flex:1;min-width:0}
.pend-txt b{display:block;font-size:14.5px;font-weight:600;line-height:1.35}
.pend-txt small{display:block;margin-top:2px;font-size:12.5px;color:var(--texto-2);line-height:1.4}
.pend-btn{flex:none;min-height:44px}
/* --- Entrenar: la SEMANA, no una lista de dias sueltos --- */
.sem-tira{padding:14px 16px 12px;margin-bottom:18px}
.sem-tira .sem-dias{margin:0}
.sem-tira .sem-pie{margin:10px 0 0;font-size:12.5px;color:var(--texto-2)}
.dia-etq{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--texto-3);margin:20px 0 9px}
.dia-etq:first-of-type{margin-top:4px}
.dia{
border-radius:var(--r-l);border:1px solid var(--linea);background:var(--n2);
padding:15px 16px;margin-bottom:11px;
}
.dia.es-hoy{border-color:rgba(var(--pri-rgb),.45);box-shadow:var(--sombra)}
.dia.hecho:not(.es-hoy){opacity:.78}
.dia-cab{display:flex;align-items:flex-start;gap:10px;margin-bottom:11px}
.dia-tit{flex:1;min-width:0}
.dia-tit b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.dia-tit small{display:block;margin-top:2px;font-size:12.5px;color:var(--texto-3)}
.dia-chapa{flex:none;padding:4px 10px;border-radius:100px;font-size:10.5px;font-weight:800;
letter-spacing:.05em;text-transform:uppercase}
.dia-chapa.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.dia-chapa.curso{background:rgba(var(--pri-rgb),.16);color:var(--azul-txt)}
.dia-ejs{list-style:none;margin:0 0 13px;padding:0}
.dia-ejs li{display:flex;align-items:center;gap:10px;padding:7px 0;
border-top:1px solid var(--linea)}
.dia-ejs li:first-child{border-top:0;padding-top:0}
.dia-ejs .e-n{flex:1;min-width:0;font-size:14px;font-weight:600;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dia-ejs .e-m{flex:none;font-size:12.5px;color:var(--texto-3);font-variant-numeric:tabular-nums}
/* ============================================================
FASE 2 · Ficha del ejercicio
Antes era una lista de tarjetas sueltas. Ahora: media grande arriba
con el poster YA visible, tus numeros, y cuatro pestanas.
============================================================ */
.fx-atras{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px 0 4px;
margin:0 0 6px -4px;color:var(--texto-2);text-decoration:none;font-size:14px;font-weight:600}
.fx-atras svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.fx-atras:active{color:var(--texto);transform:translateX(-2px)}
.fx-hero{margin:0 0 16px}
.fx-media{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--n3);
border:1px solid var(--linea);aspect-ratio:4/3;display:block;width:100%;cursor:pointer}
.fx-media img,.fx-media video{width:100%;height:100%;object-fit:cover;display:block}
.fx-media video{background:#000}
.fx-media::after{content:"";position:absolute;inset:auto 0 0 0;height:52%;pointer-events:none;
background:linear-gradient(to top,rgba(6,10,20,.72),transparent)}
.fx-media:has(video)::after{display:none}
.fx-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:68px;height:68px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
background:rgba(10,16,30,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
display:grid;place-items:center;z-index:2;cursor:pointer;transition:transform var(--t)}
.fx-play svg{width:30px;height:30px;fill:#fff;stroke:none;margin-left:3px}
.fx-play:active{transform:translate(-50%,-50%) scale(.93)}
.fx-etq{position:absolute;left:12px;top:12px;z-index:2;font-size:11px;font-weight:800;
letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:5px 9px;border-radius:8px;
background:rgba(10,16,30,.62);border:1px solid rgba(255,255,255,.18)}
.fx-titulo{padding:14px 2px 0}
.fx-hero.vacio .fx-titulo{padding-top:0}
.fx-titulo h1{margin:0;font-size:26px;line-height:1.15;letter-spacing:-.01em}
.fx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fx-chips span{font-size:12px;font-weight:700;color:var(--texto-2);background:var(--n3);
border:1px solid var(--linea);border-radius:999px;padding:5px 10px}
.fx-tuyo{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.fx-record{border-radius:var(--r-m);border:1px solid var(--linea);background:var(--n2);
padding:12px 14px;position:relative;overflow:hidden}
.fx-record::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primario)}
.fx-record .fx-et{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;color:var(--texto-3)}
.fx-record b{display:block;font-size:22px;margin-top:2px;letter-spacing:-.01em}
.fx-record small{display:block;font-size:12px;color:var(--texto-3);margin-top:2px}
.fx-hist{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.fx-hist::-webkit-scrollbar{display:none}
/* Miguel, 5-oct: "que se vea difuminado, que se ve el corte de repente". La
cuarta tarjeta quedaba partida por la mitad contra el borde y parecia un
fallo de pintado, no una lista que sigue. Mismo recurso que la ruleta: se
difumina la punta por la que hay mas. Las clases las pone el JS de la ficha
segun donde este el scroll, asi que al llegar al final NO queda sombra. */
.fx-hist.hay-der{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
.fx-hist.hay-izq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px);
mask-image:linear-gradient(90deg,transparent,#000 34px)}
.fx-hist.hay-izq.hay-der{
-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);
mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
.fx-h{flex:0 0 auto;min-width:96px;scroll-snap-align:start;border-radius:var(--r-s);
border:1px solid var(--linea);background:var(--n2);padding:10px 12px}
.fx-h b{display:block;font-size:18px;letter-spacing:-.01em}
.fx-h b i{font-style:normal;font-size:11px;font-weight:700;color:var(--texto-3);margin-left:2px}
.fx-h span{display:block;font-size:12px;color:var(--texto-2);margin-top:1px}
.fx-h small{display:block;font-size:11px;color:var(--texto-3);margin-top:3px}
.fx-tabs{display:flex;gap:2px;margin:0 0 14px;padding:4px;border-radius:14px;
background:var(--n2);border:1px solid var(--linea)}
.fx-tabs button{flex:1 1 0;min-width:0;min-height:44px;padding:0 4px;border:0;border-radius:10px;
background:transparent;color:var(--texto-2);font:inherit;font-size:12.5px;font-weight:700;
letter-spacing:-.01em;white-space:nowrap;cursor:pointer;position:relative;
transition:background var(--t),color var(--t)}
.fx-tabs button.on{background:var(--primario);color:#fff}
.fx-tabs button:active{transform:scale(.97)}
/* Un punto y no un numero: el numero hacia que "Alternativas" no cupiera en
una pantalla de 390 y la pestana salia cortada. */
.fx-punto{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);
width:5px;height:5px;border-radius:50%;background:var(--primario)}
.fx-tabs button.on .fx-punto{background:#fff}
/* A 320 los cuatro rotulos no caben a 12,5px: medido, se salian 11px. */
@media (max-width:374px){ .fx-tabs button{font-size:10.5px;padding:0 2px} }
.fx-pane{display:none}
.fx-pane.on{display:block;animation:fxEntra 220ms cubic-bezier(.22,.68,.24,1)}
@keyframes fxEntra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fx-datos{margin:0;display:flex;flex-direction:column;gap:10px}
.fx-datos div{display:flex;gap:12px;align-items:baseline}
.fx-datos dt{flex:0 0 84px;font-size:12px;font-weight:800;letter-spacing:.05em;
text-transform:uppercase;color:var(--texto-3)}
.fx-datos dd{margin:0;font-size:14.5px;color:var(--texto)}
.fx-maq{display:flex;gap:0;flex-direction:column;overflow:hidden;padding:0}
.fx-maq img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.fx-maq-txt{padding:14px 16px}
.fx-maq-txt b{font-size:17px}
.fx-ajustes{margin:6px 0 0;font-size:14px;color:var(--texto);background:var(--n3);
border:1px solid var(--linea);border-radius:10px;padding:8px 11px;display:inline-block}
.fx-form{display:flex;flex-direction:column;gap:6px}
.fx-subir{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;
border-radius:14px;border:1px dashed var(--linea-fuerte);background:var(--n3);
color:var(--texto-2);font-size:14px;font-weight:700;cursor:pointer;margin-bottom:8px}
.fx-subir input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fx-subir svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linejoin:round}
.fx-subir:active{border-color:var(--primario);color:var(--texto)}
.fx-otras{display:flex;gap:8px;flex-wrap:wrap}
.fx-otra{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px 6px 6px;
border-radius:12px;border:1px solid var(--linea);background:var(--n3);color:var(--texto);
font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.fx-otra img{width:32px;height:32px;border-radius:8px;object-fit:cover}
.fx-otra:active{transform:scale(.97)}
.fx-alts{display:flex;flex-direction:column;gap:10px}
.fx-alt{display:flex;gap:12px;align-items:stretch;border-radius:var(--r-m);
border:1px solid var(--linea);background:var(--n2);overflow:hidden}
.fx-alt-img{position:relative;flex:0 0 104px;background:var(--n3);display:grid;place-items:center}
.fx-alt-img img{width:100%;height:100%;object-fit:cover;display:block}
.fx-alt-ini{font-size:26px;font-weight:800;color:var(--texto-3)}
.fx-alt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:34px;height:34px;border-radius:50%;background:rgba(10,16,30,.6);
border:1px solid rgba(255,255,255,.3);display:grid;place-items:center}
.fx-alt-play svg{width:16px;height:16px;fill:#fff;stroke:none;margin-left:2px}
.fx-alt-txt{flex:1;min-width:0;padding:12px 14px 12px 0;display:flex;flex-direction:column;gap:4px}
.fx-alt-txt b{font-size:15.5px}
.fx-alt-txt small{font-size:13px;color:var(--texto-2)}
.fx-alt-acc{display:flex;gap:8px;margin-top:auto;padding-top:8px;flex-wrap:wrap}
:root[data-tema="claro"] .fx-media::after{background:linear-gradient(to top,rgba(15,23,42,.55),transparent)}
:root[data-tema="claro"] .fx-etq,
:root[data-tema="claro"] .fx-play{background:rgba(15,23,42,.6);border-color:rgba(255,255,255,.28)}
/* Acceso fijo a Miguel en la barra de arriba: se ve desde TODAS las pantallas,
que es lo que pedia el brief ("acceso a Miguel muy visible"). El punto solo
dice que hay algo, nunca que es. */
.acceso-miguel{position:relative}
.acceso-miguel.on{color:var(--azul-txt)}
.punto-aviso{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;
background:var(--acento);box-shadow:0 0 0 2px var(--n1)}
.btn.acceso-miguel{padding-right:20px}
.btn.acceso-miguel .punto-aviso{top:8px;right:7px;box-shadow:0 0 0 2px var(--n2)}
/* ============================================================
FASE 2 · Salud
============================================================ */
.sa-hero{display:block;position:relative;border-radius:var(--r-l);padding:18px 46px 18px 18px;
margin:0 0 14px;text-decoration:none;color:inherit;border:1px solid var(--linea);
background:linear-gradient(140deg,rgba(var(--pri-rgb),.16),var(--n2) 62%)}
.sa-hero.hecho{background:linear-gradient(140deg,rgba(61,214,140,.14),var(--n2) 62%)}
.sa-hero .sa-et{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;color:var(--texto-2)}
.sa-hero b{display:block;font-size:30px;line-height:1.1;margin-top:4px;letter-spacing:-.02em}
.sa-hero b i{font-style:normal;font-size:15px;font-weight:700;color:var(--texto-2);margin-left:2px}
.sa-hero small{display:block;font-size:13.5px;color:var(--texto-2);margin-top:6px;max-width:44ch}
.sa-flecha{position:absolute;right:16px;top:50%;transform:translateY(-50%);
font-size:26px;color:var(--texto-3);line-height:1}
.sa-hero:active{transform:scale(.995)}
.sa-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sa-tarj{display:block;border-radius:var(--r-m);border:1px solid var(--linea);
background:var(--n2);padding:14px;text-decoration:none;color:inherit;min-height:112px}
.sa-tarj b{display:block;font-size:15px;margin-top:10px}
.sa-tarj small{display:block;font-size:12.5px;color:var(--texto-2);margin-top:3px}
.sa-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
background:rgba(var(--pri-rgb),.14)}
.sa-ico svg{width:20px;height:20px;fill:none;stroke:var(--azul-txt);stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.sa-tarj:active{transform:scale(.98)}
.sa-ciclo{display:block;margin-top:14px;text-decoration:none;color:inherit}
/* ============================================================
FASE 2 · Running
============================================================ */
.ru-semana{border-radius:var(--r-l);border:1px solid var(--linea);padding:18px;
margin:0 0 14px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
background:linear-gradient(140deg,rgba(var(--pri-rgb),.16),var(--n2) 62%)}
.ru-cifra b{display:block;font-size:40px;line-height:1;letter-spacing:-.03em}
.ru-cifra b i{font-style:normal;font-size:16px;font-weight:700;color:var(--texto-2);margin-left:3px}
.ru-cifra span{display:block;font-size:13px;color:var(--texto-2);margin-top:5px}
.ru-lado{display:flex;gap:18px;margin-left:auto}
.ru-lado b{display:block;font-size:20px;line-height:1}
.ru-lado small{display:block;font-size:12px;color:var(--texto-2);margin-top:3px}
.ru-pie{flex:1 0 100%;margin:4px 0 0;font-size:12.5px;color:var(--texto-2)}
.ru-strava{margin-top:14px}
.ru-subir{margin-top:14px}
.ru-archivo{display:block;width:100%;margin:10px 0 12px;font-size:14px;color:var(--texto-2);
padding:12px;border:1.5px dashed var(--linea);border-radius:12px;background:transparent}
.ru-archivo::file-selector-button{margin-right:10px;padding:8px 14px;border-radius:9px;
border:1px solid var(--linea);background:var(--n3);color:var(--texto);font:inherit;
font-size:13.5px;font-weight:600;cursor:pointer}
.ru-lista{display:flex;flex-direction:column;gap:8px}
.ru-fila{display:flex;align-items:center;gap:12px;border-radius:var(--r-s);
border:1px solid var(--linea);background:var(--n2);padding:11px 13px}
.ru-dia{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--texto-3)}
.ru-txt{min-width:0}
.ru-txt b{display:block;font-size:15px}
.ru-txt small{display:block;font-size:12.5px;color:var(--texto-2);margin-top:1px}
.ru-marca{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.04em;
color:var(--texto-3);border:1px solid var(--linea);border-radius:999px;padding:3px 8px}
/* ============================================================
FASE 2 · Splash
Fondo azul-negro, la M entra suave y respira una vez. Sin rayos
y sin efectos de videojuego: 1,15 s y se va.
============================================================ */
.ecm-splash{position:fixed;inset:0;z-index:999;display:grid;place-items:center;
background:#060A14;opacity:1;transition:opacity 400ms ease}
.ecm-splash::before{content:"";position:absolute;left:50%;top:50%;
width:min(78vw,420px);aspect-ratio:1;transform:translate(-50%,-50%);
background:radial-gradient(circle,rgba(59,99,255,.30),rgba(59,99,255,0) 62%);
animation:ecmRespira 2200ms ease-in-out infinite}
.ecm-splash.fuera{opacity:0;pointer-events:none}
.ecm-splash-m{position:relative;width:118px;height:118px;
animation:ecmEntra 700ms cubic-bezier(.22,.68,.24,1) both}
.ecm-splash-m img{width:100%;height:100%;object-fit:contain;display:block}
@keyframes ecmEntra{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes ecmRespira{0%,100%{opacity:.72}50%{opacity:1}}
/* Mientras el splash esta puesto, lo de detras no se mueve. */
html.con-splash,html.con-splash body{overflow:hidden}
@media (prefers-reduced-motion: reduce){
.ecm-splash::before{animation:none}
.ecm-splash-m{animation:none}
}
/* ============================================================
FASE 3 · Alimentación
Visual, no un contador: la semana, el día, y los huecos del día.
============================================================ */
.al-semana{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:0 0 14px}
.al-dia{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;
min-height:64px;border-radius:13px;border:1px solid var(--linea);background:var(--n2);
text-decoration:none;color:var(--texto-2)}
.al-dia .al-l{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--texto-3)}
.al-dia .al-n{font-size:15px;font-weight:700;color:var(--texto)}
.al-dia .al-p{display:block;height:6px;display:flex;gap:2px;align-items:center}
.al-dia .al-p i{width:4px;height:4px;border-radius:50%;background:var(--azul-txt);
box-shadow:0 0 0 0 transparent}
.al-dia.on{border-color:var(--primario);background:rgba(var(--pri-rgb),.16)}
.al-dia.on .al-n{color:#fff}
:root[data-tema="claro"] .al-dia.on .al-n{color:var(--enfasis)}
.al-dia.hoy .al-l{color:var(--azul-txt)}
.al-dia.futuro{opacity:.45}
.al-dia:active{transform:scale(.96)}
.al-aprox{border-radius:var(--r-m);border:1px solid var(--linea);background:var(--n2);
padding:12px 14px;margin:0 0 16px}
.al-aprox b{display:block;font-size:18px}
.al-aprox small{display:block;font-size:12.5px;color:var(--texto-2);margin-top:3px}
.mn-dias{display:flex;align-items:center;justify-content:space-between;gap:10px;
margin:0 0 14px;padding:8px 10px;border:1px solid var(--linea);border-radius:var(--r-m);
background:var(--n2)}
.mn-dias b{font-size:14.5px}
.mn-nav{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
border:1px solid var(--linea);color:var(--texto-2);text-decoration:none;font-size:20px}
.mn-linea{display:flex;align-items:center;gap:10px;justify-content:space-between;
padding:9px 11px;margin:0 0 7px;border-radius:12px;border:1px solid var(--linea);
background:var(--n2)}
.mn-linea b{display:block;font-size:14px}
.mn-linea span{display:block;font-size:12.5px;color:var(--texto-3);margin-top:1px}
/* 40 px de lado: la × es lo unico que borra algo en esta pantalla y tiene que
ser facil de acertar, pero sin parecer el boton principal. */
.mn-quitar{flex:0 0 auto;width:40px;height:40px;border-radius:11px;border:1px solid var(--linea);
background:transparent;color:var(--texto-3);font-size:19px;line-height:1;cursor:pointer}
.mn-quitar:active{color:#ff8a8a;border-color:#ff8a8a}
.mn-pie{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}
.mn-pie form{flex:1 1 160px}
.mn-pie .btn{width:100%}
.mn-elegir{list-style:none;margin:0;padding:0;max-height:52vh;overflow-y:auto}
.mn-elegir li{margin:0 0 7px}
.mn-elegir button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
padding:8px 11px;border-radius:12px;border:1px solid var(--linea);background:var(--n2);
color:inherit;font:inherit;cursor:pointer}
.mn-elegir img{flex:0 0 44px;width:44px;height:44px;border-radius:10px;object-fit:cover}
.mn-elegir b{display:block;font-size:14px}
.mn-elegir em{display:block;font-style:normal;font-size:12.5px;color:var(--texto-3)}
.mn-elegir i{flex:0 0 auto;font-style:normal;font-size:12.5px;font-weight:700;color:var(--texto-2)}
.al-veces{margin:0 0 14px;border:1px solid var(--linea);border-radius:var(--r-m);
background:var(--n2);padding:10px 13px}
.al-veces>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
cursor:pointer;list-style:none;font-size:13.5px;color:var(--texto-2)}
.al-veces>summary::-webkit-details-marker{display:none}
.al-veces>summary b{color:var(--texto)}
.al-veces>summary em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--azul-txt)}
.al-veces-f{display:flex;gap:8px;margin:11px 0 0}
/* Botones cuadrados de 44 px: es el minimo para tocar con el dedo sin fallar. */
.al-v{flex:1;min-height:44px;border-radius:12px;border:1px solid var(--linea);
background:transparent;color:var(--texto-2);font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.al-v.on{background:var(--primario);border-color:var(--primario);color:#fff}
.al-veces-p{margin:9px 0 0;font-size:12px;line-height:1.45;color:var(--texto-3)}
.al-hueco{margin:0 0 16px;padding:12px 12px 10px;border-radius:var(--r-m);
border:1px solid transparent}
/* Los dos tonos de comida alternos. Van MUY suaves a proposito: lo que tiene
que destacar en esta pantalla es la foto del plato, no el fondo. El borde es
lo que de verdad separa un bloque del siguiente cuando el fondo casi no se
ve, por ejemplo con el movil al sol. */
.al-hueco.tono-a{background:color-mix(in srgb, var(--n2) 55%, transparent);
border-color:var(--linea)}
.al-hueco.tono-b{background:color-mix(in srgb, var(--primario) 7%, transparent);
border-color:color-mix(in srgb, var(--primario) 22%, transparent)}
.al-cab{display:flex;align-items:baseline;gap:10px;margin:0 0 8px}
.al-cab h2{margin:0;font-size:12px;font-weight:800;letter-spacing:.09em;
text-transform:uppercase;color:var(--texto-2)}
.al-vacio{font-size:12px;color:var(--texto-3)}
.al-mas{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
min-height:48px;border-radius:14px;border:1px dashed var(--linea-fuerte);
background:transparent;color:var(--texto-2);font:inherit;font-size:13.5px;
font-weight:700;cursor:pointer}
.al-mas span{font-size:17px;line-height:1}
.al-hueco.lleno .al-mas{min-height:44px;font-size:13px}
.al-mas:active{transform:scale(.99);border-color:var(--primario);color:var(--texto)}
.al-item{display:flex;gap:12px;border-radius:var(--r-m);border:1px solid var(--linea);
background:var(--n2);overflow:hidden;margin:0 0 8px}
.al-foto{flex:0 0 108px;width:108px;height:108px;object-fit:cover;display:block}
.al-txt{flex:1;min-width:0;padding:11px 13px 11px 0;display:flex;flex-direction:column;gap:4px}
.al-item:not(:has(.al-foto)) .al-txt{padding-left:13px}
.al-linea{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.al-hora{font-size:12px;font-weight:800;color:var(--texto-2)}
.al-kcal{font-size:11.5px;font-weight:700;color:var(--texto-2);background:var(--n3);
border:1px solid var(--linea);border-radius:999px;padding:3px 8px}
.al-nota{margin:0;font-size:14.5px;color:var(--texto)}
.al-porc{margin:0;font-size:12.5px;color:var(--texto-2)}
.al-elige{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 10px}
.al-boton{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
min-height:88px;border-radius:15px;border:1px solid var(--linea-fuerte);background:var(--n3);
color:var(--texto);font-size:13.5px;font-weight:700;cursor:pointer}
.al-boton input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.al-boton svg{width:26px;height:26px;fill:none;stroke:var(--azul-txt);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.al-boton:active{transform:scale(.97);border-color:var(--primario)}
.al-elegida{margin:0 0 8px;font-size:12.5px;color:var(--acento)}
.al-porciones{margin-top:12px;border-top:1px solid var(--linea);padding-top:12px}
.al-porciones summary{cursor:pointer;font-size:13.5px;font-weight:700;min-height:44px;
display:flex;align-items:center;gap:8px}
.al-porciones summary span{font-size:12px;font-weight:600;color:var(--texto-3)}
.al-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
.al-nav b{font-size:15px;font-weight:700}
.al-flecha{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
border:1px solid var(--linea);background:var(--n2);color:var(--texto-2);
text-decoration:none;font-size:22px;line-height:1}
.al-flecha.off{opacity:.35}
.al-flecha:active{transform:scale(.95)}
/* ============================================================
FASE 3 · Hábitos
Sin XP, sin monedas y sin rachas: un toque y siete puntitos.
============================================================ */
.hb-hoy{display:flex;align-items:baseline;gap:10px;border-radius:var(--r-m);
border:1px solid var(--linea);background:var(--n2);padding:13px 15px;margin:0 0 16px}
.hb-hoy b{font-size:26px;letter-spacing:-.02em}
.hb-hoy b i{font-style:normal;font-size:15px;font-weight:700;color:var(--texto-2)}
.hb-hoy span{font-size:13.5px;color:var(--texto-2)}
.hb-grupo{margin:0 0 18px}
.hb-grupo h2{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.09em;
text-transform:uppercase;color:var(--texto-2)}
.hb-form{margin:0 0 8px}
.hb-item{display:flex;gap:12px;width:100%;text-align:left;align-items:flex-start;
min-height:64px;padding:13px 14px;border-radius:var(--r-m);border:1px solid var(--linea);
background:var(--n2);color:inherit;font:inherit;cursor:pointer;
transition:border-color var(--t),background var(--t)}
.hb-item:active{transform:scale(.99)}
.hb-marca{flex:0 0 auto;width:26px;height:26px;border-radius:9px;border:1.5px solid var(--linea-fuerte);
display:grid;place-items:center;margin-top:1px}
.hb-marca svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;
stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.7);
transition:opacity var(--t),transform var(--t)}
.hb-item.hecho{border-color:rgba(61,214,140,.45);background:rgba(61,214,140,.08)}
.hb-item.hecho .hb-marca{background:var(--acento);border-color:var(--acento)}
.hb-item.hecho .hb-marca svg{opacity:1;transform:none;stroke:#06240f}
.hb-txt{min-width:0}
.hb-txt b{display:block;font-size:15.5px}
.hb-txt small{display:block;font-size:13px;color:var(--texto-2);margin-top:2px}
.hb-obj{color:var(--azul-txt) !important;font-weight:700}
.hb-siete{display:flex;align-items:center;gap:4px;margin-top:8px}
.hb-siete i{width:7px;height:7px;border-radius:50%;background:var(--n4);
border:1px solid var(--linea)}
.hb-siete i.on{background:var(--acento);border-color:transparent}
.hb-siete em{font-style:normal;font-size:11.5px;color:var(--texto-2);margin-left:5px}
.hb-pie{font-size:12.5px;color:var(--texto-3);margin:4px 0 0}
/* Los dos documentos de Miguel, dentro de Habitos (21-sep-2026). Van aqui y no
solo en Recursos porque el los pidio EN habitos: es donde la persona esta
cuando se pregunta que tiene que comer o como dormir mejor. */
.hb-guias{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--linea)}
.hb-guias h2{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.09em;
text-transform:uppercase;color:var(--texto-2)}
.hb-guias-p{margin:0 0 12px;font-size:13px;color:var(--texto-3)}
.hb-guia{display:flex;gap:12px;align-items:center;width:100%;min-height:64px;
padding:13px 14px;margin:0 0 8px;border-radius:var(--r-m);border:1px solid var(--linea);
background:var(--n2);color:inherit;text-decoration:none;
transition:border-color var(--t),background var(--t)}
.hb-guia:active{transform:scale(.99)}
.hb-guia-ico{flex:0 0 auto;width:36px;height:36px;border-radius:11px;
background:var(--n4);border:1px solid var(--linea);display:grid;place-items:center}
.hb-guia-ico svg{width:19px;height:19px;fill:none;stroke:var(--azul-txt);
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hb-guia-txt{flex:1 1 auto;min-width:0}
.hb-guia-txt b{display:block;font-size:15.5px}
.hb-guia-txt small{display:block;font-size:13px;color:var(--texto-2);margin-top:2px}
.hb-guia-ir{flex:0 0 auto}
.hb-guia-ir svg{width:18px;height:18px;fill:none;stroke:var(--texto-3);
stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ah-fila{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 0;
border-top:1px solid var(--linea)}
.ah-fila:first-of-type{border-top:0}
.ah-txt{flex:1 1 190px;min-width:0}
.ah-txt b{display:block;font-size:15px}
.ah-txt small{display:block;font-size:12.5px;color:var(--texto-2)}
.ah-fila input[type=text]{flex:1 1 180px;min-width:0;margin:0}
/* ============================================================
FASE 3 · Cómo te sientes
Cinco puntos y no una barra. Se toca la etiqueta entera (48px),
no el punto: en el movil una bola de 20px no se acierta.
============================================================ */
.cs-form{display:flex;flex-direction:column;gap:12px}
.cs-fila{border:1px solid var(--linea);background:var(--n2);border-radius:var(--r-m);
padding:12px 15px 10px;margin:0;min-width:0}
/* Aqui NO va un fieldset con legend: el legend se dibuja encima del borde y,
con float para arreglarlo, el primer punto se quedaba 8px mas alto que los
otros cuatro (medido). Un div con role=radiogroup se lee igual de bien. */
.cs-tit{font-size:15px;font-weight:700;margin:0 0 8px;color:var(--texto)}
.cs-puntos{display:flex;justify-content:space-between;align-items:center;gap:4px}
/* margin:0 a proposito: la regla global `form label{margin:16px 0 6px}` de
app.css, con su `:first-child{margin-top:0}`, dejaba el PRIMER punto 8px mas
alto que los otros cuatro. Medido, no supuesto. */
.cs-p{flex:1;display:grid;place-items:center;min-height:46px;cursor:pointer;
border-radius:12px;margin:0}
.cs-p input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cs-bola{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--texto-3);
background:transparent;transition:transform var(--t),background var(--t),border-color var(--t)}
.cs-p:nth-child(1) .cs-bola{width:15px;height:15px}
.cs-p:nth-child(2) .cs-bola{width:17px;height:17px}
.cs-p:nth-child(4) .cs-bola{width:23px;height:23px}
.cs-p:nth-child(5) .cs-bola{width:26px;height:26px}
.cs-p input:checked + .cs-bola{background:var(--primario);border-color:var(--primario);
transform:scale(1.06);box-shadow:0 0 0 4px rgba(var(--pri-rgb),.18)}
.cs-p input:focus-visible + .cs-bola{outline:2px solid var(--azul-txt);outline-offset:3px}
.cs-p:active .cs-bola{transform:scale(.92)}
.cs-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
white-space:nowrap}
.cs-extremos{display:flex;justify-content:space-between;margin-top:6px}
.cs-extremos span{font-size:11.5px;color:var(--texto-3)}
.cs-mas{border:1px solid var(--linea);background:var(--n2);border-radius:var(--r-m);
padding:0 15px}
.cs-mas summary{min-height:52px;display:flex;align-items:center;cursor:pointer;
font-size:14.5px;font-weight:700}
.cs-mas[open]{padding-bottom:14px}
.cs-mas .cs-fila{border:0;background:transparent;padding:8px 0 0}
/* ============================================================
FASE 3 · Elegir la actividad
Rejilla de iconos en vez de un desplegable: en el movil un select
abre una rueda para elegir algo que ya sabes.
============================================================ */
.ac-tipos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 4px}
.ac-tipo{margin:0;cursor:pointer}
.ac-tipo input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ac-cara{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
min-height:74px;padding:8px 4px;border-radius:14px;border:1px solid var(--linea);
background:var(--n3);transition:border-color var(--t),background var(--t)}
.ac-ico svg{width:24px;height:24px;fill:none;stroke:var(--texto-2);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.ac-nom{font-size:10.5px;font-weight:700;color:var(--texto-2);text-align:center;line-height:1.15}
.ac-tipo input:checked + .ac-cara{border-color:var(--primario);background:rgba(var(--pri-rgb),.16)}
.ac-tipo input:checked + .ac-cara .ac-ico svg{stroke:var(--azul-txt)}
.ac-tipo input:checked + .ac-cara .ac-nom{color:var(--texto)}
.ac-tipo input:focus-visible + .ac-cara{outline:2px solid var(--azul-txt);outline-offset:2px}
.ac-tipo:active .ac-cara{transform:scale(.96)}
@media (max-width:359px){ .ac-tipos{grid-template-columns:repeat(3,1fr)} }
/* Los campos de fecha y hora no entraban en la regla de app.css, que lista los
tipos uno a uno: salian con el gris del navegador sobre un diseno oscuro. */
input[type=date],input[type=time],input[type=month]{
width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--linea-fuerte);
background:var(--n3);color:var(--texto);font:inherit;font-size:15px;min-height:48px}
input[type=date]:focus,input[type=time]:focus{outline:none;border-color:var(--primario)}
/* Fase 3: el calendario ya no es solo mirar. Cada dia es un enlace y abajo se
abre el detalle del dia que se toque. */
.p-comida{background:var(--acento)}
.p-sientes{background:var(--info)}
a.cal-dia{text-decoration:none;min-height:48px}
a.cal-dia:active{transform:scale(.95)}
.cal-dia.abierto{border-color:var(--azul-txt);background:rgba(var(--pri-rgb),.14)}
.cal-detalle{scroll-margin-top:80px}
.cal-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.cal-lista li{display:flex;align-items:center;gap:10px;font-size:14.5px}
.cal-lista i{flex:0 0 auto;width:8px;height:8px;border-radius:50%}
/* Los seis puntos del calendario tienen que distinguirse ENTRE SI. Antes tres
eran el mismo azul y "actividad" y "como te sientes" salian identicos: un
punto que no se puede diferenciar no informa de nada.
El coral queda fuera a proposito: en este diseno significa atencion real. */
.p-entreno{background:#3B63FF}
.p-actividad{background:#8AA2FF}
.p-comida{background:#3DD68C}
.p-sientes{background:#35C7E0}
.p-revision{background:#E5A44C}
.p-foto{background:transparent;box-shadow:inset 0 0 0 2px var(--texto-2)}
/* Lo que TOCA va hueco y del mismo azul que lo hecho: se ve de un golpe que es
el mismo tipo de cosa y que todavia no esta. Relleno = hecho, hueco = pendiente. */
.p-plan{background:transparent;box-shadow:inset 0 0 0 2px #3B63FF}
/* En tema claro el verde de la pildora se queda en 4,39 sobre su propio fondo
teñido (medido). Es el mismo verde que se lee bien sobre blanco: lo que baja
el contraste es el relleno de la pildora, no el color suelto. */
:root[data-tema="claro"] .reco-pill.impulsa{color:#0A5E3D}
/* Fase 3: la ultima carrera, con su ritmo y la comparacion cuando toca. */
.ru-ultima{border-radius:var(--r-m);border:1px solid var(--linea);background:var(--n2);
padding:15px;margin:0 0 12px}
.ru-et{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--texto-2);margin-bottom:10px}
.ru-datos{display:flex;gap:18px;flex-wrap:wrap}
.ru-datos b{display:block;font-size:22px;line-height:1;letter-spacing:-.01em}
.ru-datos small{display:block;font-size:11.5px;color:var(--texto-2);margin-top:4px}
.ru-comp{margin:12px 0 0;font-size:13.5px;color:var(--texto-2)}
.ru-comp.mejor{color:var(--acento)}
:root[data-tema="claro"] .ru-comp.mejor{color:#0A5E3D}
.ru-sens{margin:8px 0 0;font-size:14px;color:var(--texto)}
.ru-nomapa{margin:10px 0 0;font-size:12px;color:var(--texto-3);line-height:1.45}
/* ============================================================
FASE 4 · PROGRESO
Cinco bloques en vez de una pantalla larga. La regla del brief
que manda aqui: nada de falsa precision. Por eso la carga por
musculo es una etiqueta (baja/moderada/alta) y no un numero.
============================================================ */
.pg-cab{margin:0 0 14px}
.pg-cab h1{margin:0;font-size:26px;letter-spacing:-.02em}
.pg-cab p{margin:4px 0 0;font-size:14px;color:var(--texto-2)}
.pg-rango{display:flex;gap:6px;overflow-x:auto;margin:0 0 14px;padding-bottom:2px}
/* 44px, no 36: es un boton que se toca con el dedo. Lo cazo la bateria de la
fase 2, que barre todas las pantallas midiendo. */
.pg-r{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;padding:0 14px;
border-radius:999px;border:1px solid var(--linea);background:var(--n2);
font-size:13px;font-weight:700;color:var(--texto-2);text-decoration:none;transition:var(--t)}
.pg-r.on{background:var(--grad-azul);border-color:transparent;color:#fff}
.pg-resumen{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
.pg-kpi{border-radius:var(--r-m);border:1px solid var(--linea);background:var(--n2);
padding:14px;display:flex;flex-direction:column;gap:3px;min-width:0}
.pg-kpi .k-t{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3)}
.pg-kpi .k-v{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--texto);line-height:1.1;
overflow-wrap:anywhere}
.pg-kpi .k-v.k-ok{color:var(--ok)}
.pg-kpi .k-nada{font-size:15px;color:var(--texto-3);font-weight:700}
.pg-kpi .k-d{font-size:12px;color:var(--texto-2);line-height:1.35}
.pg-tabs{display:flex;gap:2px;margin:0 0 14px;padding:4px;border-radius:14px;
background:var(--n2);border:1px solid var(--linea);overflow-x:auto}
/* Cinco pestanas tienen que CABER en 390px, que es el movil mas estrecho que
usa gente de verdad. Con 12,5px y 12px de aire "Cuerpo" se salia y quedaba
cortada: medido, no supuesto. */
.pg-tabs a{flex:1 1 0;min-width:0;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
padding:0 4px;border-radius:11px;font-size:11.5px;font-weight:700;color:var(--texto-2);
text-decoration:none;white-space:nowrap;transition:var(--t)}
.pg-tabs a.on{background:var(--n4);color:var(--texto)}
@media (max-width:359px){.pg-tabs a{font-size:10.5px;padding:0 2px}}
.pg-pie{font-size:12.5px;line-height:1.5;margin:12px 0 0}
.pg-txt{font-size:14.5px;line-height:1.6;margin:0 0 12px}
.pg-vacio{font-size:14px;color:var(--texto-2);line-height:1.55;padding:18px;border-radius:var(--r-m);
border:1px dashed var(--linea-fuerte);background:var(--n2);margin:0 0 12px}
.pg-vacio-min{font-size:13.5px;color:var(--texto-2);line-height:1.5;margin:0 0 12px}
.pg-cifras{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.pg-cifras li{flex:1 1 90px;min-width:0;text-align:center;border-radius:var(--r-s);
background:var(--n3);border:1px solid var(--linea);padding:12px 8px}
.pg-cifras b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em}
.pg-cifras span{display:block;font-size:11.5px;color:var(--texto-2);margin-top:2px;line-height:1.3}
/* barras de constancia */
.pg-barras{display:flex;gap:6px;align-items:flex-end;height:110px}
.pg-b{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.pg-b span{display:block;width:100%;border-radius:6px 6px 3px 3px;background:var(--grad-azul);min-height:4px}
.pg-b em{display:block;font-style:normal;font-size:9.5px;color:var(--texto-3);text-align:center;
margin-top:5px;white-space:nowrap}
/* fuerza */
.pg-ej-cab{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px}
.pg-ej-cab b{display:block;font-size:15px}
.pg-ej-cab small{display:block;font-size:12px;color:var(--texto-3);margin-top:2px}
.pg-etq{flex:0 0 auto;margin-left:auto;font-size:11px;font-weight:800;padding:5px 9px;border-radius:999px;
background:var(--n4);color:var(--texto-2);white-space:nowrap}
.pg-etq.ok{background:rgba(61,214,140,.14);color:var(--ok)}
.pg-etq.baja{background:rgba(240,101,95,.14);color:var(--peligro)}
.pg-linea{display:flex;gap:5px;align-items:flex-end;height:72px}
.pg-pt{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end}
.pg-pt span{display:block;width:100%;border-radius:5px 5px 2px 2px;background:var(--grad-cian);min-height:6px}
.pg-linea-pie{display:flex;justify-content:space-between;gap:10px;margin-top:8px;
font-size:11.5px;color:var(--texto-3)}
/* running */
.pg-comp-fila{display:flex;align-items:center;gap:10px}
.pg-comp-fila>div{flex:1;min-width:0}
.pg-comp-fila span{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;
text-transform:uppercase;color:var(--texto-3)}
.pg-comp-fila b{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.pg-comp-fila em{display:block;font-style:normal;font-size:11.5px;color:var(--texto-2);margin-top:2px}
.pg-flecha{flex:0 0 auto !important;font-size:18px;color:var(--texto-3)}
.pg-comp.mejor .pg-comp-fila>div:last-child b{color:var(--ok)}
.pg-comp-txt{font-size:14px;line-height:1.55;margin:12px 0 0}
/* bienestar */
.pg-ejes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.pg-eje-t{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.pg-eje-t b{font-size:14.5px}
.pg-puntos{display:flex;align-items:center;gap:7px}
.pg-puntos>span{width:13px;height:13px;border-radius:50%;background:var(--n4);
box-shadow:inset 0 0 0 1px var(--linea-fuerte)}
.pg-puntos>span.on{background:var(--primario);box-shadow:none}
.pg-puntos em{font-style:normal;font-size:12.5px;color:var(--texto-2);margin-left:6px}
.pg-puntos em i{font-style:normal;color:var(--texto-3)}
/* cuerpo */
.pg-peso{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pg-peso b{font-size:28px;font-weight:800;letter-spacing:-.02em}
.pg-peso span{font-size:13px;color:var(--texto-2)}
.pg-peso span.baja{color:var(--texto-2)}
.pg-carga{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.pg-carga li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-s);
background:var(--n3);border:1px solid var(--linea)}
.pg-carga b{font-size:14px;font-weight:700}
.pg-nivel{margin-left:auto;font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;white-space:nowrap}
.pg-nivel.alta{background:rgba(var(--pri-rgb),.18);color:var(--azul-txt)}
.pg-nivel.moderada{background:var(--n4);color:var(--texto-2)}
.pg-nivel.baja{background:transparent;color:var(--texto-3);box-shadow:inset 0 0 0 1px var(--linea-fuerte)}
/* Comparador de fotos de progreso (29-ago). Sin estetica de "antes/despues"
agresiva: sin flechas rojas, sin porcentajes y sin marcos. Solo las dos fotos
y una linea que se mueve. */
.cmp{margin-bottom:16px}
.cmp[hidden]{display:none}
.cmp-sel{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.cmp-lb.cmp-ang{flex:1 1 100%}
.cmp-lb{flex:1 1 128px;display:flex;flex-direction:column;gap:4px;
font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3);font-weight:700}
.cmp-lb select{width:100%;min-height:44px;font-size:14px;text-transform:none;letter-spacing:0}
/* Las dos fotos, una al lado de la otra y alineadas (24-sep). Las dos cajas son
exactamente iguales, asi que las fotos se dibujan a la misma escala y los dos
cuerpos quedan a la misma altura. Contain y no cover: recortar una foto de
cuerpo para que cuadre cambia justo lo que se esta comparando. */
.cmp-par{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start;
margin-inline:auto;max-width:560px}
.cmp-lado{margin:0;min-width:0}
.cmp-foto{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;
background:var(--fondo-2);border-radius:var(--r-m)}
.cmp-lado figcaption{display:flex;flex-direction:column;gap:1px;margin-top:6px;
text-align:center;line-height:1.3}
.cmp-lado figcaption b{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
color:var(--texto-3)}
.cmp-lado figcaption span{font-size:13px;font-weight:700}
.cmp-pie{font-size:12px;color:var(--texto-3);text-align:center;margin:8px 0 0}
.cmp-pie:empty{display:none}
/* Parciales por kilometro (29-ago). Cada fila es una barra comparada con el km
mas rapido de esa misma carrera. Sin verde ni rojo: no hay un km "malo". */
.spl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.spl-fila{display:flex;align-items:center;gap:10px;padding:7px 0;
border-bottom:1px solid var(--linea)}
.spl-fila:last-child{border-bottom:0}
.spl-km{flex:0 0 34px;font-weight:700;font-size:14px;color:var(--texto-2);
display:flex;flex-direction:column;line-height:1.1}
.spl-km small{font-size:9.5px;font-weight:600;color:var(--texto-3)}
.spl-barra{flex:1 1 auto;height:8px;border-radius:6px;background:var(--fondo-2);overflow:hidden}
.spl-barra i{display:block;height:100%;border-radius:6px;background:var(--grad-azul)}
.spl-mejor .spl-barra i{background:var(--primario)}
.spl-datos{flex:0 0 88px;text-align:right;display:flex;flex-direction:column;line-height:1.15}
.spl-datos b{font-size:14px;font-variant-numeric:tabular-nums}
.spl-datos b small{font-size:10px;font-weight:600;color:var(--texto-3)}
.spl-datos > small{font-size:10.5px;color:var(--texto-3)}
.spl-pie{font-size:11.5px;margin:10px 0 0}
/* Semana de aprendizaje de porciones (29-ago). Una tarjeta al dia y se acabo:
ni rachas, ni puntos, ni medallas. El brief lo prohibe expresamente. */
.apr{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-m);
padding:14px 16px 12px;margin-bottom:14px}
.apr-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.apr-dia{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
color:var(--azul-txt)}
.apr-dia small{font-weight:600;color:var(--texto-3)}
.apr-puntos{display:flex;gap:4px}
.apr-puntos i{width:6px;height:6px;border-radius:50%;background:var(--linea);display:block}
.apr-puntos i.ya{background:var(--texto-3)}
.apr-puntos i.hoy{background:var(--primario);box-shadow:0 0 0 3px color-mix(in srgb, var(--primario) 22%, transparent)}
.apr-tit{font-size:17px;margin:0 0 6px;line-height:1.25}
.apr-idea{font-size:14px;color:var(--texto-2);margin:0 0 10px;line-height:1.5}
.apr-hoy{font-size:14px;margin:0;line-height:1.5}
.apr-pie{font-size:11.5px;color:var(--texto-3);margin:10px 0 0}
/* El titulo del dia, editable. Parece un titulo hasta que se toca: si
pareciera un campo, la ficha se llenaria de cajas y se leeria peor. El boton
solo aparece al enfocar, para que no haya 5 botones "Guardar" a la vez. */
.dia-tit{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.dia-tit-campo{flex:1;min-width:0;min-height:38px;font-size:15px;font-weight:700;
letter-spacing:-.01em;color:var(--texto);background:transparent;
border:1px solid transparent;border-radius:9px;padding:0 8px;margin:0 0 0 -8px}
.dia-tit-campo:hover{border-color:var(--linea)}
.dia-tit-campo:focus{border-color:var(--primario);background:var(--n1);outline:none}
.dia-tit .btn-ds{visibility:hidden}
.dia-tit:focus-within .btn-ds{visibility:visible}
/* Sin raton no hay hover y sin teclado el foco se va al tocar fuera: en el
movil el boton se ve siempre. */
@media (hover:none){.dia-tit .btn-ds{visibility:visible}
.dia-tit-campo{border-color:var(--linea)}}
/* Dia de la semana de una sesion, en el plan de Miguel. Discreto: es opcional
y la mayoria de planes no lo van a usar. */
.dia-sem{display:flex;align-items:center;gap:8px;margin:-2px 0 10px}
.dia-sem label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
font-weight:700;color:var(--texto-3)}
.dia-sem select{min-height:36px;font-size:13px;padding:0 8px}
.pg-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pg-fotos figure{margin:0}
.pg-fotos img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-s);display:block}
.pg-fotos figcaption{font-size:10.5px;color:var(--texto-3);margin-top:4px;text-align:center}
/* Fuerza: una fila por ejercicio, con su linea al lado del numero. */
.fz-lista{list-style:none;margin:0;padding:0}
.fz{display:grid;grid-template-columns:1fr 96px auto;align-items:center;gap:10px;
padding:11px 0;border-bottom:1px solid var(--linea)}
.fz:last-child{border-bottom:0;padding-bottom:2px}
.fz-txt{min-width:0}
.fz-txt b{display:block;font-size:14px;font-weight:700;line-height:1.25}
.fz-txt small{display:block;font-size:10.5px;color:var(--texto-3);margin-top:2px;line-height:1.35}
.fz-sp{width:96px;height:34px;display:block;overflow:visible}
.fz-sp{--sp:var(--acento)}
.fz-sp.sube{--sp:var(--ok,#2e9f63)}
.fz-sp.baja{--sp:var(--peligro,#d4544a)}
.fz-sp.plana{--sp:var(--texto-3)}
.fz-area{fill:var(--sp);opacity:.13;stroke:none}
.fz-linea{fill:none;stroke:var(--sp);stroke-width:2;
stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.fz-pt{fill:var(--sp)}
/* Una linea plana con relleno vuelve a ser una barra, que es justo lo que
sobraba. Sin relleno se lee como lo que es: que ahi no cambia nada. */
.fz-sp.plana .fz-area{display:none}
.fz-num{text-align:right;white-space:nowrap}
.fz-num b{display:block;font-size:17px;font-weight:800;line-height:1.1}
.fz-num b i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--texto-3);margin-left:2px}
.fz-num .pg-etq{margin-top:3px}
@media (max-width:360px){
.fz{grid-template-columns:1fr 70px auto;gap:8px}
.fz-sp{width:70px}
}
.pg-fotos figure{position:relative}
.pg-fotos figure form{position:absolute;top:5px;right:5px;margin:0}
.fp-x{width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;line-height:1;
background:rgba(0,0,0,.55);color:#fff;font-size:16px;font-weight:700;
display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.fp-x:hover{background:rgba(190,40,40,.85)}
/* Subir fotos de progreso. Los tres huecos son del mismo alto que la
cuadricula de arriba (3/4) para que al llenarse la pantalla no de un salto. */
.fp-subir{margin-top:14px;border-top:1px solid var(--linea);padding-top:14px}
.fp-intro{font-size:13.5px;color:var(--texto-2);line-height:1.5;margin:0 0 12px}
.fp-rej{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:start}
/* align-items:start, y no el valor por defecto: con `aspect-ratio` los tres
huecos no pueden estirarse y el navegador los alineaba por linea base, asi
que el primero quedaba 16 px mas alto que los otros dos. Medido. */
/* margin:0 a proposito. La regla global `form label{margin:16px 0 6px}` de
app.css le metia 16 px arriba a los huecos segundo y tercero y dejaba el
primero 16 px mas alto que los otros dos: era el desalineado que veia Miguel.
Medido con el navegador, no a ojo. Es la tercera vez que esa regla global
muerde (ver .tipo-serie label y el comentario de mas abajo). */
.fp-hueco{margin:0;position:relative;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:2px;text-align:center;cursor:pointer;overflow:hidden;
aspect-ratio:3/4;border-radius:var(--r-s);border:1px dashed var(--linea-2,var(--linea));
background:var(--fondo-2,rgba(255,255,255,.03));padding:6px}
.fp-hueco:hover,.fp-hueco:focus-within{border-color:var(--acento);
background:var(--fondo-3,rgba(255,255,255,.06))}
.fp-hueco b{position:relative;z-index:1;font-size:13px;font-weight:700;line-height:1.2}
.fp-ico{position:relative;z-index:1;font-size:22px;line-height:1;color:var(--acento);font-weight:300}
.fp-vista{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fp-hueco.puesta{border-style:solid;border-color:var(--acento)}
.fp-hueco.puesta b,.fp-hueco.puesta .fp-ico{position:relative;z-index:2}
.fp-hueco.puesta b{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.fp-hueco.puesta .fp-ico{display:none}
.fp-pie{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:12px}
.fp-fecha{display:flex;flex-direction:column;gap:4px;font-size:11px;
letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3)}
.fp-fecha input{font:inherit;font-size:14px;text-transform:none;letter-spacing:0;
color:var(--texto);background:var(--fondo-2,rgba(255,255,255,.04));
border:1px solid var(--linea);border-radius:var(--r-s);padding:8px 10px}
.fp-pie .btn{flex:1;min-width:150px}
.fp-pie .btn[disabled]{opacity:.45;cursor:not-allowed}
.fp-truco{font-size:11.5px;color:var(--texto-3);line-height:1.5;margin:10px 0 0}
/* ============================================================
FASE 4 · MIGUEL (antes "Coach")
============================================================ */
.mg-cab{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.mg-avatar{flex:0 0 auto;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
background:var(--grad-azul);color:#fff;font-size:22px;font-weight:800;letter-spacing:-.02em;
box-shadow:var(--glow)}
/* Cuando el avatar es su foto (8-oct): mismo circulo, con un aro fino para que
no quede pegada al fondo. object-fit o la cara sale estirada. */
img.mg-avatar{object-fit:cover;display:block;
box-shadow:var(--glow),0 0 0 2px rgba(var(--pri-rgb),.45)}
.mg-cab h1{margin:0;font-size:24px;letter-spacing:-.02em}
.mg-cab p{margin:3px 0 0;font-size:13.5px;color:var(--texto-2)}
.mg-nota{border-radius:var(--r-m);padding:16px;margin:0 0 14px;position:relative;
background:linear-gradient(135deg,rgba(var(--pri-rgb),.16),rgba(var(--pri-rgb),.05));
border:1px solid rgba(var(--pri-rgb),.30)}
.mg-nota-t{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--azul-txt)}
.mg-nota p{margin:7px 0 0;font-size:15px;line-height:1.55;color:var(--texto)}
.mg-nota-f{display:block;margin-top:8px;font-size:11.5px;color:var(--texto-3)}
/* El azul de marca (#3B63FF) da 4,76 con blanco PURO: vale para un titular y no
para letra de 10 y 12px con transparencia, que se quedaba en 3,73 y 4,15
(medido por la bateria). Se usa el azul hondo de los botones y blanco entero. */
.mg-accion{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
border-radius:var(--r-m);padding:16px;margin:0 0 14px;
background:linear-gradient(135deg,#3357F5 0%,#0038B5 100%);
box-shadow:var(--sombra);min-height:44px}
.mg-accion b{display:block;font-size:16px;color:#fff;margin-top:3px}
.mg-accion small{display:block;font-size:12.5px;color:#fff;margin-top:3px;line-height:1.4}
.mg-etq{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
color:#fff}
:root[data-tema="noche"] .mg-accion{background:linear-gradient(135deg,#E07B53 0%,#C25F3C 100%)}
:root[data-tema="noche"] .mg-accion b,
:root[data-tema="noche"] .mg-accion small,
:root[data-tema="noche"] .mg-etq,
:root[data-tema="noche"] .mg-accion .mg-flecha{color:#120400}
.mg-accion .mg-flecha{margin-left:auto;color:#fff;font-size:19px}
.mg-flecha{flex:0 0 auto;color:var(--texto-3);font-size:17px}
.mg-txt{font-size:14.5px;line-height:1.6;color:var(--texto-2);margin:0 0 12px}
.mg-semana{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
color:var(--texto-3);margin:0 0 12px}
.mg-hecho .card-title{margin-bottom:8px}
.mg-cambios{border-radius:var(--r-s);background:var(--n3);border:1px solid var(--linea);
padding:14px;margin:0 0 12px}
.mg-cambios-t{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--texto)}
.mg-cambios ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.mg-cambios li{padding-left:14px;position:relative}
.mg-cambios li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;
border-radius:50%;background:var(--primario)}
.mg-cambios b{display:block;font-size:13.5px}
.mg-cambios span{display:block;font-size:13.5px;color:var(--texto-2);margin-top:2px;line-height:1.5}
.mg-porque{border-left:3px solid var(--primario);padding:2px 0 2px 12px;margin:0 0 12px}
.mg-porque span{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
color:var(--texto-3)}
.mg-porque p{margin:4px 0 0;font-size:14.5px;line-height:1.6;color:var(--texto)}
.mg-prio span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.07em;
text-transform:uppercase;color:var(--texto-3);margin:0 0 8px}
.mg-prio ol{margin:0 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.mg-prio li{font-size:14.5px;line-height:1.5}
.mg-pill{margin-left:8px;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px;
white-space:nowrap;
background:rgba(var(--pri-rgb),.18);color:var(--azul-txt);letter-spacing:0;text-transform:none}
.mg-corr{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mg-corr a{display:flex;align-items:center;gap:10px;min-height:56px;padding:11px 13px;
border-radius:var(--r-s);background:var(--n3);border:1px solid var(--linea);
text-decoration:none;color:inherit;transition:var(--t)}
.mg-corr a:active{transform:scale(.985)}
.mg-corr b{display:block;font-size:14px}
.mg-corr b em{font-style:normal;font-weight:600;color:var(--texto-3);font-size:12.5px}
.mg-corr small{display:block;font-size:12.5px;color:var(--texto-2);margin-top:2px;line-height:1.4}
.mg-nuevo{flex:0 0 auto;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px;
background:var(--primario);color:#fff}
.mg-wa{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;min-height:44px;
border-radius:var(--r-m);padding:15px 16px;border:1px solid var(--linea-fuerte);background:var(--n2);
transition:var(--t)}
.mg-wa:active{transform:scale(.99)}
.mg-wa-i{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
background:rgba(61,214,140,.14);color:var(--ok)}
.mg-wa-i svg{width:21px;height:21px}
.mg-wa b{display:block;font-size:15px}
.mg-wa small{display:block;font-size:12.5px;color:var(--texto-2);margin-top:2px}
/* ============================================================
FASE 4 · ARCHIVOS
============================================================ */
.ar-cab{margin:0 0 14px}
.ar-cab h1{margin:0;font-size:24px;letter-spacing:-.02em}
.ar-cab p{margin:4px 0 0;font-size:13.5px;color:var(--texto-2);line-height:1.45}
.ar-filtros{display:flex;gap:6px;overflow-x:auto;margin:0 0 14px;padding-bottom:2px}
.ar-f{flex:0 0 auto;min-height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;
border-radius:999px;border:1px solid var(--linea);background:var(--n2);font-size:12.5px;
font-weight:700;color:var(--texto-2);text-decoration:none;transition:var(--t)}
.ar-f span{font-size:11px;font-weight:800;color:var(--texto-3)}
.ar-f.on{background:var(--grad-azul);border-color:transparent;color:#fff}
.ar-f.on span{color:#fff}
.ar-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ar-item{display:flex;align-items:center;gap:12px;min-height:60px;padding:11px 13px;
border-radius:var(--r-m);background:var(--n2);border:1px solid var(--linea);
text-decoration:none;color:inherit;transition:var(--t)}
.ar-item:active{transform:scale(.99)}
.ar-ico{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
background:var(--n4);color:var(--texto-2)}
.ar-ico svg{width:19px;height:19px}
.ar-video{background:rgba(var(--pri-rgb),.15);color:var(--azul-txt)}
.ar-foto{background:rgba(61,214,140,.13);color:var(--ok)}
.ar-txt b{display:block;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-txt small{display:block;font-size:12px;color:var(--texto-2);margin-top:2px;line-height:1.35}
.ar-de{flex:0 0 auto;font-size:10.5px;font-weight:800;padding:4px 8px;border-radius:999px;
background:var(--n4);color:var(--texto-2)}
.ar-de.yo{background:rgba(var(--pri-rgb),.16);color:var(--azul-txt)}
@media (max-width:359px){.ar-de{display:none}}
/* ============================================================
FASE 4 · RECURSOS como cards
============================================================ */
.rc-grupo{margin:0 0 22px}
.rc-grupo-t{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
color:var(--texto-3);margin:0 0 4px}
.rc-grupo-p{margin:0 0 12px;font-size:13px;color:var(--texto-2);line-height:1.45}
.rc-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rc-card{display:flex;flex-direction:column;border-radius:var(--r-m);overflow:hidden;
background:var(--n2);border:1px solid var(--linea);text-decoration:none;color:inherit;
transition:var(--t)}
.rc-card:active{transform:scale(.985)}
.rc-img{position:relative;display:block;aspect-ratio:16/10;background:var(--n3);
display:grid;place-items:center;overflow:hidden}
.rc-img img{width:100%;height:100%;object-fit:cover;display:block}
.rc-ini{font-size:30px;font-weight:800;color:var(--texto-3)}
.rc-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
background:rgba(6,10,20,.55);color:#fff;backdrop-filter:blur(6px)}
.rc-play svg{width:18px;height:18px;margin-left:2px}
.rc-txt{display:block;padding:11px 12px 13px;min-width:0}
.rc-txt b{display:block;font-size:14px;line-height:1.3}
.rc-meta{display:block;font-size:11px;font-weight:700;color:var(--azul-txt);margin-top:5px;
letter-spacing:.02em}
.rc-desc{display:block;font-size:12px;color:var(--texto-2);margin-top:4px;line-height:1.4;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:359px){.rc-rejilla{grid-template-columns:1fr}}
/* ============================================================
FASE 4 · PERFIL
============================================================ */
.oculto-real{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pf-cab{display:flex;align-items:center;gap:16px;margin:0 0 18px}
.pf-foto-form{flex:0 0 auto;margin:0}
.pf-foto{position:relative;display:grid;place-items:center;width:74px;height:74px;border-radius:50%;
background:var(--grad-azul);color:#fff;font-size:29px;font-weight:800;cursor:pointer;
overflow:hidden;box-shadow:var(--sombra)}
.pf-foto img{width:100%;height:100%;object-fit:cover;display:block}
.pf-camara{position:absolute;right:-2px;bottom:-2px;width:27px;height:27px;border-radius:50%;
display:grid;place-items:center;background:var(--n2);border:1px solid var(--linea-fuerte);
color:var(--texto-2)}
.pf-camara svg{width:14px;height:14px}
.pf-cab h1{margin:0;font-size:23px;letter-spacing:-.02em}
.pf-obj{margin:4px 0 0;font-size:13.5px;color:var(--texto-2)}
.pf-sinfoto{margin:5px 0 0;font-size:12px;color:var(--texto-3);line-height:1.4}
.pf-foto-btns{display:flex;gap:8px;margin:0 0 18px;flex-wrap:wrap}
.pf-foto-btns label{cursor:pointer;flex:1 1 auto;justify-content:center}
.pf-quitar{margin:6px 0 0}
.pf-quitar button{background:none;border:0;padding:0;font:inherit;font-size:12.5px;
color:var(--texto-3);text-decoration:underline;cursor:pointer;min-height:24px}
.pf-plan-t{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pf-plan-t b{font-size:16px}
.pf-fase{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
padding:4px 9px;border-radius:999px;background:rgba(var(--pri-rgb),.16);color:var(--azul-txt)}
.pf-mes{margin:12px 0 8px;font-size:14px;font-weight:700;color:var(--texto)}
.pf-barra{height:6px;border-radius:99px;background:var(--n4);overflow:hidden}
.pf-barra span{display:block;height:100%;border-radius:99px;background:var(--grad-azul)}
.pf-aviso{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--aviso)}
.pf-nota{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--texto-3)}
.pf-h{margin:26px 0 12px;font-size:11px;font-weight:800;letter-spacing:.07em;
text-transform:uppercase;color:var(--texto-3)}
.pf-temas{display:flex;gap:8px}
.pf-tema{flex:1;min-width:0;min-height:44px;display:flex;align-items:center;justify-content:center;
gap:8px;padding:0 8px;border-radius:var(--r-s);border:1px solid var(--linea);
background:var(--n3);color:var(--texto-2);font-size:13px;font-weight:700;cursor:pointer;
transition:var(--t)}
.pf-tema.on{border-color:var(--primario);color:var(--texto);
box-shadow:0 0 0 1px var(--primario) inset}
.pf-tema-m{width:15px;height:15px;border-radius:50%;flex:0 0 auto;
border:1px solid var(--linea-fuerte)}
.pf-m-oscuro{background:#0D1426}
.pf-m-claro{background:#FBFCFE}
.pf-m-noche{background:#2A1310}
.pf-auto{display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:12px 0 0;
border-top:1px solid var(--linea)}
.pf-auto b{display:block;font-size:14px}
.pf-auto small{display:block;font-size:12px;color:var(--texto-2);margin-top:3px;line-height:1.4}
/* El navegador no estira los campos de hora: sin ancho fijo se queda en 90px y
se toca fatal. Medido en el repaso del 25-ago. */
.pf-auto input[type=time]{flex:0 0 auto;width:118px;min-height:44px;text-align:center}
.pf-conn{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.pf-conn b{display:block;font-size:14.5px}
.pf-conn small{display:block;font-size:12.5px;color:var(--texto-2);margin-top:2px;line-height:1.4}
.pf-on{flex:0 0 auto;margin-left:auto;font-size:10.5px;font-weight:800;padding:4px 9px;
border-radius:999px;background:rgba(61,214,140,.14);color:var(--ok)}
/* ============================================================
FASE 4 · FEEDBACK
============================================================ */
.fb-video{border-radius:var(--r-l);overflow:hidden;background:var(--n3);margin:0 0 16px;
border:1px solid var(--linea)}
.fb-video video{width:100%;display:block;max-height:62vh;background:#000}
.fb-destacado{border-radius:var(--r-m);padding:16px;margin:0 0 14px;
background:linear-gradient(135deg,rgba(var(--pri-rgb),.16),rgba(var(--pri-rgb),.05));
border:1px solid rgba(var(--pri-rgb),.30)}
.fb-destacado span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--azul-txt)}
.fb-destacado p{margin:7px 0 0;font-size:15.5px;line-height:1.55;color:var(--texto)}
.fb-areas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.fb-areas li{padding:12px 13px;border-radius:var(--r-s);background:var(--n3);
border:1px solid var(--linea)}
.fb-areas li.cambia{border-color:rgba(var(--pri-rgb),.30)}
.fb-area-t{display:flex;align-items:center;gap:10px}
.fb-area-t b{font-size:14.5px}
.fb-chip{margin-left:auto;font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;
background:var(--n4);color:var(--texto-3);white-space:nowrap}
.fb-chip.on{background:rgba(var(--pri-rgb),.18);color:var(--azul-txt)}
.fb-areas p{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--texto-2)}
.fb-prio{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.fb-prio li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;line-height:1.5}
.fb-prio span{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
background:var(--grad-azul);color:#fff;font-size:12px;font-weight:800}
.fb-notas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.fb-notas li{display:flex;align-items:center;gap:11px}
.fb-notas>li>span{flex:0 0 96px;font-size:13px;color:var(--texto-2)}
.fb-notas em{flex:1;min-width:0;height:7px;border-radius:99px;background:var(--n4);overflow:hidden}
.fb-notas em i{display:block;height:100%;border-radius:99px;background:var(--grad-azul)}
.fb-notas b{flex:0 0 auto;font-size:14px;font-weight:800;min-width:44px;text-align:right}
.fb-notas b small{font-size:11px;color:var(--texto-3);font-weight:600}
.fb-notas b.nada{color:var(--texto-3)}
.fb-hist summary{cursor:pointer;font-weight:700;font-size:14px;min-height:32px;
display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fb-hist summary span{font-weight:500;font-size:12.5px;color:var(--texto-3)}
.fb-hist>div{margin-top:12px}
/* ============================================================
FASE 5 · MAPA DEL RECORRIDO
Dibujado aqui con un SVG, sin llamar a ningun servidor de mapas.
============================================================ */
.mp-caja{border-radius:var(--r-l);border:1px solid var(--linea);overflow:hidden;margin:0 0 14px;
background:linear-gradient(160deg,var(--n3) 0%,var(--n2) 100%)}
.mp-svg{display:block;width:100%;height:auto}
.mp-pie{display:flex;align-items:center;gap:6px;padding:0 14px 12px;font-size:11.5px;
color:var(--texto-3)}
.mp-p{width:8px;height:8px;border-radius:50%;display:inline-block}
.mp-ini{background:var(--ok)}
.mp-fin{background:var(--texto);margin-left:10px}
.mp-mini{border-radius:var(--r-s);overflow:hidden;background:var(--n3);border:1px solid var(--linea)}
.mp-mini svg{display:block;width:100%;height:auto}
/* ---------- subir el fichero del reloj ---------- */
.im-caja{border-radius:var(--r-m);border:1px dashed var(--linea-fuerte);background:var(--n2);
padding:16px;margin:0 0 16px}
.im-caja b{display:block;font-size:14.5px}
.im-caja p{margin:5px 0 12px;font-size:12.5px;color:var(--texto-2);line-height:1.5}
.im-boton{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;
border-radius:var(--r-s);border:1px solid var(--linea-fuerte);background:var(--n3);
color:var(--texto);font-size:14px;font-weight:700;cursor:pointer}
.im-boton svg{width:18px;height:18px}
/* ---------- centro de apps conectadas ---------- */
.ic-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ic-item{padding:13px;border-radius:var(--r-s);background:var(--n3);border:1px solid var(--linea)}
.ic-t{display:flex;align-items:center;gap:10px}
.ic-t b{font-size:14.5px}
.ic-est{margin-left:auto;font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;
white-space:nowrap;background:var(--n4);color:var(--texto-2)}
.ic-est.conectado{background:rgba(61,214,140,.14);color:var(--ok)}
.ic-est.subir{background:rgba(var(--pri-rgb),.16);color:var(--azul-txt)}
.ic-item p{margin:7px 0 0;font-size:12.5px;color:var(--texto-2);line-height:1.5}
.ic-item .ic-como{color:var(--texto);background:var(--n4);border-radius:10px;padding:9px 11px;
margin-top:9px;font-size:12.5px}
.ac-ruta{color:var(--azul-txt);font-weight:900}
.ru-ver{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-size:13.5px;
font-weight:700;color:var(--azul-txt);text-decoration:none}
.mp-mini{display:block;margin-top:12px}
/* --- FASE 6: preparacion, RIR por modo y "como te ha parecido" -------------- */
/* Preparacion antes del entreno. Es una pantalla de paso: tiene que leerse de
una pasada y acabar en un boton grande, no invitar a quedarse. */
.pr-hero{padding:18px 0 6px}
.pr-etq{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--texto-2);margin-bottom:6px}
.pr-hero h1{font-size:26px;line-height:1.15;margin:0 0 6px}
.pr-sub{color:var(--texto-2);font-size:14px;margin:0}
/* La frase de Miguel (22-sep) manda en esta pantalla: es lo que lee antes de
entrar al primer ejercicio, asi que va mas grande que el resto y en el color
del texto principal, no en el apagado. */
.pr-animo{color:var(--texto);font-size:16px;line-height:1.45;font-weight:600}
.pr-cuenta{margin-top:6px;color:var(--texto-3);font-size:13.5px}
.pr-bloque{margin-top:14px}
.pr-recursos{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.pr-rec{display:block;text-decoration:none;color:inherit;border-radius:14px;
overflow:hidden;background:var(--n3);min-height:44px}
.pr-rec img,.pr-rec-sinfoto{display:block;width:100%;height:88px;object-fit:cover;
background:var(--n4)}
.pr-rec-n{display:block;padding:8px 10px;font-size:13px;font-weight:600}
/* El calentamiento que se puede ver en video (Miguel, 22-sep). El triangulo va
ENCIMA de la foto, centrado, con su circulo oscuro detras: las fotos son
claras y un triangulo blanco a pelo se pierde en la mitad de ellas. La
posicion relativa la pone la tarjeta, que hasta hoy no la tenia. */
.pr-rec-video{position:relative}
.pr-rec-play{position:absolute;top:44px;left:50%;
transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(12,16,32,.62);box-shadow:0 2px 10px rgba(0,0,0,.28);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pr-rec-play svg{width:22px;height:22px;fill:#fff;margin-left:2px}
.pr-rec-vtxt{position:absolute;top:6px;left:6px;padding:3px 7px;border-radius:7px;
font-size:10.5px;font-weight:700;letter-spacing:.02em;color:#fff;
background:rgba(12,16,32,.62);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* La rampa. Los kilos mandan visualmente: es el numero que va a cargar. */
.pr-rampa{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.pr-rampa li{display:flex;align-items:baseline;gap:8px;padding:11px 14px;
background:var(--n3);border-radius:12px}
.pr-kg{font-size:19px;font-weight:700}
.pr-x{color:var(--texto-3);font-size:14px}
.pr-reps{font-size:16px;font-weight:600}
.pr-pct{margin-left:auto;font-size:12px;color:var(--texto-2)}
.pr-pie{margin:10px 0 0;font-size:12.5px;color:var(--texto-2);line-height:1.5}
.pr-lista{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.pr-lista li{display:flex;align-items:center;gap:10px;padding:9px 0;
border-bottom:1px solid var(--linea)}
.pr-lista li:last-child{border-bottom:0}
.pr-n{font-size:12px;color:var(--texto-3);font-variant-numeric:tabular-nums;min-width:22px}
.pr-ej{font-weight:600;font-size:14.5px}
.pr-obj{margin-left:auto;font-size:12.5px;color:var(--texto-2);white-space:nowrap}
.pr-form{margin:18px 0 8px}
.pr-listo{min-height:52px;font-size:16px}
/* El objetivo, con dueno. Sin el "de Miguel" parece un numero que se le pide. */
.ej-meta{margin:0 0 10px;font-size:13px;color:var(--texto-2)}
.ej-meta b{color:var(--texto)}
/* "Hoy toca" con las series una a una (Miguel, 26-sep). Cada serie en su
pastilla para que se lea de un golpe que la ultima baja, en vez de un
"12·12·10" pegado que hay que descifrar. */
.ej-meta-ht{display:flex;flex-wrap:wrap;align-items:center;gap:6px;line-height:1.5}
.ht-x{opacity:.55;font-weight:600}
.ht-series{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:middle}
.ht-s{display:inline-flex;align-items:center;justify-content:center;min-width:26px;
padding:2px 7px;border-radius:7px;font-size:12.5px;font-weight:700;
color:var(--texto);background:rgba(var(--pri-rgb),.10);
border:1px solid var(--linea)}
/* La ultima serie va marcada: es donde suele bajar la repeticion y es lo que
hay que ver sin contar. Con el azul de marca, que es el color de la app. */
.ht-s:last-child{color:var(--azul-txt);background:rgba(var(--pri-rgb),.22);
border-color:var(--linea-fuerte)}
.ht-cola{font-size:12px;color:var(--texto-2)}
.ht-rir{font-size:12px;padding:2px 7px;border-radius:7px;color:var(--texto-2);
background:rgba(var(--pri-rgb),.10);border:1px solid var(--linea)}
.ht-lado{font-weight:800;opacity:.8;margin-right:2px}
/* Sin RIR, dos columnas en vez de tres: si se dejan tres, el hueco vacio se lee
como un campo que falta por rellenar. */
.serie-campos.sin-rir{grid-template-columns:1fr 1fr}
/* Como te ha parecido. Tres botones y ninguno preseleccionado: si viniera uno
marcado por defecto, la respuesta mas comun seria la que puse yo. */
.ej-sens{margin:14px 0 4px;padding:12px 14px;background:var(--n3);border-radius:14px}
.ej-sens-t{margin:0 0 10px;font-size:13.5px;font-weight:600}
.ej-sens-t small{display:block;font-weight:400;font-size:12px;color:var(--texto-2);margin-top:2px}
.ej-sens-op{display:flex;flex-wrap:wrap;gap:8px}
.ej-sens-op .en-linea{display:contents}
.sens{min-height:44px;padding:0 14px;border-radius:11px;border:1px solid var(--linea);
background:var(--n2);color:var(--texto);font-size:13px;font-weight:600;cursor:pointer;
flex:1 1 auto}
.sens.on{background:rgba(var(--pri-rgb),.16);border-color:var(--primario);color:var(--azul-txt)}
/* El interruptor de modo en Perfil */
.pf-rir{display:flex;gap:10px;margin:10px 0 6px}
.pf-rir-op{flex:1 1 0;min-height:60px;padding:10px;border-radius:14px;cursor:pointer;
border:1px solid var(--linea);background:var(--n3);color:var(--texto);text-align:left}
.pf-rir-op b{display:block;font-size:14px}
.pf-rir-op small{display:block;font-size:11.5px;color:var(--texto-2);margin-top:2px}
.pf-rir-op.on{border-color:var(--primario);background:rgba(var(--pri-rgb),.16)}
.pf-rir-op.on b,.pf-rir-op.on small{color:var(--azul-txt)}
/* --- FASE 6: "¿Quieres ensenarme algo?" ------------------------------------
El brief lo pide con esas palabras y sin "Seleccionar archivo". Los campos de
fichero de verdad estan escondidos, no quitados: quitarlos rompe el formulario
y esconderlos con `display:none` hace que algunos navegadores no los envien.
Se sacan de la pantalla y se dejan enfocables. */
.ens{margin:12px 0 4px;padding:9px 12px;background:var(--n3);border-radius:13px}
/* Desplegable, pedido por Miguel el 17-sep: cerrado ocupaba demasiado sitio
entre el peso y el boton de guardar. Cerrado mide 44px en vez de 148. */
.ens-t{margin:0 0 9px;font-size:12.5px;font-weight:600;cursor:pointer;
display:flex;flex-direction:column;justify-content:center;
min-height:44px;padding-right:26px;position:relative;list-style:none}
/* Sin esto el navegador pinta su propio triangulito, que no pega con nada. */
.ens-t::-webkit-details-marker{display:none}
.ens-t::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;
margin-top:-6px;border-right:2px solid var(--texto-3);border-bottom:2px solid var(--texto-3);
transform:rotate(45deg);transition:transform var(--t)}
.ens[open] > .ens-t::after{transform:rotate(-135deg);margin-top:-2px}
/* Cerrado no necesita separarse de nada: no hay nada debajo. */
.ens:not([open]) > .ens-t{margin-bottom:0}
/* El punto avisa de que hay algo elegido aunque lo vuelva a cerrar. */
.ens.con-algo > .ens-t::before{content:"";position:absolute;right:20px;top:50%;
width:7px;height:7px;margin-top:-3px;border-radius:50%;background:var(--primario)}
.ens-t small{display:block;font-weight:400;font-size:11.5px;color:var(--texto-2);margin-top:2px}
.ens-op{display:flex;gap:8px;flex-wrap:wrap}
/* Con cinco botones en una fila de 390 px cada uno se queda en 70 px y no se
puede tocar. Se parten en dos filas: arriba lo que mas se usa (hacer la foto,
grabar, nota) y abajo las dos de traer algo ya guardado. */
/* Miguel, 18-sep: esto se hace pequeño y la serie coge el protagonismo. Los
tres botones pasan de tres cajas altas a una fila baja, con el icono al lado
del texto en vez de encima. Sigue teniendo 44 px de alto, que es lo minimo
para acertarle con el dedo: hacerlo mas pequeño ya no seria discreto, seria
imposible de tocar. */
.ens-b{flex:1 1 0;min-height:44px;display:flex;flex-direction:row;align-items:center;
justify-content:center;gap:6px;border-radius:11px;border:1px solid var(--linea);
background:var(--n2);color:var(--texto-2);font-size:12.5px;font-weight:600;cursor:pointer}
.ens-b.on{border-color:var(--primario);background:rgba(var(--pri-rgb),.16);color:var(--azul-txt)}
.ens-i{font-size:14px;line-height:1}
.ens-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
left:-9999px}
.ens-nota{margin-top:10px}
.ens-elegido{margin:10px 0 0;font-size:12.5px;color:var(--texto-2);word-break:break-word}
/* La barra de la subida. Nace escondida y solo aparece cuando hay algo
subiendo: una barra vacia permanente es ruido. El ancho se mueve con una
transicion corta porque un salto seco de 0 a 100 se lee como un fallo. */
.ens-sube{margin:10px 0 0}
.ens-barra{height:6px;border-radius:100px;background:var(--linea,rgba(0,0,0,.10));overflow:hidden}
.ens-barra i{display:block;height:100%;width:2%;border-radius:100px;
background:var(--acento,#2B52E8);transition:width .25s ease}
.ens-sube-t{margin:6px 0 0;font-size:12.5px;font-weight:600;color:var(--texto-2)}
/* Lo que ya mando, en la lista de series */
.ens-hecho{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.ens-mini{position:relative;display:block;width:96px;border-radius:10px;overflow:hidden;
background:var(--n4);text-decoration:none;color:inherit}
.ens-mini img,.ens-mini-sin{display:block;width:96px;height:64px;object-fit:cover;
background:var(--n4)}
.ens-play{position:absolute;left:50%;top:26px;width:26px;height:26px;margin:-13px 0 0 -13px;
border-radius:50%;background:rgba(0,0,0,.55)}
.ens-play::after{content:"";position:absolute;left:10px;top:7px;border-style:solid;
border-width:6px 0 6px 9px;border-color:transparent transparent transparent #fff}
.ens-dur{position:absolute;right:4px;top:44px;font-size:10.5px;padding:1px 5px;
border-radius:6px;background:rgba(0,0,0,.66);color:#fff;font-variant-numeric:tabular-nums}
.ens-vis{display:block;padding:5px 6px;font-size:11.5px;color:var(--texto-2);text-align:center}
/* --- FASE 6: hacer hoy otro entreno --------------------------------------- */
.otras{margin:14px 0 4px}
.otras-t{margin:0 0 10px;font-size:13.5px;font-weight:600;color:var(--texto-2)}
/* La tira se desliza y la siguiente asoma: el padding-right de la ultima es lo
que deja ver que hay mas, sin flechas ni puntitos. */
.otras-tira{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
.otras-tira::-webkit-scrollbar{display:none}
.otra{flex:0 0 68%;max-width:260px;scroll-snap-align:start;background:var(--n3);
border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:4px}
.otra b{font-size:16px}
.otra small{color:var(--texto-2);font-size:12.5px;margin-bottom:8px}
.otra .btn{margin-top:auto;min-height:44px}
.otras-pie{margin:10px 0 0;font-size:12px;color:var(--texto-2);line-height:1.5}
/* --- FASE 6: la ficha del ejercicio sube en una hoja ----------------------- */
.hoja-ej{border:0;padding:0;margin:0;width:100%;max-width:640px;max-height:92vh;
position:fixed;left:50%;bottom:0;top:auto;transform:translate(-50%,100%);
background:var(--n2);color:var(--texto);
border-radius:20px 20px 0 0;overflow:hidden;
transition:transform .22s ease;
/* el iPhone tiene barra abajo: sin esto el contenido se mete debajo */
padding-bottom:env(safe-area-inset-bottom,0)}
.hoja-ej.abierta{transform:translate(-50%,0)}
.hoja-ej::backdrop{background:rgba(0,0,0,.5)}
.hoja-ej-tira{width:38px;height:4px;border-radius:2px;background:var(--linea-fuerte);
margin:10px auto 4px}
.hoja-ej-x{position:absolute;right:8px;top:6px;width:44px;height:44px;border:0;
background:transparent;color:var(--texto-2);font-size:26px;line-height:1;cursor:pointer}
.hoja-ej-cuerpo{overflow-y:auto;max-height:calc(92vh - 26px);padding:4px 16px 20px;
-webkit-overflow-scrolling:touch}
/* dentro de la hoja la ficha no necesita su propio margen de pantalla */
.hoja-ej-cuerpo .fx-hero{margin-top:0}
/* Dentro de la hoja que sube desde abajo, el titulo iba a 26px (la medida de la
ficha a pagina entera) y un nombre normal como "Aductor maquina (activacion)"
se partia en DOS lineas que se comian el 21% de la hoja, ademas de meterse
por debajo de la X de cerrar. Medido en un movil de 390 px el 15-sep. */
.hoja-ej-cuerpo .fx-titulo{padding-right:48px}
.hoja-ej-cuerpo .fx-titulo h1{font-size:19px;line-height:1.2}
@media (min-width:480px){ .hoja-ej-cuerpo .fx-titulo h1{font-size:22px} }
/* `position:fixed` y no solo `overflow:hidden`: asi el fondo no se mueve
por debajo de la hoja. El `top` lo pone el JS con el scroll guardado, y
al cerrar se devuelve. */
body.con-hoja{position:fixed;left:0;right:0;width:100%;overflow:hidden}
/* --- FASE 6: la semana de comidas, para Miguel ----------------------------- */
.al-nav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
/* La tabla se desplaza DENTRO de su caja: siete columnas con fotos no caben en
un portatil, y lo que no puede pasar es que se mueva la pagina entera. */
.al-rejilla-caja{overflow-x:auto;-webkit-overflow-scrolling:touch}
.al-rejilla{border-collapse:collapse;width:100%;min-width:760px}
.al-rejilla th,.al-rejilla td{border:1px solid var(--linea);padding:6px;vertical-align:top}
.al-rejilla thead th{text-align:center;font-size:12px;color:var(--texto-2);padding:8px 6px}
.al-rejilla thead th b{display:block;font-size:14px;color:var(--texto)}
.al-rejilla thead th.hoy b{color:var(--azul-txt)}
.al-esq{width:96px;border:0 !important}
.al-mom{width:96px;text-align:left;font-size:12.5px;color:var(--texto-2);font-weight:600}
.al-c{display:flex;flex-direction:column;gap:3px;margin-bottom:6px}
.al-c:last-child{margin-bottom:0}
.al-c img{display:block;width:100%;height:64px;object-fit:cover;border-radius:8px}
/* --texto-3 sobre --n4 se queda en 4,26 y hace falta 4,5. Medido, no supuesto. */
.al-sinfoto{height:64px;border-radius:8px;background:var(--n4);display:flex;
align-items:center;justify-content:center;font-size:11px;color:var(--texto-2)}
.al-hora{font-size:11px;color:var(--texto-2);font-variant-numeric:tabular-nums}
.al-nota{font-size:11.5px;color:var(--texto-2);line-height:1.4}
.al-pie-fila td{text-align:center}
.al-kcal{font-size:12px;color:var(--texto-2);font-variant-numeric:tabular-nums}
/* ---- biblioteca: subir foto y video del ejercicio (29-ago) ---- */
.ej-medios{display:grid;gap:14px;grid-template-columns:1fr;margin:14px 0 6px}
@media (min-width:640px){.ej-medios{grid-template-columns:1fr 1fr}}
.ej-medio{background:var(--n3);border:1px solid var(--linea);border-radius:14px;padding:12px}
.ej-medio-t{font-weight:600;color:var(--texto);margin-bottom:8px}
.ej-medio-prev{width:100%;max-height:220px;object-fit:cover;border-radius:10px;display:block;background:var(--n2)}
video.ej-medio-prev{object-fit:contain}
.ej-medio-no{padding:26px 10px;text-align:center;color:var(--texto-2);background:var(--n2);
border:1px dashed var(--linea-fuerte);border-radius:10px;font-size:.92rem}
.ej-subir{display:block;margin-top:10px;padding:12px 14px;min-height:44px;text-align:center;
background:var(--primario);color:#fff;border-radius:12px;font-weight:600;cursor:pointer}
.ej-subir:active{filter:brightness(.92)}
.ej-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ej-elegido{display:block;margin-top:6px;font-size:.86rem;color:var(--texto-2);word-break:break-all}
.ej-medio details{margin-top:10px}
.ej-medio summary{font-size:.86rem;color:var(--texto-2);cursor:pointer;min-height:24px}
.ej-medio-pie{font-size:.86rem;color:var(--texto-2);margin:2px 0 10px}
/* ---- mover ejercicios de sitio (29-ago) ---- */
.ej{position:relative}
.ej-mover{
position:absolute;top:8px;right:8px;z-index:3;
width:44px;height:44px;display:flex;align-items:center;justify-content:center;
background:none;border:0;border-radius:12px;cursor:grab;
color:var(--texto-3);touch-action:none;-webkit-tap-highlight-color:transparent;
}
.ej-mover svg{width:20px;height:20px;fill:currentColor}
.ej-mover:active{cursor:grabbing;background:var(--n3);color:var(--texto-2)}
.ej-mover:focus-visible{outline:2px solid var(--primario);outline-offset:-2px;color:var(--texto-2)}
/* el asa se come la esquina, asi que el titulo no llega hasta el borde */
.ej-tapa{padding-right:56px}
.ej.moviendo{
z-index:5;box-shadow:0 14px 34px rgba(0,0,0,.45);
border-color:var(--primario);
}
.ej.moviendo .ej-mover{color:var(--azul-txt)}
/* mientras se arrastra no se selecciona texto ni rebota la pagina */
body.reordenando{user-select:none;-webkit-user-select:none;overscroll-behavior:contain}
@media (prefers-reduced-motion:no-preference){
.ej{transition:box-shadow var(--t),border-color var(--t)}
}
/* ---- subir a la biblioteca en tandas (29-ago) ---- */
.sb-ayuda{color:var(--texto-2);font-size:.92rem;margin:4px 0 12px;line-height:1.45}
.sb-elegir{display:block;padding:16px;min-height:52px;text-align:center;cursor:pointer;
background:var(--n3);border:1px dashed var(--linea-fuerte);border-radius:14px;
color:var(--texto);font-weight:600}
.sb-elegir:active{background:var(--n4)}
.sb-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sb-cuenta{margin:10px 0 0;color:var(--azul-txt);font-weight:600;font-size:.94rem}
.sb-enviar{margin-top:12px;width:100%}
.sb-enviar:disabled{opacity:.5}
.sb-lista{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:10px}
.sb-item{display:flex;gap:12px;align-items:center;background:var(--n3);
border:1px solid var(--linea);border-radius:14px;padding:10px}
.sb-mini{position:relative;flex:none;width:74px;height:74px;border-radius:10px;
overflow:hidden;background:var(--n2);display:flex;align-items:center;justify-content:center}
.sb-mini img{width:100%;height:100%;object-fit:cover}
.sb-sinmini{font-size:.8rem;color:var(--texto-3)}
.sb-play{position:absolute;inset:0;margin:auto;width:0;height:0;
border-left:14px solid rgba(255,255,255,.92);border-top:9px solid transparent;
border-bottom:9px solid transparent;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.sb-datos{flex:1;min-width:0}
.sb-nombre{font-size:.88rem;color:var(--texto-2);word-break:break-all;margin-bottom:6px}
.sb-select{width:100%;min-height:44px}
.sb-adivinado{display:block;margin-top:5px;font-size:.8rem;color:var(--azul-txt)}
.sb-tirar{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.sb-tirar form{display:flex;align-items:center;gap:10px;justify-content:space-between}
.sb-tirar span{font-size:.86rem;color:var(--texto-2);word-break:break-all}
.bib-subir{margin:10px 0 16px}
.bib-subir .btn-ds{display:inline-block;min-height:44px;line-height:1.4}
.sb-portadas{margin:12px 0 0;padding:10px;border:1px solid var(--linea);border-radius:12px;background:var(--n2)}
.sb-portadas legend{font-size:.82rem;color:var(--texto-2);padding:0 6px}
.sb-tiras{display:flex;gap:8px;overflow-x:auto;padding:2px}
.sb-tira{flex:none;width:78px;height:56px;border-radius:9px;overflow:hidden;cursor:pointer;
border:2px solid transparent;position:relative;background:var(--n3)}
.sb-tira img{width:100%;height:100%;object-fit:cover;display:block}
.sb-tira input{position:absolute;opacity:0;width:1px;height:1px}
.sb-tira:has(input:checked),.sb-tira.elegida{border-color:var(--primario)}
.sb-tira:has(input:focus-visible){outline:2px solid var(--primario);outline-offset:2px}
.sb-portadas-ayuda{margin:8px 0 0;font-size:.8rem;color:var(--texto-3)}
/* ============================================================
ESTADOS DE CARGA Y TIRAR PARA ACTUALIZAR (29-ago)
Ultimo punto del brief del rediseno: "estados de carga elegantes ·
skeletons · pull to refresh cuando tenga sentido".
Tres cosas distintas, y cada una tapa un hueco distinto:
1. La barra de arriba, para cuando tocas y la pagina tarda en llegar.
Aqui cada seccion recarga entera, asi que el navegador se queda
ensenando la pantalla vieja y parece que el toque no ha entrado.
2. Los esqueletos, para lo que se pide por detras sin recargar: la
ficha del ejercicio, que se abre en mitad de un entreno.
3. Tirar hacia abajo, que en el icono de pantalla de inicio del iPhone
NO existe: alli no hay barra del navegador ni forma de recargar.
============================================================ */
@keyframes esq-brillo{0%{background-position:-140% 0}100%{background-position:240% 0}}
.esq{
border-radius:var(--r-s);
background-image:linear-gradient(100deg,var(--n3) 26%,var(--n4) 46%,var(--n3) 66%);
background-size:220% 100%;
animation:esq-brillo 1.4s linear infinite;
}
.esq-l{height:12px;margin:9px 0;border-radius:7px}
.esq-l.corta{width:62%}
.esq-l.media{width:82%}
.esq-t{height:20px;width:56%;margin:4px 0 14px;border-radius:9px}
.esq-video{height:190px;border-radius:var(--r-m);margin-bottom:14px}
.esq-pes{height:38px;border-radius:12px;margin-bottom:16px}
.esq-ficha{padding:4px 2px 20px}
/* Una imagen que todavia no ha llegado deja un hueco vacio del color del
fondo y luego aparece de golpe. Con esto el hueco se ve vivo. La clase la
quita el JS al cargar, asi que un PNG con transparencia no se queda con el
degradado detras para siempre. */
img.cargando-img{
background-image:linear-gradient(100deg,var(--n3) 26%,var(--n4) 46%,var(--n3) 66%);
background-size:220% 100%;
animation:esq-brillo 1.4s linear infinite;
}
.barra-carga{
position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:3px;
z-index:9999;pointer-events:none;overflow:hidden;
opacity:0;transition:opacity 140ms linear;
}
.barra-carga.on{opacity:1}
.barra-carga i{
display:block;height:100%;width:34%;
background:linear-gradient(90deg,transparent,var(--primario),var(--secundario),transparent);
animation:barra-va 1.05s ease-in-out infinite;
}
@keyframes barra-va{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}
.ptr{
position:fixed;top:calc(env(safe-area-inset-top,0px) + 4px);left:0;right:0;
z-index:9998;display:flex;justify-content:center;pointer-events:none;
opacity:0;transform:translateY(-14px);
}
.ptr-c{
width:36px;height:36px;border-radius:50%;
background:var(--glass-2);border:1px solid var(--linea-fuerte);
box-shadow:var(--sombra);display:grid;place-items:center;color:var(--azul-txt);
backdrop-filter:blur(8px);
}
.ptr-c svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.3;
stroke-linecap:round;stroke-linejoin:round;display:block}
.ptr.lista .ptr-c{color:var(--acento);border-color:var(--acento)}
.ptr.girando .ptr-c{animation:ptr-gira .8s linear infinite}
@keyframes ptr-gira{to{transform:rotate(360deg)}}
/* Quien pide menos movimiento sigue viendo el estado, pero quieto: se
entiende igual y no marea. */
@media (prefers-reduced-motion: reduce){
.esq,img.cargando-img,.barra-carga i,.ptr.girando .ptr-c{animation:none}
.esq,img.cargando-img{background-image:none;background-color:var(--n4)}
.barra-carga i{width:100%;background:var(--primario)}
}
/* El atributo `hidden` del HTML lo pisa cualquier regla de clase que ponga un
display (un .btn con display:inline-flex, por ejemplo), y entonces algo
marcado como oculto se sigue viendo. Esto pasa en toda la app, no solo aqui. */
[hidden]{display:none !important}
/* ---------------------------------------------------------------------------
Grabar una carrera con el GPS. Pantalla de una sola cosa: se mira corriendo,
con el movil en la mano y a un brazo de distancia, asi que las cifras van
grandes de verdad y los botones son de dedo, no de raton.
--------------------------------------------------------------------------- */
.gr-aviso{border:1px solid var(--linea);border-left:3px solid var(--aviso);
border-radius:var(--r-m);background:var(--n2);padding:11px 14px;margin:0 0 12px}
.gr-aviso b{display:block;font-size:14px;margin-bottom:6px}
.gr-aviso p{font-size:13.5px;line-height:1.5;color:var(--texto-2);margin:0 0 8px}
.gr-aviso p:last-child{margin-bottom:0}
.gr-panel{border:1px solid var(--linea);border-radius:var(--r-m);background:var(--n2);
padding:15px 15px;margin:0 0 12px;text-align:center}
.gr-grande{display:flex;align-items:baseline;justify-content:center;gap:6px}
.gr-grande b{font-size:56px;font-weight:800;letter-spacing:-.03em;line-height:1;
font-variant-numeric:tabular-nums}
.gr-grande i{font-size:18px;font-style:normal;font-weight:700;color:var(--texto-3)}
.gr-fila{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.gr-fila div{display:flex;flex-direction:column;gap:2px}
.gr-fila b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.gr-fila small{font-size:11px;color:var(--texto-3);letter-spacing:.03em}
.gr-senal{font-size:12.5px;color:var(--texto-3);margin:16px 0 0}
.gr-senal.ok{color:var(--ok)}
.gr-senal.floja{color:var(--aviso)}
.gr-botones .btn{margin-bottom:10px}
.gr-botones .btn:last-child{margin-bottom:0}
.gr-botones .btn{min-height:54px;font-size:16px}
.gr-fin{border-color:var(--primario);color:var(--primario)}
.gr-error{border:1px solid var(--peligro);border-radius:var(--r-s);
background:color-mix(in srgb, var(--peligro) 10%, transparent);
color:var(--texto);font-size:13.5px;line-height:1.5;padding:12px 13px;margin:12px 0 0}
.gr-recuperar{border:1px solid var(--linea);border-radius:var(--r-m);background:var(--n2);
padding:15px;margin:14px 0 0}
.gr-recuperar b{display:block;font-size:14px;margin-bottom:5px}
.gr-recuperar p{font-size:13.5px;color:var(--texto-2);margin:0 0 12px}
.gr-pie{font-size:12.5px;color:var(--texto-3);margin:16px 0 0;line-height:1.5}
/* ============================================================
Deslizar una fila para que salgan sus opciones (30-ago)
Lo pidio Miguel: "cuando deslizas a los lados que te salgan
opciones". El JS de gestos.js pone `dz-on` en el ; sin
JavaScript las opciones se ven en fila debajo, como siempre,
asi que nadie se queda sin poder borrar nada.
============================================================ */
.dz{position:relative}
.dz .dz-acc{display:flex;gap:8px;align-items:center;padding:6px 0 2px}
/* Tamano de boton de verdad tambien SIN el modo gesto: si gestos.js no carga,
esto es lo unico que se ve, y un boton de 21px de alto no se pulsa. */
.dz .dz-acc button,.dz .dz-b{min-height:40px;padding:0 16px;border:0;border-radius:10px;
font:inherit;font-size:13px;font-weight:700;color:#fff;background:var(--n4);cursor:pointer}
.dz .dz-acc .rojo,.dz .dz-b.rojo{background:var(--peligro)}
.dz .dz-acc .azul,.dz .dz-b.azul{background:var(--primario)}
/* A partir de aqui, solo cuando el gesto esta vivo */
.dz-on .dz{overflow:hidden;border-radius:var(--r-m);--dz-w:92px}
.dz-on .dz .dz-acc{position:absolute;top:0;right:0;bottom:0;padding:0;gap:0;
z-index:0;pointer-events:auto}
.dz-on .dz .dz-cont{position:relative;z-index:1;background:var(--n2);
touch-action:pan-y;will-change:transform;transition:transform var(--t);
padding-right:44px}
.dz-on .dz.arrastrando .dz-cont{transition:none}
.dz-on .dz.abierta .dz-cont{transform:translateX(calc(-1 * var(--dz-w)))}
.dz-on .dz .dz-acc form{display:flex;height:100%;margin:0}
.dz-on .dz .dz-b,
.dz-on .dz .dz-acc button{display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:3px;min-width:92px;height:100%;border:0;margin:0;
padding:0 10px;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.01em;
color:#fff;background:var(--n4);cursor:pointer;text-decoration:none}
.dz-on .dz .dz-b.rojo,
.dz-on .dz .dz-acc .rojo{background:var(--peligro)}
.dz-on .dz .dz-b.azul,
.dz-on .dz .dz-acc .azul{background:var(--primario)}
.dz-on .dz .dz-b:active{filter:brightness(.88)}
/* El boton de los tres puntos: la salida para quien no acierte el gesto.
Lo mete el JS, asi que solo existe cuando el gesto existe. */
.dz-mas{position:absolute;top:50%;right:0;transform:translateY(-50%);
width:44px;height:44px;display:flex;align-items:center;justify-content:center;
border:0;background:transparent;color:var(--texto-3);cursor:pointer;padding:0}
.dz-mas svg{fill:currentColor}
.dz-mas:active{color:var(--texto)}
.dz.abierta .dz-mas{color:var(--texto)}
/* Fondo propio de cada lista: el contenido tiene que TAPAR las acciones, asi
que no puede ser transparente. */
.dz-on .al-item.dz-cont{background:var(--n2)}
.dz-on li.dz{display:block;padding:0}
.dz-on li.dz .dz-cont{background:var(--n2);display:flex;align-items:center;
justify-content:space-between;gap:12px;padding:11px 44px 11px 12px}
.dz-ayuda{font-size:12px;color:var(--texto-3);margin:2px 0 8px}
html:not(.dz-on) .dz-ayuda{display:none}
@media (prefers-reduced-motion: reduce){
.dz-on .dz .dz-cont{transition:none}
}
/* ============================================================
Detalles de iPhone (30-ago)
============================================================ */
/* iOS pinta un recuadro gris al tocar cualquier cosa, y compite con la
respuesta al tacto que ya se hizo el 26-ago: se ven los dos a la vez. */
a,button,input,select,textarea,label,[role="button"],summary{
-webkit-tap-highlight-color:transparent}
/* El rebote de una hoja abierta no debe arrastrar la pagina de detras. */
dialog.hoja,.hoja-dentro{overscroll-behavior:contain}
/* Transicion entre pantallas. Esta app recarga entera en cada seccion, asi que
sin esto el cambio es un corte seco. Donde el navegador no lo soporta, entra
la animacion de abajo, que hace lo mismo aunque sin el fundido de salida. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion: no-preference){
::view-transition-old(root){animation:vt-sale 110ms ease both}
::view-transition-new(root){animation:vt-entra 190ms cubic-bezier(.22,.68,.24,1) both}
}
@keyframes vt-sale{to{opacity:0}}
@keyframes vt-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@supports not (view-transition-name:none){
@media (prefers-reduced-motion: no-preference){
main.wrap,main.zona{animation:vt-entra 190ms cubic-bezier(.22,.68,.24,1) both}
}
}
/* Los dias del calendario tienen que poder tocarse con el dedo.
A 390px cada dia se quedaba en 41px de ancho: se recupera sitio quitando
relleno a la tarjeta y estrechando la separacion, sin tocar la altura.
Por debajo de 360px no llega a 44 ni con relleno cero (siete columnas no
caben), asi que alli se deja lo mejor posible y se dice. */
@media (max-width:480px){
.cal-caja{padding-left:12px;padding-right:12px}
.cal-caja .cal-semana,.cal-caja .cal-cabecera{gap:3px}
}
/* En las listas donde la fila entera lleva a un sitio, el enlace envuelve solo
al texto y se queda en 38px de alto: se toca justo, y con el movil en la mano
fallas. Se estira el enlace a los 44px del dedo sin mover nada de sitio.
Lo mismo con las pildoras de filtro, que estaban en 36. */
.lista-simple .dz-cont > a{display:flex;flex-direction:column;justify-content:center;min-height:44px}
.ar-f{min-height:44px}
/* Biblioteca: la foto en la propia lista. Miguel, 7-sep: entraba a la
biblioteca, buscaba "dominada" y no veia ninguna foto, porque la tabla
solo tenia texto. La miniatura es lo que hace que la biblioteca parezca
una biblioteca. object-fit:cover para que ninguna salga estirada. */
.bib-mini{width:64px;height:64px;min-width:64px;max-width:none;object-fit:cover;
border-radius:9px;display:block;background:var(--n2)}
.bib-mini-no{width:64px;height:64px;border-radius:9px;display:flex;align-items:center;
justify-content:center;background:var(--n2);color:var(--tx2);
font-size:11px;line-height:1.15;text-align:center;padding:4px}
/* min-width y no width: la columna se estrujaba a 24px y, con el max-width:100%
que llevan todas las imagenes, la foto se quedaba en 0px de ancho. Se veia
la fila entera y ninguna foto, que es justo lo que Miguel decia. */
td.cel-foto,th:first-child{width:76px;min-width:76px}
/* ---- Biserie: dos ejercicios en una sola tarjeta ----------------------
Miguel, 17-sep-2026: "que pueda poner si es biserie el ejercicio y poner
los 2 pesos en el mismo y salgan las dos fotos". El de abajo no se pinta
por su cuenta: sale aqui dentro, con su foto y su peso. */
.ej.es-biserie{border-left:3px solid var(--primario)}
.bs-eti{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;color:var(--azul-txt);margin-bottom:2px}
.bs-mas{display:inline-block;margin:0 7px;opacity:.5;font-weight:700}
.bs-fotos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 4px}
.bs-foto{position:relative;min-width:0}
.bs-foto a{display:block;text-decoration:none;color:inherit}
.bs-foto img,.bs-sinfoto{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
border-radius:12px;background:rgba(127,127,127,.12)}
.bs-foto b{display:block;font-size:13px;line-height:1.3;margin-top:6px;overflow-wrap:break-word}
.bs-foto small{display:block;font-size:11.5px;color:var(--azul-txt);margin-top:2px}
.bs-lado{position:absolute;top:7px;left:7px;z-index:1;width:22px;height:22px;
display:flex;align-items:center;justify-content:center;border-radius:100px;
background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:800}
/* Que peso va con que ejercicio. Sin esto, dos parejas de casillas seguidas
no se sabe de quien son, y ese es justo el lio que venia a quitar. */
.bs-cual{margin:12px 0 5px;font-size:12px;font-weight:800;letter-spacing:.03em;
text-transform:uppercase;color:var(--azul-txt)}
.bs-cual.bs-hechas{color:var(--texto-3);margin-top:14px}
@media (max-width:360px){
.bs-fotos{gap:7px}
.bs-foto b{font-size:12px}
}
/* El boton de unir en biserie, en la pantalla del plan de Miguel. */
.ej-ds .bs-form{margin-top:5px}
.bs-btn{border:1px solid var(--borde,rgba(127,127,127,.3));background:transparent;
color:var(--texto-3);border-radius:100px;padding:3px 10px;
font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.bs-btn:hover{color:var(--primario);border-color:var(--primario)}
.bs-btn.on{background:var(--primario);border-color:var(--primario);color:#fff}
/* Aviso de biserie mal montada: el cliente solo tiene UN hueco de peso para dos
ejercicios. Miguel, 30-sep-2026, despues de que lo dijera un cliente. */
.bs-aviso{margin:6px 0 4px;padding:6px 10px;border-radius:9px;font-size:11.5px;
line-height:1.4;font-weight:600;background:rgba(214,160,20,.14);
border:1px solid rgba(214,160,20,.4);color:#B4870F}
.bs-btn.partir{border-color:rgba(214,160,20,.7);color:#B4870F}
.bs-btn.partir:hover{background:#B4870F;border-color:#B4870F;color:#fff}
/* En una biserie, cada juego de atajos dice a cual de los dos rellena. */
.atajos-cual{display:inline-flex;align-items:center;gap:6px;width:100%;
font-size:11.5px;font-weight:700;color:var(--texto-3);margin:2px 0 -2px}
.ej-ds.unido{border-bottom-left-radius:0;border-bottom-right-radius:0}
.bs-union{height:12px;margin:-1px 0 0 18px;border-left:3px solid var(--primario)}
/* ---------- por que serie va, con puntitos ----------
Miguel, 17-sep: "que se haga como puntitos arriba en que serie voy". Son los
mismos puntos de la cabecera cerrada, pero aqui uno lleva aro: el que esta
apuntando ahora. Sin ese aro los puntos dicen lo que lleva hecho y no donde
esta, que es justo lo que pidio. */
.serie-puntos{flex:none;display:flex;gap:5px;align-items:center}
.serie-puntos i{width:8px;height:8px;border-radius:50%;background:var(--n4);
border:1px solid var(--linea-fuerte)}
.serie-puntos i.on{background:var(--primario);border-color:transparent}
.serie-puntos i.ahora{background:transparent;border:2px solid var(--primario);
width:10px;height:10px}
.serie-puntos i.ahora.extra{border-color:var(--aviso)}
/* ---------- unilaterales: dos bolitas al lado de la serie ----------
Miguel, 17-sep: "mas chulo y pequeno lo de ver la pierna, como a un lado de
la foto o serie y en bolita". Antes era una fila entera con su rotulo y su
cuenta debajo, que ocupaba 71px de alto. Ahora son 36px y van en la misma
linea que "SERIE 1" y los puntitos.
El area de toque se queda en 36 y no en 44 a proposito: es lo que ha pedido,
y no es un boton que se falle a ciegas (si le da a la bolita equivocada, la
ve marcada antes de guardar y la cambia). */
/* gap de 12 y no de 6: el area de toque de cada bola se estira 5px por lado
(abajo), asi que con 6 se solapaban 4px y un toque en medio caia en la que
estuviera encima. Con 12 quedan separadas por 2. */
/* A la derecha del todo, pedido por Miguel el 17-sep. El `margin-left:auto` se
come el hueco libre y las empuja al borde; para que eso valga TAMBIEN en
pantalla ancha, el par Serie de trabajo / Aproximacion se lleva su propia
linea (abajo). Sin eso, a partir de 768px el hueco se lo comia el par y las
bolas se quedaban a media fila: medido, en el movil salian bien y en el
portatil no. */
.lado-bolas{flex:none;display:flex;gap:12px;align-items:center;margin-left:auto}
/* margin:0 a proposito: la regla global `form label{margin:16px 0 6px}` de
app.css le mete 16px por arriba al segundo, y la R sale mas baja que la L.
Medido en produccion: L en y=601 y R en y=617. Es la tercera vez que esa
regla muerde en este fichero. */
.lado-bola{position:relative;display:block;margin:0}
/* El area de toque se estira AQUI, en el campo que recibe el toque, no con un
::after en la bola: un ::after dibuja, no escucha. Lo tenia mal y la bola se
tocaba en 30 mientras el comentario decia 40. Medido: 40x40. */
.lado-bola input{position:absolute;left:-5px;right:-5px;top:-5px;bottom:-5px;
width:auto;height:auto;opacity:0;margin:0;cursor:pointer}
.lado-bola > span{position:relative;display:flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:50%;cursor:pointer;
font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--texto-3);
background:transparent;border:1px solid var(--linea-fuerte);transition:all var(--t)}
/* Gris y no azul, pedido por Miguel el 17-sep. El relleno es --texto-3 y la
letra --n2, o sea el gris de los rotulos con el fondo de la tarjeta encima:
son tokens, asi que en modo claro se dan la vuelta solos.
Contraste MEDIDO en produccion con los dos temas puestos, no sacado de los
valores de :root (que no son los que acaban aplicandose): 5,71 en oscuro y
5,02 en claro, y lo mismo la que no esta elegida. Hace falta 4,5. */
.lado-bola input:checked + span{color:var(--n2);background:var(--texto-3);border-color:transparent}
.lado-bola input:focus-visible + span{outline:2px solid var(--primario);outline-offset:2px}
/* Lo que lleva hecho hoy de ese lado. Sin este numero, saber si va 2 a 1
obligaria a contar la lista de series a mano. */
.lado-bola b{position:absolute;top:-2px;right:-2px;min-width:13px;height:13px;
display:flex;align-items:center;justify-content:center;padding:0 3px;
border-radius:100px;font-size:8.5px;font-weight:800;line-height:1;
color:var(--texto-2);background:var(--n2);border:1px solid var(--linea-fuerte)}
.lado-bola input:checked + span b{color:var(--texto-2);background:var(--n2)}
.lado-bolas.junto-a-b{margin:0 0 9px}
/* La L o la R de una serie ya apuntada, en su lista. */
.lado-pin{display:inline-flex;align-items:center;justify-content:center;
min-width:20px;height:19px;margin-right:7px;padding:0 5px;border-radius:6px;
vertical-align:1px;font-size:11px;font-weight:800;letter-spacing:.03em;
color:var(--azul-txt);background:rgba(var(--pri-rgb),.14)}
/* La casilla de unilateral en la ficha del ejercicio. */
.ej-check{display:flex;align-items:center;gap:10px;margin:14px 0 4px;cursor:pointer}
.ej-check input{width:20px;height:20px;flex:none;accent-color:var(--primario);cursor:pointer}
.ej-check span{font-size:14.5px;font-weight:600;color:var(--texto)}
.ej-pista{margin:0 0 12px;font-size:12.5px;line-height:1.45;color:var(--texto-3)}
.ej-pista b{color:var(--texto-2)}
/* ---------- control de revisiones (17-sep) ----------
Por que mes va cada cliente y cuando le toca cambiarle la tabla. Se apoya en
.fila-p, que es la fila que el ya reconoce del bloque de atencion. */
.rev-pie{margin:0 0 10px;font-size:12.5px;color:var(--texto-2);line-height:1.45}
.rev-lista{list-style:none;margin:0;padding:0}
.rev-fila{display:flex;align-items:center;gap:12px;padding:11px 8px;
border-radius:var(--r-m);border-bottom:1px solid var(--linea)}
.rev-fila:last-child{border-bottom:0}
.rev-fila .av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;
place-items:center;background:var(--n4);color:var(--texto-2);font-weight:800;font-size:14px}
.rev-fila .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rev-fila .txt b{font-size:14.5px;font-weight:700}
.rev-fila .txt small{font-size:12px;color:var(--texto-2);line-height:1.4}
/* El que ya termino se marca en la fila entera, no solo con su chapa: en una
lista de once, una chapa sola se pasa por alto. */
.rev-fila.terminado{background:rgba(255,92,114,.07)}
.rev-fila.terminado .av{background:rgba(255,92,114,.16);color:var(--peligro)}
.rev-fila.sin-fecha .txt small{color:var(--texto-3)}
.rev-aviso{margin:12px 0 0;padding:10px 12px;border-radius:12px;
background:var(--n4);font-size:12.5px;line-height:1.5;color:var(--texto-2)}
.rev-aviso b{color:var(--texto)}
/* ---------------------------------------------------------------------------
LA SEMANA DE ENTRENAR, con fecha, lo que toca y lo hecho (17-sep-2026)
Miguel: "que salgan los entrenos que le toca, que se pueda mover, que se
pueda ver los numeros de la fecha, que se pueda deslizar de semana, se pueda
ver opcion del mes tambien".
--------------------------------------------------------------------------- */
.sem-cal{touch-action:pan-y} /* sin esto el navegador se queda el gesto de lado */
.sc-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.sc-nav .sc-rotulo{font-size:15px;font-weight:800;color:var(--texto)}
.sc-flecha{flex:none;width:44px;height:44px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:22px;line-height:1;text-decoration:none;
color:var(--texto-2);background:var(--n4);border:1px solid var(--linea-fuerte)}
.sc-flecha:active{background:var(--primario);color:var(--n2);border-color:transparent}
.sc-dias{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.sc-dia{display:flex;flex-direction:column;align-items:center;gap:3px;
padding:7px 0 8px;border-radius:12px;border:1px solid transparent;min-width:0}
.sc-dia .sc-l{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--texto-3)}
.sc-dia .sc-n{font-size:16px;font-weight:800;color:var(--texto-2);font-variant-numeric:tabular-nums}
.sc-dia.pasado .sc-n,.sc-dia.pasado .sc-l{color:var(--texto-3);opacity:.65}
.sc-dia.hoy{background:var(--n4);border-color:var(--primario)}
.sc-dia.hoy .sc-n{color:var(--texto)}
.sc-dia .sc-ses{display:flex;gap:3px;min-height:7px;align-items:center;justify-content:center;flex-wrap:wrap}
.sc-chapa{width:6px;height:6px;border-radius:50%;background:var(--primario);display:block}
.sc-chapa.ok{background:var(--ok)}
.sc-chapa.movida{box-shadow:0 0 0 2px var(--n3),0 0 0 3px var(--primario);background:transparent}
.sc-pie{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sc-pie .btn{flex:1;min-width:130px}
/* 19-sep: cada dia es un RECTANGULO suelto. Lo pidio Miguel, y no es solo
estetica: al arrastrar, el sitio donde puedes soltar tiene que verse como una
caja con su borde, porque una linea separadora no se lee como destino. */
.sc-lista{list-style:none;margin:14px 0 0;padding:0;
display:flex;flex-direction:column;gap:8px}
.sc-fila{display:flex;gap:11px;align-items:center;
padding:11px 12px;border:1px solid var(--linea);border-radius:var(--r-m);
background:var(--glass)}
.sc-fila.hoy{background:linear-gradient(90deg,rgba(var(--pri-rgb),.20),var(--glass));
border-color:rgba(var(--pri-rgb),.55)}
.sc-fila.vacio{background:transparent;border-style:dashed;border-color:var(--linea)}
.sc-fecha{flex:none;width:34px;text-align:center;line-height:1.1}
.sc-fecha b{display:block;font-size:16px;font-weight:800;color:var(--texto-2);font-variant-numeric:tabular-nums}
.sc-fecha small{display:block;font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--texto-3)}
.sc-fila.hoy .sc-fecha b{color:var(--azul-txt)}
.sc-que{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.sc-item{display:flex;flex-wrap:wrap;align-items:center;gap:7px;min-width:0}
.sc-item b{font-size:14.5px;font-weight:700;color:var(--texto)}
.sc-item.hecho b{color:var(--texto-3);text-decoration:line-through;text-decoration-thickness:1px}
.sc-item small{font-size:11.5px;color:var(--texto-3)}
.sc-tic{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
padding:2px 8px;border-radius:100px;color:var(--ok);background:rgba(34,197,94,.14)}
.sc-descanso{font-size:13px;color:var(--texto-3)}
.sc-fila.vacio .sc-fecha b{opacity:.55}
.sc-mover{flex:1 0 100%}
.sc-mover > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
font-size:12.5px;font-weight:700;color:var(--azul-txt);padding:4px 0}
.sc-mover > summary::-webkit-details-marker{display:none}
.sc-mover > summary::after{content:"";width:5px;height:5px;border-right:2px solid currentColor;
border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px}
.sc-mover[open] > summary::after{transform:rotate(-135deg);margin-top:2px}
.sc-mover form{display:flex;gap:7px;align-items:center;margin-top:6px}
.sc-mover select{flex:1;min-width:0;margin:0}
.sc-devolver{flex:1 0 100%;margin-top:4px}
/* ---------------------------------------------------------------------------
LA PAGINA DE INSTALAR (/app), la que Miguel manda a sus clientes.
Reaprovecha la tarjeta del login; solo cambia lo de dentro.
--------------------------------------------------------------------------- */
.ins-card{text-align:left}
.ins-logo{display:block;margin:0 auto 14px}
.ins-t{font-size:20px;text-align:center;margin:0 0 10px}
.ins-sub{font-size:14px;line-height:21px;color:var(--texto-3);text-align:center;margin:0 0 18px}
.ins-p{font-size:14px;line-height:21px;color:var(--texto-3);margin:8px 0 0}
.pasos-inicio{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
border-radius:14px;padding:14px 16px;margin-bottom:10px}
.pasos-inicio ol{margin:8px 0 0;padding-left:18px}
.pasos-inicio li{margin:7px 0;font-size:14px;line-height:20px}
.lbl-paso{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
color:var(--azul-txt)}
.ins-boton{margin-top:14px}
.ins-ir{display:block;text-align:center;margin-top:20px}
.ins-pie{font-size:12.5px;line-height:18px;color:var(--texto-3);text-align:center;margin:14px 0 0}
/* Del mes a la semana. El calendario ensena lo que te toca el martes y hasta
hoy no habia forma de ir a ESE entreno: se miraba y se salia por donde se
habia entrado (Miguel, 18-sep). */
.cal-a-semana{margin-bottom:12px}
.cal-ir-semana{margin-top:14px}
.ru-gps-pie{font-size:13px;margin:8px 2px 0;text-align:center}
/* ---------------------------------------------------------------------------
GRABAR UNA CARRERA, con la pinta de una app de running (Miguel, 18-sep, con
una captura de Strava delante): el recorrido grande arriba, la banda de la
senal, los numeros en su tarjeta y el boton redondo abajo.
El recorrido ocupa casi media pantalla a proposito: es lo que se mira de
reojo corriendo. Los numeros van grandes por lo mismo, que se leen a un
brazo de distancia y con el movil moviendose.
--------------------------------------------------------------------------- */
.gr-mapa{position:relative;border-radius:20px;overflow:hidden;margin-bottom:12px;
/* 36vh y no 44: con 44 el boton de empezar caia por debajo del borde en un
movil de 844 px de alto y habia que bajar para encontrarlo (18-sep). Lo que
se tiene que ver de un vistazo es el recorrido, los numeros Y el boton. */
height:32vh;min-height:215px;max-height:420px;
background:
radial-gradient(120% 90% at 50% 0%, rgba(var(--pri-rgb),.10), transparent 70%),
var(--n2, #0D1426);
box-shadow:inset 0 0 0 1px var(--linea)}
/* La cuadricula da sensacion de plano sin ser un mapa: sirve de referencia de
escala cuando el recorrido todavia es una raya corta. */
.gr-mapa::before{content:"";position:absolute;inset:0;opacity:.5;
background-image:linear-gradient(var(--linea) 1px, transparent 1px),
linear-gradient(90deg, var(--linea) 1px, transparent 1px);
background-size:34px 34px}
.gr-mapa canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gr-vacio{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:12px;text-align:center;padding:0 28px}
.gr-vacio p{margin:0;font-size:14px;color:var(--texto-2);max-width:230px;line-height:1.5}
.gr-punto-quieto{width:14px;height:14px;border-radius:50%;background:var(--primario);
box-shadow:0 0 0 8px rgba(var(--pri-rgb),.16)}
/* La banda de la senal, pegada abajo del recorrido como en las apps de correr */
/* Los colores van en var(--texto) y no en un verde claro fijo: esta pantalla
se usa en los tres temas, y un verde pensado para fondo oscuro sobre el tema
claro no se lee. Con la letra del tema, se lee en los tres. */
.gr-mapa .gr-senal{position:absolute;left:12px;right:12px;bottom:12px;margin:0;
padding:10px 14px;border-radius:13px;font-size:13.5px;font-weight:600;
text-align:center;backdrop-filter:blur(6px);
/* Desde que debajo hay un mapa de calles (18-sep), la banda NO puede ser un
color translucido tomado del tema: el mapa es claro en los tres temas y el
verde suave sobre calles claras dejaba de leerse. Va con su propio fondo
solido, que se lee igual encima de lo que sea. */
background:rgba(16,24,40,.86);color:#fff;
border:1px solid rgba(255,255,255,.22)}
.gr-mapa .gr-senal.ok{background:rgba(17,94,64,.90);color:#fff;
border-color:rgba(61,214,140,.55)}
.gr-mapa .gr-senal.floja{background:rgba(124,74,8,.90);color:#fff;
border-color:rgba(255,170,60,.55)}
.gr-panel{margin-bottom:16px}
.gr-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
background:var(--n3, #121B31);border:1px solid var(--linea);
border-radius:18px;padding:16px 10px}
.gr-tres div{text-align:center;min-width:0}
.gr-tres b{display:block;font-size:27px;line-height:1.1;font-variant-numeric:tabular-nums;
letter-spacing:-.02em}
.gr-tres small{display:block;margin-top:5px;font-size:11.5px;color:var(--texto-3);
letter-spacing:.02em}
.gr-posiciones{margin:9px 0 0;text-align:center;font-size:12px;color:var(--texto-3)}
/* El boton se queda pegado justo encima de la barra de abajo. En un movil
pequeno (un iPhone SE mide 667 px) no cabia en la pantalla y habia que bajar
a buscarlo, que es lo ultimo que quieres hacer con las zapatillas puestas.
Pegado, esta siempre a un dedo, y al llegar abajo del todo se queda en su
sitio como cualquier otro. El degradado es para que el recorrido no se lea
por debajo del boton cuando esta flotando. */
.gr-botones{display:flex;align-items:flex-start;justify-content:center;gap:26px;
margin-bottom:18px;position:sticky;z-index:20;padding-top:12px;
bottom:calc(var(--alto-nav, 68px) + env(safe-area-inset-bottom, 0px) + 8px);
background:linear-gradient(to top, var(--n1) 62%, transparent)}
.gr-redondo{width:84px;border:0;background:none;padding:0;cursor:pointer;
display:flex;flex-direction:column;align-items:center;gap:8px}
.gr-redondo svg{width:78px;height:78px;border-radius:50%;padding:20px;
background:var(--primario);fill:#fff;
box-shadow:0 10px 24px rgba(var(--pri-rgb),.35)}
.gr-redondo i{font-style:normal;font-size:13px;font-weight:700;color:var(--texto);
letter-spacing:.02em}
.gr-redondo.gr-pausa svg{background:var(--n4, #18233D);fill:var(--texto);
box-shadow:inset 0 0 0 1px var(--linea-fuerte)}
.gr-redondo.gr-pausa.en-pausa svg{background:var(--acento);fill:#06281A;
box-shadow:0 10px 24px rgba(61,214,140,.3)}
.gr-redondo.gr-fin svg{background:var(--n4, #18233D);fill:#FF8A80;
box-shadow:inset 0 0 0 1px rgba(255,138,128,.35)}
.gr-redondo:disabled{opacity:.55}
/* Un dedo corriendo no apunta fino: el circulo entero es la zona de toque y
ninguno baja de 78 px. */
.gr-redondo:active svg{transform:scale(.96)}
/* El aviso de la pantalla de correr, en una linea y con el porque plegado.
Entero empujaba el boton de empezar fuera de la pantalla (18-sep). */
.gr-aviso b{margin-bottom:0}
.gr-aviso details{margin-top:6px}
.gr-aviso summary{font-size:13px;color:var(--texto-3);cursor:pointer;list-style:none;
display:inline-flex;align-items:center;gap:5px}
.gr-aviso summary::-webkit-details-marker{display:none}
.gr-aviso summary::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;
border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-top:-3px}
.gr-aviso details[open] summary::after{transform:rotate(225deg);margin-top:2px}
.gr-aviso details p{margin-top:8px}
/* En la pantalla de correr el titulo va mas pegado: cada linea de aqui arriba
es una linea que le falta al boton de empezar para caber (18-sep). */
.gr-cab{margin-bottom:10px}
.gr-cab p{margin-top:4px}
/* "Lo que vas a hacer" con la foto de cada ejercicio y abriendose cada uno.
Miguel, 18-sep: que se pueda ver el entreno entero sin darle a empezar, y que
la foto ayude a reconocer el ejercicio sin entrar. */
.pr-lista-pie{font-size:12.5px;margin:-4px 0 10px}
.pr-lista{list-style:none;margin:0;padding:0}
.pr-lista li{border-top:1px solid var(--linea)}
.pr-lista li:first-child{border-top:0}
.pr-fila{display:flex;align-items:center;gap:12px;padding:10px 2px;
text-decoration:none;color:inherit;min-height:60px}
.pr-foto{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:0 0 auto;
background:var(--n4)}
.pr-foto-no{display:flex;align-items:center;justify-content:center;font-size:14px;
font-weight:700;color:var(--texto-3)}
.pr-txt{flex:1 1 auto;min-width:0}
.pr-txt b{display:block;font-size:15px;line-height:1.25}
.pr-txt small{display:block;font-size:12.5px;color:var(--texto-2);margin-top:2px}
.pr-txt .pr-nota{color:var(--texto-3)}
.pr-ver{flex:0 0 auto;font-size:22px;color:var(--texto-3);line-height:1}
/* El descanso: reloj pequeño en vez de boton con texto, y el destello del final.
Miguel, 18-sep. */
.chip-reloj{display:inline-flex;align-items:center;gap:6px;min-height:36px;
padding:0 12px 0 10px;border-radius:999px;border:1px solid var(--linea);
background:var(--n2);color:var(--texto-2);font-size:13px;font-weight:700;
font-variant-numeric:tabular-nums;cursor:pointer}
.chip-reloj svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;flex:0 0 auto}
.chip-reloj:active{background:var(--n3)}
/* El cronometro de TRABAJO (Miguel, 11-oct). Se distingue del descanso a
proposito: el de trabajo lleva el color de accion y un triangulo de play, el
de descanso se queda gris con su reloj. Si los dos fueran iguales, en un
ejercicio por tiempo habria dos pastillas gemelas y no sabria cual es cual. */
.chip-trabajo{border-color:transparent;background:var(--primario);color:#fff}
.chip-trabajo:active{background:var(--primario)}
.cr-play{flex:0 0 auto;width:0;height:0;border-style:solid;
border-width:5.5px 0 5.5px 9px;border-color:transparent transparent transparent #fff}
.cr-lados{opacity:.8;font-weight:600}
/* Y la burbuja tambien cambia de color mientras TRABAJA, que es lo que se ve
de lejos con el movil en el suelo. */
.descanso.trabajando{border-color:var(--primario);
box-shadow:0 0 0 1px var(--primario),var(--sombra-2)}
.descanso.trabajando .d-linea{stroke:var(--primario)}
/* "Mi tiempo" es para el DESCANSO, no para el trabajo: el descanso lo puede
acortar ella si va con prisa, pero el tiempo de trabajo es lo que mando
Miguel. Y ademas, dejarlo a la vista mientras trabaja abria la puerta a que
un toque convirtiera el trabajo en un descanso de su medida. El +15/-15 se
queda: aguantar un poco mas si ese dia puede es su decision. */
.descanso.trabajando #dMio{display:none}
/* Trabajando, el rotulo puede ocupar DOS lineas. Lo de debajo del reloj ahi no
es un adorno: dice "Lado 1 de 2" y la frase de Miguel ("40 seg por lado"), y
con una sola linea se cortaba justo en esa parte. */
.descanso.trabajando:not(.mini) .d-txt small{white-space:normal;display:-webkit-box;
-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.descanso.trabajando.acabado{border-color:var(--ok);
box-shadow:0 0 0 1px var(--ok),var(--sombra-2)}
.descanso.trabajando.acabado .d-linea{stroke:var(--ok)}
/* El destello del final del descanso. Va por encima de todo y no se puede tocar,
asi que no tapa ningun boton aunque coincida con un dedo bajando. */
.d-destello{position:fixed;inset:0;z-index:9500;pointer-events:none;opacity:0;
background:radial-gradient(120% 90% at 50% 40%, rgba(var(--pri-rgb),.85), rgba(var(--pri-rgb),.25) 60%, transparent 78%)}
.d-destello.on{animation:d-flash 1.3s ease-out 1}
@keyframes d-flash{
0%{opacity:0} 8%{opacity:.95} 26%{opacity:.15} 44%{opacity:.9}
62%{opacity:.12} 80%{opacity:.7} 100%{opacity:0}
}
@media (prefers-reduced-motion: reduce){
.d-destello.on{animation:none;opacity:.5;transition:opacity .4s}
}
/* El entreno en pausa, y su boton de pausar desde fuera (18-sep). */
.dia-chapa.pausa{background:rgba(255,170,60,.18);color:var(--texto);
border:1px solid rgba(255,170,60,.45)}
.dia-pausa{margin-top:8px}
/* El nombre del entreno dentro de la tira de la semana se toca y se abre. */
.sc-abrir{display:inline-block;min-height:44px;line-height:44px;text-decoration:none;
color:inherit}
.sc-abrir b{border-bottom:1px solid var(--linea-fuerte)}
.sc-item.hecho .sc-abrir b{border-bottom-color:transparent}
/* La foto del ejercicio dentro de la lista del dia (18-sep). Pequeña a
proposito: esto es una lista para reconocer de un vistazo, no una galeria. */
.dia-ejs .e-foto{width:40px;height:40px;border-radius:9px;object-fit:cover;
flex:0 0 auto;background:var(--n4)}
/* ---------------------------------------------------------------------------
CAMBIAR UN ENTRENO DE DIA ARRASTRANDOLO (18-sep).
Miguel: "prefiero que salga como que si deslizas se cambia, no desplegable".
El asa es lo unico con `touch-action:none`: en la fila entera dejaria la
pagina sin poder subir y bajar.
--------------------------------------------------------------------------- */
.sc-asa{flex:0 0 auto;width:32px;height:32px;padding:6px;margin:-4px 0 -4px auto;
border:0;background:transparent;color:var(--texto-3);cursor:grab;
touch-action:none;-webkit-user-select:none;user-select:none;
display:inline-flex;align-items:center;justify-content:center;border-radius:8px}
.sc-asa svg{width:18px;height:18px;fill:currentColor}
.sc-asa:active{cursor:grabbing;background:var(--n4);color:var(--texto-2)}
.sc-lista.con-arrastre .sc-mover{display:none}
.sc-pista{margin:8px 0 0;font-size:12px;color:var(--texto-3)}
.sc-item.llevandose{opacity:.35}
.sc-fantasma{position:fixed;z-index:60;pointer-events:none;margin:0;
width:auto;max-width:72vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
padding:7px 11px;border-radius:12px;background:var(--n2);
border:1px solid var(--linea-fuerte);box-shadow:0 12px 28px rgba(0,0,0,.35);
transform:scale(1.03)}
.sc-fantasma .sc-asa,.sc-fantasma .sc-mover,.sc-fantasma .sc-devolver{display:none}
.sc-lista.moviendo .sc-fila{transition:background .12s ease}
.sc-fila.encima{background:rgba(var(--pri-rgb),.16);
box-shadow:inset 0 0 0 2px var(--primario);border-color:var(--primario)}
.sc-fila.encima .sc-fecha b{color:var(--azul-txt)}
/* El aviso de que se ha perdido un trozo del recorrido (18-sep). No es una
alarma: es no mentir sobre lo que se ha grabado. */
.gr-hueco{margin:6px 0 0;font-size:12.5px;font-weight:600;color:var(--texto-2);
background:rgba(255,170,60,.14);border:1px solid rgba(255,170,60,.42);
border-radius:10px;padding:7px 10px}
/* ============================================================
Selector de deporte con buscador y grupos (Miguel, 18-sep-2026,
con dos capturas de Strava). El campo de buscar nace oculto y lo
ensena el JavaScript: sin el se ven todos los grupos y se elige
igual, que es lo que tiene que pasar.
============================================================ */
.ac-buscar{margin:8px 0 2px}
.ac-buscar input{width:100%;padding:11px 14px;border-radius:12px;
border:1px solid var(--linea);background:var(--n3);color:var(--texto);
font-size:15px;-webkit-appearance:none}
.ac-buscar input:focus{outline:2px solid var(--azul-txt);outline-offset:1px}
.ac-grupo{margin-top:10px}
.ac-gtit{margin:0 0 2px;font-size:11px;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;color:var(--texto-2)}
.ac-nada{margin:14px 2px 2px;font-size:14px;color:var(--texto-2)}
.ac-foto{margin:0 0 14px}
.ac-foto img{display:block;width:100%;height:auto;border-radius:14px;
border:1px solid var(--linea)}
/* --- corregir una serie ya apuntada (18-sep) ---
El boton ocupa la tercera columna entera para que se pueda tocar con el
pulgar: el rotulo del tipo por si solo es un objetivo de 11px. */
.s-tap{
display:flex;align-items:center;gap:6px;justify-self:end;
background:none;border:0;padding:0 0 0 14px;font:inherit;cursor:pointer;
-webkit-tap-highlight-color:transparent;
/* 44px es lo que hay que poder tocar con el pulgar. El margen negativo se
lo devuelve a la fila, o sea que se toca facil sin estirar la lista. */
min-height:44px;margin:-10px 0;
}
.s-tap .t{pointer-events:none}
.s-chev{
width:7px;height:7px;flex:none;border-right:1.5px solid var(--texto-3);
border-bottom:1.5px solid var(--texto-3);transform:rotate(45deg) translate(-1px,-1px);
transition:transform .22s cubic-bezier(.2,.8,.3,1);
}
.s-tap[aria-expanded="true"] .s-chev{transform:rotate(225deg) translate(-1px,-1px)}
.s-edit{
grid-column:1 / -1;margin:8px 0 2px;padding:12px;
border:1px solid var(--linea-fuerte);border-radius:var(--r-s);background:var(--n4);
}
.s-edit-campos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.s-edit-campos label{display:block;margin:0;font-size:11px;color:var(--texto-3);
text-transform:uppercase;letter-spacing:.06em}
.s-edit-campos input{
width:100%;box-sizing:border-box;min-height:44px;margin-top:4px;padding:8px;
border:1px solid var(--linea-fuerte);border-radius:var(--r-s);
background:var(--fondo);color:var(--texto);font-size:17px;font-weight:700;text-align:center;
}
.s-edit-tipo{display:flex;gap:8px;margin-bottom:10px}
.s-edit-tipo label{flex:1;margin:0}
.s-edit-tipo input{position:absolute;opacity:0;pointer-events:none}
.s-edit-tipo span{
min-height:40px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
padding:8px 6px;border-radius:var(--r-s);border:1px solid var(--linea-fuerte);
font-size:13px;font-weight:600;color:var(--texto-2);cursor:pointer;
}
.s-edit-tipo input:checked + span{background:var(--fondo);color:var(--texto);border-color:var(--primario)}
.s-edit-acc{display:flex;align-items:center;gap:10px}
.s-edit-acc .btn{flex:1;margin:0}
.s-cancel{background:none;border:0;padding:8px;font:inherit;font-size:13.5px;
color:var(--texto-2);cursor:pointer}
.s-borrar{background:none;border:0;padding:8px;font:inherit;font-size:13.5px;
font-weight:600;color:#FF453A;cursor:pointer}
/* ---------- Azul de marca, aprobado por Miguel el 19-sep-2026 ----------
El color sale del ICONO de la app (#0830B4), medido en el propio fichero
static/iconos/icono-512.png y cruzado con la captura que mando el del icono
instalado en el movil de un cliente. Toda la escala es ese mismo tono (226
grados) con mas o menos luz, por eso fondo, tarjetas y botones se ven de una
pieza en vez de como tres azules distintos.
Sus palabras: "Genial ese color! Cambialo en todo". */
body::before{
background:
radial-gradient(72% 56% at 56% 14%, rgba(15,67,239,.24) 0%, transparent 62%),
radial-gradient(64% 50% at 64% 34%, rgba(8,48,180,.30) 0%, transparent 66%),
radial-gradient(50% 42% at 6% 4%, rgba(15,67,239,.14) 0%, transparent 62%);
}
/* El grano baja del 50% al 20%: con el fondo en azul de verdad, el grano alto
lo ensucia y se come el color. */
body::after{opacity:.20}
.card{
border-radius:var(--r-l);
border:1px solid var(--linea);
background:
linear-gradient(180deg, rgba(255,255,255,.065) 0%, rgba(255,255,255,0) 42%),
var(--glass);
box-shadow:var(--sombra), inset 0 1px 0 rgba(255,255,255,.09);
}
/* Cristal de verdad arriba y abajo. Antes iban con backdrop-filter:none. */
.topnav,.mtop{
background:rgba(10,25,73,.70);
-webkit-backdrop-filter:saturate(180%) blur(22px);
backdrop-filter:saturate(180%) blur(22px);
border-bottom:1px solid var(--linea);
}
.bottomnav{
background:rgba(10,25,73,.78);
-webkit-backdrop-filter:saturate(180%) blur(22px);
backdrop-filter:saturate(180%) blur(22px);
border-top:1px solid var(--linea);
}
.btn-primary,.btn.btn-primary,button.btn-primary,a.btn-primary{
background:linear-gradient(135deg,#2B55F0 0%,#0F43EF 48%,#0830B4 100%);
border:none;
color:#FFFFFF;
box-shadow:0 10px 26px rgba(8,48,180,.38), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:active,.btn.btn-primary:active,button.btn-primary:active{
box-shadow:0 4px 14px rgba(8,48,180,.30), inset 0 1px 0 rgba(255,255,255,.22);
}
/* En tema claro el fondo lo pone el propio tema: estas dos no aplican alli. */
:root[data-tema="claro"] body::before{background:none}
:root[data-tema="claro"] .topnav,
:root[data-tema="claro"] .mtop,
:root[data-tema="claro"] .bottomnav{background:rgba(255,255,255,.78)}
/* ============================================================
EL RECORRIDO SOBRE SUS CALLES · 19-sep-2026
Miguel: "no veo que se vea mapa gps, quiero que quede visual". Tenia razon:
una linea suelta sobre un fondo liso no parece un mapa.
La imagen de calles la compone ESTE servidor y llega hecha; la linea va
encima en SVG, para que siga siendo del color de la marca y para que, si la
imagen no llegara, el recorrido se siguiera viendo igual que antes.
============================================================ */
.mp-mini,.mp-lienzo{position:relative;display:block}
.mp-calles{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;
display:block;border:0}
.mp-mini svg,.mp-lienzo .mp-svg{position:relative;z-index:1}
/* Un filo blanco para que el azul no se pierda sobre una calle clara. */
.mp-mini path,.mp-lienzo path{filter:drop-shadow(0 0 2.5px rgba(255,255,255,.95))}
/* El mapa viene claro, que es el de OpenStreetMap de siempre. En el tema oscuro
se apaga un poco, igual que en la pantalla de grabar. No se invierte: las
calles son lo mas claro del mapa y al invertirlas se verian MENOS. */
:root:not([data-tema="claro"]) .mp-calles{filter:saturate(.8) brightness(.86) contrast(1.04)}
/* Elegir correr / andar / senderismo antes de grabar (19-sep). Botones de 44 px
de alto: esto se toca con el movil en la mano y a veces en marcha. */
.gr-tipo{display:flex;gap:6px;margin:0 0 10px;padding:4px;
background:var(--n2);border:1px solid var(--linea);border-radius:100px}
.gr-t{flex:1;min-height:44px;padding:0 10px;border:0;border-radius:100px;
background:transparent;color:var(--texto-2);font-size:14px;font-weight:700;
cursor:pointer;transition:background var(--t),color var(--t)}
.gr-t.puesto{background:var(--primario);color:#fff}
.gr-t:disabled{cursor:default}
.gr-tipo.bloqueado{opacity:.75}
.gr-tipo.bloqueado .gr-t:not(.puesto){opacity:.35}
/* LA M DE FONDO, CENTRADA EN LA TARJETA DE LA SEMANA.
La pidio Miguel el 19-sep con una captura: "este fondo asi centrado me
gustaba". Va como marca de agua detras del contenido, no como imagen de la
tarjeta: el contenido se sube a su propia capa para que el texto no pierda
contraste. Solo en la tarjeta de Inicio, no en el calendario de Entrenar. */
.sem-card:not(.sem-cal){position:relative;overflow:hidden}
.sem-card:not(.sem-cal)::before{
content:'';position:absolute;left:50%;top:10px;
width:190px;height:168px;transform:translateX(-50%);
/* Miguel, 22-sep (nota de voz): "podrias poner la M detras del todo borrosa,
un poquito blanco difuminado, que no coja protagonismo, que no se vea una
figura ahi seca sino que se vea como el logo". Asi que ya no va el logo con
su relieve, que dibujaba una M nitida: va la silueta plana en blanco,
desenfocada, que se lee como un halo y no como un dibujo pegado.
Se agranda al desenfocar porque el blur come el borde y la deja pequena. */
background:#fff;
-webkit-mask:url("../assets/logo-m-silueta.png") center/contain no-repeat;
mask:url("../assets/logo-m-silueta.png") center/contain no-repeat;
width:230px;height:204px;
filter:blur(7px);
/* Baje esto al 5% cuando el fondo era negro, porque sobre negro el mismo
blanco pesa mas y la M pasaba de halo a dibujo. Con el marino vuelve al
8,5%, que es donde estaba calibrada y donde va igual que la del
calendario: dos marcas de agua con distinta fuerza en la misma pantalla se
notan mas que cualquiera de las dos. */
opacity:.085;pointer-events:none;z-index:0;
}
.sem-card:not(.sem-cal) > *{position:relative;z-index:1}
/* Y cuando la app esta en blanco, la M vuelve a ser azul. Mas floja, porque el
azul sobre blanco pesa mas que el blanco sobre azul. */
/* En CLARO manda la silueta plana: ahi el relieve del logo tiene caras casi
blancas que sobre fondo blanco parecen un agujero en medio de la M. Eso es
lo que vio el 19-sep. Con mascara, la M es de un solo color y no puede
pasar. */
:root[data-tema="claro"] .sem-card:not(.sem-cal)::before{
background:var(--primario);
/* En blanco el azul pesa mas, asi que va todavia mas flojo. El desenfoque
lo hereda de la regla de arriba. */
opacity:.075}
/* La misma M, tambien en Entrenar. Miguel, 22-sep: "me encanta, ponlo en los
entrenos tambien". Va en el calendario de la semana y en la tarjeta del
entreno de HOY, que son las dos que mandan en esa pantalla. En las demas
tarjetas del dia no: con cinco marcas de agua seguidas deja de ser una marca
y es un fondo estampado. */
.sem-card.sem-cal,.dia.es-hoy{position:relative;overflow:hidden}
.sem-card.sem-cal::before,.dia.es-hoy::before{
content:'';position:absolute;left:50%;top:10px;
width:230px;height:204px;transform:translateX(-50%);
background:#fff;
-webkit-mask:url("../assets/logo-m-silueta.png") center/contain no-repeat;
mask:url("../assets/logo-m-silueta.png") center/contain no-repeat;
filter:blur(7px);opacity:.085;pointer-events:none;z-index:0}
:root[data-tema="claro"] .sem-card.sem-cal::before,
:root[data-tema="claro"] .dia.es-hoy::before{background:var(--primario);opacity:.075}
.sem-card.sem-cal > *,.dia.es-hoy > *{position:relative;z-index:1}
/* Las notas de un ejercicio vienen con un salto de linea por consejo. Sin esto
se pegan todas en un parrafo y el peso de partida se pierde dentro. 19-sep. */
.pr-txt .pr-nota,.ej-notas{white-space:pre-line}
/* ---------- MI NUTRICION, por bloques ----------
Miguel, 19-sep: "menos texto asi, marca cuando es titulo, cuando es texto,
cuando cambia de plato, que se vea mejor lo de los gramos si hay". */
:root{--nt1:#2B6BFF;--nt2:#00C2A8;--nt3:#5AC85A;--nt4:#F2A93B}
.nt-bloque{margin-bottom:14px}
.nt-bloque .card-title{margin-bottom:12px}
.nt-p{font-size:14.5px;line-height:1.65;color:var(--texto-2);margin:0 0 10px}
.nt-p:last-child{margin-bottom:0}
/* una cantidad se lee de un vistazo o no sirve de nada */
.nt-num{font-weight:700;color:var(--texto);background:rgba(var(--pri-rgb),.14);
border-radius:7px;padding:1px 6px;white-space:nowrap}
/* cada plato, su caja: se ve donde empieza uno y acaba el otro */
.nt-plato{border:1px solid var(--linea);border-radius:var(--r-m);
padding:11px 12px;margin-bottom:9px;background:var(--glass)}
.nt-plato:last-child{margin-bottom:0}
/* Clash es la tipografia de los titulos grandes, pero en pequeno y en negrita
cuesta leerla: sus letras son muy geometricas y se emborronan. Miguel,
19-sep: "la tipografia de las negritas cuesta verlo". Aqui manda leerse. */
.nt-plato-n{font-weight:700;font-size:16px;letter-spacing:-.01em;
color:var(--texto);margin-bottom:5px}
.nt-plato p{font-size:14px;line-height:1.6;color:var(--texto-2);margin:0}
/* el reparto del plato */
.nt-macro{margin-bottom:12px}
.nt-macro:last-child{margin-bottom:0}
.nt-macro-t{display:flex;justify-content:space-between;align-items:baseline;
font-size:14.5px;margin-bottom:5px}
.nt-macro-t b{font-weight:700;color:var(--texto)}
.nt-macro-t span{font-weight:700;color:var(--azul-txt);font-size:13.5px}
.nt-barra{height:7px;border-radius:99px;background:var(--linea);overflow:hidden}
.nt-barra i{display:block;height:100%;width:calc(var(--pct)*1%);
background:var(--grad-azul);border-radius:99px}
.nt-macro p{font-size:13.5px;line-height:1.55;color:var(--texto-3);margin:6px 0 0}
/* el plato dibujado */
.nt-plato-card{text-align:center}
.nt-donut{width:168px;height:168px;margin:6px auto 14px;border-radius:50%;
background:conic-gradient(var(--g));display:grid;place-items:center;position:relative}
.nt-donut::after{content:'';position:absolute;width:52%;height:52%;border-radius:50%;
background:var(--n2)}
.nt-donut span{position:relative;z-index:1;font-size:12px;letter-spacing:.06em;
text-transform:uppercase;color:var(--texto-3);line-height:1.25}
.nt-leyenda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
gap:8px 14px;justify-content:center}
.nt-leyenda li{display:flex;align-items:center;gap:6px;font-size:13.5px;
color:var(--texto-2)}
.nt-leyenda i{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.nt-leyenda b{color:var(--texto)}
/* la tabla de raciones: alimento, racion y kcal, alineados */
.nt-raciones{list-style:none;margin:0;padding:0}
.nt-raciones li{display:grid;grid-template-columns:1fr auto auto;gap:10px;
align-items:baseline;padding:9px 0;border-bottom:1px solid var(--linea)}
.nt-raciones li:last-child{border-bottom:0}
.nt-raciones b{font-weight:600;font-size:14.5px;color:var(--texto)}
.nt-raciones span{font-size:13px;color:var(--texto-3)}
.nt-raciones em{font-style:normal;font-weight:700;font-size:13.5px;color:var(--azul-txt);
background:rgba(var(--pri-rgb),.14);border-radius:7px;padding:2px 7px;white-space:nowrap}
.nt-foto{display:block;width:100%;max-width:300px;margin:2px auto 14px;
border-radius:var(--r-m);aspect-ratio:1/1;object-fit:cover}
.nt-macro.con-foto{display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:start}
.nt-macro-img{width:74px;height:74px;border-radius:12px;object-fit:cover;display:block}
.nt-macro-cuerpo{min-width:0}
/* Miguel, 19-sep: "cuesta mucho leerlo por bloques". El titulo de cada bloque
deja de ser una etiqueta pequena en versalitas y pasa a ser un titular. */
.nt-h{font-weight:700;font-size:17.5px;line-height:1.3;color:var(--texto);
margin:0 0 12px;letter-spacing:-.015em;text-transform:none}
.nt-lista{list-style:none;margin:0;padding:0}
.nt-lista li{position:relative;padding:0 0 0 18px;margin-bottom:9px;
font-size:14.5px;line-height:1.6;color:var(--texto-2)}
.nt-lista li:last-child{margin-bottom:0}
.nt-lista li::before{content:'';position:absolute;left:2px;top:9px;
width:6px;height:6px;border-radius:50%;background:var(--primario);opacity:.85}
.nt-bloque{padding-top:15px;padding-bottom:15px}
/* los pasos numerados de la escalera: el numero fuera, como en una receta */
.nt-paso{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;
margin-bottom:11px}
.nt-paso:last-child{margin-bottom:0}
.nt-paso b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
background:rgba(var(--pri-rgb),.18);color:var(--azul-txt);font-size:13px;font-weight:700}
.nt-paso p{margin:0;font-size:14.5px;line-height:1.6;color:var(--texto-2)}
.nt-lista+.nt-p,.nt-paso+.nt-p{margin-top:12px}
/* Tocar un alimento abre su foto. Miguel, 19-sep: "si le da a los alimentos
salga como un desplegable pequeno de la foto". */
.nt-ali summary,.nt-ali-plana{display:grid;grid-template-columns:1fr auto auto;
gap:10px;align-items:baseline;cursor:pointer;list-style:none}
.nt-ali summary::-webkit-details-marker{display:none}
/* que se vea que se puede tocar: sin esto nadie lo abre nunca */
.nt-ali summary b::after{content:' \25BE';color:var(--texto-3);font-weight:400;font-size:11px}
.nt-ali[open] summary b::after{content:' \25B4'}
.nt-ali[open] summary b{color:var(--azul-txt)}
.nt-ali-cuerpo{display:flex;gap:11px;align-items:center;padding:10px 0 2px}
.nt-ali-cuerpo img{width:78px;height:78px;border-radius:12px;object-fit:cover;
flex:0 0 auto}
.nt-ali-cuerpo p{margin:0;font-size:13.5px;line-height:1.5;color:var(--texto-3)}
/* La nota que Miguel escribe de un alimento (el chocolate del 85%). El cuerpo
va en fila con la foto al lado, asi que la nota se pone DEBAJO de las dos y
a todo el ancho: metida en la columna de al lado de la foto se queda en un
canal de 100 px y no hay quien la lea. */
.nt-filtros{display:flex;gap:7px;margin:0 0 10px;overflow-x:auto;padding-bottom:2px;
-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nt-filtros::-webkit-scrollbar{display:none}
/* Los botones no se encogen: con cuatro en un movil de 360 px, "Proteína" se
partia en dos lineas y la fila crecia al doble de alto. */
.nt-f{flex:0 0 auto;min-height:34px;padding:0 13px;border-radius:999px;
border:1px solid var(--linea);background:transparent;color:var(--texto-2);
font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.nt-f.on{background:var(--primario);border-color:var(--primario);color:#fff}
.nt-filtro-vacio{margin:0 0 10px;font-size:13px;color:var(--texto-3)}
.nt-ali-nota{flex-basis:100%;margin:8px 0 2px;font-size:13px;line-height:1.55;
color:var(--texto-2);border-left:3px solid var(--acento);padding-left:10px}
.nt-ali-cuerpo{flex-wrap:wrap}
.nt-ali-cuerpo p b{color:var(--texto)}
/* ======================================================================
Los meses de plan (Progreso > Tus meses). Miguel, 19-sep: "que se quede
registro de cuando empieza el mes, ver ese mes siempre como un historial".
El mes en curso se distingue con el borde azul, no con otro color de fondo:
asi se ve de un vistazo cual sigue vivo sin romper la pila de tarjetas.
====================================================================== */
.hs-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.hs-mes{
border-radius:var(--r-l);border:1px solid var(--linea);
background:linear-gradient(180deg,rgba(255,255,255,.065) 0%,rgba(255,255,255,0) 42%),var(--glass);
box-shadow:var(--sombra)}
.hs-mes > a{display:block;padding:16px 18px;color:inherit;text-decoration:none}
.hs-mes.hs-ahora{border-color:rgba(var(--pri-rgb),.55);box-shadow:var(--sombra),var(--glow)}
.hs-cab{display:flex;align-items:center;gap:10px}
.hs-cab b{font-size:17px;letter-spacing:-.015em}
.hs-etq{
font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
padding:3px 8px;border-radius:999px;color:var(--azul-txt);
background:rgba(var(--pri-rgb),.16);border:1px solid rgba(var(--pri-rgb),.34)}
.hs-fechas{margin:4px 0 10px;color:var(--texto-3);font-size:13.5px}
.hs-nums{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--texto-2)}
.hs-nums b{color:var(--texto);font-size:15px}
.hs-dia{padding:12px 0;border-top:1px solid var(--linea)}
.hs-dia:first-of-type{border-top:0;padding-top:0}
.hs-dia > b{display:block;margin-bottom:8px;letter-spacing:-.01em}
.hs-ejs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.hs-ejs li{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.hs-ej-n{font-size:14.5px}
.hs-ej-d{font-size:12.5px;color:var(--texto-3);white-space:nowrap}
.hs-pie{margin-top:12px;font-size:13px;line-height:1.5}
@media (max-width:420px){
.hs-ejs li{flex-direction:column;gap:2px}
.hs-ej-d{white-space:normal}
}
/* Los mismos meses, pero DENTRO de una tarjeta de Progreso: sin sombra ni
fondo propio, que una tarjeta dentro de otra se ve como un error. */
.hs-mini .hs-mes{box-shadow:none;background:rgba(255,255,255,.04)}
.hs-mini .hs-mes > a{padding:12px 14px}
.hs-mini .hs-cab b{font-size:15.5px}
.hs-mini .hs-fechas{margin:3px 0 7px;font-size:13px}
/* La lista de meses dentro del panel de Miguel. Una fila por mes con sus
numeros a la vista, para poder comparar un mes con otro sin abrir nada. */
.ms-lista{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.ms-fila{border:1px solid var(--linea);border-radius:var(--r-m);padding:10px 12px}
.ms-fila.ms-ahora{border-color:rgba(var(--pri-rgb),.5)}
.ms-ver{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;color:inherit;text-decoration:none}
.ms-ver b{font-size:15.5px}
.ms-rango{color:var(--texto-3);font-size:13px}
.ms-nums{color:var(--texto-2);font-size:13px;margin-left:auto}
.ms-editar{margin-top:8px}
.ms-editar summary{cursor:pointer;color:var(--texto-3);font-size:13px}
.ms-editar form{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;margin-top:8px}
.ms-editar label,.ms-nuevo label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--texto-3)}
.ms-editar input,.ms-nuevo input{
background:rgba(255,255,255,.06);border:1px solid var(--linea);border-radius:10px;
padding:8px 10px;color:var(--texto);font:inherit;font-size:14px}
.ms-nuevo{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;
border-top:1px solid var(--linea);padding-top:14px}
@media (max-width:560px){
.ms-nums{margin-left:0;width:100%}
.ms-nuevo button,.ms-nuevo label{width:100%}
}
/* El ritmo de cada cliente en la lista (19-sep): que dia le toca la revision y
cuando cambia de tabla. El punto verde es lo que Miguel pidio para encontrarlo
de un vistazo; cuando el cambio esta a menos de una semana se pone ambar. */
.rit{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--texto-3);line-height:1.5}
.rit .pv{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 auto;
box-shadow:0 0 0 3px rgba(61,214,140,.16)}
.rit-ya{color:var(--aviso)}
.gcard .rit{margin:6px 0 0}
.ms-nuevo label em{font-style:normal;font-size:11.5px;color:var(--texto-3);max-width:220px}
/* La fila de cliente tiene su propia regla para los `small` (block, nowrap y
recortado con puntos suspensivos) y esa gana por especificidad, asi que el
punto verde salia aplastado a una rayita. Se devuelve el flex AQUI, con la
misma especificidad, y el punto lleva min-width para que no lo encoja nadie. */
.fila-p .txt small.rit,.cel-nom small.rit{
display:flex;white-space:normal;overflow:visible;text-overflow:clip}
.rit .pv{width:7px;height:7px;min-width:7px;min-height:7px}
/* ======================================================================
Los pesos de un mes y la comparativa entre dos (19-sep). Miguel: "dentro de
ese mes se quede su entreno registrado con pesos, y una opcion que ponga
comparativa de pesos y decia que mes".
====================================================================== */
.ps-lista,.cmp-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ps-lista li,.cmp-lista li{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:10px 0;border-top:1px solid var(--linea)}
.ps-lista li:first-child,.cmp-lista li:first-child{border-top:0}
.ps-n b,.cmp-n b{display:block;font-size:14.5px;line-height:1.3}
.ps-n small,.cmp-n small{display:block;font-size:12px;color:var(--texto-3);margin-top:2px}
.ps-kg{text-align:right;white-space:nowrap}
.ps-kg b{font-size:15.5px}
.ps-kg small{display:block;font-size:12px;color:var(--texto-3)}
.cmp-sel{display:flex;flex-wrap:wrap;gap:10px 16px;margin:0 0 16px}
.cmp-sel label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--texto-3);flex:1 1 180px}
.cmp-sel select{
background:rgba(255,255,255,.06);border:1px solid var(--linea);border-radius:10px;
padding:9px 10px;color:var(--texto);font:inherit;font-size:14px;max-width:100%}
.cmp-kg{display:flex;align-items:center;gap:8px;white-space:nowrap}
.cmp-v{font-size:14.5px;color:var(--texto-3)}
.cmp-v.cmp-b{color:var(--texto);font-weight:700;font-size:16px}
.cmp-f{color:var(--texto-3);font-size:13px}
.cmp-d{font-size:12.5px;font-weight:700;padding:2px 8px;border-radius:999px}
.cmp-d.sube{color:var(--ok);background:rgba(61,214,140,.14)}
.cmp-d.baja{color:var(--aviso);background:rgba(229,164,76,.14)}
.cmp-d.igual{color:var(--texto-3);background:rgba(255,255,255,.06);font-weight:400}
.ms-comp{margin:0 0 12px}
@media (max-width:420px){
.ps-lista li,.cmp-lista li{flex-direction:column;align-items:flex-start;gap:6px}
.ps-kg{text-align:left}
.ps-kg small{display:inline}
}
/* La carpeta de archivos de un cliente en el panel (19-sep). */
.ar-lista{list-style:none;margin:0;padding:0}
.ar-lista li{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:10px 0;border-top:1px solid var(--linea)}
.ar-lista li:first-child{border-top:0}
.ar-lista li > a{color:inherit;text-decoration:none;min-width:0}
.ar-lista b{display:block;font-size:14.5px;line-height:1.3}
.ar-lista small{display:block;font-size:12px;color:var(--texto-3);margin-top:2px}
.ar-etq{display:inline-block;font-size:11px;letter-spacing:.03em;text-transform:uppercase;
color:var(--texto-3);margin-bottom:3px}
.ar-acc{display:flex;align-items:center;gap:10px;white-space:nowrap}
.ar-subir{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin-top:12px}
.ar-subir label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--texto-3);flex:1 1 200px}
.ar-subir input{background:rgba(255,255,255,.06);border:1px solid var(--linea);border-radius:10px;
padding:8px 10px;color:var(--texto);font:inherit;font-size:14px;max-width:100%}
.ar-subir input[type=file]{padding:7px 10px}
@media (max-width:560px){
.ar-lista li{flex-direction:column;align-items:flex-start;gap:6px}
.ar-subir label,.ar-subir button{width:100%;flex:auto}
}
/* El boton de partir una biserie escrita dentro del nombre (19-sep). Va en
ambar y no en azul: es una accion que cambia el plan, no un interruptor. */
.bs-btn.partir{color:var(--aviso);border-color:rgba(229,164,76,.45)}
/* ============================================================
Apuntar la serie, en fino. Miguel, 19-sep por chat: "cuesta ver
el texto del ejercicio, ponlo mas premium, las box mas pequenas,
estilo iphone, futurista".
Va al final del fichero a proposito: son los mismos selectores de
mas arriba y aqui ganan por orden, sin subir la especificidad.
============================================================ */
/* 1. EL TEXTO QUE NO SE VEIA. El rotulo A/B iba en var(--primario),
que es el azul de MARCA: sobre la tarjeta (--n2, #0A1949) da 1,68
de contraste y hace falta 4,5. No es una opinion de diseno, esta
medido, y el propio fichero ya lo avisa arriba: el azul de marca
vale de fondo y no de letra. Ahora el azul se queda en la pastilla
(fondo, donde si funciona) y el nombre va en --texto, que da 15,6.
De paso deja de ir en mayusculas: un nombre largo en versalitas
apretadas es lo que costaba leer. */
.bs-cual{display:flex;align-items:center;gap:9px;margin:14px 0 7px;
font-size:14.5px;font-weight:650;letter-spacing:-.01em;line-height:1.25;
text-transform:none;color:var(--texto)}
.bs-l{flex:none;width:21px;height:21px;border-radius:7px;display:grid;place-items:center;
font-size:11px;font-weight:800;line-height:1;color:#fff;
background:var(--grad-azul);box-shadow:0 1px 6px rgba(var(--pri-rgb),.45)}
.bs-n{min-width:0;overflow-wrap:break-word}
.bs-cual.bs-hechas{color:var(--texto-3);font-size:13px;font-weight:600;margin-top:16px}
.bs-cual.bs-hechas .bs-l{background:var(--n4);color:var(--texto-3);box-shadow:none}
/* 2. LAS CAJAS, MAS PEQUENAS. De 52 px de alto y letra de 24 a 44 y 20.
44 es el minimo que se puede tocar con el dedo, asi que no baja mas:
se toca con la mano sudada entre serie y serie. Lo que encoge de
verdad es el hueco muerto de alrededor. */
.serie-campos{gap:9px;margin-bottom:11px}
.serie-campos>div{
position:relative;border-radius:15px;padding:7px 10px 2px;
background:linear-gradient(180deg,rgba(150,180,255,.085),rgba(150,180,255,.03));
border:1px solid var(--linea-fuerte);
box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.serie-campos label{display:block;margin:0 0 1px;font-size:10px;font-weight:700;
letter-spacing:.09em;text-transform:uppercase;color:var(--texto-3)}
/* El campo pierde su propia caja: la caja ya es el div de fuera. Asi se ve
UNA caja y no una dentro de otra, que es lo que abultaba. */
/* El campo NO baja de 44 px de alto aunque no se le vea la caja: es el minimo
que se toca sin fallar. Encoger la caja
por debajo de eso es lo que convierte un diseno bonito en uno que no se puede usar
con el movil en la mano y sudando. */
.serie-campos input{width:100%;min-height:44px;padding:0;font-size:20px;font-weight:700;
text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
background:transparent;border:0;border-radius:0;color:var(--texto);box-shadow:none}
.serie-campos input:focus,.serie-campos input:focus-visible{outline:none;box-shadow:none;border:0}
/* El aro de foco se pinta en la caja de fuera, no en el campo. focus-within
es lo unico que se entera de que el teclado esta en ese hueco. */
.serie-campos>div:focus-within{
border-color:rgba(var(--pri-rgb),.85);
background:linear-gradient(180deg,rgba(var(--pri-rgb),.24),rgba(var(--pri-rgb),.08));
box-shadow:0 0 0 1px rgba(var(--pri-rgb),.5),0 0 20px rgba(var(--pri-rgb),.22),
inset 0 1px 0 rgba(255,255,255,.07);
}
/* En claro el velo blanco no se ve sobre fondo blanco: ahi tinta al reves. */
:root[data-tema="claro"] .serie-campos>div{
background:linear-gradient(180deg,rgba(14,23,41,.045),rgba(14,23,41,.015));
box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
/* 3. LA CABECERA DE LA SERIE, mas de sistema y menos de formulario. */
.serie-n{font-size:11px;letter-spacing:.11em;color:var(--texto-3)}
.tipo-serie{gap:6px;margin-bottom:11px;padding:3px;border-radius:14px;
background:rgba(150,180,255,.07);border:1px solid var(--linea)}
:root[data-tema="claro"] .tipo-serie{background:rgba(14,23,41,.04)}
.tipo-serie span{min-height:38px;padding:7px 6px;border:0;border-radius:11px;
font-size:13px;font-weight:650;background:transparent}
/* El seleccionado es una pastilla que se mueve, como los segmentados del
iPhone. Sin borde: el borde de cada mitad era lo que lo hacia parecer dos
botones sueltos en vez de un mando de dos posiciones. */
.tipo-serie input:checked + span{background:var(--grad-azul);color:#fff;border-color:transparent;
box-shadow:0 2px 10px rgba(var(--pri-rgb),.42)}
.tipo-serie input:focus-visible + span{outline:2px solid var(--primario);outline-offset:1px}
/* 4. EL NOMBRE DEL EJERCICIO EN SU TARJETA. Iba a una linea con puntos
suspensivos, asi que "Jalon al pecho agarre..." no se sabia de que
agarre era. Dos lineas, y a partir de ahi si se corta. */
.ej-tit b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;line-height:1.25;text-overflow:clip}
/* ============================================================
Ayuda: como funciona la app y vocabulario.
Miguel, 19-sep: los queria arriba a la derecha, uno por cosa. Van
los dos detras del boton de interrogacion. Y en la segunda vuelta:
*"ponlo mucho mas premium con efectos deslizantes o cosas asi"*.
============================================================ */
/* --- la cabecera --- */
.ay-cab{margin:0 0 20px}
.ay-eyebrow{display:inline-block;margin-bottom:9px;padding:4px 11px;border-radius:100px;
font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
color:var(--azul-txt);background:rgba(var(--pri-rgb),.14);
border:1px solid rgba(var(--pri-rgb),.28)}
.ay-cab h1{margin:0 0 8px;font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.14}
/* El degradado en la letra necesita las dos propiedades: sin la de Webkit no
recorta y el texto sale del color del fondo, o sea invisible. */
.ay-cab h1 em{font-style:normal;background:linear-gradient(100deg,var(--azul-txt),var(--secundario));
-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-tema="claro"] .ay-cab h1 em{background:linear-gradient(100deg,var(--primario),var(--enfasis));
-webkit-background-clip:text;background-clip:text}
.ay-cab p{margin:0;font-size:13.5px;color:var(--texto-2);line-height:1.5}
/* --- las dos tarjetas de arriba --- */
.ay-atajos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:26px}
.ay-atajo{position:relative;display:block;padding:14px 13px 13px;border-radius:var(--r-m);
color:var(--texto);overflow:hidden;
background:linear-gradient(160deg,rgba(var(--pri-rgb),.20),rgba(var(--pri-rgb),.05) 62%),var(--n2);
border:1px solid rgba(var(--pri-rgb),.28);
transition:transform var(--t),border-color var(--t),box-shadow var(--t)}
.ay-atajo:active{transform:scale(.975);border-color:rgba(var(--pri-rgb),.6);box-shadow:var(--glow)}
.ay-atajo b{display:block;margin-top:10px;font-size:14.5px;font-weight:700;line-height:1.25}
.ay-atajo small{display:block;margin-top:2px;font-size:11.5px;color:var(--texto-3)}
.ay-fl{position:absolute;right:12px;bottom:13px;width:8px;height:8px;
border-right:2px solid var(--azul-txt);border-bottom:2px solid var(--azul-txt);
transform:rotate(-45deg);opacity:.75}
.ay-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;
background:var(--grad-azul);color:#fff;box-shadow:0 3px 12px rgba(var(--pri-rgb),.42)}
/* El macro de iconos pinta el svg sin medidas: se las da el sitio donde cae. */
.ay-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.ay-sec{margin:0 0 30px;scroll-margin-top:76px}
.ay-sec-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.ay-sec h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.015em}
.ay-desliza{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
color:var(--texto-3);animation:ayEmpuja 2.6s ease-in-out infinite}
@keyframes ayEmpuja{0%,100%{transform:none}55%{transform:translateX(4px)}}
.ay-entradilla{margin:0 0 14px;font-size:13px;color:var(--texto-2);line-height:1.5}
.ay-pie{margin:14px 0 0;font-size:12.5px;color:var(--texto-3);line-height:1.5}
/* --- los pasos, en tarjetas que se arrastran --- */
/* Sin margenes negativos a proposito. La primera version se salia a los lados
para tocar el borde de la pantalla, y en el panel de Miguel, que tiene otro
relleno, eso dejaba la pagina 2 px mas ancha que el movil: barra horizontal
en una pantalla que no scrollea. El asomo de la tarjeta siguiente, que es lo
que de verdad dice "esto se desliza", ya lo da el 82% de ancho. */
.ay-car{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
margin:0;padding:2px 0 4px;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ay-car::-webkit-scrollbar{display:none}
.ay-slide{scroll-snap-align:center;flex:0 0 82%;max-width:330px;position:relative;
padding:17px 16px 18px;border-radius:var(--r-l);
background:linear-gradient(165deg,rgba(var(--pri-rgb),.16),rgba(var(--pri-rgb),.02) 55%),var(--n2);
border:1px solid var(--linea-fuerte);box-shadow:var(--sombra)}
.ay-slide-n{position:absolute;top:13px;right:15px;font-size:30px;font-weight:800;
line-height:1;letter-spacing:-.04em;color:rgba(var(--pri-rgb),.34);
font-variant-numeric:tabular-nums}
:root[data-tema="claro"] .ay-slide-n{color:rgba(var(--pri-rgb),.18)}
.ay-paso-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;
background:var(--grad-azul);color:#fff;box-shadow:0 4px 14px rgba(var(--pri-rgb),.45)}
.ay-paso-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.ay-donde{display:block;margin:12px 0 3px;font-size:10px;font-weight:800;
letter-spacing:.11em;text-transform:uppercase;color:var(--azul-txt)}
.ay-slide b{display:block;font-size:16px;font-weight:700;line-height:1.26;letter-spacing:-.01em}
.ay-slide p{margin:7px 0 0;font-size:13.5px;color:var(--texto-2);line-height:1.5}
.ay-puntos{display:flex;justify-content:center;gap:6px;margin-top:13px}
.ay-puntos i{width:6px;height:6px;border-radius:50%;background:var(--n4);
border:1px solid var(--linea-fuerte);transition:width var(--t),background var(--t)}
.ay-puntos i.on{width:20px;border-radius:100px;background:var(--grad-azul);border-color:transparent}
/* --- el vocabulario --- */
.ay-terminos{display:flex;flex-direction:column;gap:10px}
.ay-term{position:relative;padding:14px 14px 14px 15px;border-radius:var(--r-m);
background:var(--n2);border:1px solid var(--linea);overflow:hidden;
transition:transform var(--t),border-color var(--t)}
/* La rayita de la izquierda: es lo que hace que una lista de cajas iguales
deje de parecer una tabla. */
.ay-term::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--grad-azul);opacity:.75}
.ay-term:active{transform:scale(.99);border-color:rgba(var(--pri-rgb),.42)}
.ay-term b{display:block;font-size:14.5px;font-weight:700;line-height:1.3}
.ay-term b i{display:inline-block;min-width:26px;font-style:italic;font-weight:800;
color:var(--azul-txt);font-variant-numeric:tabular-nums}
.ay-term p{margin:5px 0 0;font-size:13px;color:var(--texto-2);line-height:1.5}
.ay-ej{display:block;margin-top:9px;padding:8px 11px;border-radius:12px;
font-size:12px;line-height:1.45;color:var(--texto-2);
background:rgba(var(--pri-rgb),.10);border:1px solid rgba(var(--pri-rgb),.22)}
/* La entrada escalonada. La clase `ay-anima` la pone el JavaScript: sin el, no
se esconde nada y la pantalla se ve entera. Esconder desde el CSS es lo que
deja una pagina en blanco el dia que el script falla. */
.ay-anima .ay-term{opacity:0;transform:translateY(16px);
transition:opacity .45s cubic-bezier(.22,.68,.24,1),transform .45s cubic-bezier(.22,.68,.24,1)}
.ay-anima .ay-term.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.ay-anima .ay-term{opacity:1;transform:none;transition:none}
.ay-desliza{animation:none}
}
@media (max-width:360px){
.ay-atajos{grid-template-columns:1fr}
.ay-cab h1{font-size:24px}
.ay-slide{flex-basis:88%}
}
/* ---------- Sitio para el dedo, sin cambiar el dibujo (19-sep) ----------
Medido con el barrido: el asa de mover un entreno de dia mide 32x32 y el
enlace de volver a ver la instalacion 17 px de alto. Los dos se tocan con
el pulgar en el movil, y por debajo de 44 se falla mas de lo que parece.
Se agranda la zona que RESPONDE, no el dibujo: un asa mas gorda quedaria
basta y ese no es el encargo. */
.sc-asa{position:relative}
.sc-asa::after{content:"";position:absolute;top:50%;left:50%;
width:44px;height:44px;transform:translate(-50%,-50%)}
.bv-reinstalar{display:inline-flex;align-items:center;min-height:44px;padding:4px 0}
/* ---------- Ficha del ejercicio, cambios del 19-sep ----------
Miguel: el video dentro de Tecnica, fuera Tu maquina y Claves, una pestana
de Notas con video de dudas, y los pesos de la semana anterior. */
.fx-como .fx-media{margin-top:10px;border-radius:14px;overflow:hidden}
.fx-sinvideo{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--texto-3)}
.fx-sinvideo a{color:var(--azul-txt)}
/* La semana pasada: una fila de pastillas, no una tabla. Se mira de reojo
entre serie y serie, con el movil en una mano. */
.fx-sempas{margin-top:12px}
.fx-sp-filas{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.fx-sp{display:inline-flex;align-items:baseline;gap:3px;font-size:12.5px;
color:var(--texto-2);background:var(--glass-2);border:1px solid var(--linea);
border-radius:100px;padding:4px 10px;white-space:nowrap}
.fx-sp b{font-size:14.5px;font-weight:800;color:var(--texto)}
/* Notas: cada duda es una tarjeta con su estado, para que se vea de un vistazo
si Miguel ya la ha leido o contestado. */
.fx-nota{margin-top:12px}
.fx-nota-cab{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.fx-nota-fecha{font-size:11px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--texto-3)}
.fx-nota-vid{margin-top:10px;border-radius:12px;overflow:hidden;max-width:260px}
.fx-nota.resp{border-color:rgba(61,214,140,.35)}
.fx-resp{margin-top:10px;padding-top:10px;border-top:1px solid var(--linea)}
.fx-resp b{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--azul-txt);margin-bottom:3px}
.fx-form textarea{width:100%;min-height:76px;font:inherit;font-size:15px;
border-radius:12px;padding:10px 12px;background:var(--glass-2);
border:1px solid var(--linea);color:var(--texto);resize:vertical}
.fx-form textarea:focus{outline:none;border-color:rgba(var(--pri-rgb),.55);
box-shadow:0 0 0 3px rgba(var(--pri-rgb),.16)}
/* Las dudas del cliente dentro de la pantalla de feedback (19-sep) */
.duda{border-top:1px solid var(--linea);padding:12px 0}
.duda:first-of-type{border-top:0;padding-top:4px}
.duda.sin-ver{border-left:3px solid var(--azul-txt);padding-left:11px}
.duda-cab{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
.duda-cab b{font-size:14.5px}
.duda-cab span{font-size:11.5px;color:var(--texto-3);margin-left:auto}
.duda p{margin:0 0 8px;font-size:14px;line-height:1.5;color:var(--texto-2)}
.duda video{width:100%;max-width:320px;border-radius:12px;margin-bottom:8px;display:block}
.duda-resp{background:var(--glass-2);border-radius:12px;padding:9px 12px}
.duda-resp b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
color:var(--azul-txt);margin-bottom:3px}
.duda-form textarea{width:100%;resize:vertical}
.duda-acc{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
/* ---------- Salud: cada tarjeta con su color (19-sep) ----------
Miguel: "recuadros colores" y "premium estilo iphone". Las cinco tarjetas
eran el mismo azul con el mismo icono, asi que la pantalla se leia como una
lista gris y costaba encontrar la que buscas.
El color va en el ICONO y en un resplandor de la esquina, no en el fondo de
la tarjeta: tenirlas enteras las volveria de colorines y esto es una app de
entrenamiento, no un juego. El texto no cambia de color, asi que se sigue
leyendo igual de bien en los tres temas. */
.sa-tarj{position:relative;overflow:hidden;isolation:isolate;
transition:transform var(--t), box-shadow var(--t), border-color var(--t)}
/* El resplandor: un circulo muy suave del color de la tarjeta, arriba a la
derecha, por debajo del contenido. */
.sa-tarj::before{content:"";position:absolute;z-index:-1;top:-38px;right:-38px;
width:118px;height:118px;border-radius:50%;
background:radial-gradient(circle, var(--tono-glow, rgba(var(--pri-rgb),.30)) 0%, transparent 68%);
opacity:.9;pointer-events:none}
/* El filo de arriba, que es lo que da el aspecto de cristal en iOS. */
.sa-tarj::after{content:"";position:absolute;z-index:-1;inset:0 0 auto 0;height:1px;
background:linear-gradient(90deg, transparent, var(--tono, rgba(255,255,255,.5)), transparent);
opacity:.45;pointer-events:none}
.sa-tarj:active{transform:scale(.97);box-shadow:0 0 0 3px var(--tono-glow, rgba(var(--pri-rgb),.22))}
.sa-ico{transition:transform var(--t), background var(--t)}
.sa-tarj:active .sa-ico{transform:scale(.94)}
.sa-tarj[data-tono="verde"] {--tono:#3DD68C;--tono-glow:rgba(61,214,140,.26)}
.sa-tarj[data-tono="azul"] {--tono:#7E99F0;--tono-glow:rgba(126,153,240,.26)}
.sa-tarj[data-tono="violeta"]{--tono:#B18CFF;--tono-glow:rgba(177,140,255,.26)}
.sa-tarj[data-tono="ambar"] {--tono:#E5A44C;--tono-glow:rgba(229,164,76,.26)}
.sa-tarj[data-tono="cian"] {--tono:#4FD1E0;--tono-glow:rgba(79,209,224,.26)}
.sa-tarj[data-tono] .sa-ico{background:color-mix(in srgb, var(--tono) 16%, transparent);
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tono) 30%, transparent)}
.sa-tarj[data-tono] .sa-ico svg{stroke:var(--tono)}
.sa-tarj[data-tono] b{color:var(--texto)}
/* La quinta tarjeta se quedaba sola en su fila con un hueco al lado. Ocupa las
dos columnas y se pone en horizontal, que ademas la hace mas facil de tocar. */
.sa-tarj.ancha{grid-column:1 / -1;min-height:0;display:flex;align-items:center;gap:13px}
.sa-tarj.ancha .sa-ico{flex:0 0 auto}
.sa-tarj.ancha b{margin-top:0}
.sa-tarj.ancha small{margin-top:2px}
.sa-tarj.ancha::before{top:-52px;right:-30px}
/* Donde no haya color-mix (navegadores viejos), el icono se queda con el azul
de siempre y la tarjeta sigue perfectamente usable: se pierde el color, no
la pantalla. */
@supports not (background: color-mix(in srgb, red 10%, transparent)){
.sa-tarj[data-tono] .sa-ico{background:rgba(var(--pri-rgb),.14);box-shadow:none}
}
/* Los cuatro indicadores de Progreso, con el mismo criterio que Salud */
.pg-kpi{position:relative;overflow:hidden;isolation:isolate}
.pg-kpi::before{content:"";position:absolute;z-index:-1;top:-44px;right:-44px;
width:112px;height:112px;border-radius:50%;
background:radial-gradient(circle, var(--tono-glow, rgba(var(--pri-rgb),.26)) 0%, transparent 68%);
pointer-events:none}
.pg-kpi::after{content:"";position:absolute;z-index:-1;inset:0 0 auto 0;height:1px;
background:linear-gradient(90deg, transparent, var(--tono, rgba(255,255,255,.4)), transparent);
opacity:.4;pointer-events:none}
.pg-kpi[data-tono="verde"] {--tono:#3DD68C;--tono-glow:rgba(61,214,140,.24)}
.pg-kpi[data-tono="cian"] {--tono:#4FD1E0;--tono-glow:rgba(79,209,224,.24)}
.pg-kpi[data-tono="violeta"]{--tono:#B18CFF;--tono-glow:rgba(177,140,255,.24)}
.pg-kpi[data-tono="ambar"] {--tono:#E5A44C;--tono-glow:rgba(229,164,76,.24)}
.pg-kpi[data-tono] .k-t{color:var(--tono)}
/* Sin datos, el color se apaga: una tarjeta vacia no tiene que llamar la
atencion mas que una con un numero de verdad. */
.pg-kpi.sin::before{opacity:.35}
.pg-kpi.sin .k-t{color:var(--texto-3)}
/* Los mismos colores, uno por tema. Los tonos vivos se ven bien sobre el azul
oscuro y se vuelven ilegibles sobre blanco: en claro hacen falta las
versiones oscuras, y en noche unas calidas, que es de lo que va ese tema.
Los numeros de contraste se comprueban con el barrido, no a ojo. */
:root[data-tema="claro"] .sa-tarj[data-tono="verde"],
:root[data-tema="claro"] .pg-kpi[data-tono="verde"] {--tono:#0B7A4B;--tono-glow:rgba(11,122,75,.16)}
:root[data-tema="claro"] .sa-tarj[data-tono="azul"],
:root[data-tema="claro"] .pg-kpi[data-tono="azul"] {--tono:#0B3AC8;--tono-glow:rgba(11,58,200,.14)}
:root[data-tema="claro"] .sa-tarj[data-tono="violeta"],
:root[data-tema="claro"] .pg-kpi[data-tono="violeta"]{--tono:#6A3FD1;--tono-glow:rgba(106,63,209,.15)}
:root[data-tema="claro"] .sa-tarj[data-tono="ambar"],
:root[data-tema="claro"] .pg-kpi[data-tono="ambar"] {--tono:#8A5200;--tono-glow:rgba(138,82,0,.15)}
:root[data-tema="claro"] .sa-tarj[data-tono="cian"],
:root[data-tema="claro"] .pg-kpi[data-tono="cian"] {--tono:#0E6E7A;--tono-glow:rgba(14,110,122,.15)}
:root[data-tema="noche"] .sa-tarj[data-tono="verde"],
:root[data-tema="noche"] .pg-kpi[data-tono="verde"] {--tono:#C9B487;--tono-glow:rgba(201,180,135,.20)}
:root[data-tema="noche"] .sa-tarj[data-tono="azul"],
:root[data-tema="noche"] .pg-kpi[data-tono="azul"] {--tono:#EFA383;--tono-glow:rgba(239,163,131,.20)}
:root[data-tema="noche"] .sa-tarj[data-tono="violeta"],
:root[data-tema="noche"] .pg-kpi[data-tono="violeta"]{--tono:#E3927E;--tono-glow:rgba(227,146,126,.20)}
:root[data-tema="noche"] .sa-tarj[data-tono="ambar"],
:root[data-tema="noche"] .pg-kpi[data-tono="ambar"] {--tono:#E5A44C;--tono-glow:rgba(229,164,76,.20)}
:root[data-tema="noche"] .sa-tarj[data-tono="cian"],
:root[data-tema="noche"] .pg-kpi[data-tono="cian"] {--tono:#D2A98F;--tono-glow:rgba(210,169,143,.20)}
/* Confirmar los videos de la biblioteca de una pasada (19-sep) */
.vb-marca{display:flex;align-items:flex-start;gap:10px;margin:11px 0 2px;
padding:10px 12px;border-radius:12px;background:rgba(61,214,140,.10);
border:1px solid rgba(61,214,140,.28);cursor:pointer}
.vb-marca input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;accent-color:var(--ok)}
.vb-marca span{font-size:14px;line-height:1.4}
.vb-marca b{font-weight:800}
.vb-barra{position:sticky;bottom:calc(var(--alto-nav, 68px) + env(safe-area-inset-bottom,0px));z-index:5;margin-top:16px;padding:12px 14px 16px;
background:linear-gradient(180deg, transparent, var(--n1) 34%);
display:flex;flex-direction:column;gap:6px}
.vb-barra .btn-ds{width:100%;justify-content:center;min-height:48px;font-size:15.5px}
.vb-barra small{font-size:12px;color:var(--texto-3);text-align:center;line-height:1.4}
/* El aviso de "falta esto" de la revisión de la semana (19-sep).
Antes salía en la línea gris de "Guardado", arriba a la derecha, y dar a
Siguiente parecía que no hacía nada. En producción no la había mandado
nadie nunca. */
.paso-falta{margin:7px 0 0;font-size:13.5px;line-height:1.4;color:var(--aviso);
display:flex;align-items:flex-start;gap:6px}
.paso-falta::before{content:"!";flex:0 0 auto;width:17px;height:17px;border-radius:50%;
background:var(--aviso);color:#1A1000;font-size:12px;font-weight:800;
display:grid;place-items:center;margin-top:1px}
input.falta,select.falta,textarea.falta{border-color:var(--aviso) !important;
box-shadow:0 0 0 3px rgba(229,164,76,.18)}
/* Las capturas dentro de "Cómo funciona la app" (19-sep).
Se dibujan con la proporción del fichero (390x690) escrita en la etiqueta y
con el alto en auto: fijar solo el ancho es lo que deforma las imágenes. */
.ay-shot{display:block;width:100%;height:auto;margin-top:12px;border-radius:14px;
border:1px solid var(--linea);background:var(--n1)}
/* ---------------------------------------------------------------------------
Aviso de "te han mandado algo" en el inicio de Miguel.
La barra de abajo del movil tiene cinco sitios y estan ocupados, asi que sin
esta tarjeta la pantalla de dudas solo se llegaria desde el ordenador.
--------------------------------------------------------------------------- */
.aviso-medios{
display:flex; align-items:center; gap:14px;
margin-bottom:16px; padding:16px 18px;
text-decoration:none; color:inherit;
border:1px solid rgba(255,138,76,.32);
background:linear-gradient(135deg, rgba(255,138,76,.14), rgba(255,138,76,.04));
box-shadow:0 10px 30px rgba(255,138,76,.13);
transition:transform .18s ease, box-shadow .18s ease;
}
.aviso-medios:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(255,138,76,.2) }
.aviso-medios:active{ transform:translateY(0) }
.am-num{
flex:0 0 auto; min-width:44px; height:44px; padding:0 10px;
display:flex; align-items:center; justify-content:center;
border-radius:14px; font-weight:800; font-size:1.15rem; line-height:1;
color:#2a1405; background:#ff8a4c;
box-shadow:0 6px 16px rgba(255,138,76,.3);
}
.am-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px }
.am-txt b{ font-size:1rem; letter-spacing:-.01em }
.am-txt small{ font-size:.82rem; color:var(--texto-2); line-height:1.35 }
.am-ir{ flex:0 0 auto; font-size:1.5rem; line-height:1; color:#ff8a4c; opacity:.9 }
/* En claro el naranja claro sobre blanco no se lee: se oscurece */
[data-tema="claro"] .am-num{ background:#c0500c; color:#fff }
[data-tema="claro"] .am-ir{ color:#c0500c }
[data-tema="claro"] .aviso-medios{ border-color:rgba(192,80,12,.3); box-shadow:0 8px 24px rgba(192,80,12,.1) }
/* ---------------------------------------------------------------------------
Enlaces de texto dentro de listas y tablas del panel.
En el ordenador con raton un enlace de 18 px se pincha bien, pero en el movil
hay que acertarle con el dedo. Solo en pantalla estrecha se les da alto de
dedo, asi que las tablas del ordenador no cambian nada.
--------------------------------------------------------------------------- */
@media (max-width:760px){
.tabla-ds td > a,
.card-title > a:only-child,
/* Las tarjetas del calentamiento se quedan fuera (22-sep). Esta regla es
para ENLACES DE TEXTO, y al primero de cada tarjeta le ponia inline-flex:
la del calentamiento es una foto con su nombre debajo, asi que en flex la
foto se comia el ancho entero y el nombre se salia por la derecha, donde
lo cortaba el overflow. O sea que la PRIMERA tarjeta de calentamiento
llevaba tiempo saliendo sin nombre, solo en movil y solo la primera.
Medido: nombre en x190 con la tarjeta acabando en x190. */
.card > div > a:first-child:not(.btn-ds):not(.chapa):not(.pr-rec){
display:inline-flex; align-items:center; min-height:44px;
}
}
/* ---- El calentamiento del dia (20-sep-2026) -------------------------------
Miguel: "el calentamiento esta dividido en los pdfs, que salgan para cuando
es pierna sea inferior y cuando es torso salga superior, e incluso lo
especifico". Antes no habia ninguno en la app: cero de 30 dias activos.
Va arriba del todo y PLEGADO en cuanto hay una serie guardada: quien ya esta
entrenando no quiere pasar por encima de treinta lineas cada vez que vuelve
a la pantalla. Abierto solo la primera vez del dia. */
.cal{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.cal-b{border:1px solid var(--linea);border-radius:14px;background:var(--n1);
overflow:hidden}
.cal-b>summary{display:flex;align-items:center;justify-content:space-between;
gap:10px;min-height:48px;padding:10px 14px;cursor:pointer;list-style:none;
font-weight:700}
.cal-b>summary::-webkit-details-marker{display:none}
.cal-b>summary::after{content:"";flex:none;width:8px;height:8px;
border-right:2px solid var(--t3);border-bottom:2px solid var(--t3);
transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.cal-b[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.cal-t{font-size:15px}
.cal-d{margin-left:auto;margin-right:8px;font-size:12px;font-weight:700;
color:var(--t3);white-space:nowrap}
.cal-in{padding:0 14px 14px}
.cal-l{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:9px}
.cal-l li{font-size:14px;line-height:1.4}
.cal-l li b{display:block;font-weight:700}
.cal-l li span{display:block;color:var(--t2);font-size:13px;margin-top:1px}
/* El video va como un boton de una linea, no como una portada grande.
Miguel, 20-sep: "que salga como icono en video para que lo puedan ver si
eso". Lo que manda es la foto de cada movimiento; el video es el extra.
Y sigue sin cargarse hasta que se toca. */
.cal-vid{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;
margin:0 0 12px;padding:9px 13px;cursor:pointer;
border:1px solid var(--linea);border-radius:12px;background:var(--n2);
color:var(--t1);font:inherit;font-size:13.5px;font-weight:700;text-align:left}
.cal-vid:hover{border-color:var(--t3)}
.cal-play{flex:none;width:26px;height:26px;border-radius:50%;
background:var(--acento,#2563eb);display:flex;align-items:center;justify-content:center}
.cal-play::after{content:"";margin-left:3px;border-left:9px solid #fff;
border-top:6px solid transparent;border-bottom:6px solid transparent}
/* La foto del movimiento, con SU proporcion, nunca cuadrada (leccion L001).
Y con tope de alto: casi todas son tiras anchas, pero una es vertical
(192x380) y a todo el ancho se comia la pantalla entera ella sola. Medido
en el movil, no supuesto. */
/* Las fotos del movimiento. Desde el 7-oct van DOS, el principio y el final,
y todas al MISMO encuadre (900x790), asi que ya no hace falta el tope de alto
que protegia de la vertical de 192x380: ahora no hay ninguna rara. Las dos
van a la mitad cada una para que en el movil sigan cabiendo de lado a lado y
se lea el movimiento de un golpe, sin tener que ampliar. */
/* Con tope de ancho: la app se abre casi siempre en el movil, pero en el
ordenador la columna llega a 1004 px y una foto de calentamiento a ese
tamano se come la pantalla. Medido, no supuesto. */
.cal-fs{display:flex;gap:6px;margin:0 0 7px;max-width:420px}
.cal-fs .cal-f{flex:1 1 0;min-width:0}
.cal-f{display:block;width:100%;height:auto;border-radius:10px;margin:0}
.cal-cuando{margin:0 0 10px;padding:7px 11px;border-radius:10px;
background:rgba(var(--pri-rgb),.12);color:var(--t1);
font-size:12.5px;font-weight:700;line-height:1.35}
/* La M del calentamiento NO va en la tarjeta: va pintada DENTRO de cada foto.
Miguel, 22-sep: "las fotos del calentamiento que se vean la M borrosa de
fondo". Probado primero con una marca de agua en la tarjeta y no valia: las
fotos son opacas y la tapaban entera, solo asomaba un dedo por arriba. El
azul de esas fotos viene pegado en el JPG, asi que la M se pinta en la propia
imagen y solo donde hay fondo (script m_en_calentamiento.py, originales en
~/pesado/calentamiento-originales-22sep). Las cinco fotos de gimnasio de
verdad (core-*) no se tocan: ahi no hay fondo plano donde meterla. */
.cal-marco{position:relative;width:100%;aspect-ratio:16/9;margin:0 0 12px;
border-radius:12px;overflow:hidden;background:#000}
.cal-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Su video dentro de la app (9-oct). Mismo marco que el de YouTube para que
no haya dos pintas distintas, y `object-fit:contain` porque el suyo es
16:9 clavado pero el dia que suba uno vertical no quiero que se recorte
solo (leccion L001: fijar una medida y dejar la otra libre deforma). */
.cal-marco video{position:absolute;inset:0;width:100%;height:100%;
object-fit:contain;background:#000;border:0}
/* La duracion, al final del boton y en gris: dice de cuanto es el video ANTES
de gastar datos en abrirlo. */
.cal-vd{margin-left:auto;font-size:12px;font-weight:700;color:var(--t3);
white-space:nowrap}
/* --- la felicitacion de cumpleanos en Inicio (22-sep) ---
Solo se ve un dia al ano, asi que no lleva animacion ni confeti: llama la
atencion por estar arriba y por el borde en color, no por moverse. */
.cumple-card{position:relative;border:1px solid rgba(var(--pri-rgb),.45);
border-radius:var(--r-l);background:var(--n1);padding:16px;margin-bottom:14px}
.cumple-t{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cumple-tarta{flex:none;width:40px;height:40px;border-radius:12px;display:flex;
align-items:center;justify-content:center;background:rgba(var(--pri-rgb),.16);
color:var(--primario)}
.cumple-tarta svg{width:22px;height:22px}
.cumple-t b{display:block;font-size:16px;line-height:1.2}
.cumple-t small{display:block;font-size:12.5px;color:var(--texto-3);margin-top:2px}
.cumple-video{display:block;width:100%;border-radius:var(--r-m);background:#000;
margin-bottom:12px}
.cumple-txt{margin:0;white-space:pre-wrap;font-size:14.5px;line-height:1.6;
color:var(--texto-2)}
/* --- cardio del dia de entreno (22-sep) ---
Las opciones son botones anchos de verdad: esto se toca con el movil en la
mano y sudando, no con el raton. */
.cardio-card{margin-top:14px}
.cardio-tipos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.cardio-t{position:relative}
.cardio-t input{position:absolute;opacity:0;width:0;height:0}
.cardio-t span{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;
border-radius:999px;border:1px solid var(--linea);background:var(--n1);
color:var(--texto-2);font-size:14px;font-weight:600;cursor:pointer;
-webkit-tap-highlight-color:transparent}
.cardio-t input:checked + span{background:var(--primario);border-color:var(--primario);
color:#fff}
.cardio-t input:focus-visible + span{outline:2px solid var(--primario);outline-offset:2px}
/* Rejilla de tres columnas iguales y no flex: con flex, una etiqueta mas larga
que otra cambiaba el alto de su columna y las casillas salian escalonadas.
En rejilla, las tres columnas miden lo mismo pase lo que pase con el texto. */
.cardio-campos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
align-items:start;margin-bottom:12px}
.cardio-campos.una{grid-template-columns:1fr}
/* El margen a cero es obligatorio aqui: la hoja de la app le pone 16px arriba a
todo label que va detras de otro, y en una fila de tres eso baja las dos
ultimas columnas. Se vio midiendo, no mirando: las tres medían 68 de alto y
una empezaba 16px mas arriba. */
.cardio-campos label{min-width:0;display:block;margin:0}
.cardio-campos label > span{display:block;font-size:11.5px;font-weight:700;
letter-spacing:.03em;text-transform:uppercase;color:var(--texto-3);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:16px}
.cardio-campos input{display:block;width:100%;box-sizing:border-box;margin-top:6px;
min-height:46px;padding:0 12px;border-radius:var(--r-m);border:1px solid var(--linea);
background:var(--n1);color:var(--texto);font:inherit;font-size:16px;
font-variant-numeric:tabular-nums}
.cardio-campos input:focus{outline:none;border-color:rgba(var(--pri-rgb),.55)}
.cardio-lista{list-style:none;margin:0 0 12px;padding:0;display:flex;
flex-direction:column;gap:6px}
.cardio-lista li{display:flex;align-items:baseline;gap:8px;font-size:14px;
padding:9px 12px;border-radius:var(--r-m);background:var(--n1);
border:1px solid var(--linea)}
.cardio-lista li span{color:var(--texto-3);font-size:13px}
.cardio-mas{border:1px solid rgba(var(--pri-rgb),.45);border-radius:var(--r-m);
padding:13px;background:rgba(var(--pri-rgb),.08)}
.cardio-mas-t{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--texto)}
.cardio-nota{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--texto-3)}
/* --- el reloj del descanso, en tambor (22-sep) ---
Miguel mando una captura de la rueda de la hora del iPhone: banda redondeada
en el centro y los numeros de al lado cada vez mas apagados y aplastados.
Esto es eso, con sus colores.
El ANILLO sigue existiendo y es lo que se ve cuando la burbuja esta encogida:
ahi el tiempo va dentro del circulo y cinco filas no cabrian. */
.d-tambor{position:relative;flex:none;width:98px;height:104px;border-radius:16px;
overflow:hidden;display:flex;flex-direction:column;align-items:center;
justify-content:center;
background:linear-gradient(90deg,rgba(6,13,40,.9),rgba(20,34,84,.6) 50%,rgba(6,13,40,.9));
box-shadow:inset 1px 0 0 rgba(255,255,255,.07),inset -1px 0 0 rgba(255,255,255,.07)}
.d-banda{position:absolute;left:7px;right:7px;top:50%;height:34px;
transform:translateY(-50%);border-radius:11px;
background:rgba(var(--pri-rgb),.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.d-velo{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(5,11,30,.95) 0%,rgba(5,11,30,0) 33%,
rgba(5,11,30,0) 67%,rgba(5,11,30,.95) 100%)}
.d-t{position:relative;z-index:2;font-variant-numeric:tabular-nums;
font-weight:700;text-align:center}
.d-t0{font-size:23px;font-weight:800;color:var(--texto);line-height:34px;
text-shadow:0 2px 6px rgba(0,0,0,.45)}
.d-t1{font-size:14px;color:rgba(174,196,232,.52);line-height:20px;transform:scaleY(.88)}
.d-t2{font-size:12px;color:rgba(174,196,232,.22);line-height:17px;transform:scaleY(.72)}
/* Expandida: manda el tambor. Encogida: manda el anillo, como hasta ahora. */
.descanso .d-anillo{display:none}
.descanso .d-txt b{display:none}
.descanso.mini .d-tambor{display:none}
.descanso.mini .d-anillo{display:block}
.descanso.mini .d-txt b{display:block}
:root[data-tema="claro"] .d-tambor{
background:linear-gradient(90deg,rgba(210,222,245,.9),rgba(238,244,255,.7) 50%,rgba(210,222,245,.9))}
:root[data-tema="claro"] .d-velo{
background:linear-gradient(180deg,rgba(237,241,247,.95) 0%,rgba(237,241,247,0) 33%,
rgba(237,241,247,0) 67%,rgba(237,241,247,.95) 100%)}
:root[data-tema="claro"] .d-t1{color:rgba(60,80,120,.55)}
:root[data-tema="claro"] .d-t2{color:rgba(60,80,120,.25)}
/* --- el recordatorio de instalarse la app (22-sep) ---
Una tira fina y cerrable. No es un cartel a pantalla completa a proposito:
quien viene a entrenar viene a entrenar, y un aviso que tapa la pantalla se
cierra sin leerlo. */
.inst-tira{display:flex;align-items:center;gap:10px;margin:0 0 12px;
padding:10px 12px;border-radius:var(--r-m);background:var(--n1);
border:1px solid var(--linea);font-size:13px;color:var(--texto-2);line-height:1.4}
.inst-tira[hidden]{display:none}
.inst-tira > span{flex:1;min-width:0}
.inst-tira a{flex:none;color:var(--azul-txt);font-weight:700;text-decoration:none;
white-space:nowrap}
.inst-tira button{flex:none;width:32px;height:32px;padding:0;border:0;
background:transparent;color:var(--texto-3);font-size:20px;line-height:1;
border-radius:9px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.inst-tira button:focus-visible{outline:2px solid var(--primario);outline-offset:-2px}
/* El boton de instalar de Android. Va con mas peso que la regla de arriba a
proposito: esa viste la "x" de cerrar, que es un boton de 32px transparente,
y este tiene que leerse como lo principal de la tira. */
.inst-tira button.inst-ya{
width:auto;height:auto;padding:8px 14px;border-radius:999px;
background:var(--primario);color:#fff;font-size:12.5px;font-weight:800;
letter-spacing:.01em;white-space:nowrap;min-height:36px;
transition:transform var(--t),filter var(--t)}
.inst-tira button.inst-ya:active{transform:scale(.97);filter:brightness(1.06)}
.inst-tira button.inst-ya:disabled{opacity:.6}
/* En el tema noche el color principal es ambar, y el blanco encima se queda en
3,27 de contraste: no se lee bien. Va letra oscura, igual que los demas
botones principales de ese tema. Medido, no supuesto. */
:root[data-tema="noche"] .inst-tira button.inst-ya{color:#2A0F08}
/* Los pasos del Atajo de Salud (pantalla de ajustes de Miguel). Numerados a
mano y no con el contador del navegador, porque el numero tiene que quedar
fuera del texto y alineado con la primera linea; con el marcador de serie se
pega a la palabra y en movil se come dos renglones. */
.atj-pasos{list-style:none;margin:0;padding:0;counter-reset:atj}
.atj-pasos li{counter-increment:atj;position:relative;padding:0 0 14px 34px;
font-size:13.5px;line-height:1.6;color:var(--texto-2)}
.atj-pasos li:last-child{padding-bottom:0}
.atj-pasos li::before{content:counter(atj);position:absolute;left:0;top:1px;
width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
background:rgba(var(--pri-rgb),.16);color:var(--azul-txt);
font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums}
.atj-pasos b{color:var(--texto);font-weight:700}
.atj-pasos code{font-size:12px;padding:1px 5px;border-radius:6px;
background:var(--n3);color:var(--texto);word-break:break-all}
.atj-pasos .muted{display:block;margin-top:4px;font-size:12.5px}
/* El "ahora no" de la pantalla del cumpleanos (22-sep).
Es un boton de formulario porque cambia algo en el servidor, pero se lee
como un enlace: si pareciera un boton competiria con el de guardar, y lo que
la pantalla pide sigue siendo poner la fecha. */
.cp-luego{margin-top:14px;text-align:center}
.cp-luego button{
background:none;border:0;padding:6px 2px;cursor:pointer;
font:inherit;font-size:13.5px;color:var(--texto-3);
text-decoration:underline;text-underline-offset:3px;
}
.cp-luego button:hover{color:var(--texto-2)}
/* El cumpleanos en la ficha del cliente (22-sep). Va dentro de una caja de
dato, asi que el campo y el boton comparten linea y no rompen la rejilla. */
.cp-admin{display:flex;gap:8px;align-items:stretch;margin-top:6px}
/* stretch y no center: centrados quedaban con el campo de 48 y el boton de
36, o sea dos alturas distintas una al lado de la otra. Igualados, arriba
y abajo coinciden. Medido, no mirado. */
.cp-admin input[type="date"]{
flex:1 1 auto;min-width:0;margin:0;
padding:8px 10px;font-size:14px;
border-radius:var(--r-m);border:1px solid var(--linea);
background:rgba(var(--pri-rgb),.10);color:var(--texto);
}
.cp-admin .btn-ds{flex:0 0 auto;padding:8px 14px;font-size:13px}
.cp-fila{grid-column:1/-1}
.cp-admin input[type="date"]{min-width:138px}
/* Las citas del calendario en el panel de leads (22-sep). */
.cit-caja{padding:16px}
.cit{display:flex;align-items:center;gap:12px;padding:11px 0;
border-top:1px solid var(--linea)}
.cit:first-of-type{border-top:0;padding-top:0}
.cit-dia{flex:0 0 auto;min-width:104px;font-size:12.5px;font-weight:700;
color:var(--texto-2);letter-spacing:.2px}
.cit-med{flex:1 1 auto;min-width:0}
.cit-nom{font-size:15px;font-weight:600;line-height:1.3}
.cit-fic{display:inline-block;margin-top:3px;font-size:12.5px}
.cit-no{margin-top:3px;font-size:12.5px;color:var(--texto-3)}
.cit-eleg{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap}
.cit-eleg select{flex:1 1 150px;min-width:0;margin:0;padding:7px 9px;font-size:13px;
border-radius:var(--r-m);border:1px solid var(--linea);
background:rgba(var(--pri-rgb),.10);color:var(--texto)}
.cit-eleg .btn-ds{flex:0 0 auto;padding:7px 12px;font-size:12.5px}
.cit-meet{flex:0 0 auto;font-size:12.5px;font-weight:600}
@media(max-width:430px){
.cit{flex-wrap:wrap}
.cit-dia{min-width:0;flex:1 1 100%}
}
/* La fila de un ejercicio en el plan, en movil (22-sep-2026).
Medido, no visto: el nombre (.nom) se quedaba con ANCHO 0 y su texto se
dibujaba por debajo del "4x10-8-8-8 . RIR", que iba encima. Pasaba en
cualquier cliente, no solo en uno: la fila es flex y entre las series
(94px, sin partir) y el boton de biserie (178px) no quedaba sitio, y el
min-width:0 del nombre le dejaba encogerse hasta desaparecer.
Con el nombre en su propia linea cada cosa tiene su sitio y nada se pisa. */
@media (max-width:520px){
.ej-ds{flex-wrap:wrap}
.ej-ds .nom{flex:1 1 100%}
.ej-ds .met{flex:0 0 auto}
.ej-ds .bs-form{margin-left:auto;margin-top:0}
}
/* La barra de abajo, apretada solo en moviles muy estrechos (menos de 360 px).
Venia de cuando habia una pestana mas; se queda porque ahi sigue ganando
sitio y por encima de 360 px no cambia ni un pixel. */
@media (max-width:359px){
.navbaja{padding-left:0;padding-right:0}
.navbaja a{min-width:0;flex:1 1 0;padding:5px 2px;font-size:9.5px;gap:2px}
.navbaja a svg{width:19px;height:19px}
}
/* ---------- lo que ha registrado un cliente, en el panel de Miguel ----------
23-sep: solo veia "3 entrenos, 23 series" y el detalle habia que ir a buscarlo
entrando como el cliente. Las series van en pastillas separadas a proposito:
en una linea corrida los pesos y las repeticiones se mezclan y, en sus
palabras, "parece todo igual". */
.reg-dia .gc-cab{display:flex;justify-content:space-between;align-items:baseline}
.reg-fecha{font-size:12px;color:var(--texto-3);font-weight:700;letter-spacing:.06em}
.reg-resumen{font-size:13px;color:var(--texto-2);margin:2px 0 12px}
.reg-abierto{color:var(--aviso)}
.reg-ej{padding:10px 0;border-top:1px solid var(--linea)}
.reg-nom{font-weight:700;font-size:14px;margin-bottom:6px}
.reg-series{display:flex;flex-wrap:wrap;gap:6px}
.reg-serie{display:inline-flex;align-items:baseline;gap:3px;padding:5px 9px;
border-radius:9px;background:var(--n1);border:1px solid var(--linea);
font-size:12px;color:var(--texto-2);white-space:nowrap}
.reg-serie b{font-size:15px;color:var(--texto);font-weight:700}
.reg-serie i{font-style:normal;color:var(--texto-3);margin:0 1px}
.reg-serie u{text-decoration:none;color:var(--texto-3);font-size:11px;margin-left:2px}
.reg-serie.es-cal{opacity:.62}
.reg-plan{font-size:12px;color:var(--texto-3);margin-top:6px}
/* Lo que hizo de verdad cuando cambio el ejercicio (Miguel, 28-sep). */
.reg-alt{font-size:12.5px;color:var(--texto-2);margin:-2px 0 6px;
display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.reg-alt-et{font-size:10px;letter-spacing:.04em;text-transform:uppercase;
padding:2px 6px;border-radius:999px;
background:rgba(var(--pri-rgb),.14);color:var(--azul-txt)}
.reg-alt em{font-style:normal;color:var(--texto-3)}
.reg-nota{font-size:12px;color:var(--texto-2);margin-top:6px;padding-left:9px;
border-left:2px solid var(--linea-fuerte)}
/* ---------- Progreso: el bloque que pidio Miguel el 23-sep ----------
"Tarjetas limpias, graficas sencillas, indicadores de subida y bajada,
espacios amplios, y sobre todo el movil." Por eso todo es de una columna
en movil y solo se reparte cuando hay sitio de verdad. */
.pr-cab{background:linear-gradient(160deg,var(--n2) 0%,var(--n1) 100%)}
.pr-titulo{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:14px}
.pr-titulo b{font-size:1.15rem;letter-spacing:-.01em}
.pr-titulo span{font-size:.82rem;color:var(--enfasis);font-weight:600}
.pr-rejilla{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:620px){.pr-rejilla{grid-template-columns:repeat(3,1fr)}}
.pr-dato{background:rgba(255,255,255,.04);border:1px solid var(--linea);
border-radius:14px;padding:12px 13px;display:flex;flex-direction:column;gap:2px;min-width:0}
.pr-dato.pr-sin{opacity:.62}
.pr-etq{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--texto-3)}
.pr-dato b{font-size:1.5rem;line-height:1.1;font-weight:700}
.pr-dato b i{font-style:normal;font-size:.9rem;color:var(--texto-2);font-weight:600}
.pr-cam{font-size:.74rem;color:var(--texto-2);line-height:1.35}
/* bajar de peso o de cintura es lo que casi siempre busca, asi que baja=verde.
No se usa el rojo para "sube": subir de peso NO es un error, y pintarlo de
rojo es dar un juicio que no toca. */
.pr-cam.baja,b.baja{color:#5FBF8A}
.pr-cam.sube,b.sube{color:var(--secundario)}
.pr-nd{font-size:.8rem;color:var(--texto-3);font-weight:600}
.pr-nota{margin:14px 0 0;font-size:.82rem;color:var(--texto-2);line-height:1.5}
.pr-nota a{color:var(--azul-txt);font-weight:600}
.pr-cifras4{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:12px 0 14px}
@media(min-width:620px){.pr-cifras4{grid-template-columns:repeat(4,1fr)}}
.pr-cifras4>div{background:rgba(255,255,255,.035);border-radius:11px;padding:9px 11px;min-width:0}
.pr-cifras4 span{display:block;font-size:.68rem;text-transform:uppercase;
letter-spacing:.07em;color:var(--texto-3);margin-bottom:3px}
.pr-cifras4 b{font-size:1.02rem;font-weight:700}
.pr-sel{display:block;margin-bottom:12px}
.pr-sel span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;
color:var(--texto-3);margin-bottom:5px}
.pr-sel select{width:100%;background:var(--n3);color:var(--texto);border:1px solid var(--linea);
border-radius:11px;padding:11px 13px;font:inherit;font-weight:600;
/* 16px reales: por debajo de eso Safari en iPhone hace zoom solo al tocar
el desplegable y descoloca la pantalla entera */
font-size:16px}
.pr-periodos{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:2px;
-webkit-overflow-scrolling:touch}
.pr-periodos button{flex:0 0 auto;background:transparent;color:var(--texto-2);
border:1px solid var(--linea);border-radius:999px;padding:7px 13px;font:inherit;
font-size:.78rem;font-weight:600;cursor:pointer}
.pr-periodos button.on{background:var(--primario);border-color:var(--primario);color:#fff}
.pr-lienzo{position:relative;margin:4px 0 6px}
.pr-svg{width:100%;height:auto;display:block;overflow:visible}
.pr-linea{fill:none;stroke:var(--primario);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.pr-area{fill:rgba(var(--pri-rgb),.16);stroke:none}
.pr-punto{fill:var(--enfasis);pointer-events:none}
.pr-pt{cursor:pointer}
.pr-eje{fill:var(--texto-3);font-size:9px;font-family:inherit}
.pr-globo{position:absolute;top:-4px;transform:translateX(-50%);background:var(--n4);
color:var(--texto);border:1px solid var(--linea);border-radius:9px;padding:5px 9px;
font-size:.74rem;font-weight:600;white-space:nowrap;pointer-events:none}
.pr-vacio-min{font-size:.85rem;color:var(--texto-2);line-height:1.55;margin:10px 0}
.pr-aviso-medida{font-size:.8rem;color:var(--secundario);margin:6px 0 0;line-height:1.5}
/* ---------- la llamada agendada, en el panel de leads ----------
Miguel, 23-sep por voz: "que me salga en color mas verde para la gente que
tengo las reuniones, y tambien cuando la tengo". El verde manda sobre el
resalte de la guia: si has quedado con alguien, eso es lo primero que tienes
que ver de esa fila. */
tr.lead-cita{background:rgba(52,168,110,.10) !important;
box-shadow:inset 3px 0 0 #34A86E}
tr.lead-cita:hover{background:rgba(52,168,110,.16) !important}
tr.lead-cita-hoy{background:rgba(52,168,110,.20) !important;
box-shadow:inset 4px 0 0 #3FD292}
.pill.cita{background:rgba(52,168,110,.18);color:#6FE0AC;border:1px solid rgba(52,168,110,.45);
font-size:11px;font-weight:700;white-space:nowrap}
tr.lead-cita-hoy .pill.cita{background:rgba(63,210,146,.28);color:#9DF0C8}
/* dentro de la ficha del lead */
.cita-ficha{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
background:rgba(52,168,110,.12);border:1px solid rgba(52,168,110,.4);
border-left:4px solid #34A86E;border-radius:12px;padding:12px 14px;margin-bottom:14px}
.cita-ficha b{font-size:1rem;color:#8FE9BE}
.cita-ficha .cf-etq{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;
color:var(--texto-3);display:block;margin-bottom:2px}
.cita-ficha a{color:var(--azul-txt);font-weight:600;font-size:.85rem}
a.card{text-decoration:none;color:inherit;transition:border-color .15s}
a.card:hover{border-color:rgba(52,168,110,.55)}
a.card.card-on{border-color:#34A86E;background:rgba(52,168,110,.10)}
/* Aviso de clientes que no pueden entrar por un correo provisional (25-sep).
Va en rojo y lo primero de "Necesita tu atencion" porque alguien que no puede
entrar no espera detras de un cobro. Colores por tokens, que el panel tiene
tema claro y oscuro. */
.sc-aviso{border:1px solid rgba(199,38,60,.45);background:rgba(199,38,60,.08);
border-radius:12px;padding:11px 13px;margin:0 0 10px}
.sc-aviso b{display:block;font-size:14px;color:var(--texto);margin-bottom:4px}
.sc-aviso p{margin:0;font-size:12.5px;color:var(--texto-2);line-height:1.45}
.sc-pista{border:1px dashed var(--linea-fuerte);border-radius:12px;padding:10px 13px;
margin:8px 0 12px}
.sc-pista b{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
color:var(--texto-3);margin-bottom:6px}
.sc-pista ul{margin:0 0 7px;padding-left:16px}
.sc-pista li{font-size:12.5px;color:var(--texto-2);line-height:1.5}
.sc-pista p{margin:0;font-size:12px;color:var(--texto-3);line-height:1.45}
/* ==========================================================================
ESTÉTICA · pasada del 25-sep-2026
Miguel, por nota de voz: *"revisa la estetica y lo visual de la aplicacion y
si hace falta la modernizas, porque esos botones quedan muy cutres. Estilo
iPhone futurista, respetando mis colores y mi logo, pero que gane
visualmente, con animaciones que ganen."*
Tres reglas que me he puesto para no romper nada de lo que ya funciona:
1. **Esto va AL FINAL y solo redefine.** No se toca ni una linea de lo de
arriba, asi que para deshacerlo se borra este bloque y ya. Y los colores
salen todos de SUS tokens (--primario, --acento, --enfasis): no hay ni un
color escrito a mano, para que siga cambiando solo con el tema.
2. **Nada que dependa de que el navegador sea moderno para poder USAR la
app.** Lo de aqui es sombra, brillo y movimiento. Si un movil viejo no lo
entiende, el boton sigue siendo un boton.
3. **Se respeta a quien pide menos movimiento** (`prefers-reduced-motion`),
que en iPhone lo activa mucha gente con mareo. Al final del bloque.
========================================================================== */
:root{
/* El muelle de iOS: sale pasado y vuelve. Es lo que hace que un boton
"se sienta" en vez de solo cambiar de color. */
--muelle:420ms cubic-bezier(.34,1.56,.64,1);
--suave:220ms cubic-bezier(.32,.72,.28,1);
}
/* ---------- 1 · los botones, que eran planos ---------- */
.btn{
position:relative;
transition:transform var(--muelle), box-shadow var(--suave), filter var(--suave);
-webkit-tap-highlight-color:transparent;
}
.btn-primary{
/* Cuerpo: degradado propio + una linea de luz arriba, que es lo que hace que
parezca una pieza y no un rectangulo pintado. */
background:
linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 46%),
linear-gradient(135deg, var(--primario), color-mix(in srgb, var(--primario) 62%, #0B1526));
box-shadow:
0 1px 0 rgba(255,255,255,.22) inset,
0 10px 26px rgba(var(--pri-rgb),.34),
0 2px 6px rgba(0,0,0,.36);
letter-spacing:.01em;
}
.btn-primary:active{
transform:scale(.965);
box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 4px 12px rgba(var(--pri-rgb),.28);
}
/* El brillo que cruza al pulsar. Va en un ::after con overflow oculto, asi que
no puede salirse ni empujar nada. */
.btn-primary::after{
content:"";position:absolute;inset:0;border-radius:inherit;overflow:hidden;
background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
transform:translateX(-120%);opacity:0;pointer-events:none;
}
.btn-primary:active::after{animation:brillo 620ms ease-out}
@keyframes brillo{
0%{transform:translateX(-120%);opacity:.9}
100%{transform:translateX(120%);opacity:0}
}
/* ---------- 2 · el interruptor serie / aproximacion ----------
Antes eran dos cajas sueltas que se encendian. Ahora es UNA pieza con una
pastilla que se desliza de un lado a otro, como los de iPhone. La pastilla
se mueve con :has(), y si el navegador no lo entiende se queda el fondo de
siempre en el que este marcado: se ve cual es igual, solo que sin deslizar. */
.tipo-serie{
position:relative;padding:4px;gap:0;
background:color-mix(in srgb, var(--n1) 78%, transparent);
border:1px solid var(--linea);border-radius:16px;
box-shadow:0 2px 10px rgba(0,0,0,.28) inset;
isolation:isolate;
}
.tipo-serie::before{
content:"";position:absolute;z-index:0;top:4px;bottom:4px;left:4px;
width:calc(50% - 4px);border-radius:12px;
background:linear-gradient(135deg, var(--primario), color-mix(in srgb, var(--primario) 60%, #0B1526));
box-shadow:0 4px 14px rgba(var(--pri-rgb),.34), 0 1px 0 rgba(255,255,255,.18) inset;
transition:transform var(--muelle);
}
.tipo-serie:has(label:nth-of-type(2) input:checked)::before{transform:translateX(100%)}
.tipo-serie label{position:relative;z-index:1}
.tipo-serie span{
background:transparent;border-color:transparent;
transition:color var(--suave);
}
.tipo-serie input:checked + span{
background:transparent;border-color:transparent;color:#fff;font-weight:700;
}
/* El respaldo para quien no tenga :has(): que el marcado siga viendose. */
@supports not selector(:has(*)){
.tipo-serie::before{display:none}
.tipo-serie input:checked + span{
background:var(--primario);border-radius:12px;
}
}
/* ---------- 3 · los huecos de peso y reps ----------
Son lo que mas se toca de toda la app, con la mano sudada y mirando de reojo.
Que se vea CUAL esta activo sin tener que buscarlo. */
/* OJO, aqui NO va ningun aro ni ningun fondo en el campo.
Lo puse el 25-sep por la noche y un cliente de Miguel lo vio a la manana
siguiente: "cuando escribes se te queda ese cuadrado feucho". Tenia razon y
el motivo esta cuatro pantallas mas arriba, escrito antes que yo: el campo va
a proposito con `border-radius:0`, asi que cualquier `box-shadow` suyo sale
CUADRADO dentro de una caja redonda. El aro de foco se pinta en la caja de
fuera con `.serie-campos>div:focus-within`, que ya estaba y funciona.
Aqui solo se suaviza esa caja para que el aro entre y salga en vez de
aparecer de golpe. */
.serie-campos>div{
transition:border-color var(--suave), box-shadow var(--suave), background var(--suave);
}
/* ---------- 4 · los atajos y las cajas de la ultima vez ---------- */
.atajo{transition:transform var(--muelle), border-color var(--suave), background var(--suave)}
.atajo:active{transform:scale(.96)}
/* ---------- 5 · la barra de abajo ----------
El icono activo sube un pelo y se le enciende una pastilla detras. Es el
unico sitio de la app donde siempre sabes donde estas. */
.bottomnav a{
position:relative;padding:6px 14px;border-radius:14px;
transition:color var(--suave), transform var(--muelle);
}
.bottomnav a::before{
content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
background:linear-gradient(180deg, rgba(var(--pri-rgb),.26), rgba(var(--pri-rgb),.08));
opacity:0;transform:scale(.7);
transition:opacity var(--suave), transform var(--muelle);
}
.bottomnav a.active::before{opacity:1;transform:scale(1)}
.bottomnav a.active{transform:translateY(-1px)}
.bottomnav a:active{transform:scale(.94)}
.bottomnav svg{transition:transform var(--muelle)}
.bottomnav a.active svg{transform:translateY(-1px) scale(1.06)}
/* ---------- 6 · quien pide menos movimiento, menos movimiento ----------
No se quita el diseno, se quita el MOVIMIENTO. Los colores, las sombras y la
pastilla se quedan: lo que desaparece es que se deslicen y reboten. */
@media (prefers-reduced-motion: reduce){
.btn,.atajo,.bottomnav a,.bottomnav svg,.tipo-serie::before,
.bottomnav a::before,.serie-campos>div{
transition-duration:.01ms !important;
}
.btn-primary:active::after{animation:none}
}
/* ==========================================================================
ESTÉTICA · segunda pasada del 25-sep-2026 (Inicio, Salud, Running, Progreso)
La primera pasada fue la pantalla de entrenar. Esta son las otras cuatro, y
ataca lo que de verdad se veia plano al mirarlas en el movil: los grupos de
botones que eligen algo (7 dias / 30 dias, las pestanas de Progreso) y las
tarjetas que se tocan, que no daban ninguna senal de que se pudieran tocar.
Mismas tres reglas que arriba: va al final y solo redefine, todo sale de sus
tokens de color, y quien pide menos movimiento lo tiene al final.
========================================================================== */
/* ---------- 7 · los grupos que eligen algo ----------
Eran cajas planas donde la elegida solo cambiaba de color de fondo. Ahora la
elegida se levanta con el degradado de su marca y su resplandor, y las otras
se hunden un poco al tocarlas. Se ve cual esta puesta sin leerla. */
.pg-r,.pr-periodos button,.pg-tabs a{
transition:transform var(--muelle), box-shadow var(--suave),
background var(--suave), color var(--suave), border-color var(--suave);
-webkit-tap-highlight-color:transparent;
}
.pg-r:active,.pr-periodos button:active,.pg-tabs a:active{transform:scale(.95)}
.pg-r.on,.pr-periodos button.on{
box-shadow:0 6px 18px rgba(var(--pri-rgb),.34);
transform:translateY(-1px);
}
/* Las cinco pestanas: la puesta deja de ser un rectangulo gris y pasa a ser una
pastilla con relieve, como el selector de iOS. */
.pg-tabs{position:relative}
.pg-tabs a.on{
background:linear-gradient(180deg, rgba(var(--pri-rgb),.46), rgba(var(--pri-rgb),.24));
box-shadow:0 3px 12px rgba(var(--pri-rgb),.28), inset 0 1px 0 rgba(255,255,255,.14);
color:var(--texto);font-weight:800;
}
/* ---------- 8 · las tarjetas que se tocan ----------
Salud es una rejilla de tarjetas que llevan a otro sitio, y no lo parecian.
Un brillo arriba (la luz que entra por el borde, como en iOS) y que se hundan
al tocarlas es todo lo que hace falta para que se lean como botones. */
.sa-tarj,.sa-hero,.pg-kpi{
position:relative;overflow:hidden;
transition:transform var(--muelle), box-shadow var(--suave), border-color var(--suave);
-webkit-tap-highlight-color:transparent;
}
.sa-tarj::after,.sa-hero::after,.pg-kpi::after{
content:"";position:absolute;left:0;right:0;top:0;height:52%;pointer-events:none;
background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0));
}
a.sa-tarj:active,a.sa-hero:active{transform:scale(.985)}
a.sa-tarj:hover,a.sa-hero:hover{border-color:rgba(var(--pri-rgb),.42)}
/* El icono de cada tarjeta se levanta un pelo al tocar: el detalle que hace que
parezca que responde y no que solo cambia de pagina. */
.sa-tarj .sa-ico{transition:transform var(--muelle)}
a.sa-tarj:active .sa-ico{transform:scale(1.08) translateY(-1px)}
/* La flecha del bloque grande de Salud se asoma. */
.sa-hero .sa-flecha{transition:transform var(--muelle)}
a.sa-hero:active .sa-flecha{transform:translateX(3px)}
/* ---------- 9 · quien pide menos movimiento, menos movimiento ---------- */
@media (prefers-reduced-motion: reduce){
.pg-r,.pr-periodos button,.pg-tabs a,.sa-tarj,.sa-hero,.pg-kpi,
.sa-tarj .sa-ico,.sa-hero .sa-flecha{
transition-duration:.01ms !important;
}
}
/* ---------- ES / EN, arriba a la derecha (Miguel, 28-sep-2026) ----------
Una pastilla con los dos idiomas y el activo marcado. Va con la misma altura
(44px) que los iconos de al lado para que la fila no baile, y con el mismo
ancho minimo en los dos para que al cambiar de idioma no se muevan de sitio
los botones que tiene detras. */
.idioma-sel{
display:inline-flex;align-items:center;flex:none;height:44px;
border-radius:100px;background:var(--n3);border:1px solid var(--linea);
padding:3px;gap:2px;
}
.idioma-sel a{
min-width:34px;height:36px;padding:0 9px;border-radius:100px;
display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:800;letter-spacing:.4px;
color:var(--texto-3);text-decoration:none;
transition:background var(--t),color var(--t);
}
.idioma-sel a:hover{color:var(--texto)}
.idioma-sel a.on{background:var(--n1);color:var(--texto);box-shadow:0 1px 2px rgba(0,0,0,.18)}
/* En el movil la barra de arriba va justa de sitio: a 390px caben la marca y
cuatro iconos, y este selector es el quinto. Se estrecha en vez de empujar la
marca fuera de la pantalla, que es lo que pasaba al probarlo a 360px. */
@media (max-width:520px){
.idioma-sel{height:40px;padding:2px}
.idioma-sel a{min-width:27px;height:34px;padding:0 5px;font-size:11px}
}
/* El selector cuando NO hay cabecera (login, crear cuenta, recuperar clave).
Flota arriba a la derecha, por encima de la tarjeta, y respeta la muesca del
iPhone con env(safe-area-inset-top): sin eso se mete debajo de la hora. */
.idioma-suelto{
position:absolute;top:calc(14px + env(safe-area-inset-top));
right:calc(14px + env(safe-area-inset-right));z-index:40;
}
/* EL SELECTOR NO PUEDE MOVER NADA DE LO QUE YA HABIA (28-sep).
Al meterlo, la marca de la barra del movil paso de dos lineas
(ENTRENA / CON MIGUEL) a tres, porque a 390 px ya iban justos la marca y
cuatro iconos. Miguel pidio el ingles SIN que cambie nada del espanol, y
una marca partida en tres es un cambio. Dos arreglos, los dos solo en movil:
1. La marca no se parte. En produccion ya salia en dos lineas, asi que esto
no cambia como se ve hoy: solo impide que se rompa al apretarla.
2. En el movil el selector ensena UNA sola opcion, la que NO estas usando.
Es un toque igual (le das y cambias) y ocupa la mitad. En el ordenador
sobra sitio y se siguen viendo las dos, que se lee mejor. */
@media (max-width:520px){
/* La barra ya iba llena: a 390 px le sobraban 16 px con la marca y cuatro
iconos. Meter un quinto control obliga a sacar sitio de algun sitio, y el
sitio menos danino son los huecos: 12 px pasan a 8 y el margen lateral de
16 a 12. Son 28 px y con eso entra el selector sin que la pagina se pueda
mover en horizontal, que es lo que pasaba al probarlo a 360 y a 390.
Medido con el navegador a 320, 360, 390 y 430. */
.mbar{gap:8px;padding:14px 12px}
.mbar .marca span{white-space:nowrap}
.mbar .idioma-sel{border:0;background:none;padding:0}
.mbar .idioma-sel a.on{display:none}
.mbar .idioma-sel a{
min-width:34px;height:34px;padding:0;font-size:11.5px;
background:var(--n3);border:1px solid var(--linea);border-radius:50%;
}
.mbar .icono-btn{width:40px;height:40px}
}
/* A 320 px (iPhone SE y el movil pequeno de siempre) la barra se sale 23 px y
el icono de perfil queda fuera, asi que la pagina se puede mover en
horizontal entera. Medido el 9-oct-2026 en Salud, Perfil y Vincular: las
tres con 23 px de desborde, Inicio no porque no lleva esta cabecera.
Lo que se va es el TEXTO de la marca, no el logo: el logo sigue llevando a
Inicio y se reconoce igual, mientras que quitar un icono esconde una
funcion. */
@media (max-width:359px){
.mbar .marca span{display:none}
.mbar{gap:7px;padding:14px 10px}
}
/* Los dos nombres de una biserie, escritos a mano. Sin esto los input salen
blancos y cuadrados dentro del aviso ambar: un campo nuevo sin su CSS es el
fallo que me comi el 30-sep con el telefono de las guias. Miguel, 1-oct-2026. */
.bs-nombres{display:flex;align-items:center;gap:6px;margin:6px 0 4px;flex-wrap:nowrap}
.bs-nombres input[type=text]{flex:1 1 0;min-width:0;padding:7px 9px;font-size:12.5px;
font-family:inherit;color:var(--texto-1);background:var(--fondo-2,rgba(127,127,127,.06));
border:1px solid rgba(214,160,20,.45);border-radius:9px;outline:none;
transition:border-color .15s,box-shadow .15s}
.bs-nombres input[type=text]::placeholder{color:var(--texto-3);opacity:.75}
.bs-nombres input[type=text]:focus{border-color:#B4870F;
box-shadow:0 0 0 3px rgba(214,160,20,.16)}
.bs-mas{flex:0 0 auto;font-weight:800;font-size:13px;color:#B4870F;opacity:.8}
@media (max-width:420px){
.bs-nombres{flex-wrap:wrap}
.bs-nombres input[type=text]{flex:1 1 100%}
.bs-mas{display:none}
}
.bs-no{display:inline-block;margin-top:4px;padding:5px 10px;font:inherit;font-size:11.5px;
font-weight:600;color:var(--texto-3);background:transparent;cursor:pointer;
border:1px solid var(--borde,rgba(127,127,127,.3));border-radius:999px;
transition:color .15s,border-color .15s}
.bs-no:hover{color:var(--texto-1);border-color:var(--texto-3)}
/* ============================================================
"¿Cuánto es eso?" — raciones en gramos y biblioteca de comidas.
Miguel, 1-oct-2026: "yo no cuento calorias pero se que al principio
ayuda... estimaciones de cuantos gramos de cada cosa".
============================================================ */
.gr-intro{margin-bottom:14px}
.gr-intro p{margin:0 0 8px;font-size:14px;line-height:1.55;color:var(--texto-2)}
.gr-intro p:last-child{margin-bottom:0}
.gr-frase{font-size:17px !important;font-weight:700;color:var(--texto-1) !important;
line-height:1.35 !important}
.gr-aviso{font-size:12.5px !important;color:var(--texto-3) !important}
.gr-calc{margin-bottom:16px}
.gr-fila{display:flex;gap:10px;margin-bottom:12px}
.gr-campo{flex:1 1 auto;min-width:0;display:block}
.gr-campo.gr-corto{flex:0 0 96px}
.gr-campo>span{display:block;font-size:11.5px;font-weight:700;color:var(--texto-3);
margin-bottom:5px;letter-spacing:.02em}
.gr-campo select,.gr-campo input{width:100%;box-sizing:border-box;padding:10px 11px;
font:inherit;font-size:14px;color:var(--texto-1);
background:var(--fondo-2,rgba(127,127,127,.06));
border:1px solid var(--borde,rgba(127,127,127,.3));border-radius:11px;outline:none;
transition:border-color .15s,box-shadow .15s}
.gr-campo select:focus,.gr-campo input:focus{border-color:var(--primario);
box-shadow:0 0 0 3px rgba(17,62,176,.15)}
.gr-resultado{display:flex;gap:12px;align-items:center;
padding:12px;border-radius:13px;background:var(--fondo-2,rgba(127,127,127,.06))}
.gr-foto{flex:0 0 76px;width:76px;height:76px;object-fit:cover;border-radius:11px}
.gr-datos{min-width:0;flex:1 1 auto}
.gr-racion b{font-size:21px;font-weight:800;color:var(--texto-1);line-height:1.1}
.gr-racion span{display:block;font-size:12.5px;color:var(--texto-3);margin-top:1px}
.gr-macros{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:7px}
.gr-macros span{font-size:12px;color:var(--texto-3);white-space:nowrap}
.gr-macros b{color:var(--texto-1);font-weight:700}
.gr-crudo{margin:8px 0 0;font-size:11.5px;line-height:1.45;color:var(--texto-3)}
.gr-btn{width:100%;margin-top:11px;padding:10px;font:inherit;font-size:13px;
font-weight:700;color:var(--primario);background:transparent;cursor:pointer;
border:1px solid var(--primario);border-radius:11px;transition:background .15s,color .15s}
.gr-btn:hover{background:var(--primario);color:#fff}
.gr-grupo{margin-bottom:12px}
.gr-punto{display:inline-block;width:9px;height:9px;border-radius:50%;
margin-right:7px;vertical-align:middle}
.gr-lista{list-style:none;margin:0;padding:0}
.gr-lista li{display:flex;align-items:center;gap:11px;padding:9px 0;
border-top:1px solid var(--borde,rgba(127,127,127,.18))}
.gr-lista li:first-child{border-top:0}
.gr-min{flex:0 0 44px;width:44px;height:44px;object-fit:cover;border-radius:10px}
.gr-nom{font-size:14px;font-weight:600;color:var(--texto-1);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-med{font-size:12px;color:var(--texto-3);margin-top:1px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-kcal{flex:0 0 auto;font-size:15px;font-weight:800;color:var(--texto-1);text-align:right}
.gr-kcal span{display:block;font-size:10.5px;font-weight:600;color:var(--texto-3)}
.gr-pie{margin:4px 0 0;font-size:11.5px;line-height:1.5;color:var(--texto-3)}
@media (max-width:360px){
.gr-fila{flex-wrap:wrap}
.gr-campo.gr-corto{flex:1 1 100%}
}
/* ------------------------------------------------------------------ TEST DE RM
Miguel, 6-oct-2026: quiere que en la semana de test el ejercicio del test
"se le marque de color amarillo" y que al entrar le salga SU protocolo, "de
forma que se entienda y se vea visual para que sepa como se hace".
El amarillo es el suyo, el de su propia hoja de metodologia. Y convive con el
azul del resto a proposito: su regla es "amarillo = ejercicios del test, azul
= entrenamiento normal", porque test y entreno van en la MISMA sesion. */
:root{ --test-rm:#E8A838; --test-rm-rgb:232,168,56; --test-rm-tinta:#4A3410;
--test-rm-texto:#E8A838; }
/* OJO CON LOS DOS AMARILLOS, y por que son dos (9-oct-2026).
`--test-rm` es el RELLENO: el fondo de la chapa, el borde de la tarjeta, las
barras de la escalera. Ahi el amarillo va encima de texto oscuro y se lee
perfecto en los tres temas.
`--test-rm-texto` es el amarillo cuando es LETRA sobre el fondo de la
tarjeta. No pueden ser el mismo: medido, #E8A838 sobre el blanco roto del
tema claro (#F7F9FC) da 1,97 de contraste, o sea ilegible, mientras que en
oscuro da 7,82 y en noche 9,33. En claro se usa un ambar tostado que da 5,45.
Y ANTES NO SE APLICABA NINGUNA VARIANTE: los dos bloques que habia miraban
`data-theme`, y esta app cambia de tema con `data-tema` (claro / noche). O
sea que eran codigo muerto y en los tres temas salia el mismo color. */
:root[data-tema="claro"]{ --test-rm-texto:#8A5D12; }
:root[data-tema="noche"]{ --test-rm:#F0B64A; --test-rm-rgb:240,182,74;
--test-rm-tinta:#2B1D04; --test-rm-texto:#F0B64A; }
.ej.test-rm{border-color:rgba(var(--test-rm-rgb),.55);
background:linear-gradient(rgba(var(--test-rm-rgb),.07),rgba(var(--test-rm-rgb),.07)),var(--n2)}
.ej.test-rm.abierto{border-color:var(--test-rm);box-shadow:0 0 0 1px rgba(var(--test-rm-rgb),.35)}
/* La chapa que lo canta en la tapa del ejercicio, sin tener que abrirlo. */
/* LA CHAPA SE CORTABA Y SALIA "TEST DE FUERZ" (6-oct-2026). Medido en su app a 390 px:
el del titulo mide 104 px con overflow:hidden y la chapa media 112. El texto largo
se ha bajado al , que parte en dos lineas, y aqui se deja la palabra corta.
El overflow visible es el cinturon: si algun dia el nombre del ejercicio empuja, la
chapa se sale pero NO se corta a medias, que es lo que no se entiende. */
.ej-chapa-test{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:999px;
background:var(--test-rm);color:#2B1D04;font-size:11px;font-weight:800;letter-spacing:.04em;
text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.ej.test-rm .ej-tit b{overflow:visible}
/* El protocolo, lo que ve al abrir el ejercicio. */
.ej-testrm{margin:10px 0 0;padding:12px 13px;border-radius:12px;
background:rgba(var(--test-rm-rgb),.13);border:1px solid rgba(var(--test-rm-rgb),.45)}
.ej-testrm h4{margin:0 0 2px;font-size:14.5px;font-weight:800;color:var(--texto)}
.ej-testrm .trm-sub{margin:0 0 10px;font-size:12.5px;line-height:1.45;color:var(--texto-2)}
.ej-testrm ol{margin:0 0 10px;padding-left:18px}
.ej-testrm ol li{font-size:13px;line-height:1.5;color:var(--texto);margin:0 0 3px}
.trm-series{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.trm-s{flex:1 1 56px;min-width:56px;text-align:center;padding:7px 4px;border-radius:9px;
background:var(--n1);border:1px solid rgba(var(--test-rm-rgb),.38)}
.trm-s b{display:block;font-size:12px;font-weight:800;color:var(--texto-2);letter-spacing:.04em}
.trm-s .pc{display:block;font-size:17px;font-weight:800;color:var(--texto);line-height:1.2}
.trm-s .rp{display:block;font-size:11.5px;color:var(--texto-2)}
.trm-s .ds{display:block;margin-top:2px;font-size:11px;color:var(--texto-3)}
/* EL TEST DE RM, DIBUJADO (9-oct-2026). Miguel mando una foto de su lamina y
pidio *"ponlo en version mejorada, NO fotografia"*. Asi que no hay imagen
ninguna: la escalera de porcentajes son cinco barras de CSS cuya altura ES
el porcentaje, y el icono de cada motivo esta dibujado con bordes. Pesa
cero, se ve nitido en cualquier pantalla y cambia de color solo con el tema.
El amarillo es el suyo, el mismo con el que ya se marca un ejercicio de test
(--test-rm): asi la persona ata el recuadro con la tarjeta amarilla de la
lista sin que nadie se lo explique. */
.trm-cab{display:flex;align-items:center;gap:8px;margin:0 0 5px}
.trm-chapa{flex:none;padding:3px 9px;border-radius:999px;font-size:10.5px;
font-weight:800;letter-spacing:.09em;text-transform:uppercase;
background:var(--test-rm);color:var(--test-rm-tinta)}
.ej-testrm .trm-sub b{font-weight:800;color:var(--texto)}
/* Los cuatro motivos. En dos columnas: a una sola se hace una lista larga y
deja de leerse de un vistazo, que es justo lo que tiene que hacer. */
.trm-para{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px 10px;margin:0 0 12px}
.trm-pq{display:flex;align-items:center;gap:7px;min-width:0;font-size:11.5px;
line-height:1.3;color:var(--texto-2)}
/* Los cuatro iconos son SVG a mano, no una fuente ni una imagen: asi son
nitidos en cualquier pantalla, pesan cero y cogen el color del tema solos. */
.trm-pq svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--test-rm-texto);
stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* La escalera: cinco columnas iguales y la barra con la altura del %. */
.trm-escalera{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;
margin:0 0 7px;align-items:end}
.ej-testrm .trm-s{display:flex;flex-direction:column;align-items:center;gap:3px;
min-width:0;padding:7px 2px 8px;border-radius:9px;
border:1px solid var(--borde);background:var(--n2);text-align:center}
.ej-testrm .trm-s.alta{border-color:rgba(var(--test-rm-rgb),.6);
background:linear-gradient(rgba(var(--test-rm-rgb),.10),rgba(var(--test-rm-rgb),.10)),var(--n2)}
.ej-testrm .trm-s .pc{font-size:15px;font-weight:800;color:var(--texto);line-height:1}
.ej-testrm .trm-s .pc i{font-style:normal;font-size:9.5px;font-weight:700;
color:var(--texto-3);margin-left:1px}
.ej-testrm .trm-s .palo{display:flex;align-items:flex-end;justify-content:center;
width:100%;height:42px;margin:2px 0 3px}
.ej-testrm .trm-s .palo b{display:block;width:11px;border-radius:3px 3px 0 0;min-height:4px;
background:linear-gradient(var(--test-rm),rgba(var(--test-rm-rgb),.45))}
.ej-testrm .trm-s .et{font-size:11px;font-weight:800;color:var(--test-rm-texto);letter-spacing:.05em}
.ej-testrm .trm-s .rp{font-size:10.5px;color:var(--texto-2);line-height:1.2}
.ej-testrm .trm-s .ds{font-size:10px;color:var(--texto-3);line-height:1.2}
.ej-testrm .trm-nota{margin:0 0 10px;font-size:11.5px;line-height:1.45;color:var(--texto-3)}
/* En pantallas muy estrechas (320 px) cinco columnas dejan 48 px y "8-10 reps"
se parte en tres lineas. Ahi pasan a dos filas, que sigue leyendose como una
escalera porque las barras mandan. */
@media (max-width:359px){
.trm-escalera{grid-template-columns:repeat(3,minmax(0,1fr))}
.trm-para{grid-template-columns:minmax(0,1fr)}
}
.ej-testrm .trm-pie{margin:0;font-size:12px;line-height:1.5;color:var(--texto-2)}
/* ===== ¿Cuánto necesitas tú? · los macros del día ==========================
Rediseñada el 8-oct-2026 con la línea de las maquetas de Miguel.
La regla de esta pantalla: NO inventa nada nuevo. El aro es el mismo de
"Construye tu plato", los colores son los mismos (--nt1..--nt4) y las
tarjetas, las chapas y el botón son los de siempre. Lo único propio es el
relleno del aro, que aquí se pinta desde el servidor en vez de con JS.
Todo con sus variables, para que valga en sus tres temas. */
.mc-res{scroll-margin-top:104px}
/* --- los colores de los macros: LOS DEL PLATO, no otros --- */
:root{
--mc-proteina:var(--nt2, #5B92FF);
--mc-grasa:var(--nt4, #E5A44C);
--mc-hidratos:var(--nt1, #3B63FF);
}
/* --- el aro, calcado del plato para que las dos pantallas hablen igual --- */
.mc-plato{
position:relative; width:208px; height:208px; margin:2px auto 16px;
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);
}
.mc-aro{
position:absolute; inset:9px; border-radius:50%;
box-shadow:inset 0 0 0 1px var(--linea);
pointer-events:none;
}
.mc-relleno{
position:absolute; inset:20px; border-radius:50%;
-webkit-mask:radial-gradient(circle, transparent 60%, #000 61%);
mask:radial-gradient(circle, transparent 60%, #000 61%);
}
.mc-centro{
position:absolute; inset:0; display:grid; place-content:center; gap:2px;
text-align:center; pointer-events:none;
}
.mc-centro b{
font-size:36px; font-weight:700; line-height:1; letter-spacing:-.02em;
font-variant-numeric:tabular-nums; color:var(--texto);
}
.mc-centro span{font-size:11.5px; color:var(--texto-3)}
.mc-res-pie{
margin:0 0 16px; text-align:center; font-size:13px; line-height:1.5;
color:var(--texto-2);
}
.mc-res-pie b{color:var(--texto); font-weight:600}
/* --- una fila por macro: punto de color, gramos y barra --- */
.mc-macros{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.mc-macros li{display:grid; gap:6px}
.mc-m-cab{display:flex; align-items:center; gap:8px; font-size:14px}
.mc-m-cab b{color:var(--texto); font-weight:600}
.mc-m-cab em{
margin-left:auto; font-style:normal; color:var(--texto);
font-weight:700; font-variant-numeric:tabular-nums;
}
.mc-m-cab em s{text-decoration:none; color:var(--texto-3); font-weight:500}
.mc-punto{width:9px; height:9px; border-radius:50%; flex:none}
.mc-m-proteina .mc-punto{background:var(--mc-proteina)}
.mc-m-grasa .mc-punto{background:var(--mc-grasa)}
.mc-m-hidratos .mc-punto{background:var(--mc-hidratos)}
.mc-pista{
display:block; height:7px; border-radius:99px; background:var(--n2);
box-shadow:inset 0 0 0 1px var(--linea); overflow:hidden;
}
.mc-pista i{display:block; height:100%; width:calc(var(--pct) * 1%); border-radius:99px}
.mc-m-proteina .mc-pista i{background:var(--mc-proteina)}
.mc-m-grasa .mc-pista i{background:var(--mc-grasa)}
.mc-m-hidratos .mc-pista i{background:var(--mc-hidratos)}
.mc-m-pie{font-size:12px; color:var(--texto-3)}
/* --- en cada comida --- */
.mc-comida-cab{display:flex; align-items:flex-start; gap:12px; margin-bottom:12px}
.mc-comida-p{margin:2px 0 0; font-size:13px; color:var(--texto-2)}
.mc-comida-lista{list-style:none; margin:0; padding:0; display:grid; gap:1px;
background:var(--linea); border-radius:12px; overflow:hidden}
.mc-comida-lista li{
display:flex; align-items:center; justify-content:space-between;
gap:12px; padding:12px 14px; background:var(--n2);
}
.mc-comida-lista b{font-weight:600; color:var(--texto); font-size:14px}
.mc-comida-lista span{
font-weight:700; color:var(--texto); font-size:15px;
font-variant-numeric:tabular-nums;
}
/* --- el icono dentro de su círculo, como en sus maquetas --- */
.mc-ico{
flex:none; display:grid; place-items:center;
width:40px; height:40px; border-radius:50%;
background:rgba(var(--pri-rgb), .18);
box-shadow:inset 0 0 0 1px rgba(var(--pri-rgb), .40);
}
.mc-ico .ic-m{width:21px; height:21px; background:var(--azul-txt)}
.mc-ir{margin:4px 0 18px}
.mc-ir .ic-m{--t:17px; margin-left:8px}
.mc-nota p{margin:0 0 10px; font-size:13.5px; line-height:1.55; color:var(--texto-2)}
.mc-nota p:last-child{margin-bottom:0}
.mc-nota b{color:var(--texto)}
.mc-nota-ojo{
padding:11px 13px; border-radius:12px; background:var(--n2);
box-shadow:inset 0 0 0 1px var(--linea); color:var(--texto-3) !important;
}
.mc-aviso{
background:rgba(255,159,10,.12); border:1px solid var(--aviso);
border-radius:14px; padding:12px 14px; margin:0 0 14px;
font-size:14px; color:var(--texto);
}
/* --- el formulario --- */
.mc-form-h{margin:26px 0 12px; font-size:17px}
.mc-campos{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:6px}
.mc-campo{
margin:0;
display:grid; justify-items:center; gap:6px; padding:14px 8px 12px;
border-radius:16px; background:var(--n2);
box-shadow:inset 0 0 0 1px var(--linea);
cursor:text;
}
.mc-campo .mc-ico{width:36px; height:36px}
.mc-campo .mc-ico .ic-m{width:19px; height:19px}
.mc-campo-t{font-size:12px; color:var(--texto-2); font-weight:600}
.mc-campo-c{display:flex; align-items:baseline; gap:3px}
.mc-campo input{
width:3.4em; min-width:0; border:0; background:transparent; padding:0;
text-align:right; font-size:21px; font-weight:700; color:var(--texto);
font-variant-numeric:tabular-nums; font-family:inherit;
}
.mc-campo input:focus{outline:none}
.mc-campo:focus-within{box-shadow:inset 0 0 0 1.5px var(--primario)}
.mc-campo input::-webkit-outer-spin-button,
.mc-campo input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.mc-campo input[type=number]{-moz-appearance:textfield; appearance:textfield}
.mc-campo em{font-style:normal; font-size:12px; color:var(--texto-3)}
.mc-grupo{border:0; padding:0; margin:20px 0 0; min-width:0}
.mc-grupo legend{
padding:0; margin-bottom:10px; font-size:13px; font-weight:700;
letter-spacing:.03em; text-transform:uppercase; color:var(--texto-3);
}
/* chapas: la elegida en azul sólido, como en sus maquetas */
.mc-chapas{display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start}
.mc-chapa{min-width:0; margin:0}
.mc-chapa input{position:absolute; opacity:0; width:0; height:0}
.mc-chapa span{
display:block; text-align:center; padding:13px 10px; border-radius:99px;
background:var(--n2); box-shadow:inset 0 0 0 1px var(--linea);
color:var(--texto-2); font-size:15px; font-weight:600; cursor:pointer;
transition:background .18s, color .18s, box-shadow .18s;
}
.mc-chapa input:checked + span{
background:var(--primario); color:#fff; box-shadow:0 8px 22px -12px var(--primario);
}
.mc-chapa input:focus-visible + span{outline:2px solid var(--primario); outline-offset:2px}
/* filas que se eligen, con su tic a la derecha */
.mc-lista{display:grid; gap:1px; background:var(--linea);
border-radius:16px; overflow:hidden}
.mc-opcion{
margin:0;
display:flex; align-items:center; gap:12px; padding:13px 14px;
background:var(--n2); cursor:pointer; position:relative;
transition:background .18s;
}
.mc-opcion input{position:absolute; opacity:0; width:0; height:0}
.mc-opcion-cuerpo{min-width:0; display:grid; gap:1px}
.mc-opcion-t{font-size:15px; font-weight:600; color:var(--texto)}
.mc-opcion-p{font-size:12.5px; color:var(--texto-3)}
.mc-tic{
flex:none; width:22px; height:22px; border-radius:50%;
box-shadow:inset 0 0 0 1.5px var(--linea-fuerte);
position:relative; transition:box-shadow .18s, background .18s;
}
.mc-tic::after{
content:""; position:absolute; left:7px; top:4.5px;
width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0;
transform:rotate(45deg) scale(.4); opacity:0;
transition:transform .18s, opacity .18s;
}
.mc-opcion input:checked ~ .mc-tic{background:var(--primario); box-shadow:inset 0 0 0 1.5px var(--primario)}
.mc-opcion input:checked ~ .mc-tic::after{transform:rotate(45deg) scale(1); opacity:1}
.mc-opcion:has(input:checked){background:rgba(var(--pri-rgb), .10)}
.mc-opcion:has(input:focus-visible){outline:2px solid var(--primario); outline-offset:-2px}
.mc-btn{margin-top:22px}
/* En pantallas muy estrechas los tres campos no caben en una fila. */
@media (max-width:359px){
.mc-campos{grid-template-columns:repeat(2, 1fr)}
.mc-campos .mc-campo:last-child{grid-column:1/-1}
}
/* ===== PIEZAS DEL ESTILO DE SUS MAQUETAS (8-oct-2026) ======================
Miguel mandó 24 maquetas y pidió que sacara el patrón y lo aplicara yo a
todo, en vez de diseñar pantalla a pantalla. Esto son esas piezas, para que
cada pantalla las use y no se escriba el mismo CSS veinte veces.
El patrón, con sus maquetas delante:
· una fila es una tarjeta con su icono a la izquierda y su control a la derecha
· el icono vive DENTRO de un cuadrado redondeado (en Nutrición, un círculo)
· lo que está vacío lleva su dibujo grande y una explicación, no una frase seca
OJO con dos cosas de esta casa, que ya me costaron tiempo:
1. La variable del color es --primario. --pri NO existe (pero --pri-rgb sí,
y eso despista).
2. .ic-m pinta el icono CON su background y una máscara, así que el fondo del
círculo va SIEMPRE en el elemento que lo envuelve, nunca en el icono. */
/* --- el icono en su cuadro --- */
.fx-ico{
flex:none; display:grid; place-items:center;
width:44px; height:44px; border-radius:13px;
background:rgba(var(--pri-rgb), .16);
box-shadow:inset 0 0 0 1px rgba(var(--pri-rgb), .34);
}
.fx-ico .ic-m{width:22px; height:22px; background:var(--azul-txt)}
.fx-ico.redondo{border-radius:50%}
.fx-ico.chico{width:38px; height:38px; border-radius:11px}
.fx-ico.chico .ic-m{width:19px; height:19px}
/* --- una fila: icono, cuerpo y lo que vaya a la derecha --- */
.fx-fila{
display:flex; align-items:center; gap:13px; margin:0 0 10px;
padding:14px 15px; border-radius:17px; background:var(--n2);
box-shadow:inset 0 0 0 1px var(--linea);
color:inherit; text-decoration:none;
}
.fx-fila:last-child{margin-bottom:0}
.fx-fila-cuerpo{min-width:0; flex:1}
.fx-fila-cuerpo b{display:block; font-size:15.5px; font-weight:600; color:var(--texto); line-height:1.3}
.fx-fila-cuerpo small{
display:block; margin-top:3px; font-size:13px; line-height:1.45;
color:var(--texto-3);
}
.fx-fila-cuerpo .fx-rotulo{
display:block; font-size:11.5px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--azul-txt); margin-bottom:3px;
}
a.fx-fila:active{background:var(--n3)}
/* --- el interruptor dibujado de sus maquetas --- */
.fx-sw{position:relative; flex:none; width:52px; height:30px}
.fx-sw input{position:absolute; opacity:0; width:0; height:0}
.fx-sw i{
display:block; width:52px; height:30px; border-radius:99px;
background:var(--n3); box-shadow:inset 0 0 0 1px var(--linea-fuerte);
transition:background .2s, box-shadow .2s; cursor:pointer;
}
.fx-sw i::after{
content:""; position:absolute; top:4px; left:4px;
width:22px; height:22px; border-radius:50%; background:var(--texto-3);
transition:transform .2s cubic-bezier(.16,1,.3,1), background .2s;
}
.fx-sw input:checked + i{
background:var(--primario);
box-shadow:inset 0 0 0 1px var(--primario), 0 8px 20px -12px var(--primario);
}
.fx-sw input:checked + i::after{transform:translateX(22px); background:#fff}
.fx-sw input:focus-visible + i{outline:2px solid var(--primario); outline-offset:2px}
/* --- lo que está vacío: su dibujo y una explicación --- */
.fx-vacio{
display:grid; justify-items:center; text-align:center; gap:4px;
padding:34px 18px; border-radius:20px; background:var(--n2);
box-shadow:inset 0 0 0 1px var(--linea);
}
.fx-vacio .fx-ico{width:68px; height:68px; border-radius:50%; margin-bottom:8px}
.fx-vacio .fx-ico .ic-m{width:32px; height:32px}
.fx-vacio b{font-size:18px; font-weight:700; color:var(--texto)}
.fx-vacio p{margin:0; max-width:30ch; font-size:14px; line-height:1.55; color:var(--texto-2)}
/* --- chapas con su cuenta al lado, como en "Mis archivos" --- */
.fx-chapas{display:flex; gap:9px; overflow-x:auto; margin:0 0 16px;
padding-bottom:2px; scrollbar-width:none}
.fx-chapas::-webkit-scrollbar{display:none}
.fx-chapa{
flex:none; display:inline-flex; align-items:center; gap:7px;
padding:10px 17px; border-radius:99px; background:var(--n2);
box-shadow:inset 0 0 0 1px var(--linea);
color:var(--texto-2); font-size:14.5px; font-weight:600; text-decoration:none;
transition:background .18s, color .18s, box-shadow .18s;
}
.fx-chapa u{text-decoration:none; opacity:.6; font-weight:700}
.fx-chapa.on{
background:var(--primario); color:#fff;
box-shadow:0 10px 24px -14px var(--primario);
}
.fx-chapa.on u{opacity:.75}
/* El check-in, con la maqueta de Miguel (8-oct): cada pregunta en su tarjeta,
con el icono en su cuadro y la repregunta debajo del titulo. */
.cs-cab{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px}
.cs-cab .cs-tit{margin:1px 0 0}
.cs-sub{margin:3px 0 0; font-size:13px; line-height:1.45; color:var(--texto-3)}
.cs-cuenta{margin:6px 0 0; text-align:right; font-size:12px; color:var(--texto-3)}
/* La cabecera de tarjeta de sus maquetas: icono en su cuadro, rótulo pequeño
en mayúsculas y el titular debajo. */
.mg-cabt{display:flex; align-items:flex-start; gap:12px; margin-bottom:12px}
.mg-rot{display:block; font-size:11.5px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--azul-txt)}
.mg-tt{display:block; margin-top:3px; font-size:17px; font-weight:700;
line-height:1.3; color:var(--texto)}
/* Alimentación con la maqueta de Miguel (8-oct). */
.al-menu{align-items:center; gap:13px}
.al-menu small{display:block; margin-top:3px; font-size:13px; line-height:1.45; opacity:.85}
.al-menu .fx-ico{background:rgba(255,255,255,.17); box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.al-menu .fx-ico .ic-m{background:#fff}
.al-cab{display:flex; align-items:center; gap:12px}
.al-cab .min-w-0{flex:1}
.al-pie{margin:2px 0 0; font-size:12.5px; color:var(--texto-3)}
/* La barra de esfuerzo de la revisión, con la maqueta de Miguel (8-oct): ancha
y con el 1 al 10 debajo, marcando el que está elegido. */
.rv-barra{width:100%; display:block}
.rv-escala{display:flex; justify-content:space-between; margin:8px 0 2px}
.rv-escala span{
width:26px; height:26px; display:grid; place-items:center; border-radius:50%;
font-size:13px; color:var(--texto-3); font-variant-numeric:tabular-nums;
}
.rv-escala span.on{
color:var(--texto); font-weight:700;
box-shadow:inset 0 0 0 1.5px var(--primario);
background:rgba(var(--pri-rgb), .14);
}
/* ---------------------------------------------------------------------------
PERFIL con la maqueta de Miguel (8-oct-2026, imagen 14 de las 24).
Foto grande, botones con icono, temas como pildoras y la hora de Noche
como una fila. Va al final a proposito: pisa lo de arriba sin tocarlo.
--------------------------------------------------------------------------- */
.pf-cab{gap:18px; margin-bottom:16px}
.pf-foto{width:92px; height:92px; font-size:34px}
.pf-camara{width:31px; height:31px; right:0; bottom:0}
.pf-camara svg{width:16px; height:16px}
.pf-cab h1{font-size:25px; line-height:1.15}
.pf-bico{flex:none; width:19px; height:19px; margin-right:9px}
.pf-foto-btns .btn{min-height:52px; border-radius:15px; font-size:14.5px}
.pf-sub{margin:-4px 0 12px; font-size:13.5px; line-height:1.5; color:var(--texto-2)}
/* Una fila informativa: el icono en su circulo y el texto al lado. Es la
misma pieza que .fx-fila pero sin ser pulsable, asi que no lleva flecha. */
.pf-fila-info{
display:flex; align-items:flex-start; gap:13px;
padding:14px 15px; border-radius:17px; background:var(--n2);
box-shadow:inset 0 0 0 1px var(--linea);
}
.pf-fila-info b{display:block; font-size:15px; font-weight:600; color:var(--texto); line-height:1.35}
.pf-fila-info small{display:block; margin-top:4px; font-size:12.5px; line-height:1.5; color:var(--texto-3)}
.pf-fila-info .fx-ico{margin-top:1px}
/* Los tres temas. El elegido en azul solido con su brillo, como sus chapas. */
.pf-temas{gap:9px; margin-bottom:12px}
.pf-tema{
gap:8px; min-height:50px; border-radius:15px; font-size:14px; font-weight:600;
background:var(--n2); border:1px solid var(--linea); color:var(--texto-2);
}
.pf-tico{flex:none; width:17px; height:17px}
.pf-tema.on{
background:var(--primario); border-color:transparent; color:#fff;
box-shadow:0 10px 24px -14px var(--primario);
}
/* La hora de Noche es una fila normal, no una linea suelta con un borde. */
.pf-auto{margin:0 0 10px; padding:14px 14px; border-top:0; align-items:center; gap:11px}
.pf-auto .fx-fila-cuerpo b{font-size:14.5px}
.pf-auto input[type=time]{
flex:none; width:94px; min-height:42px; text-align:center;
border-radius:12px; font-size:14px; padding:0 6px;
}
.pf-salir{min-height:52px; border-radius:15px; margin-top:4px}
.pf-salir .pf-bico{margin-right:9px}
/* MI MENÚ DEL DÍA con la maqueta de Miguel (8-oct, imagen 15). */
.mn-cab{margin:0 0 16px}
.mn-cab h1{margin:0; font-size:28px; letter-spacing:.01em}
.mn-cab h1::after{
content:""; display:block; width:52px; height:4px; border-radius:99px;
margin:9px 0 0; background:var(--primario);
}
.mn-cab p{margin:12px 0 0; font-size:14.5px; line-height:1.5; color:var(--texto-2)}
.mn-dias{
padding:9px 10px; border-radius:18px; background:var(--n2);
box-shadow:inset 0 0 0 1px var(--linea); margin:0 0 18px;
}
.mn-dias b{flex:1; text-align:center; font-size:16.5px; font-weight:700}
.mn-nav{
width:46px; height:46px; border-radius:50%; flex:none;
background:var(--n3); box-shadow:inset 0 0 0 1px var(--linea);
color:var(--texto-2); font-size:0;
}
.mn-nav svg{width:21px; height:21px}
.mn-nav.on{background:var(--primario); color:#fff; box-shadow:0 10px 24px -14px var(--primario)}
.mn-nav:active{transform:scale(.94)}
.mn-nada{display:grid; justify-items:center; text-align:center; padding:26px 8px 34px}
.mn-dibujo{display:block; width:190px; height:190px}
.mn-dibujo svg{width:100%; height:100%}
.mn-nada p{margin:14px 0 0; max-width:30ch; font-size:15px; line-height:1.6; color:var(--texto-2)}
/* TU ACTIVIDAD con la maqueta de Miguel (8-oct, imagen 2). */
.ac-mas{background:var(--primario); box-shadow:0 10px 22px -14px var(--primario)}
.ac-mas svg{width:19px; height:19px; color:#fff}
.ac-buscar{position:relative; margin:10px 0 4px}
.ac-lupa{
position:absolute; left:14px; top:50%; transform:translateY(-50%);
width:17px; height:17px; background:var(--texto-3); pointer-events:none;
}
.ac-buscar input{padding-left:40px; border-radius:14px; min-height:48px}
/* La escala del 1 al 10. Radios de verdad: un toque y sin teclado. */
.esc10{display:flex; gap:5px; margin:2px 0 6px}
.esc10-op{flex:1 1 0; min-width:0; margin:0; cursor:pointer}
.esc10-op input{position:absolute; opacity:0; width:0; height:0}
.esc10-op span{
display:grid; place-items:center; width:100%; max-width:38px; height:38px;
margin:0 auto; border-radius:50%;
font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;
color:var(--texto-2); background:var(--n2);
box-shadow:inset 0 0 0 1px var(--linea);
transition:background .18s, color .18s, transform .18s;
}
.esc10-op input:checked + span{
background:var(--primario); color:#fff; box-shadow:0 10px 22px -14px var(--primario);
transform:scale(1.06);
}
.esc10-op input:focus-visible + span{outline:2px solid var(--primario); outline-offset:2px}
.esc10-pie{display:flex; justify-content:space-between; margin:0 0 14px;
font-size:12px; color:var(--texto-3)}
/* GRABAR SALIDA con la maqueta de Miguel (8-oct, imagen 10). */
.gr-aviso{display:flex; align-items:center; gap:13px; border-radius:17px;
border-left-width:4px; padding:14px 15px}
.gr-av-txt{flex:1; min-width:0}
.gr-av-ico{flex:none; display:grid; place-items:center; width:42px; height:42px;
border-radius:50%; color:var(--aviso);
background:rgba(var(--aviso-rgb, 229 164 76), .14);
box-shadow:inset 0 0 0 1px rgba(var(--aviso-rgb, 229 164 76), .34)}
.gr-av-ico svg{width:21px; height:21px}
.gr-aviso b{font-size:14.5px; line-height:1.4}
.gr-aviso details{width:100%}
.gr-tipo{padding:5px; border-radius:100px; gap:4px}
.gr-t{display:inline-flex; align-items:center; justify-content:center; gap:7px;
font-size:14px; font-weight:600}
.gr-t svg{flex:none; width:18px; height:18px}
.gr-mapa .gr-senal{display:flex; align-items:center; gap:10px; text-align:left;
padding:12px 14px; border-radius:14px; font-size:13.5px}
.gr-mapa .gr-senal svg{flex:none; width:18px; height:18px}
.gr-tres div + div{box-shadow:inset 1px 0 0 var(--linea)}
.gr-otro{margin-top:4px}
.gr-otro-cab{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.gr-otro-cab p{margin:0; font-size:13.5px; line-height:1.45; color:var(--texto-3)}
.gr-otro .fx-fila{margin:0; padding:15px}
.gr-otro .fx-fila b{font-weight:600}
/* COMPARAR PESOS: el vacío con su dibujo (maqueta de Miguel, 8-oct, imagen 8). */
.cm-vacio{position:relative; text-align:left; padding:20px 16px 18px; overflow:hidden}
.cm-pesa{
position:absolute; right:16px; left:auto; top:16px; width:62px; height:62px; border-radius:50%;
display:grid; place-items:center; background:rgba(var(--pri-rgb), .10);
box-shadow:inset 0 0 0 1px rgba(var(--pri-rgb), .26);
}
.cm-pesa .ic-m{width:28px; height:28px; background:rgba(var(--pri-rgb), .75)}
.cm-dibujo{display:block; width:100%; max-width:330px; margin:6px auto 4px}
.cm-eje{fill:var(--texto-3); font-size:11px; font-weight:600}
.cm-guia{stroke:var(--linea); stroke-width:1; stroke-dasharray:3 5}
.cm-flecha{fill:none; stroke:rgba(var(--pri-rgb), .85); stroke-width:2.2;
stroke-linecap:round; stroke-dasharray:5 5}
.cm-globo rect{fill:var(--n4); stroke:var(--linea-fuerte); stroke-width:1}
.cm-globo text{fill:var(--texto); font-size:13px; font-weight:700; text-anchor:middle}
.cm-globo.on rect{fill:var(--n3); stroke:rgba(var(--pri-rgb), .5)}
.cm-pie{fill:var(--texto-2); font-size:12.5px; font-weight:600; text-anchor:middle}
.cm-vacio .cm-ic{margin:10px 0 10px}
.cm-vacio > b{display:block; font-size:19px; font-weight:700; letter-spacing:-.01em}
.cm-vacio > p{margin:7px 0 16px; max-width:32ch; font-size:14.5px;
line-height:1.55; color:var(--texto-2)}
.cm-volver{margin:0; text-align:left}
.cm-volver b{font-weight:600}
.cm-ic svg{width:22px; height:22px; fill:none; stroke:var(--azul-txt); stroke-width:1.8}
.cm-ic svg rect{fill:var(--azul-txt); stroke:none}
.cm-vb{flex:none; display:grid; place-items:center; width:20px; height:20px}
.cm-vb svg{width:19px; height:19px}
.cm-vb svg rect{fill:var(--azul-txt)}
/* Los emoji del sistema fuera: iconos dibujados (Miguel, 8-oct-2026). */
.ens-i{display:inline-grid; place-items:center; width:17px; height:17px;
margin-right:7px; color:var(--azul-txt)}
.ens-i svg{width:17px; height:17px}
.sc-antena{width:54px; height:54px; margin:0 auto 12px; display:block;
color:var(--azul-txt)}
/* CONTESTAR SOBRE ESTA COSA (9-oct-2026). Miguel: *"que yo pueda contestarles
Y SEPAN A QUE LE CONTESTO"*. El boton va pegado a cada cosa de la ficha, asi
que tiene que ser pequeno y no robarle sitio a lo que se esta mirando. */
.contesta{margin-top:6px}
.contesta > summary{display:inline-flex;align-items:center;gap:5px;cursor:pointer;
font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--azul-txt);
padding:3px 9px;border:1px solid var(--linea);border-radius:999px;
background:rgba(127,140,170,.07);list-style:none;white-space:nowrap}
.contesta > summary::-webkit-details-marker{display:none}
.contesta > summary::before{content:"\21A9";font-size:12px;line-height:1}
.contesta > summary:hover{background:rgba(127,140,170,.14)}
.contesta[open] > summary{background:rgba(127,140,170,.14)}
.contesta-f{display:flex;flex-direction:column;gap:7px;margin-top:9px;
padding:10px;border:1px solid var(--linea);border-radius:12px;
background:rgba(127,140,170,.05);min-width:min(260px,74vw)}
.contesta-a{margin:0;font-size:11.5px;line-height:1.45;color:var(--texto-3)}
.contesta-a b{color:var(--texto-2);font-weight:700}
.contesta-f textarea{width:100%;font-size:13px;line-height:1.45;padding:8px 9px;
resize:vertical}
.contesta-v{font-size:11.5px;color:var(--texto-3);display:flex;
flex-direction:column;gap:4px}
.contesta-v input{font-size:11.5px}
/* El hilo de lo que ya le ha contestado, en su ficha. */
.hilo{display:flex;flex-direction:column;gap:0}
.hilo-f{padding:9px 0;border-top:1px solid var(--linea)}
.hilo-f:first-child{border-top:0}
.hilo-a{display:block;font-size:13px;font-weight:700;line-height:1.35}
.hilo-t{font-size:12.5px;line-height:1.5;color:var(--texto-2);margin:3px 0 0;
overflow-wrap:anywhere}
.hilo-p{font-size:11.5px;color:var(--texto-3);margin-top:4px;display:flex;
gap:8px;flex-wrap:wrap;align-items:center}
/* El boton nativo de fichero sale en ingles y no se traduce: se esconde y se
pincha por la etiqueta, que si es nuestra. */
.contesta-v input[type=file]{position:absolute;width:1px;height:1px;opacity:0;
overflow:hidden;clip:rect(0 0 0 0)}
.contesta-v{position:relative;cursor:pointer}
.contesta-sube{display:inline-block;font-size:11.5px;font-weight:700;
color:var(--azul-txt);padding:6px 10px;border:1px dashed var(--linea);
border-radius:9px;background:rgba(127,140,170,.05);overflow-wrap:anywhere}
.contesta-v:hover .contesta-sube{background:rgba(127,140,170,.12)}
/* EL SOBRE AZUL PARPADEANDO cuando Miguel te ha contestado (el, 9-oct-2026 por
voz: "ponerle como un mensaje azul intermitente y demas como un sobre").
Es distinto del punto verde de siempre a proposito: el punto dice "hay algo
que mirar", el sobre dice "tienes un mensaje suyo sin abrir". */
.solo-lector{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sobre-aviso{position:absolute;top:2px;right:0;width:19px;height:19px;border-radius:7px;
display:grid;place-items:center;background:var(--primario);color:#fff;
box-shadow:0 0 0 2px var(--n1), 0 0 0 0 rgba(var(--pri-rgb),.55);
animation:sobre-late 1.9s ease-in-out infinite}
.sobre-aviso svg{width:12px;height:12px;stroke:#fff;stroke-width:2.1;fill:none}
.sobre-aviso.chico{top:-5px;right:-6px;width:17px;height:17px;border-radius:6px;
box-shadow:0 0 0 2px var(--n2), 0 0 0 0 rgba(var(--pri-rgb),.55)}
.sobre-aviso.chico svg{width:11px;height:11px}
@keyframes sobre-late{
0%,100%{transform:scale(1); box-shadow:0 0 0 2px var(--n1), 0 0 0 0 rgba(var(--pri-rgb),.5)}
50% {transform:scale(1.12);box-shadow:0 0 0 2px var(--n1), 0 0 0 7px rgba(var(--pri-rgb),0)}
}
.btn.acceso-miguel{position:relative}
/* Quien tenga puesto "menos animaciones" en su movil no ve el parpadeo, pero
SIGUE VIENDO EL SOBRE: el aviso no puede depender de la animacion. */
@media (prefers-reduced-motion:reduce){
.sobre-aviso{animation:none}
}
/* La tarjeta de "Miguel te ha contestado" en el inicio, con el sobre delante.
Mismas cajas que el resto del rediseno: tira de color, icono en cuadrado y
el asunto en grande. */
.sobre-card{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;
border-radius:var(--r-m);padding:14px 15px;margin:0 0 14px;
border:1px solid rgba(var(--pri-rgb),.42);
background:linear-gradient(140deg,rgba(var(--pri-rgb),.17),var(--n2) 66%);
transition:var(--t)}
.sobre-card:active{transform:scale(.99)}
.sobre-card-i{flex:0 0 auto;width:42px;height:42px;border-radius:13px;display:grid;
place-items:center;background:var(--primario);color:#fff;
animation:sobre-late 1.9s ease-in-out infinite}
.sobre-card-i svg{width:21px;height:21px;stroke:#fff;stroke-width:2;fill:none}
@media (prefers-reduced-motion:reduce){ .sobre-card-i{animation:none} }
.sobre-card-t{min-width:0;flex:1}
.sobre-card-et{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;color:var(--azul-txt)}
.sobre-card-t b{display:block;font-size:15px;line-height:1.3;margin-top:2px;
overflow-wrap:anywhere}
.sobre-card-t small{display:block;font-size:12.5px;color:var(--texto-2);margin-top:3px;
line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical}
.sobre-card-f{flex:0 0 auto;color:var(--texto-3);font-size:18px}
/* Las respuestas de Miguel, con las mismas cajas que el resto del rediseno
(el, 9-oct-2026 por voz: "con las mismas cajas y dinamicas que hicimos ayer").
El sobre va delante; si esta sin abrir, late y la caja se tine de azul. */
.mg-corr.cajas a{align-items:center;gap:12px;padding:13px 14px;border-radius:var(--r-m);
background:var(--n2)}
.mg-corr.cajas a.nueva{border-color:rgba(var(--pri-rgb),.42);
background:linear-gradient(140deg,rgba(var(--pri-rgb),.15),var(--n2) 66%)}
.mg-sobre{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;
place-items:center;background:rgba(127,140,170,.12);color:var(--texto-2)}
.mg-sobre svg{width:19px;height:19px;stroke:currentColor;stroke-width:2;fill:none}
.mg-sobre.late{background:var(--primario);color:#fff;
animation:sobre-late 1.9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .mg-sobre.late{animation:none} }
/* ==========================================================================
SU SEMANA y LO QUE LE TOCABA LEVANTAR, dentro de la ficha del cliente.
Miguel, 9-oct-2026: tiene que verse con la misma pinta que la app cuando
ella lo rellena, no como una tabla de administrador.
========================================================================== */
.fs-sem{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:8px}
.fs-dia{min-width:0; border:1px solid var(--linea); border-radius:14px;
padding:10px 9px 11px; background:rgba(var(--pri-rgb),.04);
display:flex; flex-direction:column; gap:6px}
.fs-dia .fs-cab{display:flex; align-items:baseline; justify-content:space-between; gap:4px}
.fs-dia .fs-cab b{font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--texto-3)}
.fs-dia .fs-cab i{font-style:normal; font-size:15px; font-weight:800; color:var(--texto-2)}
.fs-dia.hoy{border-color:var(--enfasis); box-shadow:0 0 0 1px var(--enfasis) inset}
.fs-dia.hoy .fs-cab i{color:var(--enfasis)}
.fs-dia.e-entreno{background:rgba(48,209,88,.10); border-color:rgba(48,209,88,.30)}
.fs-dia.e-fallo{background:rgba(255,69,58,.09); border-color:rgba(255,69,58,.28)}
/* Hoy todavia puede entrenar: ambar, no rojo. Rojo es un dia que ya se perdio. */
.fs-dia.e-toca_hoy{background:rgba(255,159,10,.10); border-color:rgba(255,159,10,.30)}
.fs-dia.e-futuro{opacity:.55}
.fs-ent, .fs-falla, .fs-toca{display:block; font-size:12px; font-weight:700;
line-height:1.3; overflow-wrap:anywhere}
.fs-ent{color:var(--ok)}
.fs-falla{color:var(--peligro)}
.fs-toca{color:var(--texto-2)}
.fs-hoy-toca{display:block; font-size:12px; font-weight:700; line-height:1.3;
overflow-wrap:anywhere; color:var(--aviso)}
.fs-dato{display:block; font-size:10.5px; color:var(--texto-3); line-height:1.3}
.fs-dato.ojo{color:var(--aviso); font-weight:700}
.fs-dato.tenue{opacity:.7}
.fs-vida{margin-top:auto; padding-top:6px; border-top:1px solid var(--linea);
display:flex; flex-direction:column; gap:2px}
.fs-vida span{font-size:10.5px; color:var(--texto-2); line-height:1.3;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fs-vida span.ojo{color:var(--aviso)}
.fs-pie{margin:12px 0 0; font-size:12.5px; color:var(--texto-2)}
.fs-pie b{color:var(--texto)}
.fs-pie .tenue{color:var(--texto-3)}
.fs-pesos{display:flex; flex-direction:column; gap:2px}
.fs-ej{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,2fr) auto;
gap:10px; align-items:center; padding:11px 2px; border-bottom:1px solid var(--linea)}
.fs-ej:last-child{border-bottom:0}
.fs-ej.vacio{opacity:.62}
.fs-ej-nom b{font-size:13.5px; font-weight:700; line-height:1.3; overflow-wrap:anywhere}
.fs-et{display:block; font-size:9.5px; font-weight:800; letter-spacing:.1em;
text-transform:uppercase; color:var(--texto-3); margin-bottom:3px}
.fs-pide{font-size:12.5px; color:var(--texto-2)}
.fs-hizo{display:flex; flex-wrap:wrap; gap:5px; align-items:center}
.fs-hizo .fs-et{flex:1 1 100%}
.fs-serie{font-size:12px; font-weight:700; padding:3px 8px; border-radius:999px;
background:rgba(var(--pri-rgb),.12); color:var(--texto-2); white-space:nowrap}
.fs-serie.top{background:rgba(48,209,88,.16); color:var(--ok)}
.fs-faltan{font-size:11px; font-weight:700; color:var(--aviso)}
.fs-nada{font-size:12px; color:var(--texto-3)}
.fs-dif{text-align:right; white-space:nowrap; font-size:12.5px; font-weight:800}
.fs-dif .sube{color:var(--ok)}
.fs-dif .baja{color:var(--peligro)}
.fs-dif .igual{color:var(--texto-3); font-weight:700}
.fs-dif .tenue{color:var(--texto-3); font-weight:600; font-size:11.5px}
@media (max-width:760px){
.fs-sem{grid-template-columns:repeat(4, minmax(0,1fr))}
.fs-ej{grid-template-columns:minmax(0,1fr) auto; gap:4px 10px}
.fs-ej-nom{grid-column:1} .fs-dif{grid-column:2; grid-row:1}
.fs-pide{grid-column:1 / -1} .fs-hizo{grid-column:1 / -1}
}
@media (max-width:420px){
.fs-sem{grid-template-columns:repeat(2, minmax(0,1fr))}
}
/* ---------------------------------------------------------------------------
SU PROGRAMA DENTRO DE LA FICHA (Miguel, 9-oct, punto 4 de los siete).
La fila se ve igual que en su app: foto, nombre y "4x8 - RIR 2". Lo que
cambia es que al tocarla se abre para editarla, sin salir de la ficha.
Se usan y no un panel de JavaScript a proposito: una ficha con 20
ejercicios abiertos a la vez es ilegible, y si el JavaScript falla con un
panel no se puede editar nada, mientras que un se abre siempre.
--------------------------------------------------------------------------- */
.pr-dia{border:1px solid var(--linea); border-radius:var(--r-m); margin-top:10px;
background:var(--n1); overflow:hidden}
.pr-dia > summary{display:flex; align-items:center; gap:10px; cursor:pointer;
padding:12px 14px; font-size:14px; list-style:none;
-webkit-tap-highlight-color:transparent}
.pr-dia > summary::-webkit-details-marker{display:none}
.pr-dia > summary::after{content:""; margin-left:auto; width:9px; height:9px;
border-right:2px solid var(--texto-3); border-bottom:2px solid var(--texto-3);
transform:rotate(45deg); transition:transform var(--t); flex:none}
.pr-dia[open] > summary::after{transform:rotate(-135deg)}
.pr-dia > summary:hover{background:rgba(var(--pri-rgb),.06)}
.pr-cuenta{font-size:11.5px; font-weight:700; color:var(--texto-3);
padding:3px 9px; border-radius:999px; background:var(--n3)}
.pr-ejs{list-style:none; margin:0; padding:0 0 6px}
.pr-ejs > li{border-top:1px solid var(--linea)}
.pr-ej > summary{display:flex; align-items:center; gap:11px; cursor:pointer;
padding:10px 14px; list-style:none; -webkit-tap-highlight-color:transparent}
.pr-ej > summary::-webkit-details-marker{display:none}
.pr-ej > summary:hover{background:rgba(var(--pri-rgb),.06)}
.pr-foto{width:46px; height:46px; border-radius:11px; object-fit:cover; flex:none;
background:var(--n3)}
.pr-foto.vacia{display:block}
.pr-txt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.pr-txt b{font-size:13.5px; font-weight:700; line-height:1.3; overflow-wrap:anywhere}
.pr-txt small{font-size:11.5px; color:var(--texto-3); font-variant-numeric:tabular-nums}
.pr-txt .pr-nota{color:var(--texto-2); overflow:hidden; text-overflow:ellipsis;
white-space:nowrap}
.pr-mus{flex:none; width:30px; height:30px; display:grid; place-items:center}
.pr-mus img{max-width:100%; max-height:100%; opacity:.85}
.pr-lapiz{flex:none; font-size:11px; font-weight:800; letter-spacing:.02em;
color:var(--azul-txt); padding:5px 10px; border-radius:999px;
background:rgba(var(--pri-rgb),.12); white-space:nowrap}
.pr-ej[open] > summary{background:rgba(var(--pri-rgb),.08)}
.pr-ej[open] .pr-lapiz{opacity:.55}
.pr-form{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px;
padding:4px 14px 16px}
.pr-campo{display:flex; flex-direction:column; gap:5px; min-width:0}
.pr-campo.ancho{grid-column:1 / -1}
.pr-campo > span{font-size:9.5px; font-weight:800; letter-spacing:.1em;
text-transform:uppercase; color:var(--texto-3)}
.pr-campo input,.pr-campo textarea{width:100%; min-height:42px; padding:9px 11px;
font:inherit; font-size:13.5px; color:var(--texto); background:var(--n2);
border:1px solid var(--linea); border-radius:11px}
.pr-campo textarea{resize:vertical; line-height:1.5; min-height:76px}
.pr-campo input:focus,.pr-campo textarea:focus{outline:2px solid var(--primario);
outline-offset:-1px; border-color:transparent}
.pr-acciones{grid-column:1 / -1; display:flex; justify-content:flex-end}
.pr-rastro{margin-top:14px; background:transparent}
.pr-rastro-lista{list-style:none; margin:0; padding:0 14px 12px;
display:flex; flex-direction:column; gap:10px}
.pr-rastro-lista li{font-size:12.5px; line-height:1.5; color:var(--texto-2)}
.pr-rastro-lista small{display:block; margin-top:2px; font-size:11px}
@media (max-width:620px){
.pr-form{grid-template-columns:repeat(2, minmax(0,1fr))}
.pr-lapiz{display:none}
}
/* SU GALERIA: las fotos de progreso dentro de la ficha (punto 5), y lo que ya
le dijo de cada video o de cada foto. */
/* 130 y no 150: dentro de la ficha la columna mide 292 px en un movil de 390,
y con 150 solo cabia UNA foto por fila. Una foto de 3x4 a lo ancho entero
ocupa media pantalla cada una y hay que hacer scroll para ver tres. */
.gal-fotos{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr));
gap:14px}
.gal-f{margin:0; display:flex; flex-direction:column; gap:8px; min-width:0}
.gal-f img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:12px;
background:var(--n3); display:block; border:1px solid var(--linea)}
.gal-f figcaption{display:flex; flex-direction:column; gap:4px; min-width:0}
.gal-f figcaption b{font-size:12.5px; font-variant-numeric:tabular-nums}
.gal-f figcaption small{font-size:11px; color:var(--texto-3)}
.gal-nota{font-size:12px; color:var(--texto-2); line-height:1.45; overflow-wrap:anywhere}
/* La caja de contestar pide 260 px de ancho minimo y una columna de la galeria
mide 139 en un movil: se salia 72 px de su celda y no se podia escribir.
Con el formulario abierto, esa foto ocupa la fila entera, que es justo
cuando hace falta el sitio. El `min-width` se baja ademas por si el
navegador no entiende `:has`, para que en el peor caso quede estrecha pero
dentro. */
.gal-f .contesta > summary{white-space:normal; text-align:left}
.gal-f .contesta-f{min-width:0; width:100%}
.gal-fotos > .gal-f:has(.contesta[open]){grid-column:1 / -1}
.gal-fotos > .gal-f:has(.contesta[open]) img{max-width:220px}
.dicho{margin:8px 0 2px; padding:9px 11px; border-radius:11px;
background:rgba(var(--pri-rgb),.09); border-left:3px solid var(--primario)}
.dicho p{margin:0 0 8px; font-size:12.5px; line-height:1.5; color:var(--texto-2);
overflow-wrap:anywhere}
.dicho p:last-child{margin-bottom:0}
.dicho b{color:var(--texto); font-weight:700}
.dicho .tenue{color:var(--texto-3); font-variant-numeric:tabular-nums}
/* Sus dudas, juntas (punto 6). */
.duda-f{padding:12px 0; border-bottom:1px solid var(--linea)}
.duda-f:last-child{border-bottom:0}
.duda-cab{display:flex; align-items:baseline; gap:10px; margin-bottom:5px}
.duda-cab b{font-size:13px; font-weight:700}
.duda-cab .cuando{font-size:11px; color:var(--texto-3); margin-left:auto;
font-variant-numeric:tabular-nums}
.duda-t{margin:0 0 4px; font-size:13.5px; line-height:1.55; color:var(--texto);
overflow-wrap:anywhere}
/* La tabla del test de RM se salia 73 px en moviles de 320: no tiene envoltorio
con scroll como las demas. Asi rueda ella sola y no empuja la pagina. */
@media (max-width:460px){
.gcard .tabla{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
}
/* ---------------------------------------------------------------------------
LAS CUATRO PREGUNTAS NUEVAS DEL TEST DE MACROS (Miguel, 9-oct-2026) y el
interruptor de contar calorias. Todo con las piezas que ya habia (.mc-grupo,
.mc-chapa, .mc-opcion): lo unico nuevo es la bajada de cada grupo, el tic
cuadrado cuando se puede marcar mas de uno, y las dos notas de abajo.
--------------------------------------------------------------------------- */
.mc-grupo-p{margin:-4px 0 10px; font-size:12.5px; line-height:1.5; color:var(--texto-3)}
/* Para elegir un numero (cuantas comidas) no hacen falta dos columnas anchas:
caben todas en una fila y a 320px siguen entrando. */
.mc-chapas.numeros{grid-template-columns:repeat(auto-fit, minmax(54px, 1fr))}
.mc-chapas.numeros span{padding:13px 4px}
/* Donde se puede marcar mas de una cosa, el tic no es redondo: un circulo dice
"elige una" y haria que nadie marcase dos. */
.mc-opcion input[type=checkbox] ~ .mc-tic{border-radius:7px}
/* Y el tic SIEMPRE pegado al borde derecho. La fila es flex y el cuerpo no
crecia, asi que el tic se quedaba donde acabara el texto: en las filas con
dos lineas no se notaba (el texto llegaba al final) y en una fila de una
palabra sola, como "Vegano", el tic aparecia pegado a la palabra y la
columna de tics salia escalonada. */
.mc-opcion-cuerpo{flex:1 1 auto}
/* Cuando el suelo de seguridad muerde, se explica. Un numero que no baja al
elegir "con prisa" y no dice por que parece un fallo. */
.mc-res-freno{
margin:0 0 16px; padding:11px 13px; border-radius:12px;
font-size:12.5px; line-height:1.55; color:var(--texto-2);
background:rgba(var(--pri-rgb), .10);
box-shadow:inset 0 0 0 1px var(--linea);
}
.mc-notas{margin-top:14px}
.mc-notas-l{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.mc-notas-l li{display:grid; gap:3px}
.mc-notas-l b{font-size:14px; color:var(--texto)}
.mc-notas-l span{font-size:13px; line-height:1.55; color:var(--texto-2)}
/* En modo simple el centro del aro lleva gramos, no kilocalorias: la "g" va
pegada al numero y mas pequena, para que el numero siga mandando. */
.mc-centro b i{font-style:normal; font-size:.5em; font-weight:700; margin-left:1px}
/* El interruptor de contar calorias, en Mi nutricion. */
.nt-contar{display:flex; align-items:center; gap:12px; margin-top:14px}
.nt-contar .fx-fila-cuerpo{flex:1 1 auto; min-width:0}
.nt-sw{flex:none; border:0; padding:0; background:none; cursor:pointer;
width:52px; height:30px; border-radius:99px; position:relative;
background:var(--n2); box-shadow:inset 0 0 0 1px var(--linea-fuerte);
transition:background .2s, box-shadow .2s}
.nt-sw::after{content:""; position:absolute; top:4px; left:4px;
width:22px; height:22px; border-radius:50%; background:var(--texto-3);
transition:transform .2s, background .2s}
.nt-sw.on{background:var(--primario); box-shadow:inset 0 0 0 1px var(--primario)}
.nt-sw.on::after{transform:translateX(22px); background:#fff}
/* ===================== RÉCORD DE PESO =====================
Miguel, 10-oct-2026 (nota de voz): "cuando alguien meta un peso mayor que ha
progresado que salga un mensaje de enhorabuena superado tu récord o algo así
y ponga como una estrellita amarilla o algo así en ese peso".
El amarillo es EL MISMO que el del test de RM, no uno nuevo: ese par ya está
medido en los tres temas (claro, oscuro y noche), y el motivo de que sean dos
variables es que un amarillo de relleno como letra sobre fondo claro da 1,97
de contraste. Inventarme aquí otro amarillo es como se acaba teniendo dos
amarillos distintos que no se parecen en el tema de nadie. */
:root{
--rec:var(--test-rm); --rec-txt:var(--test-rm-texto);
--rec-rgb:var(--test-rm-rgb); --rec-tinta:var(--test-rm-tinta);
}
/* La estrella, pegada al peso de esa serie. Se queda puesta para siempre. */
.rec-star{
color:var(--rec-txt);font-size:13px;line-height:1;margin-left:4px;
vertical-align:baseline;
}
/* El aviso de enhorabuena. Flota ARRIBA, como una notificación del móvil, y no
abajo: abajo viven la barra de navegación y el cronómetro del descanso, que
arranca justo en el mismo momento (al guardar una serie de trabajo), así que
los dos avisos se pisaban. Medido en la pantalla de verdad antes de moverlo.
Fijo, para que se vea esté donde esté el scroll: al guardar una serie la
pantalla salta al ejercicio y un cartel dentro del contenido no lo vería
nadie. */
.rec-pop{
position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top));
transform:translateX(-50%);z-index:70;
width:min(360px,calc(100vw - 32px));box-sizing:border-box;
display:flex;gap:12px;align-items:center;
padding:14px 14px;border-radius:var(--r-m,16px);
background:linear-gradient(rgba(var(--rec-rgb),.14),rgba(var(--rec-rgb),.14)),var(--n2);
border:1px solid rgba(var(--rec-rgb),.55);
box-shadow:0 12px 34px rgba(0,0,0,.34);
animation:rec-entra .42s cubic-bezier(.16,1,.3,1) both;
}
.rec-pop .rec-ic{
flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
background:var(--rec);color:var(--rec-tinta);font-size:20px;line-height:1;
animation:rec-pop-ic .5s cubic-bezier(.16,1,.3,1) .1s both;
}
.rec-pop .rec-tx{min-width:0;flex:1}
.rec-pop b{display:block;font-size:14.5px;color:var(--texto);font-weight:700}
.rec-pop small{display:block;font-size:12.5px;color:var(--texto-2);margin-top:2px;line-height:1.35}
.rec-pop .rec-x{
flex:none;width:30px;height:30px;min-height:30px;border-radius:50%;border:0;padding:0;
background:var(--n4);color:var(--texto-2);font-size:15px;line-height:1;cursor:pointer;
}
.rec-pop.rec-va{animation:rec-sale .3s ease-in both}
@keyframes rec-entra{from{opacity:0;transform:translateX(-50%) translateY(-14px) scale(.96)}
to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes rec-sale{from{opacity:1;transform:translateX(-50%) translateY(0)}
to{opacity:0;transform:translateX(-50%) translateY(-12px)}}
@keyframes rec-pop-ic{0%{transform:scale(.4) rotate(-18deg)}
60%{transform:scale(1.12) rotate(6deg)}
100%{transform:scale(1) rotate(0)}}
@media (prefers-reduced-motion:reduce){
.rec-pop,.rec-pop .rec-ic,.rec-pop.rec-va{animation:none}
}
/* ===== La explicacion del dia, en cajas =====================================
Miguel, 11-oct-2026: "ponselo mejor, separado con cajitas, mejor
visualmente, pon ejemplo (con mis fotos) de cuando sean dudas de
ejercicios". Sustituye al parrafo que vivia dentro de las notas del primer
ejercicio. Todo con los colores que ya tiene la app, sin inventar ninguno. */
.expl{margin:0 0 18px;display:flex;flex-direction:column;gap:10px}
.expl-cab{display:flex;align-items:center;gap:9px;margin:0 2px 2px}
.expl-cab h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.2px;color:var(--texto)}
.expl-ico{flex:0 0 auto;width:24px;height:24px;border-radius:50%;
display:grid;place-items:center;font-size:13px;font-weight:800;
font-family:Georgia,serif;color:#fff;background:var(--primario);
box-shadow:0 2px 10px rgba(47,107,255,.35)}
.expl-entra{margin:0 2px 2px;font-size:14px;line-height:1.5;color:var(--texto-2)}
.expl-caja{background:var(--n3);border:1px solid var(--linea);
border-radius:var(--r-m);padding:13px 14px}
.expl-caja h3{margin:0 0 7px;font-size:13px;font-weight:800;
text-transform:uppercase;letter-spacing:.6px;color:var(--azul-txt)}
.expl-caja p{margin:0;font-size:14.5px;line-height:1.55;color:var(--texto)}
.expl-pie{margin-top:8px!important;font-size:13px!important;color:var(--texto-2)!important}
/* La escalera de repeticiones: fichas con flechas, no un parrafo. */
/* Los siete escalones van en UNA linea siempre. Con `flex-wrap:wrap` el 40
final se caia a una segunda fila y dejaba una flecha colgando (medido a
430 px, 11-oct). Repartiendo el ancho con flex:1 cabe en cualquier movil. */
.expl-chips{display:flex;align-items:center;flex-wrap:nowrap;gap:3px}
.expl-chip{flex:1 1 0;min-width:0;padding:7px 2px;border-radius:11px;text-align:center;
font-size:14.5px;font-weight:800;font-variant-numeric:tabular-nums;
color:var(--texto);background:var(--n4);border:1px solid var(--linea)}
.expl-chip.es-pico{background:var(--primario);border-color:var(--pri-claro);color:#fff;
box-shadow:0 2px 12px rgba(47,107,255,.4)}
.expl-fle{flex:0 0 auto;font-size:14px;line-height:1;color:var(--texto-3)}
.expl-aviso{background:linear-gradient(180deg,rgba(47,107,255,.14),rgba(47,107,255,.05));
border-color:rgba(91,146,255,.34);border-left:3px solid var(--primario)}
.expl-aviso h3{color:var(--pri-claro)}
/* Pasos numerados. El numero va fuera del texto para que el texto no baile. */
.expl-pasos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.expl-paso{display:flex;gap:11px;align-items:flex-start}
.expl-num{flex:0 0 auto;width:26px;height:26px;border-radius:9px;margin-top:1px;
display:grid;place-items:center;font-size:14px;font-weight:800;
font-variant-numeric:tabular-nums;color:#fff;
background:linear-gradient(160deg,var(--pri-claro),var(--pri-hondo))}
.expl-cuerpo{min-width:0;flex:1}
.expl-cuerpo h3{margin-bottom:5px}
.expl-lista{margin:7px 0 0;padding:0;list-style:none;
display:flex;flex-direction:column;gap:5px}
.expl-lista li{position:relative;padding-left:19px;font-size:14px;line-height:1.5;
color:var(--texto)}
.expl-lista li::before{content:"";position:absolute;left:3px;top:.58em;
width:7px;height:7px;border-radius:50%;background:var(--pri-claro)}
.expl-check .expl-lista li::before{content:"✓";left:0;top:0;width:auto;height:auto;
border-radius:0;background:none;color:var(--pri-claro);font-weight:800;font-size:13px}
.expl-rejilla{display:grid;gap:10px}
@media (min-width:560px){.expl-rejilla{grid-template-columns:1fr 1fr}}
/* Las fotos son SUYAS, no dibujos. Proporcion fijada con aspect-ratio y
object-fit: si solo se fija el ancho, una foto vertical sale deformada
(leccion L001 del sistema). */
.expl-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
gap:8px;margin-top:9px}
.expl-fotos-ancho{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
.expl-fotos figure{margin:0}
.expl-fotos img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
border-radius:12px;background:var(--n2);border:1px solid var(--linea)}
.expl-fotos figcaption{margin-top:5px;font-size:11.5px;line-height:1.35;
text-align:center;color:var(--texto-2)}
.expl-primera{background:var(--n2);border-style:dashed}
.expl-primera h3{color:var(--texto-3)}