/* Base equivalente a la que ponía la plataforma anterior, para que el diseño
   siga comportándose igual dentro de una app Next.js. */
/* El hueco de la muesca y el de la barra de inicio del iPhone los reserva cada
   barra por su cuenta (la de arriba con su padding, la de abajo con el suyo).
   Si además se lo ponemos a la página entera se cuenta dos veces, y se queda
   un pasillo vacío entre la hora del móvil y la cabecera de la app. */
:root{box-sizing:border-box}
html{scroll-padding-top:var(--h-top,56px)}
img{max-width:100%}
[hidden]{display:none!important}

:root{
  --bg:#F7F6F1; --surface:#FFFFFF; --surface-2:#EFEEE7; --surface-3:#E4E2D9;
  --ink:#121210; --ink-2:#4D4D48; --ink-3:#82827A;
  --line:#E3E1D8; --line-2:#CECCC1;
  --accent:#7A6000; --accent-fill:#FCDE5A; --accent-ink:#121210; --accent-soft:#FDF3C9; --accent-line:#E4CE79;
  --ok:#2C7A46; --ok-soft:#DEF0E4; --warn:#9A5B08; --warn-soft:#F8EAD5; --bad:#A93B27; --bad-soft:#F7E2DD;
  --m1:#B04A3A; --m2:#2F6280; --m3:#6B4A8C; --m4:#1F6B4A; --m5:#A33B57; --m6:#5A6472;
  --shadow:0 1px 2px rgba(18,18,16,.06), 0 6px 18px -10px rgba(18,18,16,.24);
  --r:10px; --r-s:7px;
  --fd:"Oswald", "Helvetica Neue", Arial, sans-serif;
  --fb:"Roboto", "Helvetica Neue", Arial, sans-serif;
  --fm:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0A0A09; --surface:#151513; --surface-2:#1F1F1C; --surface-3:#2B2B27;
    --ink:#F4F3EE; --ink-2:#ADACA4; --ink-3:#7E7D75;
    --line:#272724; --line-2:#3B3B36;
    --accent:#FCDE5A; --accent-fill:#FCDE5A; --accent-ink:#141412; --accent-soft:#2C2612; --accent-line:#5B4F1F;
    --ok:#6FC48A; --ok-soft:#17301F; --warn:#E39B4A; --warn-soft:#33240F; --bad:#E8785E; --bad-soft:#331B16;
    --m1:#E88B78; --m2:#7FB4D2; --m3:#B79BD6; --m4:#6FC2A0; --m5:#E08CA4; --m6:#A4AEBC;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 6px 18px -10px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
    --bg:#0A0A09; --surface:#151513; --surface-2:#1F1F1C; --surface-3:#2B2B27;
    --ink:#F4F3EE; --ink-2:#ADACA4; --ink-3:#7E7D75;
    --line:#272724; --line-2:#3B3B36;
    --accent:#FCDE5A; --accent-fill:#FCDE5A; --accent-ink:#141412; --accent-soft:#2C2612; --accent-line:#5B4F1F;
    --ok:#6FC48A; --ok-soft:#17301F; --warn:#E39B4A; --warn-soft:#33240F; --bad:#E8785E; --bad-soft:#331B16;
    --m1:#E88B78; --m2:#7FB4D2; --m3:#B79BD6; --m4:#6FC2A0; --m5:#E08CA4; --m6:#A4AEBC;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 6px 18px -10px rgba(0,0,0,.85);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:0.9375rem;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--fd);margin:0;text-wrap:balance;letter-spacing:-.01em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- shell ---------- */
#app{display:flex;min-height:100%;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{width:28px;height:28px;flex:0 0 28px;border-radius:7px;display:block}
.brand b{font-family:var(--fd);font-weight:700;font-size:1rem;letter-spacing:.055em;white-space:nowrap}
.brand span{font-size:0.6875rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);white-space:nowrap}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
@media(max-width:620px){.brand b{font-size:0.8438rem;letter-spacing:.04em}#roleTag{display:none}}
/* En escritorio hay sitio de sobra: la cabecera se ve pequeña al lado del
   resto. A partir de 901px (donde ya aparece el menú lateral) la agrando;
   en móvil y tablet se queda como estaba. */
@media (min-width:901px){
  .topbar{gap:14px;padding:14px 22px;padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .brand{gap:13px}
  .logo{width:38px;height:38px;flex:0 0 38px;border-radius:9px}
  .brand b{font-size:1.25rem;letter-spacing:.06em}
  .brand span{font-size:0.75rem}
  .topbar-right{gap:10px}
  .topbar-right .btn.sm{padding:7px 13px;font-size:0.875rem}
  .savechip{font-size:0.8125rem}
}
.shell{display:flex;flex:1;min-height:0;align-items:flex-start}
.side{width:212px;flex:0 0 212px;padding:14px 10px;position:sticky;top:var(--h-top);align-self:flex-start}
.side nav{display:flex;flex-direction:column;gap:2px}
.navbtn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;padding:9px 11px;border-radius:var(--r-s);color:var(--ink-2);cursor:pointer;font-weight:600;font-size:1.0312rem}
.navbtn:hover{background:var(--surface-2);color:var(--ink)}
.navbtn[aria-current="page"]{background:var(--accent-soft);color:var(--accent);box-shadow:inset 3px 0 0 var(--accent-fill)}
.navbtn .ic{width:20px;flex:0 0 20px;font-size:1rem;display:grid;place-items:center}
.main{flex:1;min-width:0;padding:22px 24px 90px;max-width:1180px}

.tabbar{display:none}
@media (max-width:900px){
  .side{display:none}
  /* El hueco de abajo es el alto de la barra más el de la barra de inicio
     del iPhone, calculado: antes eran 92 px a ojo y sobraba sitio. */
  .main{padding:16px 16px calc(70px + env(safe-area-inset-bottom,0px))}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px;padding-bottom:max(8px, env(safe-area-inset-bottom,0px));overflow:hidden}
  /* Todas las pestañas del mismo ancho: con flex-basis auto cada una se
     quedaba con el ancho de su palabra y la barra salía descuadrada. */
  .tabbar button{flex:1 1 0;min-width:0;background:none;border:0;padding:6px 2px;border-radius:var(--r-s);color:var(--ink-3);font-size:0.7812rem;letter-spacing:-.01em;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
  .tabbar button[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
}

/* ---------- escala tipográfica ----------
   Todos los tamaños van en rem, así que este valor los gobierna a la vez.
   En el móvil sube un punto: la pantalla está más cerca pero es más pequeña,
   y el texto secundario (11-12px) se queda corto para leer de un vistazo.
   En monitores grandes sube otro poco para aprovechar el sitio. */
:root{--h-top:calc(56px + env(safe-area-inset-top,0px))}
html{font-size:16px}
@media (max-width:620px){ html{font-size:17px} }
@media (min-width:1600px){ html{font-size:17px} }

/* Por debajo de 16px reales, iOS hace zoom solo al tocar un campo y descoloca
   la pantalla. En el móvil ningún campo baja de ahí. */
@media (max-width:620px){
  input,select,textarea,button{font-size:max(16px, 1em)}
  .ex-tbl input,.sets-sub input,.food-tbl input,.ali-tbl input,.ali-tbl select{font-size:16px}
}

/* ---------- primitives ---------- */
.page-head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{font-size:1.5625rem;font-weight:700}
.page-head .sub{color:var(--ink-3);font-size:0.8438rem}
.spacer{margin-left:auto}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);padding:7px 13px;border-radius:var(--r-s);font-weight:600;font-size:0.875rem;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--ink-3)}
.btn.pri{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-ink)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn.sm{padding:4px 9px;font-size:0.8125rem}
.btn.danger{color:var(--bad);border-color:transparent}
.btn.danger:hover{background:var(--bad-soft);border-color:transparent}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:16px}
.grid{display:grid;gap:12px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:0.7188rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);letter-spacing:.01em;white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.acc{background:var(--accent-soft);color:var(--accent)}
.lbl{display:block;font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);margin-bottom:4px}
.fld{display:block}
input[type=text],input[type=number],input[type=date],input[type=email],input[type=tel],input[type=password],select,textarea{
  width:100%;background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r-s);padding:7px 9px;font-size:0.875rem}
textarea{resize:vertical;min-height:64px;line-height:1.45}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1 1 150px;min-width:0}
.muted{color:var(--ink-3)}
.num{font-family:var(--fm);font-variant-numeric:tabular-nums}
.empty{text-align:center;padding:40px 18px;color:var(--ink-3)}
.empty h3{font-size:1.0625rem;color:var(--ink-2);margin-bottom:6px}
.sep{height:1px;background:var(--line);border:0;margin:16px 0}
.scroll-x{overflow-x:auto}

/* ---------- students ---------- */
.two{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}
@media(max-width:880px){.two{grid-template-columns:minmax(0,1fr)}}
.stu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.stu{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.stu:hover{border-color:var(--accent-line)}
.stu-main{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;cursor:pointer;
  background:none;border:0;padding:14px;color:inherit;font:inherit;border-radius:var(--r)}
/* el botón de estado vive arriba a la derecha; en el escritorio aparece al pasar por encima */
.stu-arch{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:7px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-3);
  font-size:0.875rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  opacity:0;transition:opacity .15s}
.stu:hover .stu-arch,.stu-arch:focus-visible{opacity:1}
.stu-arch:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
@media (hover:none){.stu-arch{opacity:1}}
.av{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:0.875rem;background:var(--accent-soft);color:var(--accent);overflow:hidden}
/* Cuando hay foto, el mismo hueco lo ocupa la imagen. */
img.av{object-fit:cover;display:block}
.av-g{width:46px;height:46px;flex:0 0 46px;font-size:1rem}
.av-xl{width:84px;height:84px;flex:0 0 84px;font-size:1.5rem}
/* El avatar del cliente en su propia app: se toca para cambiar la foto. */
.av-btn{position:relative;background:none;border:0;padding:0;cursor:pointer;line-height:0;border-radius:50%}
.av-btn:hover .av{filter:brightness(.85)}
.av-lapiz{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent-fill);color:var(--accent-ink);
  border:2px solid var(--bg)}
.av-lapiz svg{width:11px;height:11px;fill:currentColor}

/* La fila de la foto en la ficha del cliente. */
.foto-fila{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.foto-acc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 1 200px}
.foto-acc .hint{flex:1 1 100%}
/* El nombre y el objetivo son <span>, y en un elemento en línea no funcionan
   ni overflow ni text-overflow: hay que pasarlos a bloque para que recorten
   dentro de la tarjeta en lugar de desbordarla. */
.stu-b{min-width:0;flex:1;display:block}
.stu-b .n{display:block;max-width:calc(100% - 26px);font-family:var(--fd);font-weight:600;font-size:0.9688rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stu-b .g{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;max-width:100%;overflow:hidden;font-size:0.8125rem;color:var(--ink-3);margin-top:2px;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
.stu-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;max-width:100%}
.stu-meta .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;display:block}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 12px;font-weight:600;font-size:0.9062rem;color:var(--ink-3);cursor:pointer;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent-fill)}

/* ---------- plan editor ---------- */
.wk{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.wk button{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-weight:600;font-size:0.8438rem;cursor:pointer;color:var(--ink-2)}
.wk button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.day{margin-bottom:14px}
.day-head{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.day-head input.dn{flex:1 1 160px;background:transparent;border:1px solid transparent;font-family:var(--fd);font-weight:600;font-size:0.9688rem;padding:3px 6px}
.day-head input.dn:hover{border-color:var(--line)}
/* Con el reparto automático el navegador ensanchaba las columnas numéricas
   hasta llenar la pantalla. Con table-layout:fixed manda el ancho declarado y
   el sitio que sobra se lo quedan el nombre del ejercicio y las notas. */
/* 680 es lo justo para que en un portátil de 1024 entre entera sin deslizar;
   por encima, los porcentajes reparten el ancho que sobre. */
.ex-tbl{width:100%;border-collapse:collapse;min-width:680px;table-layout:fixed}
.ex-tbl th{font-size:0.6562rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:600;text-align:left;padding:8px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.ex-tbl td{padding:5px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.ex-tbl tr:last-child td{border-bottom:0}
.ex-tbl input{background:transparent;border:1px solid transparent;padding:5px 6px;border-radius:5px}
.ex-tbl input:hover{border-color:var(--line-2)}
/* Sin la biblioteca al lado sobra ancho. En pantallas apretadas se reparte
   como antes —si no, las notas se quedan en nada— y en cuanto hay sitio los
   campos de números se ensanchan, que es donde se escribe de verdad. */
.ex-tbl .c-n{width:24%;min-width:180px}
.ex-tbl .c-s{width:58px}
.ex-tbl .c-r{width:68px}
.ex-tbl .c-l{width:78px}
.ex-tbl .c-d{width:72px}
.ex-tbl .c-rpe{width:52px}
.ex-tbl .c-nt{width:auto}
@media (min-width:1250px){
  .ex-tbl .c-n{width:22%}
  .ex-tbl .c-s{width:76px}
  .ex-tbl .c-r{width:92px}
  .ex-tbl .c-l{width:102px}
  .ex-tbl .c-d{width:94px}
  .ex-tbl .c-rpe{width:66px}
}
/* Siete botones por fila: detalle, historial, bloque, cambiar, subir,
   bajar y quitar. Con 118 px se comía el último. */
.ex-tbl .c-act{width:146px}
/* Los campos de la tabla no llevaban type, así que la regla general de ancho
   no les aplicaba y cada uno ocupaba el ancho por defecto del navegador. */
.ex-tbl input{width:100%;min-width:0}
.ex-tbl td{overflow:hidden}
.ex-tbl .c-n input{font-weight:600}
.ex-tbl .num input{font-family:var(--fm);font-variant-numeric:tabular-nums;font-size:0.8438rem}
.rowacts{display:flex;gap:1px;opacity:.5}
.day:hover .rowacts,.rowacts:focus-within{opacity:1}
.iconbtn{background:none;border:0;cursor:pointer;color:var(--ink-3);padding:3px 4px;border-radius:4px;line-height:1;font-size:0.8125rem}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.iconbtn.del:hover{background:var(--bad-soft);color:var(--bad)}
.iconbtn.on{background:var(--accent-soft);color:var(--accent)}
.day-foot{padding:9px 12px;display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--r) var(--r)}

.sets-row td{padding:0 6px 0 6px;background:var(--bg)}
.sets-sub{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);margin:4px 0 10px;padding:9px 11px}
.sets-sub table{width:100%;border-collapse:collapse}
.sets-sub th{font-size:0.6875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:600;text-align:left;padding:2px 6px}
.sets-sub td{padding:2px 6px;border:0}
.sets-sub input{background:var(--surface);border:1px solid var(--line-2);padding:4px 7px;border-radius:5px;font-family:var(--fm);font-variant-numeric:tabular-nums;font-size:0.8125rem;width:100%}
.sets-sub .sidx{font-family:var(--fd);font-weight:700;font-size:0.75rem;color:var(--ink-3);width:38px;white-space:nowrap}
.sets-sub .foot{margin-top:7px;display:flex;gap:6px;align-items:center}
.summ{font-family:var(--fm);font-size:0.7812rem;color:var(--ink-3);padding:0 6px;white-space:nowrap;display:inline-block}
.setrow .presc-s{font-family:var(--fm);font-size:0.75rem;color:var(--ink-3);flex:0 0 auto;min-width:88px}
.resttimer{display:inline-flex;align-items:center;gap:5px;font-family:var(--fm);font-size:0.75rem;
  font-weight:600;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line);
  border-radius:999px;padding:4px 11px;cursor:pointer;white-space:nowrap}
.resttimer svg{width:13px;height:13px;flex:0 0 13px;fill:currentColor}
.resttimer[data-running="1"]{background:var(--accent-fill);color:var(--accent-ink);border-color:var(--accent-fill)}

/* ---------- exercise library ---------- */
.macro-strip{display:flex;gap:11px;font-family:var(--fm);font-size:0.7812rem;color:var(--ink-3);flex-wrap:wrap;font-variant-numeric:tabular-nums}
.macro-strip b{color:var(--ink);font-weight:600}
.lib-card .acts{flex-wrap:wrap}
.rec-steps{white-space:pre-wrap;font-size:0.875rem;line-height:1.6;margin:0}

/* Contador de raciones de la ficha de receta: para quien cocina de una vez
   para varios días. Solo multiplica lo que se ve. */
.rac-calc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
.rac-calc .rc-lb{font-size:0.8125rem;color:var(--ink-3);font-weight:600}
.rac-calc b{min-width:92px;text-align:center;font-size:0.9375rem;font-variant-numeric:tabular-nums}
.rc-btn{width:32px;height:32px;flex:0 0 32px;border-radius:50%;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink);
  font-size:1.125rem;line-height:1;font-weight:600;display:grid;place-items:center}
.rc-btn:hover:not([disabled]){border-color:var(--accent-fill);background:var(--accent-soft)}
.rc-btn[disabled]{opacity:.35;cursor:not-allowed}
.calc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:900px){.calc-grid{grid-template-columns:minmax(0,1fr)}}
.tile-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.tile{background:var(--surface-2);border-radius:var(--r-s);padding:11px 13px}
.tile .k{font-size:0.6562rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:600}
.tile .v{font-family:var(--fm);font-size:1.3125rem;font-weight:600;font-variant-numeric:tabular-nums;margin-top:3px;line-height:1.15}
.tile .v small{font-size:0.75rem;font-weight:400;color:var(--ink-3)}
.tile.hero{background:var(--accent-fill);color:var(--accent-ink)}
.tile.hero .k{color:var(--accent-ink);opacity:.72}
.tile.hero .v small{color:var(--accent-ink);opacity:.7}
.bars{display:flex;height:16px;border-radius:999px;overflow:hidden;margin:4px 0 10px;background:var(--surface-2)}
.bars span{display:block;height:100%}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:0.7812rem;color:var(--ink-2)}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px}
.fieldset{border:0;padding:0;margin:0 0 14px}
.fieldset legend{font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);padding:0 0 8px}
.hint{font-size:0.7812rem;color:var(--ink-3);margin:6px 0 0}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.lib-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.lib-card .n{font-family:var(--fd);font-weight:600;font-size:1rem;letter-spacing:-.01em}
.lib-card .meta{display:flex;gap:5px;flex-wrap:wrap}
.lib-card .prev{font-size:0.8125rem;color:var(--ink-2);line-height:1.5;margin:0}
.lib-card .prev li{list-style:none}
.lib-card .acts{display:flex;gap:5px;align-items:center;margin-top:auto;padding-top:4px}
.ex-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ex-card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--mc,var(--ink-3));border-radius:var(--r-s);padding:11px 12px}
.ex-card .n{font-weight:600;font-family:var(--fd);font-size:0.9062rem}
.ex-card .m{font-size:0.75rem;color:var(--mc,var(--ink-3));font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.ex-card .c{font-size:0.8125rem;color:var(--ink-2);margin-top:6px}
.ex-card .acts{margin-top:8px;display:flex;gap:4px}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filters input[type=text]{flex:1 1 200px;max-width:320px}
.fchip{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:0.8125rem;font-weight:600;color:var(--ink-2);cursor:pointer}
.fchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* ---------- nutrition ---------- */
.macro-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:620px){.macro-row{grid-template-columns:repeat(2,1fr)}}
.macro{background:var(--surface-2);border-radius:var(--r-s);padding:10px 12px}
.macro .k{font-size:0.6562rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:600}
.macro .v{font-family:var(--fm);font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.macro .v small{font-size:0.75rem;font-weight:400;color:var(--ink-3)}
.meal{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;background:var(--surface)}
.meal-head{display:flex;gap:8px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.meal-head input.mn{flex:1 1 140px;background:transparent;border:1px solid transparent;font-family:var(--fd);font-weight:600;padding:3px 6px}
.meal-head input.mn:hover{border-color:var(--line)}
.food-tbl{width:100%;border-collapse:collapse;min-width:560px}
/* La tabla de la ficha de receta solo tiene tres columnas y no lleva campos
   que rellenar, así que cabe en el móvil sin desplazar nada de lado. */
.food-tbl.det-tbl{min-width:0}
@media (max-width:620px){
  .food-tbl.det-tbl th,.food-tbl.det-tbl td{padding:6px 4px;font-size:0.8125rem}
  .food-tbl.det-tbl th:nth-child(2),.food-tbl.det-tbl td:nth-child(2){width:104px}
  .food-tbl.det-tbl th:last-child,.food-tbl.det-tbl td:last-child{width:52px}
}
.food-tbl th{font-size:0.6562rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:600;text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}
.food-tbl td{padding:4px 6px;border-bottom:1px solid var(--line)}
.food-tbl tr:last-child td{border-bottom:0}
.food-tbl input{background:transparent;border:1px solid transparent;padding:5px 6px;border-radius:5px}
.food-tbl input:hover{border-color:var(--line-2)}

/* ---------- progress ---------- */
.chartbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.ck-tbl{width:100%;border-collapse:collapse;min-width:620px}
.ck-tbl th{font-size:0.6562rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:600;text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
.ck-tbl td{padding:7px 8px;border-bottom:1px solid var(--line);font-size:0.875rem}
.ck-tbl td.num{font-family:var(--fm);font-variant-numeric:tabular-nums}

/* ---------- student (athlete) view ---------- */
.sess{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:12px;overflow:hidden}
.sess-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;background:none;border:0;width:100%;text-align:left}
.sess-head:hover{background:var(--surface-2)}
.sess-head .t{font-family:var(--fd);font-weight:600;font-size:0.9688rem}
.sess-head .d{font-size:0.7812rem;color:var(--ink-3)}
/* Las tres cosas que se tocan en la sesión, dichas una vez arriba. */
.pistas{display:flex;flex-wrap:wrap;gap:6px 18px;margin:-6px 0 14px;
  font-size:0.8125rem;color:var(--ink-2)}
/* El icono a un lado y el texto al otro: el texto va dentro de su propia caja
   para que una frase larga se parta como una frase y no por palabras sueltas. */
.pistas > span{display:flex;align-items:center;gap:8px;min-width:0}
.pistas > span > span{min-width:0}
.pistas b{font-weight:600;color:var(--ink)}
.pistas i{display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;flex:0 0 21px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent)}
.pistas i svg{width:12px;height:12px;fill:currentColor}
@media (max-width:620px){ .pistas{gap:7px;flex-direction:column;align-items:flex-start} }

.log-ex{border-top:1px solid var(--line);padding:12px 14px}

/* ---------------------------------------------------------------------------
   La sesión del cliente: cada bloque, su propia tarjeta.

   Antes eran filas pegadas dentro de un solo recuadro, separadas por una raya
   fina, y bajando deprisa en el móvil no se veía dónde acababa un ejercicio y
   empezaba el siguiente. Ahora el contenedor no pinta nada y cada bloque va
   suelto, con su marco.

   El marco del ejercicio lleva el color de la marca, que sale de las variables
   de acento: amarillo en esta app y azul marino en la de Roger, que las pisa
   en su propio marca.css. Por eso aquí no hay ningún color escrito a mano.
   --------------------------------------------------------------------------- */
.sess{border:0;border-radius:0;background:none;overflow:visible}
.sess .log-ex{border:1px solid var(--line);border-top:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);margin:0 0 10px;
  padding:13px 14px;box-shadow:var(--shadow)}
.sess .log-ex.ej{border-color:var(--accent-line);
  border-left:4px solid var(--accent-fill);padding-left:12px}
/* Los circuitos ya iban con el color del acento; solo se les quita la sangría
   de 14 px que antes compensaba el borde del contenedor. */
.circ-bar.athl{margin:16px 0 0;border-radius:var(--r) var(--r) 0 0}
.circ-end.athl{margin:0 0 16px}
.log-ex .h{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.log-ex .h b{font-family:var(--fd);font-size:1rem;line-height:1.4}
.log-ex .presc{font-size:0.7812rem;color:var(--ink-3);font-family:var(--fm)}
.setrow{display:flex;gap:6px;align-items:center;margin-top:7px;flex-wrap:wrap}
.setrow .sn{font-size:0.6875rem;font-weight:600;color:var(--ink-3);width:42px;flex:0 0 42px;text-transform:uppercase;letter-spacing:.07em}
/* Los huecos de peso y repeticiones. No llevan type, así que la regla general
   de los inputs no les llegaba y salían con la pinta que les da el navegador. */
.setrow input{
  width:64px;flex:0 0 64px;min-width:0;appearance:none;-webkit-appearance:none;
  background:var(--bg);color:var(--ink);
  border:1px solid var(--line-2);border-radius:999px;
  padding:6px 9px;text-align:center;
  font-family:var(--fm);font-size:0.8125rem;font-weight:600;
  font-variant-numeric:tabular-nums;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease}
.setrow input::placeholder{font-weight:500;color:var(--ink-3)}
.setrow input:hover{border-color:var(--ink-3)}
.setrow input:focus{outline:none;border-color:var(--accent-fill);
  background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
/* Una vez tiene algo escrito se nota de un vistazo que esa serie está puesta. */
.setrow input:not(:placeholder-shown){border-color:var(--accent-line)}

/* ---------- modal ---------- */
.ovl{position:fixed;inset:0;background:rgba(10,18,17,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:100;backdrop-filter:blur(2px)}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:12px;width:100%;max-width:560px;max-height:min(84vh,720px);display:flex;flex-direction:column;box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
.modal-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:1.0625rem;font-weight:600}
.modal-body{padding:16px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.modal-foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.pick{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-s);padding:6px}
.pick button{text-align:left;background:none;border:0;padding:7px 9px;border-radius:5px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;align-items:center}
.pick button:hover{background:var(--accent-soft)}
.pick .mm{font-size:0.7188rem;font-weight:600;color:var(--mc,var(--ink-3));text-transform:uppercase;letter-spacing:.06em}

/* ---------- toast / banner ---------- */
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:999px;font-size:0.8438rem;font-weight:600;z-index:200;box-shadow:var(--shadow)}
@media(max-width:900px){#toast{bottom:calc(74px + env(safe-area-inset-bottom,0px))}}
.banner{border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent);border-radius:var(--r);padding:11px 14px;font-size:0.8438rem;margin-bottom:16px;display:flex;gap:10px;align-items:flex-start}
.banner.warn{border-color:var(--warn);background:var(--warn-soft);color:var(--warn)}
.savechip{font-size:0.7188rem;color:var(--ink-3);font-weight:600;letter-spacing:.02em}

/* ---------------------------------------------------------------------------
   El editor de sesión. Antes llevaba la biblioteca pegada a la derecha; ya no
   hace falta desde que el selector de ejercicios se abre con sus fotos y
   filtrado por el grupo que toca, así que va a una sola columna.
   --------------------------------------------------------------------------- */
.ed-main{min-width:0}
/* La miniatura y el texto de cada ejercicio en el selector. */
.pb-sin{width:64px;height:44px;flex:0 0 64px;display:grid;place-items:center;border-radius:5px;
  background:var(--surface-2);color:var(--ink-3);font-size:0.625rem}
.pb-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pb-txt b{font-size:0.8125rem;font-weight:600;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pb-txt small{font-size:0.6875rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.sin-scroll{overflow:hidden}

/* La barra de guardar va al final de la sesión, después del último ejercicio.
   Ni se pega ni persigue al scroll: se baja hasta ella cuando se ha terminado
   de montar, que es cuando se usa. */
.barra-guardar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:20px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
/* uno en cada punta: cancelar a la izquierda, guardar a la derecha */
.barra-guardar .btn{flex:0 0 auto}

/* Aviso de que la app está hablando con el servidor: en mitad de la pantalla,
   donde se ve sin buscarlo. No roba el clic, así que no estorba por estar ahí. */
#actividad{position:fixed;left:50%;top:50%;z-index:150;
  transform:translate(-50%,-50%) scale(.94);
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;
  padding:14px 26px 14px 21px;font-size:1rem;font-weight:600;color:var(--ink);
  box-shadow:0 10px 34px -10px rgba(0,0,0,.45);pointer-events:none;
  opacity:0;transition:opacity .18s ease,transform .18s ease}
#actividad.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.act-rueda{width:20px;height:20px;flex:0 0 20px;border-radius:50%;
  border:2.5px solid var(--line-2);border-top-color:var(--accent-fill);
  animation:act-giro .7s linear infinite}
@keyframes act-giro{to{transform:rotate(360deg)}}
.btn.trabajando{opacity:1}
@media (prefers-reduced-motion:reduce){
  #actividad{transition:none}
  .act-rueda{animation-duration:2.4s}
}

/* ---------- pantalla de acceso ---------- */
/* Ya que la página no lleva el hueco de la muesca, lo pone esta pantalla. */
.login-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;background:var(--bg);
  padding:calc(24px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px))}
.login-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px 24px;box-shadow:var(--shadow)}
.login-logo{width:58px;height:58px;border-radius:14px;display:block;margin-bottom:18px}
.login-card h1{font-family:var(--fd);font-size:1.3125rem;font-weight:700;letter-spacing:.055em;margin-bottom:4px}
.login-card .muted{font-size:0.875rem;margin:0 0 20px}
/* El ojito de la contraseña, dentro del propio campo y a la derecha. Escribir
   a ciegas es el motivo de la mitad de los «no me deja entrar». */
/* Lo que el entrenador tiene ocupado, en el calendario del cliente: un bloque
   y nada más. Ni quién, ni qué: solo que ahí no cabe. */
.ag-ocupado{position:absolute;left:2px;right:2px;border-radius:5px;
  background:var(--surface-3);opacity:.55;pointer-events:none}
.cal-dia.sel{box-shadow:inset 0 0 0 2px var(--accent-fill)}

/* El menú de la barra de arriba. */
.menu-tema{margin-bottom:14px}
.menu-tema .ag-segm{width:100%}
.menu-tema .ag-segm button{flex:1 1 0}
.menu-lista{display:flex;flex-direction:column;gap:2px}
.menu-it{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;
  background:none;border:0;border-radius:var(--r-s);padding:11px 10px;cursor:pointer;
  color:var(--ink);font:inherit;min-height:48px}
.menu-it:hover{background:var(--surface-2)}
.menu-it .ci{flex:0 0 22px;text-align:center;color:var(--ink-3);font-size:0.9375rem;line-height:1.5}
.menu-it b{display:block;font-size:0.9375rem;font-weight:600}
.menu-it small{display:block;color:var(--ink-3);font-size:0.8125rem;margin-top:1px}
/* Borrar la cuenta va con los demás, pero no tiene que leerse como los
   demás: una raya arriba para separarlo y el nombre en rojo. */
.menu-it.peligro{margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.menu-it.peligro b,.menu-it.peligro .ci{color:var(--bad)}
.menu-pasos{margin:8px 0 0;padding-left:20px;font-size:0.875rem;line-height:1.6;color:var(--ink-2)}
.menu-pasos li{margin-bottom:4px}
.menu-sugs{max-height:60vh;overflow-y:auto}

.pass-campo{position:relative}
.pass-campo input{padding-right:44px}
.pass-ojo{position:absolute;top:50%;right:5px;transform:translateY(-50%);
  display:grid;place-items:center;width:34px;height:34px;padding:0;
  background:none;border:0;border-radius:var(--r-s);color:var(--ink-3);cursor:pointer}
.pass-ojo:hover{color:var(--ink)}
.pass-ojo:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pass-ojo svg{width:17px;height:17px;fill:currentColor;display:block}
/* 16px clavados en la pantalla de acceso: por debajo de eso el iPhone hace
   zoom solo al tocar el campo, y es lo primero que toca un cliente. */
@media (max-width:620px){ .login-card input{font-size:16px} }
.login-err{background:var(--bad-soft);color:var(--bad);border-radius:var(--r-s);padding:9px 12px;font-size:0.8438rem;font-weight:600;margin:14px 0 0}

/* ---------- etiquetas de recetas ---------- */
.chip.tag{background:transparent;border:1px solid var(--line-2);color:var(--ink-3);font-weight:600}
.fchip.tagchip[aria-pressed="true"]{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-ink)}

/* ============================================================
   Móvil: que ningún texto largo se salga ni se quede ilegible.
   ============================================================ */

/* Un nombre largo sin espacios (una receta, un ejercicio, un email)
   partía la caja en vez de partirse él. */
.lib-card .n, .ex-card .n, .ex-card .c, .sess-head .t, .log-ex .h b,
.page-head h1, .page-head .sub, .modal-head h3, .tile .k, .macro .k,
.empty h3, .empty p, .rec-steps, .hint{overflow-wrap:anywhere}

/* Las etiquetas no envuelven, así que una muy larga desbordaba la fila. */
.chip{max-width:100%}
/* Varias etiquetas juntas: bajan de línea en vez de estirar lo que las contiene. */
.chips{display:flex;flex-wrap:wrap;gap:5px;min-width:0}

@media (max-width:620px){
  /* El nombre del ejercicio se lee de pie, con el móvil en el banco: es el
     texto que más grande tiene que estar de toda la pantalla. */
  .log-ex .h b{font-size:1.0938rem}
  .log-ex{padding:14px 14px}
  .ex-acts{gap:7px;margin-top:11px}
  .ex-act{font-size:0.8125rem;padding:8px 14px 8px 11px}

  /* Titulares más contenidos: a 25px se comían dos líneas ellos solos. */
  .page-head h1{font-size:1.3125rem}
  .page-head{gap:10px;margin-bottom:14px}
  h2{font-size:1.125rem}

  /* En el móvil no cabe todo en una línea sin apretarlo demasiado, así que lo
     parto en dos: arriba la serie y lo que toca hacer, en el mismo renglón, y
     debajo los huecos para escribir repartidos a todo lo ancho.
     El 42px del calc son los 34 de la serie más los 8 de hueco: si no cuadran,
     la suma pasa del 100% y la prescripción se cae a su propia línea. */
  .setrow{gap:7px 8px;margin-top:11px}
  .setrow .sn{width:34px;flex:0 0 34px}
  .setrow .presc-s{flex:1 1 calc(100% - 42px);min-width:0;font-size:0.75rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* 16px clavados: por debajo de eso el iPhone hace zoom solo al tocarlos. */
  .setrow input{flex:1 1 0;width:auto;min-width:0;max-width:none;
    padding:11px 10px;font-size:16px}
  /* Del mismo alto que los huecos, que es un botón y se toca con el dedo. */
  .setrow .resttimer{flex:0 0 auto;padding:10px 14px;font-size:0.8125rem}

  /* Dos columnas de datos en vez de una sola muy ancha. */
  .tile-row{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
  .tile .v{font-size:1.125rem}
  .macro .v{font-size:1.0625rem}

  /* Los campos de formulario ocupaban media pantalla cada uno. */
  .row>*{flex:1 1 130px}
  .lbl{font-size:0.6562rem;letter-spacing:.07em}

  /* Filas de filtros y de etiquetas más compactas. */
  .fchip{padding:4px 9px;font-size:0.7812rem}
  .filters{gap:5px;margin-bottom:12px}

  /* Tarjetas de biblioteca: los botones no caben en una línea. */
  .lib-card{padding:12px}
  .lib-card .acts{gap:6px}
  .lib-card .acts .btn{flex:1 1 auto;justify-content:center}

  /* El aviso de guardado se comía sitio en la cabecera. */
  .savechip{display:none}
  .topbar{gap:8px;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top,0px))}

  /* Modales a ras de pantalla. */
  .modal-body{padding:14px;gap:10px}
  .modal-head,.modal-foot{padding:12px 14px}
  .modal-foot .btn{flex:1 1 auto;justify-content:center}
}

/* Pantallas muy estrechas (iPhone SE y similares). */
@media (max-width:380px){
  .main{padding:14px 12px calc(70px + env(safe-area-inset-bottom,0px))}
  .page-head h1{font-size:1.1875rem}
  .tile-row{grid-template-columns:repeat(2,1fr)}
  .macro-row{grid-template-columns:repeat(2,1fr)}
}

/* ---------- fotos y vídeos de los ejercicios ---------- */
.ex-thumb{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:6px;display:block;margin-bottom:8px;background:var(--surface-2)}
.ex-media{width:100%;max-height:340px;object-fit:contain;border-radius:var(--r-s);display:block;background:var(--surface-2)}
.video-box{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-s);overflow:hidden;background:#000}
.video-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- circuitos ---------- */
/* El circuito tiene que leerse como UN objeto, no como filas sueltas: fondo
   propio, barra arriba, cierre abajo y una franja continua al costado. */
.circ-head td, .circ-foot td{padding:0!important;background:var(--bg)!important;border-bottom:0!important}
.circ-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--accent-fill);color:var(--accent-ink);
  border-radius:var(--r-s) var(--r-s) 0 0;padding:8px 12px;margin-top:12px}
.circ-tag{font-family:var(--fd);font-weight:700;font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent-ink);color:var(--accent-fill);padding:3px 9px;border-radius:999px;white-space:nowrap}
.circ-bar b{font-family:var(--fd);font-size:0.875rem}
.circ-bar .chip{background:rgba(0,0,0,.14);color:var(--accent-ink);font-weight:600}
.circ-bar .iconbtn{color:var(--accent-ink);opacity:.75}
.circ-bar .iconbtn:hover{opacity:1;background:rgba(0,0,0,.12)}
.circ-end{background:var(--accent-soft);border:1px solid var(--accent-line);border-top:0;
  border-radius:0 0 var(--r-s) var(--r-s);padding:7px 12px;font-size:0.7812rem;font-weight:600;
  color:var(--accent);margin-bottom:12px}

.ex-tbl tr.in-circ td{background:var(--accent-soft)}
.ex-tbl tr.in-circ td:first-child{box-shadow:inset 4px 0 0 var(--accent-fill)}
.ex-tbl tr.in-circ td:last-child{box-shadow:inset -1px 0 0 var(--accent-line)}
.ex-tbl tr.in-circ input:hover{border-color:var(--accent-line)}
.ex-tbl tr.sets-row.in-circ td{background:var(--accent-soft)}

/* En la app del cliente, el circuito va en su propia caja. */
.circ-bar.athl{margin:16px 14px 0;border-radius:var(--r-s) var(--r-s) 0 0}
.circ-end.athl{margin:0 14px 16px}
.log-ex.in-circ{border-left:4px solid var(--accent-fill);background:var(--accent-soft);
  margin:0 0 10px;border-top:1px solid var(--accent-line);padding-left:11px}

.pick button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}

@media (max-width:620px){
  .circ-bar{padding:7px 10px;gap:6px}
  .circ-bar b{font-size:0.8125rem}
  .circ-tag{font-size:0.625rem;padding:2px 7px}
}




/* ============================ calendario ============================ */
.cal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden}

/* Cabecera: navegación a la izquierda, acciones a la derecha. */
.cal-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.cal-arrow{width:34px;height:34px;flex:0 0 34px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);font-size:1.0625rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.cal-arrow:hover{border-color:var(--ink-3);background:var(--surface-2)}
.cal-mes{width:auto;flex:0 0 auto;font-family:var(--fd);font-weight:600;font-size:1rem;
  border-color:transparent;background:transparent;text-transform:capitalize;padding:5px 8px}
.cal-mes:hover{background:var(--surface-2)}
.cal-sel-n{font-size:0.7812rem;font-weight:600;color:var(--accent);background:var(--accent-soft);
  border-radius:999px;padding:3px 10px;white-space:nowrap}

/* Rejilla. */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-dow{font-size:0.6562rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  text-align:center;padding:9px 2px;border-bottom:1px solid var(--line)}
/* min-width:0 es lo que hace que las siete columnas midan de verdad lo mismo.
   Sin esto, una casilla con sesión no puede encogerse por debajo del ancho de
   su barra: se queda con 113 px, empuja al resto y el calendario se sale de la
   pantalla. Con esto, el nombre largo se corta con puntos suspensivos. */
.cal-dia{position:relative;min-width:0;min-height:128px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:6px;display:flex;flex-direction:column}
.cal-dia:nth-child(7n+7){border-right:0}
.cal-num{align-self:flex-end;font-family:var(--fm);font-size:0.8125rem;color:var(--ink-3);
  line-height:1;padding:2px 2px 0 0}
.cal-items{display:flex;flex-direction:column;gap:3px;margin-top:6px;min-width:0;max-width:100%}
.cal-dia.fuera{background:var(--bg)}
.cal-dia.fuera .cal-num{opacity:.4}
.cal-dia.hoy{background:var(--accent-soft)}
.cal-dia.hoy .cal-num{color:var(--accent);font-weight:600}

/* Cada sesión, como barra de ancho completo. */
.cal-ses{display:flex;align-items:center;gap:6px;width:100%;text-align:left;border:0;cursor:pointer;
  background:var(--accent-fill);color:var(--accent-ink);border-radius:4px;padding:4px 7px;
  font-size:0.6562rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;line-height:1.35;min-width:0}
.cal-ses:hover{filter:brightness(1.06)}
.cal-ses-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cal-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--accent-ink);opacity:.45}
.cal-ses.ok{background:var(--ok-soft);color:var(--ok)}
.cal-ses.ok .cal-dot{background:var(--ok);opacity:1}

/* Selección de días. */
.cal-dia[data-cd]{cursor:pointer}
.cal-dia[data-cd]:hover{background:var(--surface-2)}
.cal-dia.sel{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--ink)}
.cal-dia.sel.hoy{background:var(--accent-soft)}
.cal-dia[data-cd]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

@media (max-width:620px){
  .cal-nav{padding:10px;gap:6px}
  .cal-mes{font-size:0.875rem}
  .cal-arrow{width:30px;height:30px;flex:0 0 30px;font-size:0.9375rem}
  .cal-dia{min-height:76px;padding:4px}
  .cal-num{font-size:0.6875rem}
  .cal-items{margin-top:3px;gap:2px}
  /* Se toca con el dedo para abrir el entreno: a 19 px de alto no se acierta. */
  .cal-ses{font-size:0.6562rem;padding:6px 5px;gap:3px;letter-spacing:0;min-height:28px}
  .cal-dot{width:5px;height:5px;flex:0 0 5px}
  .cal-nav .btn{flex:1 1 auto;justify-content:center}
}

/* ---------- menú del calendario ---------- */
#calMenu{position:fixed;inset:0;z-index:150;pointer-events:none}
.calmenu{position:fixed;pointer-events:auto;width:290px;max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--line-2);border-radius:10px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.10);
  padding:6px;display:flex;flex-direction:column;gap:1px}
.calmenu-h{padding:9px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:5px;display:flex;
  flex-direction:column;gap:2px}
.calmenu-h b{font-family:var(--fd);font-size:0.8438rem}
.calmenu-h span{font-size:0.75rem;color:var(--ink-3);font-family:var(--fm)}
.calmenu button{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;background:none;
  border:0;border-radius:6px;padding:8px 10px;cursor:pointer;color:var(--ink)}
.calmenu button:hover{background:var(--accent-soft)}
.calmenu button .ci{flex:0 0 20px;font-size:0.875rem;color:var(--accent);text-align:center;line-height:1.35}
.calmenu button b{display:block;font-family:var(--fb);font-weight:600;font-size:0.8438rem;line-height:1.35}
.calmenu button small{display:block;font-size:0.7188rem;color:var(--ink-3);line-height:1.35;margin-top:1px}
.calmenu hr{border:0;border-top:1px solid var(--line);margin:5px 0}
.calmenu button.peligro .ci,.calmenu button.peligro b{color:var(--bad)}
.calmenu button.peligro:hover{background:var(--bad-soft)}

/* En el móvil, hoja desde abajo: un menú flotante de 290px no se maneja bien. */
@media (max-width:620px){
  #calMenu{background:rgba(10,10,9,.35)}
  .calmenu{left:0!important;right:0;top:auto!important;bottom:0;width:auto;max-width:none;
    border-radius:14px 14px 0 0;padding:8px 8px calc(14px + env(safe-area-inset-bottom,0px))}
  .calmenu button{padding:11px 12px}
}

/* ---------- repetición de sesiones ---------- */
.radio{display:flex;align-items:center;gap:8px;font-size:0.875rem;cursor:pointer}
.radio input[type=radio]{width:auto;flex:0 0 auto;accent-color:var(--accent);margin:0}
.dow-pick{display:flex;gap:7px;flex-wrap:wrap}
.dow-pick button{width:40px;height:40px;flex:0 0 40px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink-2);font-family:var(--fd);font-weight:700;font-size:0.8125rem;cursor:pointer}
.dow-pick button:hover{border-color:var(--ink-3)}
.dow-pick button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* ---------- secciones plegables del diálogo de asignar ---------- */
.acc-lista{display:flex;flex-direction:column;gap:8px}
.acc{border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);overflow:hidden}
.acc-h{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;
  padding:13px 14px;cursor:pointer;color:var(--ink)}
.acc-h:hover{background:var(--surface-2)}
.acc-h b{flex:1;font-family:var(--fb);font-weight:600;font-size:0.9062rem}
.acc-dot{width:10px;height:10px;flex:0 0 10px;border-radius:50%}
.acc-chev{color:var(--ink-3);font-size:0.9375rem;line-height:1;transition:transform .15s}
.acc-b{display:none;padding:0 14px 14px}
.acc.abierta{border-color:var(--accent-line);box-shadow:inset 0 0 0 1px var(--accent-line)}
.acc.abierta .acc-b{display:block}
.acc.abierta .acc-chev{transform:rotate(180deg)}
.acc.abierta .acc-h{background:var(--accent-soft)}

/* El botón que aparece al marcar varios días con Cmd o Mayús. */
.calmenu.chip-menu{width:auto;min-width:200px;padding:5px}
.calmenu.chip-menu button{flex-direction:column;align-items:flex-start;gap:1px}
.calmenu.chip-menu small{font-size:0.7188rem;color:var(--ink-3)}

/* ---------- sesión seleccionada en el calendario ---------- */
.cal-ses.sel{box-shadow:0 0 0 2px var(--ink);position:relative;z-index:1}
.cal-ses.ok.sel{box-shadow:0 0 0 2px var(--ok)}

/* El día al que saltas desde «Editar la sesión» parpadea para que lo localices. */
.day.resaltado{border-color:var(--accent-fill);box-shadow:0 0 0 3px var(--accent-soft), var(--shadow)}
@media (prefers-reduced-motion: no-preference){
  .day.resaltado{animation:resalta 1.8s ease-out}
  @keyframes resalta{0%{box-shadow:0 0 0 6px var(--accent-soft), var(--shadow)}100%{box-shadow:0 0 0 3px var(--accent-soft), var(--shadow)}}
}

/* Desplegables de filtro: ocupan lo justo y no empujan al buscador. */
.filters .filtro-sel{width:auto;flex:0 1 auto;min-width:160px;max-width:230px;font-size:0.8438rem;padding:6px 8px}
@media (max-width:620px){ .filters .filtro-sel{flex:1 1 140px;min-width:0;max-width:none} }

/* ---------- nutrición: alimentos, suplementos y diario ---------- */
.ali-tbl{min-width:760px;table-layout:fixed}
/* El acompañante del nombre (categoría y el botón) es cosa del móvil. */
.ali-mas{display:none}
.ali-tbl .a-n{width:26%;min-width:180px}
.ali-tbl .a-cat{width:20%;min-width:150px}
.ali-tbl .a-per{width:88px}
.ali-tbl .a-m{width:74px}
.ali-tbl .a-x{width:40px}
.ali-tbl input,.ali-tbl select{width:100%;min-width:0}
.ali-tbl select{background:transparent;border:1px solid transparent;padding:5px 4px;border-radius:5px;font-size:0.8438rem;color:var(--ink)}
.ali-tbl select:hover{border-color:var(--line-2)}

/* Lo que el cliente hizo un día: la ventana que se abre desde el calendario. */
.mk-cab{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;
  font-size:0.8125rem;color:var(--ink-3)}
.mk-est{font-weight:600;color:var(--ink-2);background:var(--surface-2);
  border-radius:999px;padding:4px 11px}
.mk-est.ok{color:var(--ok);background:var(--ok-soft)}
.mk-fb{margin:0 0 14px;font-style:italic;color:var(--ink-2);font-size:0.875rem}
.mk-ej{border-top:1px solid var(--line);padding:11px 0}
.mk-ej:first-of-type{border-top:0;padding-top:0}
.mk-n{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.mk-n b{font-family:var(--fd);font-size:0.9375rem}
.mk-n span{font-family:var(--fm);font-size:0.75rem;color:var(--ink-3)}
.mk-sets{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.mk-set{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);
  font-size:0.8125rem;font-variant-numeric:tabular-nums;color:var(--ink);
  background:var(--surface-2);border-radius:999px;padding:4px 11px}
.mk-set i{font-style:normal;font-size:0.6875rem;color:var(--ink-3)}
.mk-nada{margin:7px 0 0;font-size:0.8125rem;color:var(--ink-3)}

/* ====================== la ventana de una sesión =========================
   Lo que se ve al tocar un día del calendario. Arriba la fecha y las dos
   cosas que se hacen siempre —editar y completar—; lo demás, detrás del
   punto triple. Debajo, los ejercicios numerados, cada uno abrible. */
.ses-top{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  padding:12px;margin:0 0 12px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface-2)}
.ses-fecha{display:block;margin:0}
.ses-fecha input{max-width:168px}
.ses-acc{position:relative;display:flex;align-items:center;gap:8px;margin-left:auto}
/* El punto triple hereda de .iconbtn, que es diminuto porque vive entre
   filas de una tabla. Aquí va al lado de dos botones, así que necesita el
   mismo alto y un sitio donde pinchar que no sea un pelo. */
.ses-acc .iconbtn{width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  border:1px solid var(--line);font-size:1.0625rem;display:grid;place-items:center;padding:0}
.ses-acc .iconbtn:hover{background:var(--surface-3);color:var(--ink)}
.ses-acc .iconbtn[aria-expanded="true"]{background:var(--surface-3);color:var(--ink)}

/* El desplegable del punto triple: cuelga del botón, alineado a la derecha
   para que no se salga por el borde de la ventana. */
.ses-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:5;min-width:208px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:0 12px 32px rgba(0,0,0,.22);padding:5px;display:flex;flex-direction:column}
.ses-op{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;border-radius:var(--r-s);padding:10px;cursor:pointer;
  color:var(--ink);font:inherit;font-size:0.875rem;min-height:40px}
.ses-op:hover{background:var(--surface-2)}
.ses-op .ci{flex:0 0 18px;text-align:center;color:var(--ink-3)}
.ses-op.peligro{color:var(--bad)}
.ses-op.peligro .ci{color:var(--bad)}

.ses-cab{font-size:0.8125rem;color:var(--ink-3);margin:0 0 8px}
.ses-cardio{margin:0;padding:12px 0;border-top:1px solid var(--line);
  font-size:0.9375rem;line-height:1.5;color:var(--ink-2)}
.ses-ok{color:var(--ok)}

.ses-ej{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ses-ej li{border-bottom:1px solid var(--line)}
.ses-ej-h{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;padding:12px 2px;cursor:pointer;color:var(--ink);font:inherit;
  min-height:48px}
.ses-ej-h:hover{background:var(--surface-2)}
.ses-ej-h .n{flex:0 0 22px;color:var(--ink-3);font-size:0.8125rem;font-variant-numeric:tabular-nums}
.ses-ej-h .tg{flex:0 0 auto;font-family:var(--fd);font-size:0.75rem;font-weight:700;
  color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:1px 5px}
.ses-ej-h b{flex:1 1 auto;font-size:0.9375rem;font-weight:600}
.ses-ej-h .fl{flex:0 0 auto;color:var(--ink-3);transition:transform .15s}
.ses-ej-h.abierto .fl{transform:rotate(180deg)}
.ses-ej-d{padding:0 2px 12px 32px;font-size:0.8125rem;color:var(--ink-2);line-height:1.5}

@media (max-width:620px){
  .ses-top{align-items:stretch}
  .ses-acc{margin-left:0;width:100%}
  .ses-acc .btn{flex:1 1 0}
  .ses-fecha{width:100%}
  .ses-fecha input{max-width:none}
}
/* Los días anteriores, plegados: lo de hoy manda y el resto se abre si hace
   falta. Dentro van con las mismas pastillas que arriba, que es lo mismo que
   ve el cliente en su historial. */
.mk-mas{margin-top:8px}
.mk-mas>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  list-style:none;font-size:0.75rem;font-weight:600;letter-spacing:.03em;
  color:var(--ink-3);padding:3px 0}
.mk-mas>summary::-webkit-details-marker{display:none}
.mk-mas>summary::before{content:"▸";font-size:0.8125rem;transition:transform .15s ease}
.mk-mas[open]>summary::before{transform:rotate(90deg)}
.mk-mas>summary:hover{color:var(--ink-2)}
.mk-dias{margin-top:6px;border-left:2px solid var(--line);padding-left:11px}
.mk-dia{padding:7px 0}
.mk-dia+.mk-dia{border-top:1px solid var(--line)}
.mk-f{display:block;font-family:var(--fm);font-size:0.75rem;color:var(--ink-3);
  margin-bottom:5px}
.mk-ss{display:flex;flex-wrap:wrap;gap:5px}
.mk-ss .mk-set{background:none;border:1px solid var(--line);color:var(--ink-2);
  font-size:0.75rem;padding:3px 9px}
/* Con el alto de una línea suelta se queda en 24 px y es poco para el dedo. */
.mk-graf{margin-top:7px;font-size:0.8125rem;padding:7px 0;min-height:32px}
.mk-mas>summary{min-height:30px}

/* selector de alimento */
.pick-list{max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:9px;margin-top:10px;background:var(--surface-2)}
.pick-it{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:8px 11px;cursor:pointer}
.pick-it:last-child{border-bottom:0}
.pick-it:hover{background:var(--surface-3)}
.pick-it[aria-pressed="true"]{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent-fill)}
.pick-it .pn{font-weight:600;font-size:0.875rem;color:var(--ink)}
.pick-it .pm{font-size:0.75rem;color:var(--ink-3);font-family:var(--fm)}
.pick-it .pm i{font-style:normal;opacity:.75}
/* El número y la unidad, juntos: el hueco crece y el desplegable se queda con
   lo justo para su palabra. */
.qty-uni{display:flex;gap:6px}
.qty-uni input{flex:1 1 0;min-width:0}
.qty-uni select{flex:0 0 auto;width:auto;min-width:72px}
/* 16px clavados en el móvil: por debajo de eso el iPhone hace zoom solo al
   tocar el campo y descoloca el diálogo. La regla general de arriba no llega
   aquí porque el selector con [type=text] pesa más que ella. */
@media (max-width:620px){ .qty-uni input,.qty-uni select{font-size:16px} }
.pick-out{display:flex;align-items:center;min-height:38px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);font-size:0.8438rem}
.lnk{background:none;border:0;padding:0;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}

/* barra de día del diario */
.dia-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.dia-bar input[type="date"]{width:auto;flex:0 0 auto;font-family:var(--fm);font-size:0.8438rem}
.dia-bar .iconbtn{font-size:1.125rem;line-height:1}
.dia-bar .iconbtn[disabled]{opacity:.35;cursor:default}

/* conmutador pauta / diario dentro de la ficha */
.segm{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);margin-bottom:16px}
.segm button{background:none;border:0;padding:6px 14px;border-radius:7px;font-weight:600;font-size:0.8438rem;color:var(--ink-3);cursor:pointer}
.segm button:hover{color:var(--ink)}
.segm button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* tabla de alimentos tal y como la ve el cliente: sin campos, solo lectura */
.ali-tbl.solo-ver{min-width:640px}
.ali-tbl.solo-ver td{padding:9px 8px;font-size:0.8438rem}
.ali-tbl.solo-ver td:first-child{font-weight:600}
.ali-tbl.solo-ver .a-per{width:108px}
.ali-tbl.solo-ver td:nth-child(3){white-space:nowrap}

/* ---------- barra de planificación (disposición copiada de Harbiz) ---------- */
/* Una fila: navegación y vista a la izquierda, mes en el centro, filtro y
   acciones a la derecha. Altura de control 32px, píldoras de radio 80px y
   cajas de select de radio 8px, como allí. */
.hz-planrow{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.hz-plan{font-family:var(--fd);font-weight:600;font-size:0.9375rem;color:var(--ink)}
.hz-mas{width:32px;height:32px;flex:0 0 32px;border-radius:50%;border:1px solid var(--line-2);
  background:transparent;color:var(--ink-2);font-size:1.0625rem;line-height:1;cursor:pointer}
.hz-mas:hover{background:var(--surface-2);color:var(--ink)}

.hz-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;padding:14px 0 10px;position:sticky;top:var(--h-top);z-index:30;background:var(--bg)}
.hz-grp{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.hz-arrow{width:32px;height:32px;flex:0 0 32px;border-radius:80px;border:1px solid var(--line-2);
  background:transparent;color:var(--ink);font-size:1.0625rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.hz-arrow:hover:not([disabled]){background:var(--surface-2)}
.hz-arrow[disabled]{opacity:.35;cursor:default}

.hz-pill{height:32px;border-radius:80px;padding:0 16px;background:transparent;color:var(--ink);
  border:0;box-shadow:inset 0 0 0 1px var(--line-2);font-size:0.875rem;font-weight:600;
  font-family:var(--fb);cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.hz-pill:hover{background:var(--surface-2)}
.hz-pri{height:32px;border-radius:80px;padding:0 16px;border:0;background:var(--accent-fill);
  color:var(--accent-ink);font-size:0.875rem;font-weight:600;font-family:var(--fb);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.hz-pri:hover{filter:brightness(1.07)}
.hz-ic{font-size:0.7812rem;line-height:1}

.hz-box{display:inline-flex;align-items:center;height:32px;border-radius:8px;
  border:1px solid var(--line-2);padding:0 10px;background:transparent}
.hz-box select{height:30px;border:0;background:transparent;color:var(--ink);font-size:0.875rem;
  padding:0 18px 0 0;width:auto;min-width:0;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 7px) 14px,calc(100% - 3px) 14px;background-size:4px 4px;background-repeat:no-repeat}
.hz-box select:focus{outline:none;box-shadow:none}

.hz-mes{display:flex;align-items:center;margin-left:2px}
.hz-mes-t{font-size:1rem;font-weight:700;font-family:var(--fd);color:var(--ink);white-space:nowrap}
.hz-mes-sel{font-size:1rem;font-weight:700;font-family:var(--fd);color:var(--ink);
  background:transparent;border:0;width:auto;text-align:center;cursor:pointer;padding:2px 6px;border-radius:7px}
.hz-mes-sel:hover{background:var(--surface-2)}
.hz-n{font-size:0.7812rem;font-weight:600;color:var(--accent);white-space:nowrap}

/* el aviso de "arrastra para seleccionar" que Harbiz pone en Borrar */
.hz-tip{position:relative;display:inline-flex}
.hz-tiptext{position:absolute;top:38px;right:0;width:min(280px,calc(100vw - 32px));padding:9px 11px;border-radius:9px;pointer-events:none;
  background:var(--surface-3);border:1px solid var(--line);color:var(--ink-2);font-size:0.7812rem;
  line-height:1.45;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:opacity .13s;z-index:60}
.hz-tip:hover .hz-tiptext{opacity:1;visibility:visible}

/* vistas de semana y día: celdas mucho más altas */
.cal-grid.v-semana .cal-dia{min-height:190px}
.cal-grid.v-dia{grid-template-columns:1fr}
.cal-grid.v-dia .cal-dia{min-height:340px}
.cal-grid.v-semana .cal-num,.cal-grid.v-dia .cal-num{font-size:0.75rem;letter-spacing:.02em}

/* vista de lista */
.cal-lista{display:flex;flex-direction:column}
.cal-lista-mes{font-family:var(--fd);font-weight:700;font-size:0.75rem;text-transform:uppercase;
  letter-spacing:.09em;color:var(--ink-3);padding:14px 14px 7px}
.cal-lista-it{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:none;
  border:0;border-top:1px solid var(--line);padding:11px 14px;cursor:pointer;color:var(--ink)}
.cal-lista-it:hover{background:var(--surface-2)}
.cal-lista-it.hoy{box-shadow:inset 3px 0 0 var(--accent-fill)}
.cal-lista-it .cl-d{display:flex;flex-direction:column;align-items:center;width:38px;flex:0 0 38px;
  font-size:0.6562rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.cal-lista-it .cl-d b{font-size:1.0625rem;font-family:var(--fd);color:var(--ink);letter-spacing:0}
.cal-lista-it .cl-n{font-weight:600;font-size:0.9062rem;flex:1 1 auto}
.cal-lista-it .cl-m{font-size:0.7812rem;color:var(--ink-3);white-space:nowrap}
.cal-lista-it .cl-ok{color:var(--ok);font-weight:700}
.cal-lista-it.ok .cl-n{color:var(--ink-2)}

@media (max-width:760px){
  .hz-bar{gap:8px;padding:10px 0 8px}
  .hz-grp{flex:1 1 100%}
  .cal-grid.v-semana .cal-dia{min-height:120px}
}

/* pestañas del selector: alimentos o recetas */
.pick-tabs{display:flex;gap:6px;margin-bottom:10px}
.pick-tabs .fchip{flex:1 1 0;justify-content:center}

/* ---------- progreso del día: anillo de kcal + barras de macros ----------
   Medidores, no series: el relleno lleva el estado y la pista es un tono
   claro del mismo color, para que el estado se lea en toda la barra. */
.prog-dia{display:flex;align-items:center;gap:26px;flex-wrap:wrap}

.ani{position:relative;flex:0 0 auto;width:var(--ani-d);text-align:center;
  --ani-d:172px;--ani:var(--accent-fill);--ani-p:var(--accent-soft)}
.ani.roza{--ani:var(--warn);--ani-p:var(--warn-soft)}
.ani.alto{--ani:var(--bad);--ani-p:var(--bad-soft)}
.ani.neutro{--ani:var(--line-2);--ani-p:var(--surface-2)}
.ani-svg{display:block;width:var(--ani-d);height:var(--ani-d);transform:rotate(-90deg)}
.ani-pista{fill:none;stroke:var(--ani-p);stroke-width:11}
.ani-arco{fill:none;stroke:var(--ani);stroke-width:11;stroke-linecap:round;
  transition:stroke-dashoffset .45s ease}
.ani-c{position:absolute;top:0;left:0;width:var(--ani-d);height:var(--ani-d);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;pointer-events:none}
.ani-c b{font-family:var(--fd);font-size:2.625rem;line-height:1;color:var(--ink)}
.ani-c span{font-size:0.7188rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3)}
.ani-c i{font-style:normal;font-size:0.875rem;font-weight:600;color:var(--ani);margin-top:5px}
.ani.neutro .ani-c i{color:var(--ink-3)}
.ani-pie{margin-top:11px;font-size:0.8125rem;color:var(--ink-3)}
.ani-pie b{color:var(--ink-2)}

.mtrs{flex:1 1 300px;min-width:240px;display:flex;flex-direction:column;gap:15px}
.mtr{--m:var(--accent-fill);--m-p:var(--accent-soft)}
.mtr.roza{--m:var(--warn);--m-p:var(--warn-soft)}
.mtr.alto{--m:var(--bad);--m-p:var(--bad-soft)}
.mtr.neutro{--m:var(--line-2);--m-p:var(--surface-2)}
.mtr-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.mtr-n{font-size:0.8438rem;font-weight:600;color:var(--ink-2)}
.mtr-v{font-size:0.8125rem;color:var(--ink-3);font-family:var(--fm);white-space:nowrap}
.mtr-v b{font-size:0.9375rem;color:var(--ink);font-family:var(--fd)}
.mtr-pista{height:9px;border-radius:5px;background:var(--m-p);overflow:hidden}
.mtr-fill{height:100%;border-radius:5px;background:var(--m);transition:width .45s ease}
.mtr-pie{margin-top:5px;font-size:0.7188rem;color:var(--ink-3)}

@media (max-width:620px){
  .prog-dia{gap:18px;justify-content:center}
  .ani{--ani-d:min(172px, calc(100vw - 96px))}
  .mtrs{flex:1 1 100%}
}

/* ---------- historial de cargas de un ejercicio ---------- */
.hist-top{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.hist-kpi{flex:1 1 110px;display:flex;flex-direction:column;gap:1px;padding:9px 11px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface-2)}
.hist-kpi .k{font-size:0.6562rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.hist-kpi b{font-family:var(--fd);font-size:1.125rem;color:var(--ink);line-height:1.2}
.hist-kpi i{font-style:normal;font-size:0.7188rem;color:var(--ink-3)}

.hist-list{max-height:300px;overflow-y:auto;border:1px solid var(--line);border-radius:9px;background:var(--surface-2)}
.hist-it{display:flex;gap:12px;align-items:flex-start;padding:9px 11px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.hist-it:last-child{border-bottom:0}
.hist-d{display:flex;flex-direction:column;min-width:120px;flex:0 0 auto}
.hist-d b{font-size:0.8438rem;color:var(--ink)}
.hist-d span{font-size:0.7188rem;color:var(--ink-3)}
.hist-s{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 auto}
.hist-set{font-family:var(--fm);font-size:0.7812rem;color:var(--ink-2);background:var(--surface-3);
  border-radius:6px;padding:3px 7px;white-space:nowrap}
.hist-set b{color:var(--ink);font-family:var(--fd)}

.hz-der{margin-left:auto}

/* Lo que se puede hacer con un ejercicio, con la acción escrita al lado del
   icono: un icono solo no se toca si nadie te ha dicho para qué sirve. */
/* La cabecera del ejercicio: el nombre y, a su lado, el botón de ver cómo se
   hace. El botón no baja nunca: si el nombre es largo, se parte él en varias
   líneas y el botón se queda arriba a la derecha, a la altura de la primera. */
.log-ex .h.h-ex{justify-content:flex-start;align-items:flex-start;flex-wrap:nowrap;gap:11px}
.log-ex .h.h-ex b{flex:0 1 auto;min-width:0}
.log-ex .h.h-ex .ex-act{flex:0 0 auto;margin-top:-1px}
.ex-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.ex-act{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:inherit;
  font-size:0.75rem;font-weight:600;color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:999px;padding:5px 12px 5px 9px}
.ex-act i{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;flex:0 0 15px}
.ex-act i svg{width:15px;height:15px;fill:currentColor}
.ex-act:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.iconbtn.ico-svg{display:inline-flex;align-items:center;justify-content:center}
.iconbtn.ico-svg svg{width:13px;height:13px;fill:currentColor}

/* ---------- historial: tira de meses, gráficas y detalle por día ---------- */
.hist-meses{display:flex;gap:4px;overflow-x:auto;padding-bottom:8px;margin-bottom:12px;
  border-bottom:1px solid var(--line);scrollbar-width:none}
.hist-meses::-webkit-scrollbar{display:none}
.hist-meses .hm{flex:0 0 auto;background:none;border:0;padding:5px 10px;border-radius:7px;
  font-size:0.7812rem;font-weight:600;color:var(--ink-3);cursor:pointer;white-space:nowrap}
.hist-meses .hm:hover{background:var(--surface-2);color:var(--ink)}
.hist-meses .hm.vacio{opacity:.45}
.hist-meses .hm.on{background:var(--accent-soft);color:var(--accent)}

.gr-caja{margin-bottom:14px}
.gr-cab{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.gr-cab b{font-size:0.8438rem;color:var(--ink)}
.gr-cab span{font-size:0.7188rem;color:var(--ink-3)}
.gr{width:100%;height:150px;display:block}
.gr-grid{stroke:var(--line);stroke-width:1}
.gr-tick,.gr-lab{fill:var(--ink-3);font-size:0.625rem;font-family:var(--fm)}
.gr-area{fill:var(--accent-soft)}
.gr-line{fill:none;stroke:var(--accent-fill);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.gr-pt circle{fill:var(--bg);stroke:var(--accent-fill);stroke-width:2}
.gr-pt:hover circle{fill:var(--accent-fill);r:6}

.hist-dias{border:1px solid var(--line);border-radius:9px;background:var(--surface-2);
  max-height:260px;overflow-y:auto}
.hist-dia{border-bottom:1px solid var(--line)}
.hist-dia:last-child{border-bottom:0}
.hist-dia > summary{display:flex;align-items:center;gap:9px;padding:9px 11px;cursor:pointer;
  list-style:none;font-size:0.8438rem}
.hist-dia > summary::-webkit-details-marker{display:none}
.hist-dia > summary::before{content:"▸";color:var(--ink-3);font-size:0.6875rem;transition:transform .12s}
.hist-dia[open] > summary::before{transform:rotate(90deg)}
.hist-dia > summary b{color:var(--ink)}
.hd-max{font-family:var(--fd);font-weight:700;color:var(--accent);font-size:0.8125rem}
.hd-ses{margin-left:auto;font-size:0.7188rem;color:var(--ink-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:45%}
.hd-cuerpo{padding:0 11px 11px 31px}
.hd-sem{font-size:0.7188rem;color:var(--ink-3);margin-bottom:6px}
.hd-serie{display:flex;align-items:baseline;gap:6px;font-size:0.8125rem;color:var(--ink-2);padding:2px 0}
.hd-serie b{color:var(--ink);font-family:var(--fd)}
.hd-n{width:22px;flex:0 0 22px;color:var(--ink-3);font-size:0.7188rem;font-family:var(--fm)}
.hd-x{color:var(--ink-3)}

/* una gráfica a la vez, deslizando entre ellas */
.gr-carr{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-bottom:8px}
.gr-carr::-webkit-scrollbar{display:none}
.gr-lam{flex:0 0 100%;width:100%;min-width:100%;max-width:100%;box-sizing:border-box;
  overflow:hidden;scroll-snap-align:start}
.gr-lam .gr-caja{margin-bottom:0}
.gr-puntos{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
.gr-puntos .gp{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  padding:4px 10px;border-radius:7px;font-size:0.75rem;font-weight:600;color:var(--ink-3);cursor:pointer}
.gr-puntos .gp span{width:7px;height:7px;border-radius:50%;background:var(--line-2);display:block;transition:background .15s}
.gr-puntos .gp:hover{color:var(--ink)}
.gr-puntos .gp.on{color:var(--accent)}
.gr-puntos .gp.on span{background:var(--accent-fill)}

/* ---- los 7 días de la semana siempre a la vista, como en "crear programa" ---- */
.bloq-tit{font-family:var(--fd);font-weight:600;font-size:0.9375rem;color:var(--ink);margin-bottom:12px}
.dias-sem{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:14px}
.ds-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px;min-height:108px;display:flex;flex-direction:column;gap:7px}
.ds-col.on{border-color:var(--accent-line);background:var(--accent-soft)}
.ds-tit{font-family:var(--fd);font-weight:600;font-size:0.8125rem;color:var(--ink-2);line-height:1.2}
.ds-tit span{display:block;font-family:var(--fb);font-weight:400;font-size:0.6875rem;color:var(--ink-3)}
.ds-card{display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);padding:7px 8px;cursor:pointer;color:var(--ink)}
.ds-col.on .ds-card{background:var(--surface);border-color:var(--accent-line)}
.ds-n{font-weight:600;font-size:0.8125rem;line-height:1.25}
.ds-m{font-size:0.6875rem;color:var(--ink-3)}
.ds-vacio{display:flex;flex-direction:column;gap:5px;margin-top:auto}
.ds-add{border:1px dashed var(--line-2);background:transparent;border-radius:var(--r-s);padding:5px;font-size:1.0625rem;line-height:1.1;color:var(--ink-3);cursor:pointer}
.ds-add:hover{border-color:var(--accent-line);color:var(--accent)}
.ds-blanco{border:0;background:transparent;font-size:0.6875rem;color:var(--ink-3);cursor:pointer;padding:0}
.ds-blanco:hover{color:var(--ink-2);text-decoration:underline}
@media (max-width:980px){ .dias-sem{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:560px){ .dias-sem{grid-template-columns:repeat(2,minmax(0,1fr))} }
.guardar-prog{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:14px 0 4px}
.guardar-prog .muted{font-size:0.8125rem}
.cardio-dia{padding:14px}
.cardio-dia .chip{margin-bottom:10px}
.cardio-pick{display:flex;flex-wrap:wrap;gap:6px}
.cardio-pick button{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:0.8125rem;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.cardio-pick button:hover{border-color:var(--line-2)}
.cardio-pick button[aria-pressed="true"]{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-ink)}

/* ---- el diario del cliente, sin deslizar ----
   Los anchos de las columnas viven aquí y no escritos en cada celda, para
   poder apretarlos en pantallas estrechas: en el móvil los macros se quedan
   con lo justo y el nombre del alimento se come el resto. */
.dia-tbl{table-layout:fixed;min-width:0}
.dia-tbl input{width:100%;min-width:0}
.dia-tbl .d-n{width:auto;min-width:150px}
.dia-tbl .d-q{width:100px}
.dia-tbl .d-k{width:80px}
.dia-tbl .d-m{width:70px}
.dia-tbl .d-x{width:40px}
@media(max-width:620px){
  /* Solo el diario, que está hecho para caber. La pauta del entrenador lleva
     una tabla ancha de verdad: si a esa también se le quita el deslizar, se
     lleva por delante el ancho de la página entera. */
  .meal .scroll-x:has(.dia-tbl){overflow-x:visible}
  .dia-tbl{min-width:0;width:100%}
  .dia-tbl th,.dia-tbl td{padding:3px 2px}
  .dia-tbl th{font-size:0.5rem;letter-spacing:0;white-space:nowrap;overflow:hidden}
  .dia-tbl input{padding:4px 2px;width:100%;min-width:0;text-align:right}
  .dia-tbl td:first-child input{text-align:left}
  .dia-tbl .d-n{min-width:0}
  .dia-tbl .d-q{width:52px}
  .dia-tbl .d-k{width:42px}
  .dia-tbl .d-m{width:38px}
  .dia-tbl .d-x{width:22px}
  .dia-tbl .iconbtn{padding:2px}
}

/* ---- aviso de instalación para iPhone ----
   Va pegado abajo, justo encima de la barra de pestañas del móvil, y por
   debajo de los mensajes emergentes para no taparlos. */
#avisoInstalar{
  position:fixed;left:10px;right:10px;
  bottom:calc(10px + env(safe-area-inset-bottom,0px));
  z-index:120;display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--accent-line);
  border-radius:var(--r);padding:11px 12px;box-shadow:var(--shadow)
}
#avisoInstalar .ai-txt{flex:1;font-size:0.8438rem;line-height:1.45;color:var(--ink-2)}
#avisoInstalar .ai-txt b{color:var(--ink);font-weight:600}
#avisoInstalar .ai-x{
  flex:0 0 auto;background:none;border:0;color:var(--ink-3);
  font-size:1rem;line-height:1;padding:6px;cursor:pointer
}
#avisoInstalar .ai-x:hover{color:var(--ink)}
@media(max-width:620px){
  /* la barra de pestañas del cliente ocupa la parte de abajo */
  #avisoInstalar{bottom:calc(62px + env(safe-area-inset-bottom,0px))}
}

/* ---- tablas anchas en el móvil ----
   Una tabla de cinco o nueve columnas no cabe en un teléfono, por mucho que se
   aprieten las celdas. Así que por debajo de 620 px cada fila se convierte en
   una ficha: el rótulo de la columna a la izquierda (sale de data-l) y el valor
   a la derecha. Se acabó el deslizar de lado. */
@media(max-width:620px){
  /* Ojo: solo las cajas de ESTAS tablas dejan de tener scroll propio. Si se
     pone en todas las .scroll-x, la tabla de ejercicios (680 px) se sale de la
     pantalla y arrastra la página entera. */
  .scroll-x:has(.ck-tbl), .scroll-x:has(.ali-tbl){overflow-x:visible}
  /* Cada fila ya es una ficha con su propio fondo. Si la caja que las contiene
     lleva ese mismo gris, no se ve dónde acaba una ficha y empieza la otra:
     aquí la caja desaparece y entre ficha y ficha se ve el fondo de la página. */
  .card:has(> .scroll-x > .ck-tbl){background:transparent;border:0;box-shadow:none}
  .card:has(> .scroll-x > .ck-tbl) > .scroll-x{padding:0}
  .ck-tbl, .ali-tbl, .ali-tbl.solo-ver{min-width:0;width:100%;display:block;table-layout:auto}
  .ck-tbl thead, .ali-tbl thead{display:none}
  .ck-tbl tbody, .ali-tbl tbody{display:block}
  .ck-tbl tr, .ali-tbl tr{
    display:block;border:1px solid var(--line);border-radius:var(--r-s);
    padding:10px 12px;margin-bottom:10px;background:var(--surface)
  }
  .ck-tbl td, .ali-tbl td{
    display:flex;align-items:center;justify-content:space-between;gap:5px 12px;
    flex-wrap:wrap;border:0;padding:5px 0;font-size:0.875rem;min-width:0;text-align:right
  }
  .ck-tbl td + td, .ali-tbl td + td{border-top:1px solid var(--line)}
  /* en la ficha del móvil el valor va a la derecha, las etiquetas también */
  .ck-tbl td .chips, .ali-tbl td .chips{justify-content:flex-end}
  .ck-tbl td::before, .ali-tbl td::before{
    content:attr(data-l);flex:0 0 auto;color:var(--ink-3);
    font-size:0.6875rem;text-transform:uppercase;letter-spacing:.07em;text-align:left
  }
  .ck-tbl td[data-l=""]::before, .ali-tbl td[data-l=""]::before{content:none}
  /* la primera celda es el título de la ficha: nombre a la izquierda, sin
     repartir a los lados, que si no el nombre se parte en dos líneas */
  .ck-tbl td:first-child, .ali-tbl td[data-l="Alimento"]{
    display:block;text-align:left;padding-bottom:8px
  }
  .ck-tbl td:first-child::before, .ali-tbl td[data-l="Alimento"]::before{
    display:block;margin-bottom:3px
  }
  .ck-tbl td:first-child b{font-size:0.9375rem}
  /* la celda de los botones ocupa la ficha entera */
  .ck-tbl td.td-acc, .ali-tbl td.td-acc{justify-content:flex-end;padding-top:9px}
  .ck-tbl td.td-acc::before, .ali-tbl td.td-acc::before{content:none}
  .ali-tbl input, .ali-tbl select{width:auto;max-width:62%;text-align:right}
  .ali-tbl td[data-l="Alimento"] input{max-width:100%;flex:1;text-align:left}

  /* Un alimento, una línea: el nombre y su categoría. Lo demás se despliega
     con «Información nutricional», que si no cada alimento se come la pantalla. */
  .ali-tbl tr{padding:8px 12px;margin-bottom:6px}
  /* el rótulo "ALIMENTO" sobra: el nombre se ve que es el nombre */
  .ali-tbl td[data-l="Alimento"]::before{display:none}
  .ali-tbl td[data-l="Alimento"]{padding:0}
  .ali-tbl td[data-l="Alimento"] input{padding:3px 0;border-color:transparent;font-size:0.9375rem;font-weight:600}
  .ali-tbl tr > td:not([data-l="Alimento"]){display:none}
  .ali-tbl tr.abierta > td:not([data-l="Alimento"]){display:flex}
  /* la categoría ya se ve arriba, no hace falta repetirla al desplegar */
  .ali-tbl tr.abierta > td[data-l="Categoría"]{display:none}
  .ali-tbl tr.abierta td[data-l="Alimento"]{padding-bottom:8px}
  .ali-mas{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:5px}
  .ali-cat{font-size:0.6875rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ver-nut{background:none;border:0;padding:7px 0;min-height:34px;font:inherit;font-size:0.75rem;font-weight:600;
    color:var(--accent);cursor:pointer;white-space:nowrap;flex:0 0 auto}

  /* las pestañas de la ficha caben las cuatro sin deslizar */
  .tabs button{padding:8px 7px;font-size:0.8438rem}
}

/* ============================ informe de progreso ============================
   Pensado para verse en pantalla y, sobre todo, para imprimirse en PDF: al
   imprimir se apaga el resto de la app y los colores pasan a tinta sobre
   blanco, que un informe en negro se come el tóner y se lee peor. */
.inf-lanza{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.inf-lanza b{font-family:var(--fd);font-size:0.9375rem}

.inf-acc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}

.informe{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 28px;max-width:860px}
.inf-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding-bottom:18px;border-bottom:2px solid var(--ink);margin-bottom:20px}
.inf-quien{display:flex;align-items:center;gap:14px;min-width:0}
.inf-quien h1{font-size:1.5rem;margin:0}
.inf-sub{margin:2px 0 0;color:var(--ink-3);font-size:0.875rem}
.inf-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;
  font-size:0.8125rem;color:var(--ink-3)}
.inf-meta b{font-family:var(--fd);font-size:0.9375rem;color:var(--ink)}

.inf-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:22px}
.inf-cifras div{background:var(--surface-2);border-radius:var(--r-s);padding:12px 14px}
.inf-cifras .k{display:block;font-size:0.6875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.inf-cifras .v{display:block;font-family:var(--fd);font-size:1.375rem;font-weight:700;margin-top:3px}
.inf-cifras .v small{font-size:0.8125rem;font-weight:600;color:var(--ink-3)}

.inf-bloque{margin-bottom:24px;break-inside:avoid}
.inf-bloque h2{font-size:1rem;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.inf-tbl{width:100%;border-collapse:collapse;font-size:0.875rem}
.inf-tbl th{text-align:left;font-size:0.6875rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line)}
.inf-tbl td{padding:7px 8px;border-bottom:1px solid var(--line)}
.inf-tbl .num{text-align:right;font-family:var(--fm);font-variant-numeric:tabular-nums}
.inf-tbl .sube{color:var(--ok);font-weight:600}
.inf-tbl .baja{color:var(--bad);font-weight:600}
/* En el móvil la tabla del informe no cabe: siete columnas no entran en 390 px
   por mucho que se aprieten. Se encoge un poco y, lo que sobre, se desliza
   dentro de su bloque en vez de arrastrar la página entera. */
@media (max-width:620px){
  .inf-bloque{overflow-x:auto}
  .inf-tbl{font-size:0.75rem}
  .inf-tbl th, .inf-tbl td{padding:5px 6px;white-space:nowrap}
}
.inf-nota{white-space:pre-wrap;margin:0;font-size:0.9375rem;line-height:1.6}
.inf-pie{margin-top:26px;padding-top:12px;border-top:1px solid var(--line);
  font-size:0.75rem;color:var(--ink-3)}

@media print{
  /* tinta sobre blanco, salga como salga la app */
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]){
    --bg:#fff; --surface:#fff; --surface-2:#f3f3ef; --surface-3:#e8e8e2;
    --ink:#111; --ink-2:#333; --ink-3:#666; --line:#ccc; --line-2:#bbb;
    --accent:#111; --accent-soft:#eee; --accent-line:#bbb; --shadow:none;
    color-scheme: light;
  }
  .topbar, .side, .tabbar, .no-print, #toast, #actividad, #avisoInstalar, #sinred{display:none !important}
  .shell, .main{display:block !important;padding:0 !important;margin:0 !important}
  body{background:#fff}
  .informe{border:0;padding:0;max-width:none}
  .inf-bloque, .inf-cifras, .inf-tbl tr{break-inside:avoid}
  /* al imprimir no hay scroll que valga: la tabla entera o nada */
  .inf-bloque{overflow:visible !important}
  @page{margin:16mm}
}

/* ============================ ciclo menstrual ============================ */
.ciclo-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.ciclo-cifras div{background:var(--surface-2);border-radius:var(--r-s);padding:10px 12px}
.ciclo-cifras .k{display:block;font-size:0.6875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.ciclo-cifras .v{display:block;font-family:var(--fd);font-size:1.125rem;font-weight:700;margin-top:2px}
.ciclo-cifras .v small{font-size:0.75rem;font-weight:600;color:var(--ink-3)}

.ciclo-hoy{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.ciclo-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:6px 0}
.ciclo-fila .ops{display:flex;gap:6px;flex-wrap:wrap}

.ciclo-sug{margin:12px 0 0;padding:10px 12px;border-radius:var(--r-s);
  background:var(--accent-soft);color:var(--accent);font-size:0.8438rem;line-height:1.5}

/* La tira de los últimos días: un cuadradito por día apuntado. */
.ciclo-tira{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.ct{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:36px;height:40px;border-radius:var(--r-s);background:var(--surface-2);
  border:1px solid var(--line);font-family:var(--fm)}
.ct b{font-size:0.75rem;font-weight:600}
.ct i{font-style:normal;font-size:0.6875rem;color:var(--ink-3);line-height:1}
.ct.regla{background:var(--bad-soft);border-color:var(--bad)}
.ct.regla i{color:var(--bad)}

.ciclo-lista{margin:6px 0 0;padding-left:18px;font-size:0.8438rem;line-height:1.7}

/* ---------- esta semana ---------- */
.sem-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.sem-cifras div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.sem-cifras .k{display:block;font-size:0.6875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.sem-cifras .v{display:block;font-family:var(--fd);font-size:1.5rem;font-weight:700;margin-top:2px}
.sem-cifras .v small{font-size:0.875rem;font-weight:600;color:var(--ink-3)}
.sem-cifras .v.ojo{color:var(--warn)}
/* los puntos de los entrenos de la semana: rellenos los hechos */
.sem-barra{display:inline-flex;gap:3px;vertical-align:middle;margin-right:6px}
.sem-barra i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line-2);display:block}
.sem-barra i.on{background:var(--ok);border-color:var(--ok)}

/* aviso de que hoy se hace otro ejercicio */
.cambio-av{margin-top:4px;font-size:0.8125rem;color:var(--accent);
  background:var(--accent-soft);border-radius:var(--r-s);padding:5px 9px;display:inline-block}

/* ---------- sin cobertura ---------- */
#sinred{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:190;
  background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn);
  padding:8px 15px;border-radius:999px;font-size:0.8125rem;font-weight:600;
  box-shadow:var(--shadow);max-width:calc(100vw - 32px);text-align:center}
#sinred.enviando{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
@media(max-width:900px){#sinred{bottom:calc(120px + env(safe-area-inset-bottom,0px))}}

/* ---------- consentimiento al alta ---------- */
.consent{max-width:720px;line-height:1.55;padding:18px}
.consent h3{margin:16px 0 6px;font-size:14px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2)}
.consent h3:first-child{margin-top:0}
.consent ul{margin:0;padding-left:18px;font-size:14.5px;color:var(--ink-1)}
.consent li{margin:5px 0}
.cons-ch{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-size:14.5px;cursor:pointer}
.cons-ch input{margin-top:3px}
@media (max-width:720px){ .consent ul{font-size:14px} }

/* ---------- alternativas al cambiar un ejercicio ----------
   Se elige mirando el dibujo, no leyendo: por eso manda la foto. */
.cands{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0 4px}
.cands .c{display:flex;flex-direction:column;padding:0;overflow:hidden;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);
  color:var(--ink);text-align:left;font:inherit}
.cands .c:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.cands .c img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#fff;display:block}
.cands .c .t{font-size:0.8125rem;font-weight:600;line-height:1.3;padding:8px 9px 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cands .c .m{font-size:0.6875rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;
  padding:3px 9px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:620px){ .cands{grid-template-columns:repeat(3,1fr)} }

/* ---------- revisión del plan ----------
   Vive pegada al editor, no en una pantalla aparte: la idea es verla de reojo
   mientras montas, no tener que ir a buscarla. */
.rev{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:16px;overflow:hidden}
.rev-cab{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;cursor:pointer;
  background:none;border:0;color:var(--ink);font:inherit;text-align:left}
.rev-cab:hover{background:var(--surface-2)}
.rev-cab b{font-family:var(--fd);font-size:0.9375rem}
.rev-fle{color:var(--ink-3);font-size:0.75rem}
.rev-cuerpo{padding:4px 14px 14px;border-top:1px solid var(--line)}
.rv-obj{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:12px 0 16px}
.rv-obj .fld{flex:0 0 190px}

.rv-barras{display:flex;flex-direction:column;gap:5px}
.rv-m{display:flex;align-items:center;gap:10px;font-size:0.8125rem}
.rv-n{flex:0 0 76px;color:var(--ink-2);font-weight:600}
.rv-b{flex:1 1 auto;position:relative;height:16px;border-radius:4px;background:var(--surface-2);overflow:hidden;min-width:60px}
/* la franja de lo recomendado, por detrás de la barra */
.rv-b u{position:absolute;top:0;bottom:0;background:var(--accent-soft);border-left:1px solid var(--accent-line);border-right:1px solid var(--accent-line)}
.rv-b i{position:absolute;top:3px;bottom:3px;left:0;border-radius:3px;background:var(--ink-3)}
.rv-b i.ok{background:var(--ok)}
.rv-b i.bajo{background:var(--ink-3)}
.rv-b i.alto{background:var(--warn)}
.rv-v{flex:0 0 28px;text-align:right;font-family:var(--fm);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.rv-v.ok{color:var(--ok)} .rv-v.alto{color:var(--warn)}
.rv-f{flex:0 0 54px;font-size:0.6875rem;color:var(--ink-3);text-align:right}

.rv-dias{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0}
.rv-dia{display:inline-flex;flex-direction:column;gap:1px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-s);padding:6px 11px;font-size:0.75rem;color:var(--ink-3)}
.rv-dia b{font-size:0.8125rem;color:var(--ink-2);font-weight:600}
.rv-dia.largo{border-color:var(--warn);color:var(--warn)}
.rv-dia.largo b{color:var(--warn)}

.rv-avisos{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.rv-avisos li{display:flex;align-items:center;gap:12px;background:var(--warn-soft);
  border-radius:var(--r-s);padding:9px 11px;font-size:0.8438rem;color:var(--ink-2);line-height:1.4}
.rv-avisos li span{flex:1 1 auto;min-width:0}
.rv-avisos li .btn{flex:0 0 auto}
.rv-bien{margin:16px 0 0;font-size:0.8438rem;color:var(--ok)}
.rv-pie{margin:14px 0 0;font-size:0.75rem;color:var(--ink-3);line-height:1.6}

@media (max-width:620px){
  .rev-cab{flex-wrap:wrap;gap:7px}
  .rv-n{flex:0 0 62px;font-size:0.75rem}
  .rv-f{display:none}
  .rv-avisos li{flex-wrap:wrap}
}

/* ---------- bloques dentro de una sesión ----------
   Calentamiento, trabajo y vuelta a la calma. Se ven como separadores, no como
   tarjetas: la sesión sigue leyéndose de arriba abajo. */
.bloq-head td{
  padding:12px 10px 5px !important;border-bottom:0 !important;
  font-size:0.6562rem;text-transform:uppercase;letter-spacing:.11em;font-weight:700;color:var(--ink-3)
}
.bloq-head.b-calent td{color:var(--m3)}
.bloq-head.b-estira td{color:var(--m2)}
.bloq-av{
  font-size:0.6875rem;text-transform:uppercase;letter-spacing:.11em;font-weight:700;
  color:var(--ink-3);padding:16px 14px 0
}
.bloq-av.b-calent{color:var(--m3)}
.bloq-av.b-estira{color:var(--m2)}

/* ---------- el reloj de la sesión ---------- */
.rv-reloj{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:0 0 14px;
  font-size:0.8125rem;color:var(--ink-3)}
.rv-reloj b{color:var(--ink);font-family:var(--fd);font-size:0.9375rem}
.rv-rb{flex:1 1 140px;height:8px;border-radius:999px;background:var(--surface-2);position:relative;overflow:hidden;min-width:100px}
.rv-rb i{position:absolute;left:0;top:0;bottom:0;background:var(--ok);border-radius:999px}
.rv-reloj.pasado .rv-rb i{background:var(--warn)}
.rv-reloj.pasado b{color:var(--warn)}
.rv-pri{margin:14px 0 0;font-size:0.8438rem;color:var(--ink-2);line-height:1.5}
.rv-pri b{color:var(--ink)}

/* ---------- músculos secundarios de un ejercicio ---------- */
.sec-mus{display:flex;flex-wrap:wrap;gap:6px 14px;padding:4px 0 2px}
.sec-mus label{display:inline-flex;align-items:center;gap:6px;font-size:0.8438rem;color:var(--ink-2);cursor:pointer}
.sec-mus input{width:auto;flex:0 0 auto;margin:0}
.sec-mus input:disabled + *, .sec-mus label:has(input:disabled){opacity:.45;cursor:default}

/* ---------- medallas y marcas ---------- */
.medallas{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.med{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-s);
  background:var(--surface-2);border:1px solid var(--line);opacity:.55;filter:grayscale(1)}
.med.on{opacity:1;filter:none;border-color:var(--accent-line);background:var(--accent-soft)}
.med-i{font-size:1.375rem;line-height:1;flex:0 0 auto}
.med div{min-width:0;display:flex;flex-direction:column;gap:1px}
.med b{font-size:0.8438rem;font-weight:600;color:var(--ink)}
.med span{font-size:0.6875rem;color:var(--ink-3);line-height:1.3}
.med-nuevas{display:flex;flex-direction:column;gap:8px}
.med-nuevas .med{opacity:1;filter:none;border-color:var(--accent-line);background:var(--accent-soft)}
.pr-lista{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:6px}
.pr-lista li{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--ok-soft);color:var(--ok);border-radius:var(--r-s);padding:9px 12px;font-size:0.875rem}
.pr-lista li b{color:var(--ink)}
.pr-lista li span{font-family:var(--fm);font-variant-numeric:tabular-nums}

/* ---------- la fila de los avisos ---------- */
.avisos{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;margin-bottom:16px}
.avisos.on{border-color:var(--accent-line);background:var(--accent-soft)}
.avisos > span{font-size:1.25rem;line-height:1;flex:0 0 auto}
.avisos div{flex:1 1 auto;min-width:0}
.avisos b{display:block;font-size:0.875rem;font-weight:600;color:var(--ink)}
.avisos p{margin:2px 0 0;font-size:0.8125rem;color:var(--ink-3);line-height:1.4}
.avisos .btn{flex:0 0 auto}

/* ---------- el dedo, en el móvil ----------
   Los iconos de las tablas están pensados para el ratón: 20 px de alto se
   fallan uno de cada tres con el pulgar. Aquí se les da sitio sin cambiar el
   dibujo ni descuadrar las filas. */
@media (max-width:620px){
  .iconbtn{padding:7px 8px;min-height:32px;min-width:32px}
  .ex-tbl .iconbtn{padding:5px 6px;min-height:30px;min-width:28px}
  .ds-blanco{padding:7px 4px;min-height:30px}
  .stu-arch{width:32px;height:32px}
  .fchip{padding:7px 13px}
  .rowacts{opacity:1}
}

/* Los iconos de la navegación pueden ser un carácter o un dibujo; con esto los
   dos miden lo mismo y se alinean igual. */
.navbtn .ic svg{width:17px;height:17px;fill:currentColor;display:block}
.tabbar button > span svg{width:17px;height:17px;fill:currentColor;display:block}
.tabbar button > span{display:grid;place-items:center;height:17px}

/* ---------- cajones de la pantalla de progreso ----------
   Reusan el acordeón que ya había, pero en gris: aquí no hay una sección
   "elegida", son cuatro cosas distintas que cada uno abre cuando le hace falta. */
.plg-lista{display:flex;flex-direction:column;gap:10px}
.plg.abierta{border-color:var(--line-2);box-shadow:none}
.plg.abierta .acc-h{background:var(--surface-2)}
.plg .acc-h{padding:14px 15px;gap:12px}
.plg .acc-h b{font-family:var(--fd);font-size:0.9375rem;flex:0 1 auto}
.plg-r{flex:1 1 auto;min-width:0;text-align:right;font-size:0.8125rem;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plg .acc-b{padding:2px 15px 16px}
/* La gráfica dentro de un cajón ya no necesita su propia caja. */
.chartbox.plano{background:none;border:0;padding:0;box-shadow:none}
@media (max-width:620px){
  .plg .acc-h{padding:13px 13px;gap:8px}
  .plg .acc-h b{font-size:0.875rem}
  .plg-r{font-size:0.75rem}
  .plg .acc-b{padding:2px 13px 14px}
}

/* En el móvil las medallas van de dos en dos y sin la explicación: catorce
   filas con su párrafo cada una son media pantalla de scroll para nada. La
   explicación sigue estando en el título, al mantener pulsado. */
@media (max-width:620px){
  .medallas{grid-template-columns:1fr 1fr;gap:7px}
  .med{padding:9px 9px;gap:8px}
  .med > div > span{display:none}   /* la explicación, no el icono */
  .med b{font-size:0.8125rem;line-height:1.25}
  .med-i{font-size:1.1875rem}
  /* En la celebración sí se explican: son una o dos, y hay sitio. */
  .med-nuevas .med > div > span{display:block}
}

/* ---------- elegir ejercicio, con foto ---------- */
.pick{max-height:min(46vh,340px)}
.pk-it{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:var(--r-s);padding:5px;color:var(--ink)}
.pk-it:hover{background:var(--accent-soft);border-color:var(--accent-line)}
.pk-it img{width:62px;height:42px;flex:0 0 62px;object-fit:contain;background:#fff;border-radius:5px}
.pk-it .pb-sin{width:62px;height:42px;flex:0 0 62px}
.pk-it .pb-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pk-it b{font-size:0.8438rem;font-weight:600;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pk-it small{font-size:0.6875rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- favoritos ----------
   La estrella se queda en el propio ejercicio, así que los favoritos son los
   mismos desde el ordenador y desde el móvil. */
.ex-card{position:relative}
.fav{position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-3);padding:0}
.fav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.fav:hover{color:var(--warn);border-color:var(--warn)}
.fav.on{color:var(--warn);border-color:var(--warn)}
.fav.on svg{fill:currentColor}
.fchip-fav[aria-pressed="true"]{background:var(--warn);border-color:var(--warn);color:#fff}
/* La estrella dentro del selector: se puede tocar para marcar sin salir. */
.pk-fav{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  color:var(--ink-3);cursor:pointer}
.pk-fav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.pk-fav:hover{background:var(--surface-2);color:var(--warn)}
.pk-fav.on{color:var(--warn)}
.pk-fav.on svg{fill:currentColor}
@media (max-width:620px){ .fav{width:34px;height:34px} }

/* ---------- la biblioteca de ejercicios en el móvil ----------
   A una tarjeta por fila con la foto a todo lo ancho solo se veía un ejercicio
   y había que bajar para el siguiente. De dos en dos, con la foto más pequeña,
   se ve la pantalla llena y se busca con la vista en vez de con el dedo. */
@media (max-width:620px){
  .ex-list{grid-template-columns:1fr 1fr;gap:8px}
  .ex-card{padding:8px 9px;border-left-width:3px}
  .ex-thumb{aspect-ratio:1/1;margin-bottom:6px;border-radius:5px}
  .ex-card .n{font-size:0.8125rem;line-height:1.25;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ex-card .m{font-size:0.625rem;letter-spacing:.04em;margin-top:3px}
  .ex-card .c{font-size:0.75rem;margin-top:4px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* Las etiquetas de "Demostración" y "Vídeo" sobran: la foto ya está ahí. */
  .ex-card .meta{display:none}
  /* Los tres botones no caben en una línea a media tarjeta: se reparten. */
  .ex-card .acts{margin-top:7px;flex-wrap:wrap;gap:4px}
  .ex-card .acts .btn{flex:1 1 auto;justify-content:center;padding:7px 8px;font-size:0.75rem}
  .fav{top:6px;right:6px;width:30px;height:30px}
}

/* ============================ Agenda ============================
   Reaprovecha la rejilla del calendario del plan (.cal-grid / .cal-dia) y le
   añade lo suyo: la barra de arriba, las citas de colores y la ventana para
   ponerlas. Los colores no son decoración: dicen de un vistazo si lo que hay
   en ese hueco es un entreno, una cita, o tiempo tuyo que no se toca. */
.ag-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.ag-barra .cal-nav{padding:0;border-bottom:0;gap:6px}
/* Sin capitalize: el texto ya viene con la mayúscula donde toca, y la regla
   ponía "Viernes 23 De Octubre", que en castellano no se escribe así. */
.ag-titulo{font-family:var(--fd);font-size:1rem;font-weight:700;white-space:nowrap}
.ag-segm{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;background:var(--surface)}
.ag-segm button{border:0;background:none;color:var(--ink-2);font:inherit;font-size:0.8125rem;font-weight:600;
  padding:7px 14px;cursor:pointer;line-height:1.25}
.ag-segm button+button{border-left:1px solid var(--line)}
.ag-segm button:hover{background:var(--surface-2)}
.ag-segm button.on{background:var(--accent-fill);color:var(--accent-ink)}
.ag-chk{display:flex;align-items:center;gap:7px;font-size:0.8125rem;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.ag-chk input{width:auto;flex:0 0 auto;margin:0}

.cal-dia[data-agd]{cursor:pointer}
.cal-dia[data-agd]:hover{background:var(--surface-2)}
.cal-dia[data-agd].hoy:hover{background:var(--accent-soft)}
.cal-dia[data-agd]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.ag-ev{display:flex;align-items:baseline;gap:5px;width:100%;text-align:left;border:0;cursor:pointer;
  border-radius:4px;padding:4px 7px;font-size:0.6875rem;line-height:1.35;min-width:0;
  background:var(--accent-fill);color:var(--accent-ink);font-weight:600;font-family:var(--fb)}
.ag-ev:hover{filter:brightness(1.06)}
.ag-ev .ag-h{font-family:var(--fm);font-size:0.625rem;opacity:.8;flex:0 0 auto}
.ag-ev .ag-t{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.ag-ev .ag-s{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.75;font-weight:500}
.ag-ev.grupo{background:var(--ok-soft);color:var(--ok);box-shadow:inset 2px 0 0 var(--ok)}
.ag-ev.cita{background:var(--warn-soft);color:var(--warn);box-shadow:inset 2px 0 0 var(--warn)}
.ag-ev.bloqueo{background:var(--surface-3);color:var(--ink-3);box-shadow:inset 2px 0 0 var(--line-2)}
.ag-ev.recordatorio{background:transparent;color:var(--ink-2);border:1px dashed var(--line-2);padding:3px 6px}
/* El entreno del plan no es una cita: es lo que ya tenía puesto el cliente.
   Va más apagado para que no compita con lo que sí tienes que atender. */
.ag-ev.entreno{background:var(--surface-2);color:var(--ink-2);box-shadow:inset 2px 0 0 var(--line-2);font-weight:500}
.ag-ev.entreno.ok{color:var(--ok);box-shadow:inset 2px 0 0 var(--ok)}
.ag-ev.cancel{opacity:.55;text-decoration:line-through}

/* En la lista, las citas respiran: hay sitio de sobra a lo ancho. */
.cal-lista .ag-ev{border-radius:0;padding:11px 14px;font-size:0.9062rem;gap:10px;border-top:1px solid var(--line)}
.cal-lista .ag-ev .ag-h{font-size:0.8125rem;width:44px;flex:0 0 44px}
.cal-lista-mes.hoy{color:var(--accent)}

/* la ventana de la cita */
.ci-grupo{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:4px 12px;
  max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-s);padding:9px 11px}
.ci-grupo label{display:flex;align-items:center;gap:9px;font-size:0.875rem;cursor:pointer;min-width:0;min-height:32px}
/* 13 px es el tamaño que pone el navegador por su cuenta: con el dedo no se
   acierta, y aquí se marcan clientes de uno en uno. */
.ci-grupo input{width:18px;height:18px;flex:0 0 auto;margin:0}
.ci-grupo label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-asis{display:flex;flex-direction:column;gap:7px;margin-top:7px}
.ci-asis-f{display:flex;align-items:center;gap:8px}
.ci-asis-f b{flex:1 1 auto;min-width:0;font-size:0.875rem;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-acc{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* las próximas citas, en la app del cliente */
.cit-prox h3{font-size:0.9375rem;margin-bottom:10px}
.cit-it{display:flex;align-items:flex-start;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.cit-it:first-of-type{border-top:0;padding-top:0}
.cit-it.hoy .cit-d b{color:var(--accent)}
.cit-d{display:flex;flex-direction:column;align-items:center;width:38px;flex:0 0 38px;
  font-size:0.6562rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.cit-d b{font-size:1.0625rem;font-family:var(--fd);color:var(--ink);letter-spacing:0;line-height:1.15}
.cit-n{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.cit-n b{font-size:0.9062rem;font-weight:600}
.cit-n span{font-size:0.8125rem;color:var(--ink-3)}
.cit-n .cit-no{color:var(--ink-2);font-size:0.8125rem;margin-top:2px}

@media (max-width:760px){
  .ag-barra{gap:8px;padding:10px}
  .ag-titulo{order:-1;flex:1 1 100%;font-size:0.9375rem}
  .ag-segm{flex:1 1 auto}
  .ag-segm button{flex:1 1 auto;padding:7px 8px;font-size:0.75rem}
  .ag-chk{flex:1 1 100%;min-height:34px}
  .ag-chk input{width:18px;height:18px}
  /* En el dedo, 21 px no se aciertan. Las barras del calendario del plan ya
     miden 28 y estas van al lado: la misma altura, o una cantaría. */
  .ag-ev{font-size:0.625rem;padding:4px 6px;gap:4px;min-height:28px;align-items:center}
  .cal-grid .ag-ev .ag-s{display:none}
  .cal-lista .ag-ev{font-size:0.875rem;padding:11px 12px;min-height:44px}
  .cal-lista .ag-ev .ag-h{width:38px;flex:0 0 38px}
}

/* ---------- Agenda: la rejilla por horas ----------
   Dos rejillas con las mismas columnas, una encima de otra: arriba los días
   con lo que no tiene hora, abajo las horas. Las líneas de las horas no son
   elementos, son el fondo: así una semana entera no mete 150 divs de adorno. */
.ag-hor{--hgut:54px;--hh:52px;overflow-x:auto}
.ag-hcabs,.ag-hcuerpo{display:grid;grid-template-columns:var(--hgut) repeat(var(--cols),minmax(0,1fr))}
.ag-hcabs{border-bottom:1px solid var(--line);background:var(--surface)}
.ag-hcab{border-left:1px solid var(--line);padding:8px 6px;min-width:0;cursor:pointer}
.ag-hcab:hover{background:var(--surface-2)}
.ag-hcab.hoy{background:var(--accent-soft)}
.ag-hcab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ag-hdia{display:block;font-family:var(--fm);font-size:0.75rem;color:var(--ink-3);
  letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-hcab.hoy .ag-hdia{color:var(--accent);font-weight:600}
.ag-htodo{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.ag-htodo:empty{display:none}
.ag-hgut{border:0}
.ag-hhoras{position:relative}
.ag-hhoras span{position:absolute;right:8px;transform:translateY(-50%);line-height:1;
  font-family:var(--fm);font-size:0.625rem;color:var(--ink-3)}
.ag-hcol{position:relative;min-width:0;border-left:1px solid var(--line);
  background:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px var(--hh))}
.ag-hcol.hoy{background:
  repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px var(--hh)),var(--accent-soft)}
.ag-hcol:hover{cursor:pointer}
/* La cita colocada: ocupa lo que dura, y el texto cae debajo de la hora si le
   queda sitio. Si la cita es de quince minutos, se ve la hora y poco más: es
   lo que hay, y el resto está en el título emergente. */
.ag-ev.ag-pos{align-items:flex-start;align-content:flex-start;flex-wrap:wrap;
  overflow:hidden;padding:3px 6px;border-radius:5px}
.ag-ev.ag-pos .ag-t{white-space:normal;overflow:hidden}
.ag-ev.serie .ag-h{border-bottom:1px dotted currentColor}
.ag-ev.lleno .ag-s{font-weight:700}

.ag-filtro{width:auto;flex:0 1 190px;min-width:0;padding:6px 10px;font-size:0.8125rem}

/* repetición y aforo, dentro de la ventana de la cita */
.ci-rep{margin-top:9px;display:flex;flex-direction:column;gap:9px}
.ci-dows{display:flex;gap:5px;flex-wrap:wrap}
.ci-dows label{cursor:pointer}
.ci-dows input{position:absolute;opacity:0;width:0;height:0}
.ci-dows span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line-2);font-size:0.8125rem;font-weight:600;color:var(--ink-2);background:var(--surface)}
.ci-dows input:checked+span{background:var(--accent-fill);color:var(--accent-ink);border-color:var(--accent-line)}
.ci-dows input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.ci-repn{display:flex;align-items:center;gap:8px;font-size:0.875rem;color:var(--ink-2)}
.ci-repn input{width:72px;flex:0 0 72px}
.ci-serie{margin-bottom:12px}
.ci-serie label{display:flex;align-items:center;gap:8px;font-size:0.875rem;cursor:pointer;margin-top:5px}
.ci-serie input{width:auto;flex:0 0 auto;margin:0}

@media (max-width:760px){
  /* Siete columnas de hora no caben en un móvil: se arrastra a lo ancho, como
     hace cualquier calendario. El día sí cabe entero. */
  .ag-hcabs,.ag-hcuerpo{min-width:calc(var(--hgut) + var(--cols) * 104px)}
  .ag-hor{--hgut:44px}
  .ag-filtro{flex:1 1 100%}
  .ag-ev.ag-pos{min-height:0}
}

/* ---------- reservas, bonos y horarios ---------- */
.bandas{display:flex;flex-direction:column;gap:7px;margin-top:7px}
.ban{display:flex;align-items:center;gap:7px}
.ban select{flex:1 1 120px;min-width:0}
.ban input[type=time]{flex:0 1 120px;min-width:0}
.ban span{color:var(--ink-3);font-size:0.8125rem}
.ban .btn{flex:0 0 auto;padding:7px 10px}
.ics{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.ics input{flex:1 1 220px;min-width:0;font-family:var(--fm);font-size:0.75rem}
.ics .btn{flex:0 0 auto}

.bono-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bonos{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:9px;margin-top:11px}
.bono{display:flex;flex-direction:column;gap:2px;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);
  padding:10px 12px;color:var(--ink);font:inherit}
.bono:hover{border-color:var(--ink-3);background:var(--surface-2)}
.bono b{font-size:0.875rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bono-n{font-family:var(--fd);font-size:1.375rem;font-weight:700;line-height:1.1;color:var(--ok)}
.bono-n small{font-size:0.875rem;color:var(--ink-3);font-weight:600}
.bono-m{font-size:0.75rem;color:var(--ink-3)}
.bono.gastado .bono-n,.bono.cad .bono-n{color:var(--ink-3)}
.bono.cad{border-style:dashed}

/* los huecos libres, en la agenda del cliente */
.hue-dia{padding:9px 0;border-top:1px solid var(--line)}
.hue-dia:first-of-type{border-top:0;padding-top:0}
.hue-dia b{display:block;font-size:0.75rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);margin-bottom:7px}
.hue{display:flex;gap:6px;flex-wrap:wrap}
.hue .btn{font-family:var(--fm);min-width:68px;justify-content:center}

/* arrastrar una cita */
@media (hover:hover){ .ag-ev.ag-pos{cursor:grab} }
.ag-ev.arrastrando{cursor:grabbing;z-index:9;opacity:.92;box-shadow:0 8px 22px -6px rgba(0,0,0,.45)}

@media (max-width:620px){
  .ban{flex-wrap:wrap}
  .ban select{flex:1 1 100%}
  .ban input[type=time]{flex:1 1 40%}
  .bonos{grid-template-columns:1fr 1fr}
}

/* ---------- cambios de hora pendientes ---------- */
.solis{margin-bottom:16px;border-left:3px solid var(--warn)}
.solis h3{font-size:0.9375rem;margin:0}
.soli{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 0;border-top:1px solid var(--line)}
.soli:first-of-type{border-top:0}
.soli-q{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:2px}
.soli-q b{font-size:0.9375rem;font-weight:600}
.soli-c{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:0.8125rem;color:var(--ink-3)}
.soli-c s{opacity:.75}
.soli-c i{font-style:normal;color:var(--ink-3)}
.soli-c b{font-size:0.8125rem;color:var(--ink);font-weight:600}
.soli-m{font-size:0.8125rem;color:var(--ink-2);font-style:italic}
.soli-acc{display:flex;gap:7px;flex:0 0 auto}

/* el número en la pestaña: lo que hay esperando respuesta */
.nav-pin{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  margin-left:7px;border-radius:999px;background:var(--warn);color:#fff;
  font-family:var(--fb);font-size:0.6875rem;font-weight:700;font-style:normal;line-height:1;
  vertical-align:middle}
#tabbar .nav-pin{position:absolute;margin:0;transform:translate(9px,-9px)}
#tabbar button{position:relative}

.cit-acc{display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.cit-no.pedido{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--warn)}
.cam-huecos{max-height:270px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-s);padding:4px 11px}

@media (max-width:620px){
  .soli-acc{flex:1 1 100%}
  .soli-acc .btn{flex:1 1 auto;justify-content:center}
  .cit-acc{flex:1 1 100%;justify-content:flex-start;margin-top:4px}
}

/* ---------- etiquetas de cliente ----------
   Botones que se pulsan, no un campo de texto con comas. Escrito a mano,
   «online», «Online» y «on line» son tres etiquetas distintas y el filtro
   deja de servir; pulsando, siempre es la misma. */
.etiq{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.etq{border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);
  border-radius:999px;padding:6px 13px;font:inherit;font-size:0.8125rem;font-weight:600;
  line-height:1.3;cursor:pointer;min-height:32px}
.etq:hover{border-color:var(--ink-3);background:var(--surface-2)}
.etq.on{background:var(--accent-fill);color:var(--accent-ink);border-color:var(--accent-line)}
.etq.nueva{border-style:dashed;color:var(--ink-3);font-weight:500}
.etq:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip.etq-mini{background:var(--surface-3);color:var(--ink-2);border-color:transparent}

.lbl-fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lbl-fila .lbl{margin:0}
.cli-barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.cli-barra .tabs{margin-bottom:0}

@media (max-width:620px){
  .cli-barra .ag-filtro{flex:1 1 100%}
  .lbl-fila .ag-filtro{flex:1 1 100%}
}
.etq.borra{display:inline-flex;align-items:center;gap:7px;padding-right:6px;cursor:default}
.etq.borra button{border:0;background:none;color:var(--ink-3);cursor:pointer;font:inherit;
  font-size:0.8125rem;line-height:1;padding:5px 6px;border-radius:50%}
.etq.borra button:hover{background:var(--bad-soft);color:var(--bad)}

/* ---------- huecos libres para reservar ----------
   Van por detrás de las citas, como fondo rayado: marcan el sitio vacío sin
   competir con lo que sí tienes puesto. Pulsarlos abre una cita ahí mismo. */
.ag-libre{position:absolute;left:2px;right:2px;border:0;padding:3px 6px;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:flex-start;overflow:hidden;
  border-radius:5px;color:var(--ok);font:inherit;font-size:0.625rem;font-weight:600;
  background:repeating-linear-gradient(135deg,
    var(--ok-soft) 0 7px, transparent 7px 14px);
  box-shadow:inset 0 0 0 1px var(--ok-soft), inset 2px 0 0 var(--ok)}
.ag-libre span{opacity:.85;font-family:var(--fm);letter-spacing:-.02em}
.ag-libre:hover{background:var(--ok-soft);box-shadow:inset 0 0 0 1px var(--ok)}
.ag-libre:hover span::after{content:" · poner algo";font-family:var(--fb);letter-spacing:0}
.ag-libre:focus-visible{outline:2px solid var(--ok);outline-offset:-2px}
/* La cita siempre por encima del hueco. */
.ag-hcol .ag-ev.ag-pos{z-index:2}

.ag-libres-n{position:absolute;left:6px;bottom:4px;font-size:0.5938rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ok);opacity:.85;pointer-events:none}
.cal-grid.v-mes .cal-dia{padding-bottom:16px}

@media (max-width:760px){
  .ag-libre{font-size:0.5938rem;padding:2px 4px}
  .ag-libre:hover span::after{content:""}
}
.ag-nohuecos{display:flex;align-items:flex-start;gap:9px;margin:0;padding:12px 14px 0;
  font-size:0.8125rem;color:var(--ink-2)}
.ag-nohuecos span{color:var(--ok);font-size:0.9375rem;line-height:1.2;flex:0 0 auto}

/* La hora que ya está cogida, en la agenda del cliente. Se ve que existe y
   que no cabe, y nada más: ni quién la ocupa, ni por qué. */
.hue-no{display:inline-flex;align-items:center;justify-content:center;min-width:68px;min-height:34px;
  padding:7px 11px;border-radius:var(--r-s);border:1px dashed var(--line-2);
  background:var(--surface-2);color:var(--ink-3);font-family:var(--fm);font-size:0.8125rem;
  text-decoration:line-through;text-decoration-thickness:1px;cursor:not-allowed;user-select:none}

/* el aviso de ficha a medias, y el enlace para volver a abrirla */
.avisos.falta{border-left:3px solid var(--warn)}
.enlace{border:0;background:none;font:inherit;color:var(--accent);cursor:pointer;
  display:inline-block;padding:5px 2px;min-height:28px;
  text-decoration:underline;text-underline-offset:2px}
.enlace:hover{color:var(--ink)}

/* ---------- la sesión del cliente: foto quieta y marcas plegadas ----------
   Antes cada ejercicio abría con ocho casillas vacías para apuntar kilos. La
   mayoría no apunta nada, así que lo que leía era una pantalla llena de
   huecos en blanco en vez de lo único que necesita: cuántas series y cuántas
   repeticiones. Ahora eso va primero y las casillas están a un toque. */
.ex-cab{display:flex;gap:16px;align-items:flex-start}
.ex-cab-t{flex:1 1 auto;min-width:0}
/* Sin esto el nombre se comprime hasta partirse letra a letra en el móvil. */
.ex-cab .h.h-ex{flex-wrap:wrap;gap:8px}
.ex-cab .h.h-ex b{flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
/* Un tercio del ancho de la tarjeta: a 76 px no se distinguía la postura,
   que es justo para lo que está. */
.ex-prev{flex:0 0 32%;position:relative;max-width:360px;aspect-ratio:1/1;padding:0;border:0;cursor:pointer;
  border-radius:var(--r-s);overflow:hidden;background:var(--surface-2);display:block}
/* contain y no cover: con cover la caja se rellena recortando lo que sobra, y
   en las fotos que no son cuadradas eso se come parte del dibujo. Prefiero
   que quepa entera aunque queden dos franjas de fondo a los lados. */
.ex-prev canvas{width:100%;height:100%;object-fit:contain;display:block}
.ex-prev i{position:absolute;right:7px;bottom:7px;display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.62)}
.ex-prev i svg{width:13px;height:13px;fill:#fff}
.ex-prev:hover{filter:brightness(1.06)}
.ex-prev:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.presc-linea{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;
  font-family:var(--fm);font-size:0.8125rem;color:var(--ink);font-variant-numeric:tabular-nums}
.presc-linea>span{font-weight:600}

/* Rellenar marcas y Hecho, uno al lado del otro: quien no quiera apuntar
   pesos al menos puede dar el check y seguir. */
.ex-botones{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:9px}
.btn-marcas{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font:inherit;font-size:0.8125rem;font-weight:600;color:var(--ink-2);
  background:none;border:1px dashed var(--line-2);border-radius:999px;padding:6px 13px;min-height:32px}
.btn-marcas svg{width:13px;height:13px;fill:currentColor;flex:0 0 13px}
.btn-marcas:hover{border-color:var(--ink-3);color:var(--ink)}
.btn-marcas.on{border-style:solid;border-color:var(--accent-line);
  background:var(--accent-soft);color:var(--accent)}
.btn-hecho.on{border-style:solid;border-color:var(--ok);
  background:var(--ok-soft);color:var(--ok)}
.btn-hecho.on:hover{border-color:var(--ok);color:var(--ok)}
/* En modo consulta el entrenador no marca nada, solo ve lo que marcó el
   cliente, así que ahí es una etiqueta y no un botón. */
.hecho-chip{display:inline-flex;align-items:center;gap:6px;font-size:0.8125rem;
  font-weight:600;color:var(--ok);background:var(--ok-soft);
  border-radius:999px;padding:5px 12px;min-height:30px}
.hecho-chip svg{width:13px;height:13px;fill:currentColor;flex:0 0 13px}
.marcas{margin-top:4px}

@media (max-width:620px){
  /* En el móvil la columna de al lado se queda sin sitio para los botones,
     así que la foto va arriba y el texto debajo, a todo el ancho. */
  .ex-cab{flex-direction:column;gap:10px}
  /* Antes iba a todo el ancho en 16:10 y, como casi todas las fotos son
     cuadradas, se perdía un tercio del alto. Cuadrada y centrada se ve
     entera y sigue siendo grande. */
  .ex-prev{flex:0 0 auto;width:100%;max-width:240px;margin:0 auto;aspect-ratio:1/1}
  .ex-prev i{right:7px;bottom:7px;width:26px;height:26px}
  /* El tiempo de descanso, en la misma línea que las series y las repeticiones
     en vez de caer debajo. Con la fuente de 13,8 px se salían 14 de los 1009
     ejercicios que hay en los planes; a 12,5 px y con menos hueco, uno. */
  /* La celda del mes mide 46 px: el título no cabe y salía cortado («10…»).
     Ahí va solo la hora, que es lo que se busca de un vistazo; el nombre
     entero está en la lista de abajo. */
  .presc-linea{font-size:0.735rem;gap:8px}
  .presc-linea .resttimer{padding:4px 9px;gap:4px}
}