/* FORGIA · Material 3 Expressive con paleta boho.
   Colores (8 acentos, claro y oscuro), formas expresivas y resortes: theme.css (generado con npm run theme).
   Aquí: tipografía, forma, elevación, estados, componentes y pantallas.
   1 Base y tokens · 2 Componentes · 3 Entreno · 4 Isla, consejos y notificaciones · 5 Comida · 6 Social y festejos
   7 Historial, Guía y Mi cuenta · 8 Biblioteca, rutinas, juegos y regalo · 9 Movimiento */

/* ===================== 1 · Base y tokens ===================== */
/* Tipografías alojadas en la app (funcionan sin internet). Licencia OFL: ver fonts/ */
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/figtree-latin-wght-normal.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
:root{
  --font-brand:"Bricolage Grotesque","Avenir Next","Trebuchet MS",system-ui,sans-serif;
  --font-plain:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  /* Escala tipográfica de Material 3 con énfasis (letras de la marca) */
  --t-display-l:800 52px/1.04 var(--font-brand);--t-display-m:800 44px/1.05 var(--font-brand);--t-display-s:800 36px/1.08 var(--font-brand);
  --t-headline-l:800 32px/1.12 var(--font-brand);--t-headline-m:800 28px/1.15 var(--font-brand);--t-headline-s:800 24px/1.2 var(--font-brand);
  --t-title-l:760 21px/1.24 var(--font-brand);--t-title-m:700 16px/1.4 var(--font-plain);--t-title-s:700 14px/1.4 var(--font-plain);
  --t-body-l:400 16px/1.5 var(--font-plain);--t-body-m:400 14.5px/1.45 var(--font-plain);--t-body-s:500 12.5px/1.35 var(--font-plain);
  --t-label-l:700 14.5px/1.3 var(--font-plain);--t-label-m:700 12.5px/1.3 var(--font-plain);--t-label-s:700 11.5px/1.3 var(--font-plain);
  /* Forma: esquinas de Material 3 (un poco más amplias, expresivas) */
  --r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:18px;--r-lgi:22px;--r-xl:28px;--r-xli:32px;--r-xxl:44px;--r-full:999px;
  /* Elevación (sombras cálidas) */
  --e1:0 1px 2px rgb(48 28 12/.16),0 1px 3px 1px rgb(48 28 12/.08);
  --e2:0 1px 2px rgb(48 28 12/.18),0 2px 6px 2px rgb(48 28 12/.09);
  --e3:0 4px 8px 3px rgb(48 28 12/.1),0 1px 3px rgb(48 28 12/.18);
  --e4:0 6px 10px 4px rgb(48 28 12/.11),0 2px 3px rgb(48 28 12/.18);
  --e5:0 10px 16px 6px rgb(48 28 12/.12),0 4px 6px rgb(48 28 12/.18);
  /* Capa de estado (pasar el dedo o el mouse, foco, presionar) */
  --sl-h:8%;--sl-f:10%;--sl-p:12%;
  /* Nombres de antes → roles de Material 3 (los usa también el HTML que arma JavaScript) */
  --bg:var(--md-surface);--surface:var(--md-surface-container-low);--ink:var(--md-on-surface);--muted:var(--md-on-surface-variant);--line:var(--md-outline-variant);
  --maya:var(--md-primary);--maya-soft:var(--md-secondary-container);--on-maya:var(--md-on-primary);
  --bug:var(--md-tertiary);--bug-soft:var(--md-tertiary-container);--on-bug:var(--md-on-tertiary);
  --ok:var(--md-success);--ok-soft:var(--md-success-container);--on-ok:var(--md-on-success);
  --warn:var(--md-warning);--warn-soft:var(--md-warning-container);
  --carb:var(--md-carb);--carb-soft:var(--md-carb-container);--fat:var(--md-fat);--fat-soft:var(--md-fat-container);
  --display:var(--font-brand);--body:var(--font-plain);
  /* Figura de músculos (body.js) */
  --bbase:var(--md-surface-container-highest);--bdec:var(--md-surface-container-high);--bout:var(--md-outline-variant);--bl2:var(--md-primary);--bl1:color-mix(in srgb,var(--md-primary) 42%,var(--md-surface-container-highest));
  /* Onda de las barras de progreso de Material 3 Expressive */
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 6 Q6 0 12 6 T24 6' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  color-scheme:light dark;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{height:auto;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);-webkit-text-size-adjust:100%;background:var(--md-surface)}
body{margin:0;background:var(--md-surface);color:var(--md-on-surface);font:var(--t-body-l);padding-bottom:104px;-webkit-tap-highlight-color:transparent;transition:background-color var(--m3-effects-slow-d) var(--m3-effects-slow),color var(--m3-effects-slow-d) var(--m3-effects-slow)}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--md-primary);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--md-secondary);outline-offset:2px}
::selection{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
[hidden]{display:none!important}
.wrap{max-width:560px;margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.note{font:var(--t-body-m);color:var(--md-on-surface-variant);margin:10px 2px}
/* Íconos de Material Symbols (icons.js): toman el color del texto */
.ic{width:1.25em;height:1.25em;fill:currentColor;flex:none;display:inline-block;vertical-align:-.25em}
.ic.lg{width:28px;height:28px}
/* Capa de estado de Material en todos los botones: un velo del color del texto */
button{--slo:0%;background-image:linear-gradient(color-mix(in srgb,currentColor var(--slo),transparent),color-mix(in srgb,currentColor var(--slo),transparent))}
@media (hover:hover){button:hover:not(:disabled){--slo:var(--sl-h)}}
button:focus-visible{--slo:var(--sl-f)}
button:active:not(:disabled){--slo:var(--sl-p)}
button:disabled{cursor:not-allowed}

/* ===================== 2 · Componentes ===================== */
/* --- Botones. Llenos (principal), tonales, con borde y de texto. Al presionar cambian de forma (redondo → más cuadrado). --- */
.cbtn,.tb,.smallbtn,.hb,.hbig,.gobtn,.ubtns button,.gbtn,.cact,.cmore,.cok,.altact .smallbtn,.updbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r-full);font:var(--t-label-l);letter-spacing:.01em;
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),transform var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects),color var(--m3-effects-d) var(--m3-effects),box-shadow var(--m3-effects-d) var(--m3-effects)}
.cbtn:active:not(:disabled),.tb:active:not(:disabled),.smallbtn:active:not(:disabled),.hb:active:not(:disabled),.hbig:active:not(:disabled),.gobtn:active:not(:disabled),.ubtns button:active,.gbtn:active,.cact:active,.cmore:active,.cok:active,.updbtn:active{border-radius:var(--r-md);transform:scale(.97)}
.cbtn:disabled,.tb:disabled,.smallbtn:disabled{opacity:.38}
/* lleno grande (acción principal de una hoja o tarjeta) */
.cbtn{display:flex;width:100%;min-height:56px;margin-top:12px;padding:0 24px;background:var(--md-primary);color:var(--md-on-primary);font:var(--t-title-m);font-weight:800}
.cbtn.wide{width:100%;margin:8px 0 18px}
.cbtn.sec{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
/* tonal / con borde (botón mediano) */
.smallbtn{min-height:44px;padding:0 18px;margin-top:10px;background:var(--md-surface-container-high);color:var(--md-on-surface)}
.smallbtn.pri{background:var(--md-primary);color:var(--md-on-primary)}
.smallbtn.wide{display:flex;width:100%;min-height:52px;font:var(--t-title-m);font-weight:800}
.smallbtn.danger{background:var(--md-error-container);color:var(--md-on-error-container)}
/* botones de las hojas */
.tb{min-height:56px;padding:0 16px;background:var(--md-surface-container-high);color:var(--md-on-surface);font:var(--t-title-m);font-weight:750}
.tb.pri{background:var(--md-primary);color:var(--md-on-primary)}
.tb.ok{background:var(--md-success);color:var(--md-on-success)}
.tb.play{background:var(--md-tertiary);color:var(--md-on-tertiary)}
/* destructivo (descartar, borrar): tonal de error; armado (segundo toque) = lleno de error */
.tb.danger{background:var(--md-error-container);color:var(--md-on-error-container)}
.tb.danger.armed{background:var(--md-error);color:var(--md-on-error);border-radius:var(--r-md);animation:armIn var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
@keyframes armIn{0%{transform:scale(.94)}100%{transform:none}}
.fdanger{margin:4px 4px 0;font:var(--t-body-s);color:var(--md-error)}
.trow{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px;margin:8px 0}
.trow2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.trow1{display:grid;grid-template-columns:1fr;gap:8px;margin:8px 0}
.trow3{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;margin:8px 0}
/* enlaces con forma de botón de texto */
.link,.whylink,.swapbtn,.rglater,.rglink,.rtrest,.rtdelr{border:0;background-color:transparent;color:var(--md-primary);font:var(--t-label-l);text-decoration:none;padding:10px 12px;border-radius:var(--r-full);cursor:pointer}
.link:hover,.whylink:hover{text-decoration:underline}
/* botón de ícono (redondo, 48 px de área de toque) */
.ibtn,.xbtn,.nback,.gx,.mrow button,.gdel{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-full);border:0;background-color:transparent;color:var(--md-on-surface-variant);padding:0;flex:none;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects)}
.ibtn:active,.xbtn:active,.nback:active,.gx:active{border-radius:var(--r-md)}
.ibtn .ic,.xbtn .ic,.nback .ic,.gx .ic{width:24px;height:24px}
.ibtn.tonal,.xbtn{background-color:var(--md-surface-container-highest);color:var(--md-on-surface)}

/* --- Chips (8 px, borde suave; seleccionados: contenedor secundario con palomita) --- */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:var(--r-sm);font:var(--t-label-l);font-size:13.5px;background:var(--md-surface-container-high);color:var(--md-on-surface-variant)}
.chip.k{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.chip.o{background:transparent;box-shadow:inset 0 0 0 1px var(--md-outline);color:var(--md-on-surface-variant)}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.opt:not(.ex),.ntabs button,.nport button,.chipx,.rtpick button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border-radius:var(--r-sm);border:0;background-color:transparent;box-shadow:inset 0 0 0 1px var(--md-outline-variant);color:var(--md-on-surface-variant);font:var(--t-label-l);white-space:nowrap;
  transition:background-color var(--m3-effects-d) var(--m3-effects),color var(--m3-effects-d) var(--m3-effects),box-shadow var(--m3-effects-d) var(--m3-effects),padding var(--m3-spatial-fast-d) var(--m3-spatial-fast),border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.opt[aria-pressed="true"],.ntabs button.on,.nport button.on,.rtpick button[aria-pressed="true"]{background-color:var(--md-secondary-container);color:var(--md-on-secondary-container);box-shadow:none;padding-left:10px;border-radius:var(--r-md)}
.opt[aria-pressed="true"]::before,.ntabs button.on::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat;animation:chkIn var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
@keyframes chkIn{from{transform:scale(0)}}
.optlab{font:var(--t-label-m);color:var(--md-on-surface-variant);margin:14px 0 0;text-transform:none}

/* --- Grupo de botones conectados (antes «segmentado»): el elegido se redondea por completo --- */
.seg,.mtog,.menus,.themeseg{display:flex;gap:2px;background:transparent;padding:0;border-radius:0}
.seg button,.mtog button,.menus button{flex:1;min-height:44px;padding:0 12px;border:0;border-radius:var(--r-sm);background-color:var(--md-surface-container-high);color:var(--md-on-surface);font:var(--t-label-l);
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects),color var(--m3-effects-d) var(--m3-effects)}
.seg button:first-child,.mtog button:first-child,.menus button:first-child{border-top-left-radius:var(--r-full);border-bottom-left-radius:var(--r-full)}
.seg button:last-child,.mtog button:last-child,.menus button:last-child{border-top-right-radius:var(--r-full);border-bottom-right-radius:var(--r-full)}
.seg button[aria-pressed="true"],.mtog button[aria-pressed="true"],.menus button.on{background-color:var(--md-secondary);color:var(--md-on-secondary);border-radius:var(--r-full)}
.mtog{padding:10px 14px 0}
.mtog button{flex:0 0 auto;min-height:36px;padding:0 16px}

/* --- Tarjetas (rellenas, sin borde: la jerarquía la dan los tonos) --- */
.card,.sum,.water,.meal,.g,.tline,.reto,.sess,.empty,.todaymus,.nhero,.nmeal{background:var(--md-surface-container-low);color:var(--md-on-surface);border:0;border-radius:var(--r-xl);box-shadow:none}
.card{padding:16px 18px;margin:14px 0}
.card h3,.sum h2,.water h3{font:var(--t-title-l);margin:0 0 6px}
.card ul{margin:6px 0 0;padding-left:20px}
.card>details:first-child,.card>h3+details{margin-top:0;border-top:0;padding-top:0}
.card li{margin:5px 0;font:var(--t-body-m)}
.sum{padding:18px;margin-bottom:14px}
.sum p{margin:0;color:var(--md-on-surface-variant);font:var(--t-body-m)}
.empty{padding:22px 18px;text-align:center;color:var(--md-on-surface-variant);font:var(--t-body-m);background:var(--md-surface-container)}
.cnt{font:var(--t-label-l);color:var(--md-on-surface-variant)}

/* --- Campos de texto (rellenos, esquinas medianas; al enfocar, borde del color principal) --- */
.in{width:100%;min-width:0;height:48px;border:0;border-radius:var(--r-md);background:var(--md-surface-container-highest);color:var(--md-on-surface);font:var(--t-title-m);font-size:17px;font-weight:750;text-align:center;padding:0 6px;
  box-shadow:inset 0 -2px 0 var(--md-outline-variant);transition:box-shadow var(--m3-effects-d) var(--m3-effects),background-color var(--m3-effects-d) var(--m3-effects),border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.in:focus{outline:none;box-shadow:inset 0 0 0 2px var(--md-primary);border-radius:var(--r-sm)}
.in:disabled{opacity:.38}
.in::placeholder{color:var(--md-on-surface-variant);opacity:.6;font-weight:600}
select.in{text-align:left;padding:0 12px}
textarea.bk,.notein{width:100%;min-height:96px;border:0;border-radius:var(--r-md);background:var(--md-surface-container-highest);color:var(--md-on-surface);font:var(--t-body-m);padding:12px 14px;margin-top:8px;box-shadow:inset 0 -2px 0 var(--md-outline-variant);resize:vertical}
textarea.bk:focus,.notein:focus{outline:none;box-shadow:inset 0 0 0 2px var(--md-primary)}
.hrow{display:flex;align-items:center;border-radius:var(--r-md);background:var(--md-surface-container-highest);padding-left:14px;box-shadow:inset 0 -2px 0 var(--md-outline-variant)}
.hrow:focus-within{box-shadow:inset 0 0 0 2px var(--md-primary)}
.hrow .at{font:var(--t-title-m);color:var(--md-on-surface-variant)}
.hrow .in{border:0;background:transparent;box-shadow:none;flex:1;min-width:0;height:48px;padding:0 8px;font:var(--t-body-l);font-weight:600;text-align:left}

/* --- Barra de progreso ondulada (Material 3 Expressive): la parte hecha es una onda que corre --- */
.bar,.nbt,.lvlbar,.ubar,.rbar{position:relative;overflow:hidden}
.bar{height:12px;border-radius:var(--r-full);background:color-mix(in srgb,currentColor 22%,transparent)}
/* La onda se mueve con transform (7.9.2): la anima la tarjeta gráfica sola. Antes se movía la máscara y el teléfono
   repintaba la barra 60 veces por segundo mientras estaba en pantalla (batería). Se ve igual. */
.bar span{position:relative;display:block;height:100%;border-radius:var(--r-full);overflow:hidden;transition:width var(--m3-spatial-slow-d) var(--m3-spatial-slow)}
.bar span::before,.lvlbar i::before,.pfbar i::before{content:"";position:absolute;top:0;bottom:0;left:-24px;right:0;background:currentColor;
  -webkit-mask:var(--wave) 0 50%/24px 12px repeat-x;mask:var(--wave) 0 50%/24px 12px repeat-x;animation:waveT 1.6s linear infinite}
.lvlbar i::before,.pfbar i::before{left:-20px;-webkit-mask-size:20px 10px;mask-size:20px 10px;animation-name:waveT10}
@keyframes waveT{to{transform:translateX(24px)}}
@keyframes waveT10{to{transform:translateX(20px)}}
.barlabel{margin:8px 0 0;font:var(--t-label-m);opacity:.92}

/* --- Indicador de carga de Material 3 Expressive (m3.js: forma que gira y se transforma) --- */
.m3load{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:var(--r-full);background:var(--md-primary-container);vertical-align:middle;flex:none}
.m3load svg{width:38px;height:38px;fill:var(--md-on-primary-container)}
.m3load.sm{width:28px;height:28px}.m3load.sm svg{width:22px;height:22px}
.m3load.bare{background:transparent}.m3load.bare svg{fill:var(--md-primary)}
/* esperando (cargar la biblioteca, Social…): el indicador grande con su texto */
.m3wait{display:grid;justify-items:center;gap:14px;padding:44px 16px;text-align:center;color:var(--md-on-surface-variant);font:var(--t-body-m)}
.m3wait p{margin:0}
.nload{display:flex;align-items:center;justify-content:center;gap:10px}
.social-hero .m3load{margin:6px auto 0}
.spin{display:inline-block;width:18px;height:18px;vertical-align:-4px;background:var(--md-primary);-webkit-mask:var(--shape-softburst) center/contain no-repeat;mask:var(--shape-softburst) center/contain no-repeat;animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- Insignias (Material 3: punto pequeño o número) --- */
.bdg{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-full);background:var(--md-error);color:var(--md-on-error);font:var(--t-label-s);line-height:18px;text-align:center;animation:bdgIn var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
@keyframes bdgIn{from{transform:scale(0)}}

/* --- Hojas inferiores (esquinas de 28 px, asa, fondo con velo) --- */
.scrim,.sheetbg{position:fixed;inset:0;background:rgb(var(--md-scrim-rgb)/.38);z-index:50;display:none}
.sheetbg{display:block;z-index:90}
.scrim.show{display:block;animation:fadeIn var(--m3-effects-d) var(--m3-effects) both}
.sheet,.fsheet,.nsheet{position:fixed;left:0;right:0;bottom:0;z-index:51;max-width:560px;margin:0 auto;background:var(--md-surface-container-low);color:var(--md-on-surface);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--e3);overflow:auto;overscroll-behavior:contain}
.sheet{padding:6px 20px calc(20px + env(safe-area-inset-bottom,0px));max-height:92vh;display:none}
.sheet.show{display:block;animation:sheetUp var(--m3-spatial-d) var(--m3-spatial) both}
.fsheet{z-index:91;max-height:86vh;padding:20px 18px calc(24px + env(safe-area-inset-bottom,0px));animation:sheetUp var(--m3-spatial-d) var(--m3-spatial) both}
.nsheet{z-index:91;height:min(92vh,92dvh);display:flex;flex-direction:column;padding:10px 18px calc(14px + env(safe-area-inset-bottom,0px));animation:sheetUp var(--m3-spatial-d) var(--m3-spatial) both;overflow-y:auto}
.nsheet>*{flex-shrink:0}
@keyframes sheetUp{from{transform:translateY(72px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.grab{width:32px;height:4px;border-radius:var(--r-full);background:var(--md-on-surface-variant);opacity:.4;margin:10px auto 8px}
.sh-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.sh-h h2{font:var(--t-headline-s);margin:0}
.sh-h .x{min-height:40px;padding:0 16px;border-radius:var(--r-full);border:0;background-color:var(--md-surface-container-highest);color:var(--md-on-surface);font:var(--t-label-l);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.sh-h .x:active{border-radius:var(--r-md)}
.xbtn{position:absolute;right:12px;top:12px}
.sep{height:1px;background:var(--md-outline-variant);margin:16px 0}

/* --- Aviso breve (snackbar): superficie inversa abajo --- */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom,0px));background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);padding:14px 18px;border-radius:var(--r-md);font:var(--t-body-m);font-weight:600;z-index:60;width:max-content;max-width:calc(100vw - 32px);text-align:left;display:none;box-shadow:var(--e3)}
.toast.show{display:block;animation:toastIn var(--m3-spatial-d) var(--m3-spatial)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,24px) scale(.94)}to{opacity:1;transform:translate(-50%,0)}}
body.haspill .toast{bottom:calc(176px + env(safe-area-inset-bottom,0px))}

/* --- Barra superior (Material 3: título grande que al bajar pasa a la barra compacta) --- */
.top{padding:20px 0 4px}
.toprow{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.top h1{font:var(--t-headline-l);font-size:30px;margin:0;letter-spacing:-.01em;color:var(--md-on-surface)}
.top p{margin:4px 0 0;color:var(--md-on-surface-variant);font:var(--t-body-m)}
.top .sub{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.top .frase{font-style:italic;font-size:15px;line-height:1.35}
.top .frase .fw{display:inline-block;opacity:0;transform:translateY(8px);filter:blur(3px);animation:fwIn var(--m3-spatial-slow-d) var(--m3-spatial-slow) forwards;animation-delay:calc(var(--i) * 55ms + 120ms)}
@keyframes fwIn{to{opacity:1;transform:none;filter:none}}
.topchips{display:flex;align-items:center;gap:6px;flex:none}
.net{display:none;margin:10px 0 0;padding:12px 14px;border-radius:var(--r-lg);background:var(--md-warning-container);color:var(--md-on-warning-container);font:var(--t-body-m);font-weight:650}
.net.show{display:flex;gap:10px;align-items:center}
/* acción de la barra: llama (racha), campana y regalo */
.flamechip{display:inline-flex;align-items:center;gap:2px;height:44px;border:0;border-radius:var(--r-full);background-color:var(--md-surface-container-high);padding:0 14px 0 8px;font:var(--t-title-m);font-weight:800;color:var(--md-on-surface);flex:none;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.flamechip:active{border-radius:var(--r-md)}
.flamechip .flame{width:24px;height:30px}
.flamechip.dressed .flame{width:28px;height:35px}
.flamechip.s-pending{color:var(--md-on-surface-variant)}
.bellchip,.giftchip{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--r-full);background-color:var(--md-surface-container-high);color:var(--md-on-surface);padding:0;flex:none;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects)}
.bellchip:active,.giftchip:active{border-radius:var(--r-md)}
.bellchip .ic{width:24px;height:24px;transform-origin:50% 12%}
.bellchip.has{background-color:var(--md-primary-container);color:var(--md-on-primary-container)}
.bellchip .bdg{top:-3px;right:-3px;box-shadow:0 0 0 2px var(--md-surface)}
.bellchip.gulp{animation:bellGulp .7s var(--m3-spatial-fast)}
.bellchip.gulp .ic{animation:bellRing .8s var(--m3-effects)}
.bellchip.gulp::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--md-primary);animation:bellRipple .7s var(--m3-effects) forwards;pointer-events:none}
@keyframes bellGulp{0%{transform:scale(1)}30%{transform:scale(1.22)}55%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes bellRing{0%,100%{transform:rotate(0)}20%{transform:rotate(18deg)}40%{transform:rotate(-13deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-3deg)}}
@keyframes bellRipple{from{opacity:.85;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}
.giftchip{background-color:var(--md-tertiary-fixed);color:var(--md-on-tertiary-fixed);animation:rgChip 3s var(--m3-spatial) infinite}
.giftchip svg{width:28px;height:28px}
.giftchip::after{content:"";position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:var(--md-error);box-shadow:0 0 0 2px var(--md-surface)}
@keyframes rgChip{0%,70%,100%{transform:none}75%{transform:rotate(-12deg) scale(1.08)}82%{transform:rotate(10deg)}89%{transform:rotate(-6deg)}95%{transform:rotate(3deg)}}
/* barra compacta (aparece al bajar): Forgia, llama y campana siempre a la mano */
.minibar{position:fixed;top:0;left:0;right:0;z-index:35;padding-top:env(safe-area-inset-top,0px);background:var(--md-surface-container);box-shadow:var(--e2);transform:translateY(-110%);visibility:hidden;transition:transform var(--m3-spatial-d) var(--m3-spatial),visibility 0s linear var(--m3-spatial-d)}
html.mini .minibar{transform:none;visibility:visible;transition:transform var(--m3-spatial-d) var(--m3-spatial),visibility 0s}
html.locked .minibar{visibility:hidden}
.mbin{max-width:560px;margin:0 auto;padding:6px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.mbrand{border:0;background-color:transparent;padding:6px 10px 6px 0;min-height:44px;font:var(--t-title-l);font-size:22px;color:var(--md-on-surface);border-radius:var(--r-md)}
.minibar .bellchip{width:40px;height:40px}
.minibar .flamechip{height:40px;font-size:15px}
.minibar .flamechip .flame,.minibar .flamechip.dressed .flame{width:22px;height:28px}

/* --- Barra de navegación (5 destinos; indicador en forma de píldora que crece desde el centro) --- */
.nav{position:fixed;left:0;right:0;bottom:0;background:var(--md-surface-container);display:grid;grid-template-columns:repeat(5,1fr);padding:12px 8px calc(14px + env(safe-area-inset-bottom,0px));z-index:30;box-shadow:0 -1px 0 color-mix(in srgb,var(--md-outline-variant) 60%,transparent)}
.nav button{position:relative;border:0;background-color:transparent;background-image:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;min-height:56px;font:var(--t-label-m);color:var(--md-on-surface-variant);border-radius:var(--r-lg)}
.nav .ni{position:relative;display:grid;place-items:center;width:64px;height:32px;border-radius:var(--r-full);isolation:isolate}
.nav .ni::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--md-secondary-container);transform:scaleX(.3);opacity:0;transition:transform var(--m3-spatial-fast-d) var(--m3-spatial-fast),opacity var(--m3-effects-fast-d) var(--m3-effects-fast)}
@media (hover:hover){.nav button:hover .ni::before{opacity:.5;transform:none;background:color-mix(in srgb,var(--md-on-surface) 8%,transparent)}}
.nav button:active .ni{transform:scale(.94)}
.nav .ni{transition:transform var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.nav .ni .ic{width:24px;height:24px}
.nav .ni .on{display:none}
.nav button[aria-current="page"]{color:var(--md-on-surface);font-weight:800}
.nav button[aria-current="page"] .ni{color:var(--md-on-secondary-container)}
.nav button[aria-current="page"] .ni::before{transform:none;opacity:1;background:var(--md-secondary-container)}
.nav button[aria-current="page"] .ni .on{display:block;animation:navPop var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.nav button[aria-current="page"] .ni .off{display:none}
@keyframes navPop{0%{transform:scale(.7)}100%{transform:scale(1)}}

/* --- Aviso «Instálala», banners y aviso de actualización --- */
.install,.banner{display:flex;gap:10px;align-items:center;justify-content:space-between;border-radius:var(--r-lg);padding:12px 14px;margin:0 0 12px;font:var(--t-body-m);font-weight:600}
.install{background:var(--md-surface-container-high);color:var(--md-on-surface)}
.install>.ic{width:24px;height:24px;color:var(--md-primary)}
.install>span{flex:1}
.net .ic{width:22px;height:22px;flex:none}
.install div{display:flex;gap:6px;flex:none}
.install button,.banner button{min-height:40px;padding:0 16px;border-radius:var(--r-full);border:0;background-color:var(--md-primary);color:var(--md-on-primary);font:var(--t-label-l);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.install button:active,.banner button:active{border-radius:var(--r-md)}
.install button.q{background-color:transparent;color:var(--md-primary)}
.banner{background:var(--md-warning-container);color:var(--md-on-warning-container)}
.banner button{flex:none;background-color:var(--md-on-warning-container);color:var(--md-warning-container)}
.updbar{margin:12px 0 0;padding:14px 16px;border-radius:var(--r-xl);background:var(--md-primary-container);color:var(--md-on-primary-container);animation:sheetUp var(--m3-spatial-d) var(--m3-spatial)}
.updbar.news{background:var(--md-surface-container-high);color:var(--md-on-surface)}
.updbar b{display:block;font:var(--t-title-l);margin-bottom:2px}
.top .updbar p,.top .updbar li{color:inherit}
.updbar p{margin:0 0 8px;font:var(--t-body-m)}
.updbar ul{margin:6px 0 8px;padding-left:20px;font:var(--t-body-m)}
.updbar li{margin:3px 0}
.ubtns{display:flex;gap:8px;flex-wrap:wrap}
.ubtns button{min-height:44px;padding:0 18px;background-color:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.ubtns button.solid{background-color:var(--md-primary);color:var(--md-on-primary);box-shadow:none}
.updbtn{flex:none;flex-direction:column;gap:2px;min-height:56px;min-width:72px;padding:6px 12px;border-radius:var(--r-lg);background:var(--md-primary-container);color:var(--md-on-primary-container);font:var(--t-label-m)}
.updbtn .ic{width:22px;height:22px}
.updbtn.spin .ic{animation:spin .9s linear infinite}
.updbtn.wide{flex-direction:row;width:100%;min-height:52px;margin-top:12px;gap:8px;font:var(--t-label-l)}

/* ===================== 3 · Entreno ===================== */
/* --- Días: grupo de botones conectados; el elegido se redondea y se llena --- */
.strip{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin:14px 0 16px}
.dsel{position:relative;border:0;background-color:var(--md-surface-container-high);color:var(--md-on-surface);border-radius:var(--r-sm);padding:9px 0 8px;min-height:60px;display:flex;flex-direction:column;align-items:center;gap:6px;font:var(--t-label-l);font-size:13px;min-width:0;
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects),color var(--m3-effects-d) var(--m3-effects),transform var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.dsel:first-child{border-radius:var(--r-lgi) var(--r-sm) var(--r-sm) var(--r-lgi)}
.dsel:last-child{border-radius:var(--r-sm) var(--r-lgi) var(--r-lgi) var(--r-sm)}
.dsel:active{transform:scale(.94)}
.dsel .mk{width:9px;height:9px;border-radius:50%;background:var(--md-outline-variant);display:grid;place-items:center;font-size:9px;line-height:1;color:transparent}
.dsel .mk.lower{background:var(--md-tertiary)}
.dsel .mk.upper{background:var(--md-primary)}
.dsel .mk.rest{background:transparent;box-shadow:inset 0 0 0 1.5px var(--md-on-surface-variant)}
.dsel .mk .ic{width:13px;height:13px}
.dsel.done .mk{width:18px;height:18px;background:var(--md-success);box-shadow:none;color:var(--md-on-success);font-size:11px;font-weight:900}
.dsel.today{background-color:var(--md-primary-container);color:var(--md-on-primary-container)}
.dsel.live::after{content:"";position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--md-error);animation:livePulse 1.6s var(--m3-effects) infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--md-error) 60%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
.dsel[aria-pressed="true"]{background-color:var(--md-inverse-surface);color:var(--md-inverse-on-surface);border-radius:var(--r-full)}
.dsel[aria-pressed="true"] .mk.rest{box-shadow:inset 0 0 0 1.5px var(--md-inverse-on-surface)}

/* --- Tarjeta principal del día (momento protagonista): color pleno, esquinas amplias y una forma que gira --- */
.hero{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-xli);padding:22px 20px 20px;--hero-bg:var(--md-tertiary);--hero-on:var(--md-on-tertiary);background:var(--hero-bg);color:var(--hero-on)}
.hero.upper{--hero-bg:var(--md-primary);--hero-on:var(--md-on-primary)}
.hero.rest{--hero-bg:var(--md-secondary);--hero-on:var(--md-on-secondary)}
/* en oscuro, el color pleno del contenedor (menos deslumbrante de noche o temprano en el gym) */
:root[data-theme="dark"] .hero{--hero-bg:var(--md-tertiary-container);--hero-on:var(--md-on-tertiary-container)}
:root[data-theme="dark"] .hero.upper{--hero-bg:var(--md-primary-container);--hero-on:var(--md-on-primary-container)}
:root[data-theme="dark"] .hero.rest{--hero-bg:var(--md-secondary-container);--hero-on:var(--md-on-secondary-container)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero{--hero-bg:var(--md-tertiary-container);--hero-on:var(--md-on-tertiary-container)}
  :root:not([data-theme="light"]) .hero.upper{--hero-bg:var(--md-primary-container);--hero-on:var(--md-on-primary-container)}
  :root:not([data-theme="light"]) .hero.rest{--hero-bg:var(--md-secondary-container);--hero-on:var(--md-on-secondary-container)}
}
.hero::before{content:"";position:absolute;z-index:-1;width:230px;height:230px;right:-70px;top:-80px;background:var(--hero-on);opacity:.1;-webkit-mask:var(--shape-flower) center/contain no-repeat;mask:var(--shape-flower) center/contain no-repeat;animation:heroSpin 60s linear infinite}
.hero.upper::before{-webkit-mask-image:var(--shape-sunny);mask-image:var(--shape-sunny)}
.hero.rest::before{-webkit-mask-image:var(--shape-cookie9);mask-image:var(--shape-cookie9)}
.hero::after{content:"";position:absolute;z-index:-1;width:120px;height:120px;left:-40px;bottom:-50px;background:var(--hero-on);opacity:.07;-webkit-mask:var(--shape-cookie12) center/contain no-repeat;mask:var(--shape-cookie12) center/contain no-repeat;animation:heroSpin 80s linear infinite reverse}
@keyframes heroSpin{to{transform:rotate(360deg)}}
.hero .when{margin:0;font:var(--t-label-l);opacity:.9}
.hero h2{font:var(--t-display-s);margin:6px 0 8px;letter-spacing:-.015em}
.hero .lead{margin:0 0 16px;font:var(--t-body-l);opacity:.95;max-width:44ch}
.hero .term{color:inherit}
.budget{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:16px}
.budget div{background:color-mix(in srgb,var(--hero-on) 14%,transparent);border-radius:var(--r-lg);padding:10px 6px;text-align:center;font:var(--t-label-m);font-weight:600;line-height:1.25}
.budget div:first-child{border-radius:var(--r-lgi) var(--r-sm) var(--r-sm) var(--r-lgi)}
.budget div:last-child{border-radius:var(--r-sm) var(--r-lgi) var(--r-lgi) var(--r-sm)}
.budget b{display:block;font:var(--t-headline-s)}
.clockrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:color-mix(in srgb,var(--hero-on) 14%,transparent);border-radius:var(--r-xl);padding:12px 12px 12px 18px;margin-bottom:14px}
.clk small{display:block;font:var(--t-label-m);opacity:.9}
.clk b{font:var(--t-display-s);font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.cbtns{display:flex;gap:6px}
.hb{min-height:48px;padding:0 18px;background-color:transparent;color:var(--hero-on);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--hero-on) 70%,transparent)}
.hb.solid{background-color:var(--hero-on);color:var(--hero-bg);box-shadow:none}
.hbig{display:flex;width:100%;min-height:64px;border-radius:var(--r-full);background-color:var(--hero-on);color:var(--hero-bg);font:var(--t-title-l);font-size:19px;margin-bottom:14px;box-shadow:var(--e2)}
.hbig .ic{width:28px;height:28px}
.hbig:active{border-radius:var(--r-xl)}
.hero .hnote{margin:-4px 0 12px;font:var(--t-body-m);opacity:.95}
.hleft{margin:-6px 0 12px;font:var(--t-label-m);opacity:.95}
.hlate{display:flex;gap:10px;align-items:center;justify-content:space-between;background:var(--md-warning-container);color:var(--md-on-warning-container);border-radius:var(--r-lg);padding:10px 12px;margin:0 0 12px;font:var(--t-label-l)}
.hlate button{flex:none;min-height:40px;padding:0 14px;border-radius:var(--r-full);border:0;background-color:var(--md-on-warning-container);color:var(--md-warning-container);font:var(--t-label-l)}
.hlink{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin-top:14px;border-radius:var(--r-full);border:0;background-color:color-mix(in srgb,var(--hero-on) 16%,transparent);color:var(--hero-on);font:var(--t-label-l);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.hlink:active{border-radius:var(--r-md)}
.hero .bar{color:var(--hero-on)}

/* --- Plan de tiempo y «Antes de empezar» (secciones plegables) --- */
details{margin-top:10px;border-top:1px solid var(--md-outline-variant);padding-top:8px}
summary{cursor:pointer;font:var(--t-title-s);font-size:15px;padding:8px 0;min-height:40px;list-style:none;display:flex;align-items:center;gap:8px}
summary::-webkit-details-marker{display:none}
details>summary::after{content:"";width:22px;height:22px;margin-left:auto;flex:none;background:var(--md-on-surface-variant);-webkit-mask:var(--i-keyboard-arrow-down) center/contain no-repeat;mask:var(--i-keyboard-arrow-down) center/contain no-repeat;transition:transform var(--m3-spatial-d) var(--m3-spatial)}
details[open]>summary::after{transform:rotate(180deg)}
details ol{margin:8px 0 6px;padding-left:22px}
details li{margin:6px 0;font:var(--t-body-m)}
.tline{padding:4px 18px;margin:14px 0}
.tline summary{font:var(--t-title-s);font-size:15px}
.tline ol{list-style:none;padding:0;margin:4px 0 8px}
.tline li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--md-outline-variant);font:var(--t-body-m);margin:0}
.tline small{color:var(--md-on-surface-variant);white-space:nowrap;font:var(--t-label-m)}
.tline details,.tline{border-top:0}
.prep{margin:14px 0}
.prep details{background:var(--md-surface-container-low);border:0;border-radius:var(--r-xl);padding:0;margin:0}
.prep summary{gap:14px;padding:12px 16px}
.prep .pi{width:44px;height:44px;display:grid;place-items:center;background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);flex:none;-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.prep .pi .ic{width:22px;height:22px}
.prep summary b{display:block;font:var(--t-title-l);font-size:17px}
.prep summary small{display:block;color:var(--md-on-surface-variant);font:var(--t-body-s)}
.prepb{padding:0 16px 16px;animation:m3In var(--m3-spatial-d) var(--m3-spatial)}
/* carrusel de consejos (Material 3: elementos que se deslizan) */
.tiprow{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:none}
.tiprow::-webkit-scrollbar{display:none}
.tipc{flex:0 0 82%;scroll-snap-align:start;display:flex;gap:12px;align-items:flex-start;background:var(--md-surface-container-high);border-radius:var(--r-xl);padding:14px}
.tipc span{flex:none;width:28px;height:28px;background:var(--md-primary);color:var(--md-on-primary);font:var(--t-label-l);display:grid;place-items:center;-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.tipc p{margin:0;font:var(--t-body-m)}
.warmtxt{font:var(--t-body-m);margin:10px 0;color:var(--md-on-surface)}
.phase{margin:14px 0;background:var(--md-surface-container-high);border-radius:var(--r-xl);padding:14px}
.prep .phase{margin-top:10px}
.phase p{margin:0 0 10px;font:var(--t-body-m);color:var(--md-on-surface-variant)}
.phase .seg button:not([aria-pressed="true"]){background-color:var(--md-surface-container-lowest)}
.whylink{display:inline-flex;align-items:center;gap:6px;padding:10px 8px;margin:4px 0 0}
/* «Hoy trabajas» */
.todaymus{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 12px;margin:0 0 10px}
.todaymus b{font:var(--t-title-l);font-size:16px}
.todaymus p{margin:4px 0 0;display:flex;flex-wrap:wrap;gap:4px 6px}
.todaymus p span{font:var(--t-label-m);padding:4px 10px;border-radius:var(--r-sm);background:var(--md-surface-container-high)}
.todaymus p span.t1{background:var(--md-primary);color:var(--md-on-primary)}
.todaymus p span small{font-weight:600;opacity:.8}
/* tarjeta «Tu cuerpo ya se adaptó» */
.changecard{display:grid;grid-template-columns:auto 1fr;gap:14px;background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);border:0;border-radius:var(--r-xl);padding:16px;margin:12px 0;animation:m3In var(--m3-spatial-d) var(--m3-spatial)}
.changecard .cci{position:relative;isolation:isolate;width:48px;height:48px;display:grid;place-items:center;color:var(--md-on-tertiary)}
.changecard .cci::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--md-tertiary);-webkit-mask:var(--shape-sunny) center/contain no-repeat;mask:var(--shape-sunny) center/contain no-repeat;animation:heroSpin 20s linear infinite}
.changecard .cci .ic{width:24px;height:24px}
.changecard h3{margin:0 0 4px;font:var(--t-title-l);font-size:18px}
.changecard p{margin:0;font:var(--t-body-m)}
.ccb{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.ccb .smallbtn{margin:0}
.ccb .link{color:inherit;padding:8px 10px}

/* --- Ficha de ejercicio. Plegada por defecto (la que sigue, abierta); al abrir/cerrar cambia de alto con resorte --- */
.ex{position:relative;background:var(--md-surface-container-low);border:0;border-radius:var(--r-xl);margin:10px 0;overflow:hidden;transition:background-color var(--m3-effects-d) var(--m3-effects),box-shadow var(--m3-effects-d) var(--m3-effects),border-radius var(--m3-spatial-d) var(--m3-spatial)}
.ex.opt{box-shadow:inset 0 0 0 1.5px var(--md-outline-variant);background:transparent}
.ex.ss{box-shadow:inset 6px 0 0 var(--md-tertiary)}
.ex.now{background:var(--md-surface-container);box-shadow:inset 0 0 0 2px var(--md-primary),var(--e2);border-radius:var(--r-xli)}
.ex.ss.now{box-shadow:inset 6px 0 0 var(--md-tertiary),inset 0 0 0 2px var(--md-primary),var(--e2)}
.ex.listo{background:var(--md-surface-container-low)}
.ex.fold .exfull{display:none}
.ex.skipcard{opacity:.6;background:transparent;box-shadow:inset 0 0 0 1.5px var(--md-outline-variant)}
.skipcard h3{font-size:17px}
/* barra de la ficha plegada: número (o palomita), nombre, resumen y flecha */
.foldbar{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background-color:transparent;color:var(--md-on-surface);padding:12px 14px;min-height:64px;border-radius:inherit}
.fck{width:36px;height:36px;display:grid;place-items:center;flex:none;background:var(--md-surface-container-highest);color:var(--md-on-surface);font:var(--t-label-l);border-radius:var(--r-full);transition:border-radius var(--m3-spatial-d) var(--m3-spatial)}
.ex.listo .fck{background:var(--md-success);color:var(--md-on-success);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.ex.listo .fck .ic{width:22px;height:22px}
.ex.ss .fck{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.ftx{flex:1;min-width:0}
.ftx b{display:block;font:var(--t-title-m);font-size:16px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ftx small{display:block;color:var(--md-on-surface-variant);font:var(--t-body-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.fchev{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-full);background:var(--md-surface-container-high);color:var(--md-on-surface-variant);transition:transform var(--m3-spatial-d) var(--m3-spatial)}
.fchev .ic{width:22px;height:22px}
.ex:not(.fold) .fchev{transform:rotate(180deg)}
.ex:not(.fold)>.foldbar{border-bottom:1px solid var(--md-outline-variant);border-radius:0}
.ex.justdone{animation:doneFlash 1.2s var(--m3-effects)}
.ex.justdone .fck{animation:doneShape .7s var(--m3-spatial-fast)}
@keyframes doneFlash{0%{box-shadow:0 0 0 4px var(--md-success)}100%{box-shadow:0 0 0 0 transparent}}
@keyframes doneShape{0%{transform:scale(.4) rotate(-90deg)}100%{transform:none}}
.nowtag{display:inline-flex;align-items:center;gap:6px;margin:0 0 4px;padding:3px 10px 3px 8px;border-radius:var(--r-full);background:var(--md-primary);color:var(--md-on-primary);font:var(--t-label-s);letter-spacing:.06em;text-transform:uppercase}
.nowtag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:nowPulse 1.6s var(--m3-effects) infinite}
@keyframes nowPulse{0%,100%{opacity:1}50%{opacity:.35}}
/* foto */
.media{position:relative;background:var(--md-surface-container-highest);aspect-ratio:3/2;width:100%;border:0;padding:0;display:block;overflow:hidden;border-radius:var(--r-xl) var(--r-xl) var(--r-md) var(--r-md);background-image:none}
.ex:not(.fold)>.foldbar+.exfull .media{border-radius:var(--r-md);width:calc(100% - 16px);margin:8px 8px 0}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--m3-effects-d) var(--m3-effects)}
.media img.show{opacity:1}
.noimg{display:grid;place-items:center;aspect-ratio:3/1.1;background:var(--md-secondary-container);color:var(--md-on-secondary-container);font:var(--t-headline-s);border-radius:var(--r-xl) var(--r-xl) var(--r-md) var(--r-md)}
.imgnote{margin:8px 16px 0;font:var(--t-body-s);color:var(--md-on-surface-variant)}
.exb{padding:14px 16px 16px}
.exb>.en{margin:0 0 2px;color:var(--md-on-surface-variant);font:var(--t-body-s)}
.exh{display:flex;gap:12px;align-items:flex-start}
.num{flex:none;width:32px;height:32px;display:grid;place-items:center;font:var(--t-label-l);background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);margin-top:2px;-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.exh h3{font:var(--t-title-l);font-size:21px;margin:0}
.exh .en{margin:2px 0 0;color:var(--md-on-surface-variant);font:var(--t-body-s)}
.where{margin:12px 0 0;font:var(--t-body-m)}
.last{margin:10px 0 0;font:var(--t-body-m);color:var(--md-on-surface-variant)}
.last b.up{color:var(--md-success);display:block;margin-top:2px}
.last.lnote{display:flex;align-items:center;gap:4px;margin-top:4px;font:var(--t-body-s)}
.last.lnote .ic{width:15px;height:15px;flex:none}
.sugg{margin:6px 0 8px;font:var(--t-body-m);padding:10px 12px;border-radius:var(--r-md);background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.sugg b{color:inherit}
.sugg b .ic{width:18px;height:18px;margin-right:4px;vertical-align:-4px}
.sugg.up{background:var(--md-success-container);color:var(--md-on-success-container)}
.sugg.down{background:var(--md-warning-container);color:var(--md-on-warning-container)}
.keycue{margin:8px 0;padding:10px 14px;border-radius:var(--r-md);background:var(--md-primary-container);color:var(--md-on-primary-container);font:var(--t-body-m)}
.cue{background:var(--md-surface-container-high);border-radius:var(--r-lg);padding:12px 16px;margin:12px 0 0}
.cue h4{margin:0 0 4px;font:var(--t-title-s);font-size:15px;color:var(--md-primary)}
.cue ul{margin:0;padding-left:18px}
.cue li{margin:4px 0;font:var(--t-body-m)}
.errc{margin:8px 0 0;padding:12px 14px;border-radius:var(--r-md);background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);font:var(--t-body-m)}
.errc.tipc{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}   /* «Consejo»: dato útil que no es un error */
.links{display:flex;gap:6px 8px;flex-wrap:wrap;align-items:center;margin-top:12px;font:var(--t-label-l)}
.links a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:var(--r-full);background:var(--md-surface-container-high);color:var(--md-on-surface);text-decoration:none}
.links a .ic,.links .link .ic{width:20px;height:20px;color:var(--md-primary)}
.links .link,.notedel .link{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;background-color:var(--md-surface-container-high);color:var(--md-on-surface)}
.term{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;display:inline;text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:help;text-align:inherit;background-image:none}
.term:focus-visible{outline:3px solid var(--md-secondary);outline-offset:2px;border-radius:3px}
/* músculos del ejercicio */
.musrow{display:flex;align-items:center;gap:12px;margin:12px 0 2px;padding:8px 12px 8px 8px;border-radius:var(--r-lg);background:var(--md-surface-container-high)}
.musrow p{margin:0;font:var(--t-body-m)}
.musrow b{display:block;font-weight:800}
.musrow small{display:block;color:var(--md-on-surface-variant);font:var(--t-body-s)}
/* «¿Máquina ocupada?» */
.altbtn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background-color:var(--md-secondary-container);color:var(--md-on-secondary-container);border-radius:var(--r-xl);padding:8px 12px 8px 8px;margin:10px 0;font:var(--t-body-m);transition:border-radius var(--m3-spatial-d) var(--m3-spatial)}
.altbtn.open{border-radius:var(--r-lg) var(--r-lg) var(--r-sm) var(--r-sm)}
.altbtn .alti{width:40px;height:40px;display:grid;place-items:center;flex:none;background:var(--md-secondary);color:var(--md-on-secondary);border-radius:var(--r-md)}
.altbtn .alti .ic,.altbtn .alti svg{width:22px;height:22px;fill:currentColor}
.altbtn .altt{flex:1;min-width:0;line-height:1.25}
.altbtn .altt b{display:block;font:var(--t-title-s);font-size:15px}
.altbtn .altt small{font:var(--t-body-s);opacity:.85}
.altbtn .altc{flex:none;display:grid;place-items:center}
.altbtn:not(.open) .alti{animation:altNudge 3.2s var(--m3-spatial) 1s 2}
@keyframes altNudge{0%,80%,100%{transform:none}86%{transform:rotate(-14deg)}93%{transform:rotate(12deg)}}
.altlist{display:grid;gap:4px;margin:-6px 0 10px;animation:m3In var(--m3-spatial-d) var(--m3-spatial)}
.altcard{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;border-radius:var(--r-sm);padding:8px;background:var(--md-surface-container-high)}
.altcard:last-child{border-radius:var(--r-sm) var(--r-sm) var(--r-lg) var(--r-lg)}
.altcard img,.altnoimg{width:64px;height:64px;border-radius:var(--r-md);object-fit:cover;background:var(--md-surface-container-highest)}
.altnoimg{display:grid;place-items:center;font:var(--t-headline-s);color:var(--md-on-secondary-container);background:var(--md-secondary-container)}
.altcard b{display:block;font:var(--t-title-s)}
.altcard small{color:var(--md-on-surface-variant);font:var(--t-body-s)}
.altact{display:flex;gap:6px;margin-top:6px}
.altact .smallbtn{margin:0;min-height:36px;padding:0 14px;font:var(--t-label-m)}
.altcard small.altwhy{display:block;margin-top:2px;font:var(--t-label-s);color:var(--md-primary)}
/* «¿Te molesta algo?»: último segmento de la lista de alternativas (esquinas grandes abajo) */
.altlist .altcard:nth-last-child(2):has(+ .painbtn){border-radius:var(--r-sm)}
.painbtn{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;width:100%;text-align:left;border:0;border-radius:var(--r-sm) var(--r-sm) var(--r-lg) var(--r-lg);padding:12px 14px;background-color:var(--md-tertiary-container);color:var(--md-on-tertiary-container);cursor:pointer}
.painbtn .ic{width:24px;height:24px}
.painbtn b{display:block;font:var(--t-title-s)}
.painbtn small{font:var(--t-body-s);opacity:.85}
.painbtn:active{border-radius:var(--r-md)}
/* Recordatorio de molestia en la ficha (aprendizaje): chip tonal terciario, toca para «¿Te molesta algo?» */
.lpain{display:flex;align-items:center;gap:8px;width:100%;margin:8px 0 0;padding:8px 12px;border:0;border-radius:var(--r-full);background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);font:var(--t-body-s);text-align:left;cursor:pointer;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.lpain .ic{width:18px;height:18px;flex:none}
.lpain:active{border-radius:var(--r-md)}
/* Semana de descarga: la tarjeta de cambio con «¿Por qué?» plegable */
.dlcard .dlwhy{margin-top:8px}
.dlcard .dlwhy summary{cursor:pointer;font:var(--t-label-l);list-style:none;display:inline-flex;align-items:center;min-height:32px}
.dlcard .dlwhy summary::-webkit-details-marker{display:none}
.dlcard .dlwhy summary::after{content:"";width:8px;height:8px;margin-left:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.dlcard .dlwhy[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.dlcard .dlwhy p{margin-top:4px;font:var(--t-body-s);opacity:.9}
.dlcard .dlnote{margin-top:8px;font:var(--t-body-s);opacity:.85}
.seg.pn button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;line-height:1.15}
.seg.pn button b{font:var(--t-label-l)}
.seg.pn button small{font:var(--t-label-s);opacity:.8}
.swapped{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-radius:var(--r-lg);padding:8px 8px 8px 14px;margin:8px 0;font:var(--t-body-s)}
.swapped .link{color:inherit;white-space:nowrap;padding:8px 10px}
/* «¿Máquina ocupada?» + Nota: grupo de botones conectados (esquinas grandes afuera, chicas adentro) */
.exrow{display:flex;align-items:stretch;gap:3px;margin:10px 0}
.exrow>.altbtn,.exrow>.swapped{flex:1;min-width:0;margin:0;border-radius:var(--r-xl) var(--r-xs) var(--r-xs) var(--r-xl)}
.exrow>.altbtn.open{border-radius:var(--r-lg) var(--r-xs) var(--r-xs) var(--r-sm)}
.exrow.solo{justify-content:flex-end}
.notebtn{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:64px;padding:6px 12px;border:0;border-radius:var(--r-xs) var(--r-xl) var(--r-xl) var(--r-xs);
  background-color:var(--md-secondary-container);color:var(--md-on-secondary-container);font:var(--t-label-m);cursor:pointer;
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects),color var(--m3-effects-d) var(--m3-effects)}
.notebtn .ic{width:20px;height:20px}
.notebtn.on{background-color:var(--md-secondary);color:var(--md-on-secondary)}
.notebtn:active{border-radius:var(--r-md)}
.exrow.solo .notebtn{flex-direction:row;gap:6px;min-height:40px;padding:0 16px;border-radius:var(--r-full);font:var(--t-label-l)}
.exrow.solo .notebtn:active{border-radius:var(--r-md)}
/* notas */
.npin,.nday{display:flex;gap:8px;align-items:flex-start;width:100%;text-align:left;margin:6px 0 2px;padding:10px 12px;border-radius:var(--r-md);border:0;font:var(--t-body-m);background-color:var(--md-warning-container);color:var(--md-on-warning-container)}
.npin .ic,.nday .ic{width:18px;height:18px;margin-top:1px}
.nday{background-color:var(--md-secondary-container);color:var(--md-on-secondary-container)}
li .hnote{display:flex;align-items:center;gap:4px;color:var(--md-on-surface-variant);font:var(--t-body-s);margin-top:2px}
li .hnote .ic{width:15px;height:15px}

/* --- Tabla de series. Palomita: cuadrada → al marcarla se vuelve galleta verde con rebote --- */
.stab{margin-top:14px;padding-top:10px;border-top:1px solid var(--md-outline-variant)}
.shead,.srow{display:grid;grid-template-columns:34px 1fr 1fr 52px;gap:8px;align-items:center}
.shead.hold,.srow.hold{grid-template-columns:34px 1fr 52px 52px}
.shead{font:var(--t-label-s);color:var(--md-on-surface-variant);padding-bottom:4px;text-align:center}
.srow{margin:6px 0;border-radius:var(--r-md);transition:background-color var(--m3-effects-d) var(--m3-effects),opacity var(--m3-effects-d) var(--m3-effects)}
.sl{width:30px;height:30px;border-radius:var(--r-full);background:var(--md-surface-container-high);display:grid;place-items:center;font:var(--t-label-l)}
.srow.done .sl{background:var(--md-success-container);color:var(--md-on-success-container)}
.srow.done .in{opacity:.72}
.ck,.srow .go{width:52px;height:48px;border-radius:var(--r-md);border:0;background-color:var(--md-surface-container-highest);color:var(--md-on-surface-variant);display:grid;place-items:center;padding:0;font-size:0;
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects),color var(--m3-effects-d) var(--m3-effects)}
.ck::before{content:"";width:26px;height:26px;background:currentColor;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.ck.on{background-color:var(--md-success);color:var(--md-on-success);border-radius:var(--r-full)}
.ck:active:not(:disabled){border-radius:var(--r-full)}
.srow .go{background-color:var(--md-primary-container);color:var(--md-on-primary-container);font-size:15px;font-weight:800}
.ck:disabled,.srow .go:disabled{opacity:.38}
.ck.pop{animation:ckPop var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
@keyframes ckPop{0%{transform:scale(.7)}100%{transform:scale(1)}}
.srow.warm{opacity:.9}
.srow.warm .sl{background:var(--md-warning-container);color:var(--md-on-warning-container)}
.srow.warm .in{box-shadow:inset 0 0 0 1.5px var(--md-outline-variant);background:transparent}
.srow.nextup{animation:nextUp 2.2s var(--m3-effects)}
@keyframes nextUp{0%,30%{background:var(--md-success-container);box-shadow:0 0 0 3px var(--md-success)}100%{background:transparent;box-shadow:0 0 0 0 transparent}}
/* kg ↔ lb: interruptor con perilla que se desliza */
.unitsw{position:relative;isolation:isolate;display:inline-grid;grid-template-columns:1fr 1fr;justify-self:center;background:var(--md-surface-container-highest);border-radius:var(--r-full);padding:3px;gap:0;overflow:visible}
.unitsw::before{content:"";position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:var(--r-full);background:var(--md-primary);transition:transform var(--m3-spatial-d) var(--m3-spatial)}
.unitsw[data-u="lb"]::before{transform:translateX(100%)}
.unitsw.nofx::before{transition:none}
.unitsw button{border:0;background-color:transparent;background-image:none;border-radius:var(--r-full);padding:2px 10px;min-width:36px;min-height:28px;font:var(--t-label-m);font-weight:800;color:var(--md-on-surface-variant);transition:color var(--m3-effects-d) var(--m3-effects)}
.unitsw button[aria-pressed="true"]{color:var(--md-on-primary)}
.unitfx{position:absolute;left:50%;top:-6px;transform:translateX(-50%);font:var(--t-label-s);color:var(--md-on-primary);background:var(--md-primary);border-radius:var(--r-full);padding:1px 8px;white-space:nowrap;pointer-events:none;animation:unitFx .9s var(--m3-effects) forwards}
@keyframes unitFx{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}25%{opacity:1;transform:translate(-50%,-14px) scale(1.08)}70%{opacity:1;transform:translate(-50%,-20px) scale(1)}100%{opacity:0;transform:translate(-50%,-28px) scale(.95)}}
.srow .in.flipin{animation:flipIn var(--m3-spatial-d) var(--m3-spatial) var(--d,0ms) both}
@keyframes flipIn{0%{transform:perspective(240px) rotateX(-95deg);opacity:.2;color:var(--md-primary)}55%{color:var(--md-primary)}100%{transform:none;opacity:1}}
.uflash{animation:uFlash .9s var(--m3-effects)}
@keyframes uFlash{0%{box-shadow:0 0 0 0 var(--md-primary)}30%{box-shadow:0 0 0 3px var(--md-primary)}100%{box-shadow:0 0 0 0 transparent}}
/* series ±, calentamiento y barra */
.setctl{display:flex;align-items:center;gap:6px;margin:10px 0 2px;flex-wrap:wrap}
.setctl>span{font:var(--t-label-m);color:var(--md-on-surface-variant)}
.setctl>button:not(.warmadd):not(.barbtn){width:40px;height:40px;border-radius:var(--r-full);border:0;background-color:var(--md-surface-container-highest);display:grid;place-items:center;padding:0;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.setctl>button:not(.warmadd):not(.barbtn):active{border-radius:var(--r-sm)}
.setctl>button .ic{width:22px;height:22px}
.setctl>button:disabled{opacity:.38}
.setctl b{min-width:20px;text-align:center;font:var(--t-title-m);font-variant-numeric:tabular-nums}
.warmadd,.barbtn{display:inline-flex;align-items:center;gap:6px;min-height:36px;border:0;background-color:transparent;box-shadow:inset 0 0 0 1px var(--md-outline-variant);border-radius:var(--r-sm);padding:0 12px;font:var(--t-label-m);color:var(--md-on-surface-variant)}
.warmadd{margin-left:auto}
.warmadd .ic,.barbtn .ic{width:18px;height:18px}
.barbtn.on{box-shadow:none;background-color:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.barhint{margin:2px 0 6px;font:var(--t-body-s);color:var(--md-on-surface-variant)}
/* descanso entre series */
.restrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;margin-top:14px;background:var(--md-surface-container-high);border-radius:var(--r-xl);padding:10px 10px 10px 16px}
.restrow .rl{font:var(--t-body-s);color:var(--md-on-surface-variant)}
.restrow .rl b{display:block;color:var(--md-on-surface);font:var(--t-title-s)}
.rctl{display:flex;align-items:center;gap:4px}
.rctl button{width:44px;height:44px;border-radius:var(--r-full);border:0;background-color:var(--md-surface-container-highest);display:grid;place-items:center;padding:0;font-size:0;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.rctl button:active{border-radius:var(--r-sm)}
.rctl button .ic{width:22px;height:22px}
.rctl b{min-width:56px;text-align:center;font:var(--t-headline-s);font-size:21px;font-variant-numeric:tabular-nums}
.gobtn{min-height:44px;padding:0 16px;background-color:var(--md-primary);color:var(--md-on-primary)}
.gobtn .ic{width:20px;height:20px}
/* cardio */
.cardio{margin-top:14px;border-top:1px solid var(--md-outline-variant);padding-top:14px}
.cmins{display:flex;align-items:center;justify-content:center;gap:14px}
.cmins button{width:52px;height:52px;border-radius:var(--r-full);border:0;background-color:var(--md-surface-container-highest);display:grid;place-items:center;padding:0;font-size:0;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.cmins button:active{border-radius:var(--r-md)}
.cmins button .ic{width:24px;height:24px}
.cmins button:disabled{opacity:.38}
.cmins b{font:var(--t-display-m);min-width:76px;text-align:center}
.cmins span{color:var(--md-on-surface-variant);font:var(--t-label-l)}
.cdone{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;margin-top:8px;border:0;border-radius:var(--r-full);background-color:var(--md-surface-container-highest);color:var(--md-on-surface);font:var(--t-label-l);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects)}
.cdone.on{background-color:var(--md-success);color:var(--md-on-success)}
.cdone:active{border-radius:var(--r-md)}
.finish{display:block;width:100%;margin:18px 0 6px;border:0;border-radius:var(--r-full);padding:16px;min-height:56px;font:var(--t-title-m);background-color:var(--md-inverse-surface);color:var(--md-inverse-on-surface)}

/* --- Otra actividad, solicitar plan y premio del fin de semana --- */
.otypes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
.otypes button{border:0;background-color:var(--md-surface-container-high);border-radius:var(--r-lg);min-height:64px;display:grid;justify-items:center;align-content:center;gap:2px;font:var(--t-label-m);color:var(--md-on-surface);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects)}
.otypes button span,.otypes button .ic{width:26px;height:26px;font-size:22px}
.otypes button.on{background-color:var(--md-secondary);color:var(--md-on-secondary);border-radius:var(--r-full)}
.omins{display:flex;align-items:center;gap:10px;font:var(--t-label-l);margin:6px 0 8px}
.omins .in{max-width:110px}
.reqcard{text-align:center}
.reqicon{width:84px;height:84px;margin:6px auto 8px;display:grid;place-items:center;font-size:40px;line-height:1;background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);-webkit-mask:var(--shape-flower) center/contain no-repeat;mask:var(--shape-flower) center/contain no-repeat}
.reqicon .ic{width:40px;height:40px}
.reqcard .cbtn.wide{margin:14px 0 4px}
.reqmini{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.reqmini .reqicon{width:52px;height:52px;margin:0;font-size:24px}
.reqmini .reqicon .ic{width:26px;height:26px}
.reqmini h3{margin:0 0 4px}
.rewardban{margin-top:12px;border-radius:var(--r-lg);padding:12px 14px;background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);font:var(--t-body-m)}

/* --- Hojas de Entreno: temporizador, terminar, plan corto, por qué, glosario, fase, nota, barra --- */
.ringbox{position:relative;width:228px;height:228px;margin:8px auto 4px}
.bigring{width:228px;height:228px;overflow:visible}
.bigring .rb{fill:none;stroke:var(--md-surface-container-highest);stroke-width:14}
.bigring .rf{fill:none;stroke:var(--md-primary);stroke-width:14;stroke-linecap:round;stroke-dasharray:552.92;transition:stroke var(--m3-effects-d) var(--m3-effects)}
.ringbox.pause .rf{stroke:var(--md-warning)}
.ringbox.fin .rf{stroke:var(--md-success)}
.ringbox::before{content:"";position:absolute;inset:34px;background:var(--md-primary-container);opacity:.55;-webkit-mask:var(--shape-cookie12) center/contain no-repeat;mask:var(--shape-cookie12) center/contain no-repeat;animation:heroSpin 30s linear infinite}
.ringbox.fin::before{background:var(--md-success-container);opacity:1;-webkit-mask-image:var(--shape-sunny);mask-image:var(--shape-sunny);animation-duration:8s}
.rc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.rc b{font:var(--t-display-l);font-size:58px;line-height:1;font-variant-numeric:tabular-nums}
.rc span{font:var(--t-label-l);color:var(--md-on-surface-variant);margin-top:4px}
.ssub{text-align:center;margin:0 0 10px;font:var(--t-body-m);color:var(--md-on-surface-variant)}
.clk2{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--md-surface-container-high);border-radius:var(--r-xl);padding:12px 12px 12px 18px}
.clk2 small{display:block;color:var(--md-on-surface-variant);font:var(--t-label-m)}
.clk2 b{font:var(--t-headline-m);font-size:30px;font-variant-numeric:tabular-nums}
.clk2 .cb{display:flex;gap:6px}
.clk2 button{min-height:44px;padding:0 16px;border-radius:var(--r-full);border:0;background-color:var(--md-surface-container-highest);font:var(--t-label-l);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.clk2 button:active{border-radius:var(--r-md)}
.clk2 button.solid{background-color:var(--md-primary);color:var(--md-on-primary)}
.xsum{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;padding:12px 14px;border-radius:var(--r-lg);background:var(--md-secondary-container);color:var(--md-on-secondary-container);font:var(--t-body-m)}
.xsum .ic{flex:none;width:22px;height:22px;margin-top:1px}
.fsum{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}
.fsum div{background:var(--md-surface-container-high);border-radius:var(--r-lg);padding:12px 6px;text-align:center;font:var(--t-label-m);color:var(--md-on-surface-variant)}
.fsum div:first-child{border-radius:var(--r-xl) var(--r-sm) var(--r-sm) var(--r-xl)}
.fsum div:last-child{border-radius:var(--r-sm) var(--r-xl) var(--r-xl) var(--r-sm)}
.fsum b{display:block;font:var(--t-headline-s);color:var(--md-on-surface)}
.fwarn{background:var(--md-warning-container);color:var(--md-on-warning-container);border-radius:var(--r-lg);padding:12px 14px;font:var(--t-body-m);font-weight:650;margin:0 0 10px}
.fgood{display:flex;gap:10px;align-items:center;margin:6px 0 10px;padding:12px 14px;border-radius:var(--r-lg);background:var(--md-success-container);color:var(--md-on-success-container);font:var(--t-title-s);font-size:15px}
.fgood .ic{width:22px;height:22px;flex:none}
.coachfin{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin:10px 0;padding:14px;border-radius:var(--r-xl);background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.coachfin>span{width:40px;height:40px;display:grid;place-items:center;font-size:22px;background:var(--md-secondary);color:var(--md-on-secondary);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.coachfin>span .ic{width:22px;height:22px}
.coachfin b{display:block;font:var(--t-title-s);font-size:15px}
.coachfin p{margin:2px 0 0;font:var(--t-body-m)}
.planest{font:var(--t-headline-m);text-align:center;margin:12px 0 0}
.planlist{list-style:none;padding:0;margin:8px 0}
.planlist li{padding:10px 0;border-top:1px solid var(--md-outline-variant);font:var(--t-body-m)}
.planlist li.drop{color:var(--md-on-surface-variant)}
.planlist b.k{color:var(--md-success)}
.planlist b.d{color:var(--md-tertiary)}
.why .whyfor{background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-radius:var(--r-lg);padding:14px 16px;margin:0 0 6px;font:var(--t-body-m)}
.why h4{font:var(--t-title-s);font-size:16px;margin:18px 0 6px}
.why ul{margin:0;padding-left:20px}
.why li{margin:6px 0;font:var(--t-body-m)}
.refs li{margin:8px 0}
.tdef{font:var(--t-body-l);margin:10px 0 14px}
.phd{font:var(--t-title-s);font-size:15.5px;margin:16px 0 4px}
.phl{margin:0;padding-left:18px}.phl li{margin:4px 0;font:var(--t-body-m)}.phl small{color:var(--md-on-surface-variant)}
.notebtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.notebtns .cbtn{display:grid;gap:2px;text-align:center;margin-top:0;padding:10px 12px;min-height:64px;border-radius:var(--r-xl);font:var(--t-label-l)}
.notebtns .cbtn.sec{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.notebtns .cbtn small{font:var(--t-body-s);opacity:.9}
.notedel{display:flex;gap:10px;justify-content:center;margin-top:10px}
.baropts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.baropt{display:grid;gap:2px;text-align:left;padding:12px 14px;border-radius:var(--r-lg);border:0;background-color:var(--md-surface-container-high);color:var(--md-on-surface);font:var(--t-label-l);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects)}
.baropt small{color:var(--md-on-surface-variant);font:var(--t-body-s)}
.baropt.on{background-color:var(--md-secondary);color:var(--md-on-secondary);border-radius:var(--r-xl)}
.baropt.on small{color:inherit;opacity:.85}
.barown{display:flex;align-items:center;gap:8px;margin-top:14px}
.barown label{font:var(--t-label-l);color:var(--md-on-surface-variant)}
.barown .in{width:88px}

/* ===================== 4 · Isla, consejos y notificaciones ===================== */
/* --- Isla del temporizador (como la isla dinámica): el anillo y los segundos siempre se ven; cuando algo cambia
       («Descanso», «Siguiente serie»…) el aviso aparece un momento en lugar de los minutos y se vuelve a esconder --- */
.island{position:fixed;left:50%;bottom:calc(98px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;display:none;align-items:center;gap:8px;touch-action:none;max-width:calc(100vw - 16px)}
.island.show{display:flex}
.pill:not(.show){display:none}
.island.at-top{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 10px)}
html.mini .island.at-top{top:calc(env(safe-area-inset-top,0px) + 64px)}
body.haspill{padding-bottom:184px}
.pill{position:relative;display:flex;align-items:center;height:60px;padding:0 20px 0 8px;border-radius:var(--r-full);border:0;background-color:var(--md-island);color:var(--md-on-island);box-shadow:var(--e4),inset 0 0 0 1px var(--md-island-line);cursor:grab;
  transition:background-color var(--m3-effects-d) var(--m3-effects),padding var(--m3-spatial-d) var(--m3-spatial),box-shadow var(--m3-effects-d) var(--m3-effects)}
.pill:active{transform:none}
.pill::before{content:"";position:absolute;left:50%;top:4px;transform:translateX(-50%);width:22px;height:3px;border-radius:var(--r-full);background:var(--md-on-island);opacity:.28}
.island.at-top .pill::before{top:auto;bottom:4px}
/* nunca se sale de la pantalla: el anillo y los segundos no se encogen; el aviso largo se recorta con «…» */
.pill{flex:0 1 auto;min-width:0}
.pill .pt{flex:none}
.pill .pl{flex:0 1 auto;min-width:0}
.tipdrop{flex:none}
.pill .rgw{position:relative;flex:none;width:46px;height:46px;display:grid;place-items:center}
.pill .rg{width:46px;height:46px}
.pill .rb{fill:none;stroke:color-mix(in srgb,var(--md-on-island) 20%,transparent);stroke-width:4}
.pill .rf{fill:none;stroke:var(--md-primary-fixed-dim);stroke-width:4;stroke-linecap:round;stroke-dasharray:81.68;transition:stroke var(--m3-effects-d) var(--m3-effects)}
.pill.pause .rf{stroke:var(--md-warning-container)}
.pill.clk .rf{stroke:var(--md-on-island)}
.pill .pck{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.3);transition:opacity var(--m3-effects-d) var(--m3-effects),transform var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.pill .pck .ic{width:24px;height:24px}
.pill .pt,.pill .pl{overflow:hidden;white-space:nowrap;text-align:left;transition:max-width var(--m3-spatial-d) var(--m3-spatial),opacity var(--m3-effects-fast-d) var(--m3-effects-fast),margin var(--m3-spatial-d) var(--m3-spatial)}
.pill .pt{max-width:170px;margin-left:12px;font:800 28px/1 var(--font-brand);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pill .pl{max-width:0;opacity:0;margin-left:0;font:var(--t-label-l);line-height:1.2}
.pill .pl b{display:block;font:var(--t-title-s);font-size:15px;overflow:hidden;text-overflow:ellipsis}
.pill .pl small{display:block;font:var(--t-body-s);opacity:.75;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
/* aviso un momento: se esconden los minutos y entra el texto (el anillo se queda) */
.pill.say .pt{max-width:0;opacity:0;margin-left:0}
.pill.say .pl{max-width:min(230px,calc(100vw - 150px));opacity:1;margin-left:12px}
/* últimos 5 s: un pulso verde por segundo (como la vibración) sin cambiar de tamaño; en 0: verde fijo «¡Ya!» */
.pill.go{animation:goBlink 1s var(--m3-effects) infinite}
.pill.go .rf{stroke:var(--md-success-bright)}
.pill.go .rgw{animation:goBeat 1s var(--m3-spatial-fast) infinite}
@keyframes goBlink{0%{background-color:var(--md-success);color:var(--md-on-success)}70%,100%{background-color:var(--md-island);color:var(--md-on-island)}}
@keyframes goBeat{0%{transform:scale(1.12)}60%,100%{transform:scale(1)}}
.pill.fin{background-color:var(--md-success);color:var(--md-on-success);animation:goGlow 1.2s var(--m3-effects) infinite}
.pill.fin .rf{stroke:var(--md-on-success)}
.pill.fin .rb{stroke:color-mix(in srgb,var(--md-on-success) 25%,transparent)}
@keyframes goGlow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--md-success) 70%,transparent),var(--e4)}100%{box-shadow:0 0 0 18px transparent,var(--e4)}}
/* rutina completa: verde con palomita, «Terminar rutina» siempre visible y un brillo que pasa */
.pill.done{background-color:var(--md-success);color:var(--md-on-success);overflow:hidden;padding-right:22px}
.pill.done .pck{opacity:1;transform:none}
.pill.done .rf{stroke:var(--md-on-success)}
.pill.done .rb{stroke:color-mix(in srgb,var(--md-on-success) 25%,transparent)}
.pill.done .pt{font:var(--t-title-l);font-size:20px;max-width:200px}
.pill.done .pl{max-width:0}
.pill.done.say .pt{max-width:0}
.pill.done.say .pl{max-width:220px}
.pill.done::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 35%,rgb(255 255 255/.32) 50%,transparent 65%);transform:translateX(-120%);animation:pillShine 3.4s ease-in-out .7s infinite;pointer-events:none}
@keyframes pillShine{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}
/* al aparecer (Material 3 Expressive): nace el círculo del anillo y el contenedor se abre hasta la píldora con el
   resorte espacial (transformación de contenedor; sin caer ni aplastarse como gota) */
.pill.enter{animation:pillIn var(--m3-spatial-slow-d) var(--m3-spatial-slow) both}
.pill.done.enter{animation:pillDone var(--m3-spatial-fast-d) var(--m3-spatial-fast) both}
@keyframes pillIn{0%{clip-path:inset(0 calc(100% - 60px) 0 0 round 99px);scale:.6;opacity:0}35%{clip-path:inset(0 calc(100% - 60px) 0 0 round 99px);scale:1;opacity:1}100%{clip-path:inset(0 0 0 0 round 99px);scale:1;opacity:1}}
@keyframes pillDone{0%{scale:.92}100%{scale:1}}
.pill.okgo{animation:okGo .5s var(--m3-spatial-fast)}
@keyframes okGo{0%{scale:1}35%{scale:.88}100%{scale:1}}
.island.drag .pill{cursor:grabbing;box-shadow:var(--e5);scale:1.04}
body.pilldrag .coach{visibility:hidden}

/* --- Coach en vivo (v8.0): gota junto a la isla con el color de su nivel ---
   verde = bien hecho · azul = técnica y datos · naranja = ajuste importante · rojo = urgente (theme.css, --md-lv-*).
   Azul y verde llegan del color de la isla con el ícono de su color; naranja, rojo y los logros grandes llegan llenos y con
   su forma expresiva (galleta, estallido suave, flor). Todo lo que se mueve termina solo: la isla no se pausa con la app
   quieta (html.idle), así que nada aquí se repite sin fin. --- */
.k-adjust{--ck:var(--md-tip-adjust-bright);--onck:var(--md-on-tip-adjust-bright)}
.k-good{--ck:var(--md-tip-good-bright);--onck:var(--md-on-tip-good-bright)}
.k-ghost{--ck:var(--md-tip-ghost-bright);--onck:var(--md-on-tip-ghost-bright)}
.k-breath,.k-rest{--ck:var(--md-tip-breath-bright);--onck:var(--md-on-tip-breath-bright)}
.k-time{--ck:var(--md-tip-time-bright);--onck:var(--md-on-tip-time-bright)}
.k-energy,.k-info{--ck:var(--md-tip-info-bright);--onck:var(--md-on-tip-info-bright)}
/* el nivel manda sobre el tipo (van después: misma especificidad) */
.lv-ok{--ck:var(--md-lv-ok);--onck:var(--md-on-lv-ok);--lvt:var(--md-lv-ok-t)}
.lv-info{--ck:var(--md-lv-info);--onck:var(--md-on-lv-info);--lvt:var(--md-lv-info-t)}
.lv-warn{--ck:var(--md-lv-warn);--onck:var(--md-on-lv-warn);--lvt:var(--md-lv-warn-t)}
.lv-alert{--ck:var(--md-lv-alert);--onck:var(--md-on-lv-alert);--lvt:var(--md-lv-alert-t)}
.tipdrop{position:relative;isolation:isolate;display:flex;align-items:center;gap:0;height:60px;min-width:60px;padding:0 18px;border:0;border-radius:var(--r-full);background-color:transparent;color:var(--lvt,var(--ck,var(--md-on-island)));
  transition:padding var(--m3-spatial-d) var(--m3-spatial),color var(--m3-effects-d) var(--m3-effects)}
.tipdrop .tdbg{position:absolute;inset:0;z-index:-1;border-radius:var(--r-full);background-color:var(--md-island);box-shadow:var(--e4),inset 0 0 0 1px var(--md-island-line),inset 0 0 0 2px color-mix(in srgb,var(--lvt,var(--md-island-line)) 38%,transparent);
  transition:inset var(--m3-spatial-d) var(--m3-spatial),border-radius var(--m3-spatial-d) var(--m3-spatial),background-color var(--m3-effects-d) var(--m3-effects)}
.tipdrop .tdi{display:grid;place-items:center;width:24px;height:24px}
.tipdrop .tdi .ic{width:26px;height:26px}
.tipdrop .tdt{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--t-label-l);transition:max-width var(--m3-spatial-d) var(--m3-spatial),opacity var(--m3-effects-fast-d) var(--m3-effects-fast),margin var(--m3-spatial-d) var(--m3-spatial)}
.tipdrop.say .tdt{max-width:min(170px,calc(100vw - 230px));opacity:1;margin-left:8px}
/* llena (naranja, rojo, logro grande): el color del nivel; sin texto toma su forma expresiva */
.tipdrop.fill{color:var(--onck)}
.tipdrop.fill .tdbg{background-color:var(--ck);box-shadow:var(--e4)}
.tipdrop.fill:not(.say){padding:0}
.tipdrop.fill:not(.say) .tdi{margin:0 auto}
.tipdrop.fill:not(.say) .tdbg{inset:-4px;border-radius:0;-webkit-mask:var(--lvshape,var(--shape-cookie9)) center/contain no-repeat;mask:var(--lvshape,var(--shape-cookie9)) center/contain no-repeat}
.tipdrop.lv-warn{--lvshape:var(--shape-cookie9)}
.tipdrop.lv-alert{--lvshape:var(--shape-softburst)}
.tipdrop.lv-ok{--lvshape:var(--shape-flower)}
/* naranja y rojo: un pulso que sale de la gota unas veces y se detiene (rojo más seguido) */
.tipdrop.fill.lv-warn::after,.tipdrop.fill.lv-alert::after{content:"";position:absolute;inset:-2px;z-index:-2;border-radius:50%;border:3px solid var(--ck);opacity:0;pointer-events:none}
.tipdrop.fill.lv-warn:not(.say)::after{animation:tipRing 2.2s var(--m3-effects) .9s 5}
.tipdrop.fill.lv-alert:not(.say)::after{animation:tipRing 1.4s var(--m3-effects) .5s 8}
@keyframes tipRing{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.5);opacity:0}}
/* nace: sale de detrás de la isla y crece con el resorte espacial; el ícono gira y entra con el resorte rápido
   (app.js además cambia la forma de círculo a la del nivel, manda ondas, chispas y el destello en la cápsula) */
.tipdrop.born{animation:tipBorn var(--m3-spatial-d) var(--m3-spatial) both}
.tipdrop.born .tdi{animation:tipIcon var(--m3-spatial-slow-d) var(--m3-spatial-fast) 80ms both}
@keyframes tipBorn{0%{margin-left:-60px;scale:.4;opacity:0}40%{opacity:1}100%{margin-left:0;scale:1;opacity:1}}
@keyframes tipIcon{0%{transform:scale(.2) rotate(-120deg);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
/* rojo: late dos veces al llegar (como un corazón), sin cambiar de lugar */
.tipdrop.born.lv-alert{animation:tipBorn var(--m3-spatial-d) var(--m3-spatial) both,tipBeat .9s var(--m3-effects) var(--m3-spatial-d) 1}
@keyframes tipBeat{0%,100%{scale:1}15%{scale:1.16}30%{scale:1}45%{scale:1.1}60%{scale:1}}
/* ondas que salen de la isla (naranja: una; rojo: dos) */
.lvwave{position:fixed;z-index:39;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;border:2.5px solid var(--ck);pointer-events:none;opacity:0}
/* chispas de un logro (formas expresivas pequeñas) */
.lvspark{position:fixed;z-index:42;width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--sp,var(--ck));-webkit-mask:var(--shape-flower) center/contain no-repeat;mask:var(--shape-flower) center/contain no-repeat;pointer-events:none;opacity:0}
.lvspark.s2{-webkit-mask-image:var(--shape-cookie4);mask-image:var(--shape-cookie4)}
.lvspark.s3{-webkit-mask-image:var(--shape-sunny);mask-image:var(--shape-sunny);width:8px;height:8px;margin:-4px 0 0 -4px}
/* la cápsula recibe el aviso: su borde se enciende del color del nivel y se apaga */
.pill.lvflash{animation:lvFlash 1.3s var(--m3-effects) 1}
@keyframes lvFlash{0%{box-shadow:var(--e4),inset 0 0 0 2.5px var(--lvf),0 0 0 0 color-mix(in srgb,var(--lvf) 60%,transparent)}60%{box-shadow:var(--e4),inset 0 0 0 2px var(--lvf),0 0 0 12px transparent}100%{box-shadow:var(--e4),inset 0 0 0 1px var(--md-island-line),0 0 0 0 transparent}}

/* --- Tarjeta del consejo: crece desde la gota (transformación de contenedor), del mismo material que la isla --- */
.coach{position:fixed;left:0;right:0;margin:0 auto;width:min(92vw,420px);bottom:calc(98px + 60px + 14px + env(safe-area-inset-bottom,0px));z-index:41;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:18px 10px 16px 16px;border-radius:var(--r-xl);color:var(--md-on-island);background:var(--md-island);box-shadow:var(--e5),inset 0 0 0 1px var(--md-island-line)}
.coach[hidden]{display:none}
.coach::before{content:"";position:absolute;left:28px;right:28px;top:0;height:4px;border-radius:0 0 var(--r-full) var(--r-full);background:var(--ck,var(--md-primary-fixed-dim))}
.coach.at-top{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 10px + 60px + 14px)}
/* consejo importante: borde y barra del color del consejo, más gruesos */
.coach.imp{box-shadow:var(--e5),inset 0 0 0 2px var(--ck)}
.coach.imp::before{height:6px}
html.mini .coach.at-top{top:calc(env(safe-area-inset-top,0px) + 64px + 60px + 14px)}
.coach.nopill{bottom:calc(98px + env(safe-area-inset-bottom,0px))}
.coach .ci{width:44px;height:44px;display:grid;place-items:center;background:var(--ck,var(--md-primary-fixed-dim));color:var(--onck,var(--md-on-primary-fixed));-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.coach .ci .ic{width:24px;height:24px}
.coach.lv-alert .ci{-webkit-mask-image:var(--shape-softburst);mask-image:var(--shape-softburst)}
.coach.lv-ok .ci{-webkit-mask-image:var(--shape-flower);mask-image:var(--shape-flower)}
.coach .cb{min-width:0}
.coach .cb b{display:block;font:var(--t-title-m);font-size:16.5px;line-height:1.25}
.coach .clv{display:inline-flex;align-items:center;gap:6px;margin:0 0 4px;font:var(--t-label-m);letter-spacing:.02em;color:var(--lvt,var(--ck))}
.coach .clv::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ck)}
.coach.lv-alert .clv{text-transform:none;font-weight:700}
.coach .cb p{margin:4px 0 0;font:var(--t-body-m);color:color-mix(in srgb,var(--md-on-island) 82%,transparent)}
.coach .cmoretxt{margin:12px 0 0;padding:12px 14px;border-radius:var(--r-lg);background:color-mix(in srgb,var(--md-on-island) 9%,transparent);font:var(--t-body-m);color:var(--md-on-island);max-height:min(40vh,320px);overflow-y:auto;animation:m3In var(--m3-spatial-d) var(--m3-spatial)}
.coach .cacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.coach .cact{min-height:40px;padding:0 18px;background-color:var(--ck,var(--md-primary-fixed-dim));color:var(--onck,var(--md-on-primary-fixed))}
.coach .cmore,.coach .cok{min-height:40px;padding:0 16px;background-color:transparent;color:var(--md-on-island);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-on-island) 40%,transparent)}
.coach .cacts.en .cact{background-color:color-mix(in srgb,var(--md-on-island) 12%,transparent);color:var(--md-on-island)}
.coach .cacts.en .cact .ic{width:20px;height:20px}
/* «¿Cuántas más podías?»: grupo de botones conectados (0 a 4+), esquinas completas solo afuera */
.coach .cacts.rir{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
.coach .cacts.rir .cact{min-height:48px;padding:0;border-radius:var(--r-sm);font:var(--t-title-m);background-color:color-mix(in srgb,var(--md-on-island) 12%,transparent);color:var(--md-on-island)}
.coach .cacts.rir .cact:first-child{border-radius:var(--r-full) var(--r-sm) var(--r-sm) var(--r-full)}
.coach .cacts.rir .cact:last-child{border-radius:var(--r-sm) var(--r-full) var(--r-full) var(--r-sm)}
.coach .cacts.rir .cact:active{border-radius:var(--r-md)}
.coach .rirhint{margin:8px 2px 0;font:var(--t-label-m);color:color-mix(in srgb,var(--md-on-island) 70%,transparent)}
.coach .cx{display:grid;place-items:center;border:0;background-color:transparent;color:color-mix(in srgb,var(--md-on-island) 75%,transparent);width:40px;height:40px;border-radius:var(--r-full);padding:0}
.coach .cx .ic{width:22px;height:22px}
body.haspill.hastip .toast{bottom:calc(176px + env(safe-area-inset-bottom,0px))}
/* el consejo se guarda en la campana: el contenedor se cierra en una ficha del color del consejo que viaja en arco
   (.mfly mueve en horizontal, .mfly-y en vertical, .mfly-c cambia de tamaño, forma y color) */
.mfly{position:fixed;z-index:45;width:0;height:0;pointer-events:none}
.mfly-c{position:absolute;left:0;top:0;translate:-50% -50%;overflow:hidden;box-shadow:var(--e3)}
.mfly-in{position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;margin:0!important;transform:translate(-50%,-50%)!important;background:transparent!important;box-shadow:none!important;animation:none!important;max-width:none!important}
.mfly-in::before,.mfly-in::after{display:none!important}
.mfly-ic{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;color:var(--onck,var(--md-on-island));opacity:0}
.mfly-ic .ic{width:24px;height:24px}

/* --- Bandeja de notificaciones --- */
.ibxd{margin:18px 4px 8px;font:var(--t-label-m);letter-spacing:.06em;text-transform:uppercase;color:var(--md-on-surface-variant)}
.ibx{display:block;margin:0 0 4px;border:0;border-radius:var(--r-sm);background:var(--md-surface-container-high);overflow:hidden;transition:border-radius var(--m3-spatial-d) var(--m3-spatial)}
.ibxd+.ibx{border-top-left-radius:var(--r-xl);border-top-right-radius:var(--r-xl)}
.ibx:has(+.ibxd),.ibx:has(+.note){border-bottom-left-radius:var(--r-xl);border-bottom-right-radius:var(--r-xl)}
details.ibx{margin-top:0;padding-top:0;border-top:0}
details.ibx>summary::after{display:none}
.ibx>summary,div.ibx{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;padding:14px 14px 14px 12px;min-height:0;font:var(--t-body-m)}
div.ibx{cursor:default}
.ibi{width:40px;height:40px;display:grid;place-items:center;background:var(--ckl,var(--md-secondary-container));color:var(--onckl,var(--md-on-secondary-container));-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.ibi .ic{width:22px;height:22px}
.ibx.k-adjust{--ckl:var(--md-tip-adjust-container);--onckl:var(--md-on-tip-adjust-container)}
.ibx.k-good{--ckl:var(--md-tip-good-container);--onckl:var(--md-on-tip-good-container)}
.ibx.k-ghost{--ckl:var(--md-tip-ghost-container);--onckl:var(--md-on-tip-ghost-container)}
.ibx.k-breath,.ibx.k-rest{--ckl:var(--md-tip-breath-container);--onckl:var(--md-on-tip-breath-container)}
.ibx.k-time{--ckl:var(--md-tip-time-container);--onckl:var(--md-on-tip-time-container)}
/* Coach en vivo: en la bandeja cada consejo lleva el color de su nivel (verde, azul, naranja, rojo) */
.ibx.lv-ok{--ckl:var(--md-lv-ok-container);--onckl:var(--md-on-lv-ok-container)}
.ibx.lv-info{--ckl:var(--md-lv-info-container);--onckl:var(--md-on-lv-info-container)}
.ibx.lv-warn{--ckl:var(--md-lv-warn-container);--onckl:var(--md-on-lv-warn-container)}
.ibx.lv-alert{--ckl:var(--md-lv-alert-container);--onckl:var(--md-on-lv-alert-container)}
.ibt{min-width:0}
.ibt b{display:block;font:var(--t-title-s);font-size:15px}
.ibt small{display:block;color:var(--md-on-surface-variant);font:var(--t-body-s);margin-top:1px}
.ibtx{display:block;font:var(--t-body-m);margin-top:4px}
.ibm{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:4px;font:var(--t-label-l);color:var(--md-primary)}
details.ibx[open] .ibm{display:none}
.ibmore{margin:0;padding:0 16px 16px 64px;font:var(--t-body-m);color:var(--md-on-surface)}
.ibnew{font-style:normal;font:var(--t-label-s);color:var(--md-on-error);background:var(--md-error);border-radius:var(--r-full);padding:2px 8px;vertical-align:2px;margin-left:6px}
.ibxempty{text-align:center;padding:20px 8px 8px}
.ibxbell{width:96px;height:96px;margin:0 auto 10px;display:grid;place-items:center;background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);-webkit-mask:var(--shape-cookie12) center/contain no-repeat;mask:var(--shape-cookie12) center/contain no-repeat}
.ibxbell .ic{width:44px;height:44px;animation:bellRing 1.2s var(--m3-effects) .3s;transform-origin:50% 12%}
.ibxempty b{display:block;font:var(--t-title-l)}
.ibxempty p{color:var(--md-on-surface-variant);font:var(--t-body-m);margin:6px 0 0}
.ibxclr{width:100%;margin-top:16px;background-color:var(--md-error-container)!important;color:var(--md-on-error-container)!important}

/* ===================== 5 · Comida (nutri.js) y súper ===================== */
.nhero{display:grid;grid-template-columns:136px 1fr;gap:14px 18px;align-items:center;padding:18px;margin-bottom:14px;position:relative;overflow:hidden;isolation:isolate}
.nhero::before{content:"";position:absolute;z-index:-1;width:200px;height:200px;left:-60px;top:-60px;background:var(--md-primary-container);opacity:.45;-webkit-mask:var(--shape-cookie12) center/contain no-repeat;mask:var(--shape-cookie12) center/contain no-repeat;animation:heroSpin 70s linear infinite}
.nhero h2{font:var(--t-headline-s);font-size:23px;margin:0 0 6px}
.nring-wrap{position:relative;width:136px;height:136px}
.nring{width:136px;height:136px;transform:rotate(-90deg);overflow:visible}
.nring .rb{fill:none;stroke:var(--md-secondary-container);stroke-width:14}
.nring .rf{fill:none;stroke:var(--md-primary);stroke-width:14;stroke-linecap:round;transition:stroke-dashoffset var(--m3-spatial-slow-d) var(--m3-spatial-slow)}
.nring.over .rf{stroke:var(--md-fat)}
.nrc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.nrc b{font:var(--t-headline-m);font-variant-numeric:tabular-nums}
.nrc small{font:var(--t-label-s);color:var(--md-on-surface-variant);margin-top:3px;max-width:88px;line-height:1.15}
.nside{min-width:0}
.nkv{display:flex;justify-content:space-between;gap:8px;font:var(--t-body-m);padding:4px 0;border-bottom:1px solid color-mix(in srgb,var(--md-outline-variant) 70%,transparent)}
.nkv:last-child{border-bottom:0}
.nkv span{color:var(--md-on-surface-variant)}
.nkv b{font-variant-numeric:tabular-nums}
.nkv.ex b{color:var(--md-fat)}
.nkv span .ic,.nbal span .ic{width:18px;height:18px;margin-right:4px;vertical-align:-4px}
.nbars{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.nbar .nbl{display:flex;flex-direction:column;gap:1px;margin-bottom:6px}
.nbar .nbl span{font:var(--t-label-m);color:var(--md-on-surface-variant)}
.nbar .nbl b{font:var(--t-title-m);font-variant-numeric:tabular-nums}
.nbar .nbl small{font:var(--t-label-s);color:var(--md-on-surface-variant)}
.nbt{height:10px;border-radius:var(--r-full);background:var(--md-surface-container-highest)}
.nbt i{display:block;height:100%;border-radius:var(--r-full);transition:width var(--m3-spatial-slow-d) var(--m3-spatial-slow)}
.nbar.p .nbt i{background:var(--md-primary)}
.nbar.c .nbt i{background:var(--md-carb)}
.nbar.f .nbt i{background:var(--md-fat)}
.nbal{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:0 10px;align-items:baseline;border-radius:var(--r-lg);padding:12px 14px}
.nbal span{font:var(--t-label-l)}
.nbal b{font:var(--t-headline-s);font-size:21px;font-variant-numeric:tabular-nums}
.nbal small{grid-column:1/-1;font:var(--t-body-s);opacity:.9}
.nbal.good{background:var(--md-success-container);color:var(--md-on-success-container)}
.nbal.warn{background:var(--md-warning-container);color:var(--md-on-warning-container)}
.nbal.neutral{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.nhint{grid-column:1/-1;border:0;background-color:var(--md-surface-container-high);border-radius:var(--r-lg);padding:12px 14px;text-align:left;font:var(--t-label-l);color:var(--md-primary)}
.nmenu-note{margin:6px 2px 4px}
.nmeal{padding:16px;margin:12px 0}
.nmeal header{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:10px}
.nmeal .t,.meal .t{font:var(--t-label-m);color:var(--md-primary);margin:0;text-transform:uppercase;letter-spacing:.05em}
.nmeal h3{font:var(--t-title-l);font-size:20px;margin:2px 0 0}
.nmeal .nk{font:var(--t-title-s);font-variant-numeric:tabular-nums;white-space:nowrap}
.ndish{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:12px;border-radius:var(--r-lg);background:var(--md-surface-container-high);margin-bottom:4px;transition:background-color var(--m3-effects-d) var(--m3-effects),border-radius var(--m3-spatial-d) var(--m3-spatial)}
.ndish.on{background:var(--md-success-container);color:var(--md-on-success-container);border-radius:var(--r-xl)}
.ndish .it{margin:0 0 3px;font:var(--t-body-m);font-size:15px}
.nmac{display:block;font:var(--t-label-m);color:var(--md-on-surface-variant)}
.ndish.on .nmac{color:inherit;opacity:.85}
.nbtns{display:flex;flex-wrap:wrap;gap:4px 8px}
.chk{width:44px;height:44px;border-radius:var(--r-md);border:0;background-color:var(--md-surface-container-highest);display:grid;place-items:center;font-size:0;color:var(--md-on-surface-variant);padding:0;margin-top:2px;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects)}
.chk::before{content:"";width:24px;height:24px;background:currentColor;opacity:.35;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.chk.on{background-color:var(--md-success);color:var(--md-on-success);border-radius:var(--r-full)}
.chk.on::before{opacity:1}
.nrep{display:flex;justify-content:space-between;align-items:center;gap:10px;font:var(--t-body-s);color:var(--md-on-surface-variant);padding:10px 12px;border-radius:var(--r-md);background:var(--md-surface-container-high);margin-bottom:4px}
.nrep .link,.nempty .link{white-space:nowrap;padding:6px 8px;font:var(--t-label-m)}
.nitem,.nfood{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background-color:transparent;border:0;border-top:1px solid var(--md-outline-variant);padding:12px 4px;color:var(--md-on-surface);border-radius:0}
.nitem:first-child,.nfood:first-child{border-top:0}
.nitem.new{animation:nnew 1.2s var(--m3-effects)}
/* alimento registrado: la fila se toca para cambiar la cantidad y la X la quita («Deshacer» en el aviso) */
.nirow{display:flex;align-items:center;gap:2px;border-top:1px solid var(--md-outline-variant)}
.nirow:first-child,.ngl+.nirow{border-top:0}
.nirow .nitem{flex:1;min-width:0;border-top:0}
.ndel{flex:none;width:40px;height:40px;margin-right:-8px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-full);background-color:transparent;color:var(--md-on-surface-variant)}
.ndel .ic{width:20px;height:20px}
.toast.act{display:none;align-items:center;gap:12px;padding:6px 8px 6px 18px}
.toast.act.show{display:flex}
.tact{flex:none;margin:0;padding:10px 12px;border:0;border-radius:var(--r-full);background-color:transparent;color:var(--md-inverse-primary);font:var(--t-label-l)}
@keyframes nnew{0%{background:var(--md-success-container)}100%{background:transparent}}
.nn{flex:1;min-width:0;font:var(--t-title-s);font-size:15px;line-height:1.25}
.nn small{display:block;font:var(--t-body-s);color:var(--md-on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nkk{text-align:right;font:var(--t-title-s);font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.nkk small{display:block;font:var(--t-label-s);color:var(--md-on-surface-variant)}
.nsrc{display:inline-block;margin-left:6px;font:var(--t-label-s);font-size:10.5px;padding:2px 7px;border-radius:var(--r-xs);background:var(--md-secondary-container);color:var(--md-on-secondary-container);vertical-align:2px}
.nsrc.my{background:var(--md-carb-container);color:var(--md-on-carb-container)}
.naddrow{display:flex;gap:8px;margin-top:10px}
.nadd{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:var(--r-full);border:0;background-color:var(--md-primary-container);color:var(--md-on-primary-container);font:var(--t-label-l);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.nadd:active,.nrepeat:active{border-radius:var(--r-md)}
.nrepeat{min-height:48px;border-radius:var(--r-full);border:0;background-color:var(--md-surface-container-high);font:var(--t-label-m);padding:0 16px;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.nweek .nwchart{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px;padding-top:8px}
.nwd{display:flex;flex-direction:column;align-items:center;gap:6px}
.nwb{height:104px;width:100%;max-width:32px;display:flex;align-items:flex-end;background:var(--md-surface-container-high);border-radius:var(--r-full);overflow:hidden}
.nwb i{display:block;width:100%;background:var(--md-primary);border-radius:var(--r-full);min-height:4px;transition:height var(--m3-spatial-slow-d) var(--m3-spatial-slow)}
.nwd.today .nwb i{background:var(--md-tertiary)}
.nwd.fut .nwb{opacity:.45}
.nwd small{font:var(--t-label-m);color:var(--md-on-surface-variant);height:18px}
.nwline{position:absolute;left:0;right:0;border-top:2px dashed var(--md-fat);pointer-events:none}
.nwline span{position:absolute;right:0;top:-18px;font:var(--t-label-s);color:var(--md-fat)}
.nwstats,.npg{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px;margin-top:12px}
.nwstats div,.npg div{background:var(--md-surface-container-high);border-radius:var(--r-md);padding:10px 8px;text-align:center}
.nwstats b,.npg b{display:block;font:var(--t-title-l);font-size:18px;font-variant-numeric:tabular-nums}
.nwstats small,.npg small{font:var(--t-label-s);color:var(--md-on-surface-variant)}
.nsrcnote{text-align:center;font:var(--t-body-s);margin:14px 0 4px}
/* menú, comidas del menú y «Cambiar hoy» */
.meal{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:16px;margin:10px 0}
.meal h3{font:var(--t-title-l);font-size:18px;margin:2px 0 6px}
.meal p.it{margin:0 0 8px;font:var(--t-body-m)}
.meal .tag{font:var(--t-label-s);color:var(--md-on-tertiary-container);background:var(--md-tertiary-container);border-radius:var(--r-xs);padding:2px 8px;vertical-align:middle}
.menus{margin-top:12px;flex-wrap:wrap}
.swapbtn{padding:8px 4px;font:var(--t-label-l)}
.alts{display:grid;gap:4px;margin-top:6px;animation:m3In var(--m3-spatial-d) var(--m3-spatial)}
.alt{display:grid;gap:2px;text-align:left;border:0;background-color:var(--md-surface-container-high);border-radius:var(--r-sm);padding:12px 14px;font:var(--t-body-m)}
.alts .alt:first-child{border-radius:var(--r-lg) var(--r-lg) var(--r-sm) var(--r-sm)}
.alts .alt:last-child{border-radius:var(--r-sm) var(--r-sm) var(--r-lg) var(--r-lg)}
.alt small{color:var(--md-on-surface-variant)}
.alt em{color:var(--md-primary);font-style:normal;font-weight:800}
.alt.cur{background-color:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.water{padding:16px;margin:14px 0}
.glasses{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:12px}
.gl{width:100%;max-width:40px;height:48px;justify-self:center;border-radius:var(--r-sm) var(--r-sm) var(--r-lg) var(--r-lg);border:0;background-color:var(--md-surface-container-highest);padding:0;transition:background-color var(--m3-effects-d) var(--m3-effects),transform var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.gl.on{background-color:var(--md-tertiary);animation:ckPop var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.macros{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 4px}
.macros div{background:var(--md-surface-container-high);border-radius:var(--r-lg);padding:12px}
.macros b{font:var(--t-headline-s);display:block}
.macros small{color:var(--md-on-surface-variant);font:var(--t-body-s)}
.macros .m{height:8px;background:var(--md-surface-container-highest);border-radius:var(--r-full);margin-top:8px;overflow:hidden;padding:0}
.macros .m i{display:block;height:100%;background:var(--md-primary);border-radius:var(--r-full);transition:width var(--m3-spatial-d) var(--m3-spatial)}
.macros .m.p i{background:var(--md-tertiary)}
/* hoja de alimentos */
.nsh-h{display:flex;align-items:center;gap:8px;min-height:48px;margin-bottom:8px;position:relative}
.nsh-h h2{flex:1;font:var(--t-headline-s);font-size:21px;margin:0;padding-right:48px}
.nsh-h .xbtn{top:2px;right:0}
.nsearch{display:flex;gap:8px;position:sticky;top:-10px;background:var(--md-surface-container-low);padding:4px 0 10px;z-index:2}
.nq{text-align:left;padding:0 18px;font:var(--t-body-l);font-weight:600;border-radius:var(--r-full);height:52px}
.nq:focus{border-radius:var(--r-full)}
.nscan{flex:none;width:52px;height:52px;border-radius:var(--r-lg);border:0;background-color:var(--md-primary-container);color:var(--md-on-primary-container);display:grid;place-items:center;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.nscan:active{border-radius:var(--r-full)}
.nscan .ic{width:26px;height:26px;fill:currentColor;stroke:none}
.ntabs{display:flex;gap:6px;margin:2px 0 8px;overflow-x:auto;scrollbar-width:none}
.ntabs::-webkit-scrollbar{display:none}
.nres{flex:1}
.nfood .nplus{width:36px;height:36px;border-radius:var(--r-full);background:var(--md-secondary-container);color:var(--md-on-secondary-container);display:grid;place-items:center;font-weight:800;flex:none}
.nfood .nplus .ic{width:22px;height:22px}
.nsub{font:var(--t-label-m);text-transform:uppercase;letter-spacing:.05em;color:var(--md-on-surface-variant);margin:16px 0 4px}
.nsub small{text-transform:none;letter-spacing:0;font-weight:600}
.nempty{color:var(--md-on-surface-variant);font:var(--t-body-m);margin:12px 4px}
.nnotfound{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:12px 0 4px;border:0;background-color:var(--md-surface-container-high);border-radius:var(--r-full);padding:14px;font:var(--t-label-l);color:var(--md-primary)}
.nfoot{display:flex;gap:8px;position:sticky;bottom:-14px;background:var(--md-surface-container-low);padding:10px 0 4px}
.nfoot .smallbtn{flex:1;margin:0}
.npick h3{font:var(--t-headline-s);font-size:22px;margin:0 0 2px}
.nph{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.nfav{width:48px;height:48px;border-radius:var(--r-full);border:0;background-color:var(--md-surface-container-high);font-size:22px;color:var(--md-carb);flex:none;display:grid;place-items:center;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.nfav.on{background-color:var(--md-carb-container);color:var(--md-on-carb-container);border-radius:var(--r-md)}
.nfav .ic{width:24px;height:24px}
.nport{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 12px}
.nport button small{font-weight:600;opacity:.8}
.nport button.on small{opacity:.9}
.nqty{display:grid;grid-template-columns:60px 1fr 60px;gap:8px}
.nqty button{height:60px;border-radius:var(--r-full);border:0;background-color:var(--md-surface-container-highest);font-size:0;display:grid;place-items:center;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.nqty button:active{border-radius:var(--r-md)}
.nqty button .ic{width:26px;height:26px}
.nqty .in{height:60px;font:var(--t-headline-m);border-radius:var(--r-lg)}
.nprev{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:4px;margin-top:12px}
.nprev div{background:var(--md-surface-container-high);border-radius:var(--r-sm);padding:12px 4px;text-align:center}
.nprev div:first-child{border-radius:var(--r-xl) var(--r-sm) var(--r-sm) var(--r-xl)}
.nprev div:last-child{border-radius:var(--r-sm) var(--r-xl) var(--r-xl) var(--r-sm)}
.nprev b{display:block;font:var(--t-title-l);font-size:19px;font-variant-numeric:tabular-nums}
.nprev small{font:var(--t-label-s);color:var(--md-on-surface-variant)}
.nprev .npk{background:var(--md-primary);color:var(--md-on-primary)}
.nprev .npk small{color:inherit;opacity:.9}
.nprev div:nth-child(2) b{color:var(--md-primary)}
.nprev div:nth-child(3) b{color:var(--md-carb)}
.nprev div:nth-child(4) b{color:var(--md-fat)}
.nact{display:flex;gap:8px;margin-top:18px}
.nact .smallbtn{flex:1;min-height:56px;font:var(--t-title-m);font-weight:800;margin:0}
.nform label{display:block;font:var(--t-label-l);margin:12px 0 0}
.nform label .in{margin-top:6px;text-align:left;padding:0 14px}
.n2,.n3,.n4{display:grid;gap:8px}
.n2{grid-template-columns:1fr 1fr}.n3{grid-template-columns:1fr 1fr 1fr}.n4{grid-template-columns:repeat(4,1fr)}
.n4 label .in,.n3 label .in{text-align:center;padding:0 4px}
.n3 label,.n4 label{font:var(--t-label-m)}
.nform .smallbtn.wide{margin-top:18px}
.nopts{display:grid;gap:4px}
.nopt{display:block;width:100%;text-align:left;border:0;background-color:var(--md-surface-container-high);border-radius:var(--r-md);padding:12px 14px;font:var(--t-label-l);transition:border-radius var(--m3-spatial-d) var(--m3-spatial),background-color var(--m3-effects-d) var(--m3-effects)}
.n2 .nopt,.n3 .nopt{text-align:center;padding:12px 6px}
.nopt small{display:block;font:var(--t-body-s);color:var(--md-on-surface-variant)}
.nopt.on{background-color:var(--md-secondary);color:var(--md-on-secondary);border-radius:var(--r-xl)}
.nopt.on small{color:inherit;opacity:.85}
.nopt .oi{display:block;font-size:22px;line-height:1.2}
.nopt .oi .ic{width:24px;height:24px}
.ngoal .nopt{padding:12px 8px}
.ngoal .nopt small{font-size:11.5px;line-height:1.25;margin-top:2px}
.nprof{margin-top:14px}
.nfix{display:flex;gap:12px;align-items:center;border:0;background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-radius:var(--r-lg);padding:12px 14px}
.nfix .oi{font-size:24px}
.nfix b{display:block}
.nfix small{opacity:.85;font:var(--t-body-s)}
.nscanbox{position:relative;border-radius:var(--r-xl);overflow:hidden;background:#000;aspect-ratio:4/3;margin-bottom:10px}
.nscanbox video{width:100%;height:100%;object-fit:cover;display:block}
.nscanframe{position:absolute;inset:22% 10%;border:3px solid rgb(255 255 255/.9);border-radius:var(--r-xl);box-shadow:0 0 0 999px rgb(0 0 0/.35)}
.nscanframe i{position:absolute;left:6%;right:6%;top:50%;height:3px;border-radius:var(--r-full);background:var(--md-primary-fixed-dim);box-shadow:0 0 12px var(--md-primary-fixed-dim);animation:scanline 1.6s var(--m3-effects) infinite alternate}
@keyframes scanline{from{top:15%}to{top:85%}}
.nscanmsg{position:absolute;left:0;right:0;bottom:0;margin:0;padding:12px;text-align:center;color:#fff;font:var(--t-label-l);background:linear-gradient(transparent,rgb(0 0 0/.7))}
@media (max-width:380px){.nhero{grid-template-columns:112px 1fr}.nring-wrap,.nring{width:112px;height:112px}.nrc b{font-size:24px}.n4{grid-template-columns:1fr 1fr}}
/* premio del fin de semana */
.reward .rwhead{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.reward .rwhead h3{margin:0 0 2px}
.rwicon{position:relative;isolation:isolate;font-size:32px;width:56px;height:56px;display:grid;place-items:center;flex:none;color:var(--md-on-surface-variant)}
.rwicon .ic{width:26px;height:26px}
.rwicon::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--md-surface-container-high);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.reward.on .rwicon::before{background:var(--md-success-container);-webkit-mask-image:var(--shape-sunny);mask-image:var(--shape-sunny);animation:heroSpin 10s linear infinite}
.reward details{margin-top:10px}
.rwpick{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px;max-height:360px;overflow-y:auto;padding:2px}
.rwpick button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;border-radius:var(--r-lg);border:0;background-color:var(--md-surface-container-high);color:inherit;font:var(--t-label-m);transition:border-radius var(--m3-spatial-d) var(--m3-spatial)}
.rwpick button span{font-size:26px}
.rwpick button small{font:var(--t-label-s);opacity:.85}
.rwpick button.on{background-color:var(--md-success-container);color:var(--md-on-success-container);border-radius:var(--r-xl)}
/* súper */
.groc h4{margin:14px 0 4px;font:var(--t-title-s)}
.gi{display:flex;gap:12px;align-items:center;padding:8px 0;font:var(--t-body-m);font-size:15px;width:100%;background-color:transparent;border:0;text-align:left;min-height:44px}
.gi .bx{flex:none;width:26px;height:26px;border-radius:var(--r-xs);box-shadow:inset 0 0 0 2px var(--md-on-surface-variant);display:grid;place-items:center;font-size:0;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects)}
.gi.on{color:var(--md-on-surface-variant);text-decoration:line-through}
.gi.on .bx{background:var(--md-success);box-shadow:none;border-radius:var(--r-full)}
.gi.on .bx::before{content:"";width:18px;height:18px;background:var(--md-on-success);-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.gadd{display:grid;grid-template-columns:1fr auto;gap:8px;margin:10px 0}
.gadd select.in{grid-column:1/2;font:var(--t-body-m);text-align:left;padding:0 12px;font-weight:600}
.gadd .smallbtn{margin:0;grid-row:1/3;grid-column:2;height:auto}
.groc .gadd .in{text-align:left;padding:0 14px}
.gwrap{display:flex;align-items:center}
.gwrap .gi{flex:1}
.gdel .ic{width:20px;height:20px}
.shop .shhead{display:flex;justify-content:space-between;align-items:baseline}
.shop h3{margin:0}
.shop h4{margin:16px 2px 4px;font:var(--t-label-m);text-transform:uppercase;letter-spacing:.05em;color:var(--md-on-surface-variant)}
.shadd{display:flex;gap:8px;margin:12px 0}
.shadd .in{text-align:left;padding:0 18px;font:var(--t-body-l);font-weight:600;border-radius:var(--r-full)}
.shadd .smallbtn{margin:0}
.shrow{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--md-outline-variant);animation:m3In var(--m3-spatial-d) var(--m3-spatial)}
.shop h4+.shrow{border-top:0}
.shck{flex:none;width:32px;height:32px;border-radius:var(--r-sm);border:0;box-shadow:inset 0 0 0 2px var(--md-on-surface-variant);background-color:transparent;display:grid;place-items:center;padding:0;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects)}
.shck span{opacity:0;color:var(--md-on-success);font-weight:900;font-size:15px;transition:opacity var(--m3-effects-d) var(--m3-effects)}
.shrow.done .shck{background-color:var(--md-success);box-shadow:none;border-radius:var(--r-full)}
.shrow.done .shck span{opacity:1}
.sht{flex:1;font:var(--t-body-l);font-weight:600}
.shrow.done .sht{text-decoration:line-through;color:var(--md-on-surface-variant);font-weight:500}
.shcart{margin-top:12px;padding:10px 14px 14px;border-radius:var(--r-xl);background:var(--md-surface-container-high)}
.shcart .smallbtn.wide{margin-top:8px}
.shsub{font:var(--t-label-m);text-transform:uppercase;letter-spacing:.05em;color:var(--md-on-surface-variant);margin:16px 0 8px}
.chipsx{display:flex;flex-wrap:wrap;gap:6px}
.chipx{color:var(--md-on-surface);min-height:36px;padding:0 14px}
.shplan{margin-top:12px;border-top:1px solid var(--md-outline-variant);padding-top:8px}
.shplan summary{font:var(--t-title-s)}
.shempty{margin:4px 0 0}

/* ===================== 6 · Social y festejos ===================== */
/* --- Llama de la racha (dibujo propio; se mueve como fuego) --- */
.flame{width:64px;height:80px;overflow:visible}
.flame .fo{fill:url(#fo);transform-origin:50% 100%;animation:flick 1.6s ease-in-out infinite}
.flame .fi{fill:url(#fi);transform-origin:50% 100%;animation:flick 1.1s ease-in-out infinite reverse}
.flame.off .fo,.flame.off .fi{filter:grayscale(1) brightness(1.15);opacity:.55;animation:none}
@keyframes flick{0%,100%{transform:scale(1,1) skewX(0)}30%{transform:scale(1.03,.96) skewX(-2deg)}60%{transform:scale(.97,1.05) skewX(2deg)}}
.flamebox{position:relative;display:inline-block;line-height:0;vertical-align:middle}
.flamebox .fcost{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.miniflame,.minif{display:inline-block;vertical-align:-4px}
.miniflame .flame{width:16px;height:20px}
/* colores de llama (recompensas) */
.fl-azul .flame,.fl-azul.minif{filter:hue-rotate(185deg) saturate(1.3)}
.fl-morada .flame,.fl-morada.minif{filter:hue-rotate(245deg) saturate(1.2)}
.fl-dorada .flame,.fl-dorada.minif{filter:hue-rotate(18deg) saturate(1.6) brightness(1.15)}
.fl-arcoiris .flame,.fl-arcoiris.minif{animation:rainbow 3s linear infinite}
@keyframes rainbow{from{filter:hue-rotate(0)}to{filter:hue-rotate(360deg)}}

/* --- Tarjeta de la racha: la llama sobre un sol que gira despacio --- */
.social-hero{position:relative;overflow:hidden;isolation:isolate;text-align:center;padding:22px 18px 18px;background:var(--md-surface-container)}
.social-hero::before{content:"";position:absolute;z-index:-1;left:50%;top:-70px;width:280px;height:280px;margin-left:-140px;background:var(--md-fire-container);opacity:.75;-webkit-mask:var(--shape-sunny) center/contain no-repeat;mask:var(--shape-sunny) center/contain no-repeat;animation:heroSpin 50s linear infinite}
.social-hero.s-pending::before{background:var(--md-surface-container-highest)}
.social-hero h2{font:var(--t-headline-s);margin:4px 0 4px}
.social-hero>p{margin:0 auto;max-width:400px;color:var(--md-on-surface-variant);font:var(--t-body-m)}
.flamewrap{position:relative;display:inline-block;margin:2px auto 0}
.flamewrap .flame{width:96px;height:120px;filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--md-fire) 45%,transparent))}
.s-pending .flamewrap .flame{filter:none}
.snum{position:absolute;left:0;right:0;bottom:14px;font:800 30px/1 var(--font-brand);color:#fff;text-shadow:0 2px 8px rgb(110 30 0/.55)}
.s-pending .snum{color:var(--md-on-surface);text-shadow:none}
.social-hero.dressed .snum{left:auto;right:-16px;bottom:-4px;min-width:42px;padding:5px 10px;border-radius:var(--r-full);background:var(--md-fire);color:var(--md-on-fire);font-size:22px;text-shadow:none;box-shadow:var(--e2)}
.onb .bigflame .flame{width:90px;height:112px}
/* semana: cumplido = sol de fuego; recuperado = galleta; protector = gema de hielo; por recuperar = borde punteado */
.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:16px 0 4px}
.wd{display:grid;justify-items:center;gap:6px;font:var(--t-label-m);color:var(--md-on-surface-variant)}
.wd i{position:relative;isolation:isolate;width:38px;height:38px;display:grid;place-items:center;font-style:normal;color:var(--md-on-surface-variant)}
.wd i::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;border:2px solid var(--md-outline-variant)}
.wd i .ic{width:20px;height:20px}
.wd.s-done i{color:var(--md-on-fire)}
.wd.s-done i::before{border:0;border-radius:0;background:var(--md-fire);-webkit-mask:var(--shape-sunny) center/contain no-repeat;mask:var(--shape-sunny) center/contain no-repeat;animation:wdPop var(--m3-spatial-d) var(--m3-spatial) both}
.wd.s-done i .ic{animation:wdPop var(--m3-spatial-d) var(--m3-spatial) .08s both}
.wd.s-recovered i{color:var(--md-on-fire-container)}
.wd.s-recovered i::before{border:0;border-radius:0;background:var(--md-fire-container);-webkit-mask:var(--shape-cookie4) center/contain no-repeat;mask:var(--shape-cookie4) center/contain no-repeat}
.wd.s-frozen i{color:var(--md-on-ice-container)}
.wd.s-frozen i::before{border:0;border-radius:0;background:var(--md-ice-container);-webkit-mask:var(--shape-gem) center/contain no-repeat;mask:var(--shape-gem) center/contain no-repeat}
.wd.s-owed i{color:var(--md-fire)}
.wd.s-owed i::before{border:2px dashed var(--md-fire);background:color-mix(in srgb,var(--md-fire) 10%,transparent)}
.wd.s-missed i::before{border-style:dashed}
.wd.s-rest i::before{border:0;inset:8px;background:var(--md-secondary-container)}
.wd.s-pending i::before{border-color:var(--md-fire);animation:pulse 1.6s var(--m3-effects) infinite}
.wd.s-future i{opacity:.5}
@keyframes wdPop{from{transform:scale(.3) rotate(-60deg)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--md-fire) 45%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
/* números de la racha */
.sstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.sstats div{background:var(--md-surface-container-high);border-radius:var(--r-lg);padding:12px 4px}
.sstats b{display:flex;justify-content:center;align-items:center;gap:1px;min-height:28px;font:var(--t-title-l);font-size:22px;color:var(--md-on-surface)}
.sstats b .ic{width:22px;height:22px;color:var(--md-ice)}
.sstats small{font:var(--t-body-s);color:var(--md-on-surface-variant)}
.cheerin{display:flex;align-items:center;gap:10px;background:var(--md-success-container);color:var(--md-on-success-container);border-radius:var(--r-lg);padding:12px 16px;font:var(--t-label-l);margin:-2px 0 14px;animation:m3Pop var(--m3-spatial-d) var(--m3-spatial)}
.cheerin .ic{width:22px;height:22px;flex:none}
.cheerin span{flex:1}
/* nivel: número en una galleta que gira; barra ondulada */
.lvl{display:flex;gap:14px;align-items:center;text-align:left;margin-top:14px;padding:14px;border-radius:var(--r-lg);background:var(--md-surface-container-high)}
.lvlb{position:relative;isolation:isolate;flex:none;width:54px;height:54px;display:grid;place-items:center;font:800 22px/1 var(--font-brand);color:var(--md-on-primary)}
.lvlb::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--md-primary);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat;animation:heroSpin 24s linear infinite}
.lvli{flex:1;min-width:0}
.lvlh{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lvlh b{font:var(--t-title-m)}
.lvlh small,.lvli>small{font:var(--t-body-s);color:var(--md-on-surface-variant)}
.lvlbar{height:10px;border-radius:var(--r-full);background:color-mix(in srgb,var(--md-primary) 18%,transparent);margin:8px 0 6px}
.lvlbar i{position:relative;display:block;height:100%;width:var(--w);border-radius:var(--r-full);overflow:hidden;color:var(--md-primary);animation:fill var(--m3-spatial-slow-d) var(--m3-spatial-slow) both}
@keyframes fill{from{width:0}}

/* --- Listas (amigos, solicitudes, tabla, juegos): renglones unidos con esquinas grandes arriba y abajo --- */
.frow,.podium~.lrow,.grow,.wrow{display:flex;align-items:center;gap:12px;padding:12px;margin:0 0 3px;border-radius:var(--r-xs);background:var(--md-surface-container-high);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects)}
.card>h3+.frow,.card>.note+.frow,.podium+.lrow,.gamesc .smallbtn+.grow,.gamesc>.note+.grow,.fsheet h3+.wrow{border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg)}
.frow:not(:has(+.frow)),.podium~.lrow:last-child,.grow:last-child,.wrow:not(:has(+.wrow)){border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}
.frow[role="button"]{cursor:pointer}
@media (hover:hover){.frow[role="button"]:hover{background:var(--md-surface-container-highest)}}
.frow[role="button"]:active{border-radius:var(--r-lg)}
.frow .smallbtn{margin:0;min-height:40px;padding:0 14px}
.frow .smallbtn .ic{width:20px;height:20px}
.fi{flex:1;min-width:0;display:grid}
.fi b{font:var(--t-title-m);overflow:hidden;text-overflow:ellipsis}
.fi small{color:var(--md-on-surface-variant);font:var(--t-body-s)}
.shared{display:inline-flex;align-items:center;gap:3px;font:var(--t-label-m);color:var(--md-fire);margin-top:3px}
.shared .ic{width:16px;height:16px}
.shared.off{color:var(--md-on-surface-variant);font-weight:500}
/* foto (avatar) */
.sav{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;display:grid;place-items:center;background:var(--md-primary-container);color:var(--md-on-primary-container);font:800 18px/1 var(--font-brand)}
.sav.lg{width:56px;height:56px;font-size:22px}
.sav.xl{width:112px;height:112px;font-size:44px}
/* marcos (recompensas): anillo de color alrededor de la foto */
.sav.fr{box-shadow:0 0 0 2px var(--frg,var(--md-surface-container-low)),0 0 0 5px var(--frc,#999)}
.frow .sav.fr,.lrow .sav.fr,.rrow .sav.fr{--frg:var(--md-surface-container-high)}
.sav.fr-bronce{--frc:#B87333}.sav.fr-plata{--frc:#AEB8C2}.sav.fr-oro{--frc:#E3B341}.sav.fr-esmeralda{--frc:#22A36B}.sav.fr-diamante{--frc:#7FD8F5}
.sav.fr-diamante{animation:frShine 3s linear infinite}
.sav.fr-fuego{animation:frFire 1.6s ease-in-out infinite alternate}
@keyframes frShine{0%,100%{box-shadow:0 0 0 2px var(--frg,var(--md-surface-container-low)),0 0 0 5px #7FD8F5}50%{box-shadow:0 0 0 2px var(--frg,var(--md-surface-container-low)),0 0 0 5px #C9B6FF,0 0 14px #7FD8F5}}
@keyframes frFire{from{box-shadow:0 0 0 2px var(--frg,var(--md-surface-container-low)),0 0 0 5px #FF6B1A,0 0 8px #FF9F1C}to{box-shadow:0 0 0 2px var(--frg,var(--md-surface-container-low)),0 0 0 5px #FFB627,0 0 18px #FF3D1A}}
/* ¡Ánimo! (botón de fuego) */
.cheer{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;border:0;border-radius:var(--r-full);min-height:40px;padding:0 16px;font:var(--t-label-l);background-color:var(--md-fire);color:var(--md-on-fire);
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),transform var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects)}
.cheer:active:not(:disabled){border-radius:var(--r-md);transform:scale(.95)}
.cheer .ic{width:18px;height:18px}
.cheer.sent{background-color:var(--md-surface-container-highest);color:var(--md-on-surface-variant);cursor:default}
.cheer.burst{animation:burst var(--m3-spatial-d) var(--m3-spatial)}
@keyframes burst{0%{transform:scale(1)}40%{transform:scale(1.16) rotate(-4deg)}100%{transform:scale(1)}}
.addf{display:flex;gap:8px;align-items:center;margin:14px 0 8px}
.addf .hrow{flex:1}
.addf .smallbtn{margin:0;min-height:48px}
.okc{color:var(--md-success)!important}.badc{color:var(--md-error)!important}
/* tabla de la semana: podio con columnas que suben con resorte */
.podium{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:8px;margin:14px 0 6px;height:236px}
.pod{display:grid;justify-items:center;gap:2px;height:100%;align-content:end;min-width:0}
.pod b{font:var(--t-title-s);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}
.pod small{color:var(--md-on-surface-variant);font:var(--t-body-s)}
.pod .col{width:100%;height:var(--h);margin-top:6px;border-radius:var(--r-lg) var(--r-lg) var(--r-xs) var(--r-xs);display:grid;place-items:start center;padding-top:10px;font:800 22px/1 var(--font-brand);transform-origin:bottom;animation:rise var(--m3-spatial-slow-d) var(--m3-spatial-slow) both}
.pod .col span{position:relative;isolation:isolate;display:grid;place-items:center;width:38px;height:38px}
.pod .col span::before{content:"";position:absolute;inset:0;z-index:-1;background:currentColor;opacity:.18;-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.pod.p1 .col{background:var(--md-primary);color:var(--md-on-primary);animation-delay:.25s}
.pod.p1 .col span::before{-webkit-mask-image:var(--shape-sunny);mask-image:var(--shape-sunny);animation:heroSpin 14s linear infinite}
.pod.p2 .col{background:var(--md-secondary-container);color:var(--md-on-secondary-container);animation-delay:.1s}
.pod.p3 .col{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);animation-delay:.4s}
.pod.me b{color:var(--md-primary)}
@keyframes rise{from{transform:scaleY(0)}}
.lrow .pos{width:22px;font:var(--t-title-s);color:var(--md-on-surface-variant);text-align:center}
.podium~.lrow b{flex:1;font:var(--t-title-s)}
.podium~.lrow small{color:var(--md-on-surface-variant);font:var(--t-label-m)}
.lrow.me b{color:var(--md-primary)}
/* retos */
.reto{background:var(--md-surface-container-high);border-radius:var(--r-lg);padding:14px;margin:10px 0}
.reto.ended{opacity:.65}
.rhead{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:8px}
.rhead b{display:inline-flex;align-items:center;gap:6px;font:var(--t-title-m)}
.rhead b .ic{color:var(--md-primary);width:20px;height:20px}
.rhead small{color:var(--md-on-surface-variant);font:var(--t-body-s);flex:none}
.prize{display:flex;align-items:center;gap:6px;width:max-content;max-width:100%;margin:0 0 8px;padding:6px 12px;border-radius:var(--r-full);background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);font:var(--t-label-m)}
.prize .ic{width:18px;height:18px;flex:none}
.rrow{display:flex;align-items:center;gap:10px;margin:8px 0}
.rrow .sav{width:32px;height:32px;font-size:14px}
.rbar{flex:1;position:relative;height:32px;border-radius:var(--r-full);background:var(--md-surface-container-highest);overflow:hidden}
.reto .rbar{background:var(--md-surface-container-lowest)}
.rfill{height:100%;width:var(--w);border-radius:var(--r-full);background:var(--md-primary-container);animation:fill var(--m3-spatial-slow-d) var(--m3-spatial-slow) both}
.rfill.done{background:var(--md-success-container)}
.rbar span{position:absolute;inset:0;display:flex;align-items:center;gap:4px;padding-left:14px;font:var(--t-label-m);color:var(--md-on-surface)}
.rbar span .ic{width:16px;height:16px;color:var(--md-success)}
.newch{display:grid;gap:10px;margin-top:12px;padding:14px;border-radius:var(--r-lg);background:var(--md-surface-container-high)}
.newch label{display:flex;gap:8px;align-items:center;font:var(--t-label-l)}
.newch label.wide{flex-direction:column;align-items:stretch}
.newch select.in{width:auto;height:44px;padding:0 12px;font:var(--t-label-l)}
.newch input.in{text-align:left;padding:0 14px;font:var(--t-body-l)}
.chk2{font-weight:500!important}
.chk2 input,.wipe input[type=checkbox]{width:20px;height:20px;accent-color:var(--md-primary)}
.newch .smallbtn{margin:0}
/* días de entreno: al elegirlos pasan de círculo a cuadro redondeado (Material 3 Expressive) */
.dpick{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:12px}
.dpick button{min-height:48px;border:0;border-radius:var(--r-full);background-color:var(--md-surface-container-highest);color:var(--md-on-surface);font:var(--t-label-l);
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects),color var(--m3-effects-d) var(--m3-effects)}
.dpick button.on{background-color:var(--md-primary);color:var(--md-on-primary);border-radius:var(--r-md)}
/* logros: el emoji sobre una galleta; desbloqueado, sobre un sol que gira */
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.badge{border:0;background-color:var(--md-surface-container-high);border-radius:var(--r-lg);padding:12px 4px 10px;display:grid;justify-items:center;align-content:start;gap:6px;min-height:100px;color:var(--md-on-surface);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.badge:active{border-radius:var(--r-md)}
.badge span{position:relative;isolation:isolate;display:grid;place-items:center;width:52px;height:52px;font-size:28px;line-height:1;color:var(--md-on-surface-variant)}
.badge span::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--md-surface-container-highest);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.badge span .ic{width:22px;height:22px}
.badge small{font:var(--t-label-s);font-weight:600;color:var(--md-on-surface-variant);text-align:center;line-height:1.2}
.badge.on span{animation:m3Pop var(--m3-spatial-d) var(--m3-spatial) both}
.badge.on span::before{background:var(--md-tertiary-container);-webkit-mask-image:var(--shape-sunny);mask-image:var(--shape-sunny);animation:heroSpin 30s linear infinite}
.badge.on small{color:var(--md-on-surface);font-weight:700}
/* recompensas */
.ukind{font:var(--t-label-m);letter-spacing:.06em;text-transform:uppercase;color:var(--md-on-surface-variant);margin:18px 2px 8px}
.ugrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.utile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:12px 6px 10px;border:0;border-radius:var(--r-lg);background-color:var(--md-surface-container-high);color:var(--md-on-surface);min-height:120px;
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects),box-shadow var(--m3-effects-d) var(--m3-effects)}
.utile:active{border-radius:var(--r-md)}
.utile .uic{position:relative;font-size:26px;line-height:1.1}
.utile .uic>.ic{width:26px;height:26px;color:var(--md-on-surface-variant)}
.utile b{font:var(--t-label-m);line-height:1.2}
.utile small{font:var(--t-label-s);font-weight:500;color:var(--md-on-surface-variant);line-height:1.25}
.utile:not(.got){background-color:var(--md-surface-container)}
.utile:not(.got) .uic{filter:grayscale(1);opacity:.6}
.utile.got{background-color:var(--md-surface-container-high)}
.utile.on{background-color:var(--md-secondary-container);color:var(--md-on-secondary-container);box-shadow:inset 0 0 0 2px var(--md-primary);border-radius:var(--r-xl)}
.utile.on small{color:var(--md-on-secondary-container);font-weight:800}
.utile.on .kprev{animation:ckPop var(--m3-spatial-d) var(--m3-spatial)}
.ubar{width:80%;height:6px;border-radius:var(--r-full);background:var(--md-surface-container-highest);overflow:hidden;margin-top:auto}
.ubar i{display:block;height:100%;width:var(--w);background:var(--md-primary);border-radius:var(--r-full)}
.uhave{font-variant-numeric:tabular-nums}
.ftitle,.prole{display:inline-block;font:var(--t-label-s);color:var(--md-on-secondary-container);background:var(--md-secondary-container);border-radius:var(--r-full);padding:2px 8px;vertical-align:2px;white-space:nowrap}
.prole{margin-left:6px;vertical-align:3px}
/* VIP: etiqueta siempre lila (el color del tema VIP), sin importar el acento elegido */
.prole.vip{display:inline-flex;align-items:center;gap:3px;background:var(--sw-lila);color:var(--sw-lila-on)}
.prole.vip .ic{width:12px;height:12px}
.prole.pending{background:var(--md-warning-container);color:var(--md-on-warning-container)}
.prole.blocked{background:var(--md-error-container);color:var(--md-on-error-container)}
/* disfraces (kigurumi): la foto dentro del gorro */
.kav{position:relative;display:inline-block;background:transparent!important;border-radius:0;overflow:visible;box-shadow:none!important;animation:none!important}
.kav .kph{position:absolute;left:20.97%;top:30.65%;width:58.06%;height:58.06%;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:var(--md-primary-container);color:var(--md-on-primary-container);font:800 1em/1 var(--font-brand);font-size:calc(1em * .8)}
.kav .khood{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 2px 3px rgb(48 28 12/.2))}
.kprev{width:100%;height:100%;display:block}
.ugrid.skins .utile{min-height:132px}
.ugrid.skins .uic{position:relative;width:62px;height:62px;font-size:0}
.ugrid.skins .utile:not(.got) .uic{filter:grayscale(1) opacity(.55)}
/* --- Gemas (bloque 4, docs/ECONOMIA.md): saldo, pesa rusa (camino) y tienda --- */
.gemchip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px 4px 8px;border:0;border-radius:var(--r-full);background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);font:var(--t-label-l);white-space:nowrap}
.gemchip .ic{width:16px;height:16px}
button.gemchip{cursor:pointer;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
button.gemchip:active{border-radius:var(--r-sm)}
.social-hero .gemchip.hero{position:absolute;top:12px;right:12px;z-index:2;min-height:36px}
.chestcall{display:flex;align-items:center;gap:10px;width:100%;margin:12px 0 0;padding:8px 8px 8px 10px;border:0;border-radius:var(--r-full);background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);font:var(--t-label-l);text-align:left;cursor:pointer;
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.chestcall:active{border-radius:var(--r-md)}
.chestcall .chic svg{width:30px;height:30px;display:block}
.chestcall .chgo{margin-left:auto}
.gemcard .gemtop{display:flex;align-items:center;gap:16px}
.gemic{width:64px;height:64px;flex:none;display:grid;place-items:center;background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);-webkit-mask:var(--shape-gem) center/contain no-repeat;mask:var(--shape-gem) center/contain no-repeat}
.gemic .ic{width:30px;height:30px}
.gemtx .kick{margin:0}
.gembal{display:block;font:var(--t-display-s);line-height:1.05}
.gemtx small{color:var(--md-on-surface-variant);font:var(--t-body-m)}
.gemmore{margin-top:12px}
.card .gemlist,.card .famhist{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:3px}
.card .gemlist li,.card .famhist li{display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;border-radius:var(--r-xs);background:var(--md-surface-container-high);font:var(--t-body-m)}
.card .gemlist li:first-child,.card .famhist li:first-child{border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg)}
.card .gemlist li:last-child,.card .famhist li:last-child{border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}
.gemlist li>.ic{width:20px;height:20px;flex:none;color:var(--md-tertiary)}
.gemlist li>span,.famhist li>span{flex:1;min-width:0}
.gemlist small,.famhist small{display:block;color:var(--md-on-surface-variant);font:var(--t-body-s)}
.gemlist b,.famhist b{flex:none;font:var(--t-label-l);text-align:right}
.gemlist b>.ic,.famhist b>.ic{width:18px;height:18px;color:var(--md-ice)}
.gemlist b.pos,.famhist b.pos{color:var(--md-success)}
.gemlist b.neg,.famhist b.neg{color:var(--md-error)}
.chestlist{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;margin:0 0 14px}
.chestbtn{display:flex;align-items:center;gap:12px;width:100%;padding:10px 10px 10px 12px;border:0;border-radius:var(--r-xs);background:var(--md-surface-container-high);color:var(--md-on-surface);text-align:left;cursor:pointer;
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.chestbtn:first-child{border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg)}
.chestbtn:last-child{border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}
.chestbtn:active{border-radius:var(--r-lg)}
/* la pesa rusa es oscura: va sobre un tono «fixed» (claro también en modo oscuro) para que se vea */
.chic{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:var(--r-md);background:var(--md-tertiary-fixed)}
.chestcall .chic{width:36px;height:36px;border-radius:var(--r-full);background:var(--md-tertiary-fixed-dim)}
.chic svg{width:34px;height:34px;display:block}
.chestbtn.r-rara .chic{box-shadow:inset 0 0 0 2px var(--md-tertiary)}
.chestbtn.r-epica .chic{background:var(--md-primary-fixed);box-shadow:inset 0 0 0 2px var(--md-primary)}
.cht{flex:1;min-width:0}
.cht b{display:block;font:var(--t-title-s)}
.cht small{display:block;color:var(--md-on-surface-variant);font:var(--t-body-s)}
.chgo{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:var(--r-full);background:var(--md-primary);color:var(--md-on-primary);font:var(--t-label-l)}
.pathpips{display:flex;gap:6px;margin:2px 0 10px}
.pathpips i{flex:1;height:10px;border-radius:var(--r-full);background:var(--md-surface-container-highest)}
.pathpips i.on{background:var(--md-primary)}
.pathpips i.on:last-of-type{background:var(--md-tertiary)}
.path p{margin:0;font:var(--t-body-m)}
.path small{display:block;margin-top:4px;color:var(--md-on-surface-variant);font:var(--t-body-s)}
.shopcard h3{display:flex;align-items:center;justify-content:space-between;gap:8px}
.shoplist{display:grid;grid-template-columns:minmax(0,1fr);gap:3px}
.shoprow{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:var(--r-xs);background:var(--md-surface-container-high)}
.shoprow:first-child{border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg)}
.shoprow:last-child{border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}
.shic{width:44px;height:44px;flex:none;display:grid;place-items:center;-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.shic .ic{width:24px;height:24px}
.shic svg:not(.ic){width:34px;height:34px}
.sh-prot{background:var(--md-ice-container);color:var(--md-on-ice-container)}
.sh-pesa{background:var(--md-tertiary-fixed)}
.shopt{flex:1;min-width:0}
.shopt b{display:block;font:var(--t-title-s)}
.shopt small{display:block;margin-top:2px;color:var(--md-on-surface-variant);font:var(--t-body-s)}
.buybtn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:40px;padding:0 14px;border:0;border-radius:var(--r-full);background-color:var(--md-primary);color:var(--md-on-primary);font:var(--t-label-l);cursor:pointer;white-space:nowrap;
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects),color var(--m3-effects-d) var(--m3-effects)}
.buybtn .ic{width:16px;height:16px}
.buybtn:active{border-radius:var(--r-md)}
.buybtn.short{background-color:var(--md-surface-container-highest);color:var(--md-on-surface-variant)}
.buybtn.armed{background-color:var(--md-tertiary);color:var(--md-on-tertiary);border-radius:var(--r-md);animation:armIn var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.buyoff{flex:none;font:var(--t-label-m);color:var(--md-on-surface-variant)}
.utile.shop{cursor:default}
.ugrid.skins .utile.shop .uic,.ugrid.skins .utile.shop:not(.got) .uic{filter:none;opacity:1}
.utile.shop .buybtn{margin-top:auto;min-height:36px;padding:0 12px}
.utile.shop small.have{display:inline-flex;align-items:center;gap:3px;margin-top:auto;min-height:36px;color:var(--md-success);font-weight:700}
.utile.shop b{margin-bottom:6px}
.utile.shop small.have .ic{width:14px;height:14px}
/* gemas en el festejo al guardar un entreno (material de la isla) */
.wogems{display:inline-flex;align-items:center;gap:6px;margin:0 auto 14px;padding:6px 16px 6px 12px;border-radius:var(--r-full);background:color-mix(in srgb,var(--md-tertiary-fixed) 20%,transparent);color:var(--md-tertiary-fixed);font:var(--t-title-m);animation:m3In var(--m3-spatial-d) var(--m3-spatial) .5s both}
.wogems .ic{width:20px;height:20px}
/* Familia (admin): gemas de cada quien */
.famgem{display:inline-flex;align-items:center;gap:3px;margin-top:4px;padding:2px 8px 2px 6px;border:0;border-radius:var(--r-full);background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);font:var(--t-label-m);cursor:pointer}
.famgem .ic{width:14px;height:14px}
.famgem.on{background:var(--md-tertiary);color:var(--md-on-tertiary)}
.card .famedit{display:block;margin:0;padding:12px;border-radius:var(--r-xs);background:var(--md-surface-container)}
.famgemf{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px}
.famgemb{display:flex;gap:8px;margin-top:2px}
.famgemb .smallbtn{flex:1}
/* Familia → Solicitudes (admin, v7.3): lista en segmentos; cada una se abre con sus respuestas y sus botones */
.card .famsec{margin:18px 0 8px}
.famsec .cnt{text-transform:none;letter-spacing:0}
.card .famforms{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:3px}
.card .famform{margin:0;border-radius:var(--r-xs);background:var(--md-surface-container-high);overflow:hidden;transition:border-radius var(--m3-spatial-d) var(--m3-spatial)}
.card .famform:first-child{border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg)}
.card .famform:last-child{border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}
.card .famform.open{border-radius:var(--r-lg)}
.famfh{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:0;background:transparent;color:var(--md-on-surface);text-align:left;cursor:pointer}
.famfic{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:var(--r-md);background:var(--md-surface-container-highest);color:var(--md-on-surface-variant)}
.famfic .ic{width:22px;height:22px}
.famftx{flex:1;min-width:0}
.famftx b{display:block;font:var(--t-title-s);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.famftx small{display:block;font:var(--t-body-s);color:var(--md-on-surface-variant)}
.famfst{flex:none;display:inline-flex;align-items:center;gap:4px;padding:4px 10px 4px 8px;border-radius:var(--r-full);font:var(--t-label-m);background:var(--md-surface-container-highest);color:var(--md-on-surface-variant)}
.famfst .ic{width:16px;height:16px}
.famform.rq-nueva .famfst{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.famform.rq-nueva .famfic{background:var(--md-primary-container);color:var(--md-on-primary-container);border-radius:var(--r-full)}
.famform.rq-proceso .famfst{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.famform.rq-lista .famfst{background:var(--md-success-container);color:var(--md-on-success-container)}
.famform.rq-rechazada .famfst{background:var(--md-error-container);color:var(--md-on-error-container)}
.famfb{padding:0 12px 12px;animation:m3In var(--m3-spatial-d) var(--m3-spatial)}
.famfb .pfdl>div{background:var(--md-surface-container)}
.famfacts{margin-top:10px;flex-wrap:wrap}
/* --- Generador de rutinas (8.1): vista previa en Solicitudes antes de «Aprobar y asignar» --- */
.gnprev{margin-top:12px;padding:14px;border-radius:var(--r-lg);background:var(--md-surface-container-low);box-shadow:inset 0 0 0 1px var(--md-outline-variant);animation:m3In var(--m3-spatial-d) var(--m3-spatial)}
.gnhead{display:flex;align-items:center;gap:12px}
.gnhead b{display:block;font:var(--t-title-m)}
.gnhead small{display:block;font:var(--t-body-s);color:var(--md-on-surface-variant)}
.gnic{flex:none;width:42px;height:42px;display:grid;place-items:center;background:var(--md-primary-container);color:var(--md-on-primary-container);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.gnic .ic{width:22px;height:22px}
/* recomendación del motor con «no caben» (8.3.6): contenedor terciario, como un consejo */
.gnrec{margin:12px 0 0;padding:12px 14px;border-radius:var(--r-md);background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);font:var(--t-body-s)}
.gnrec p{margin:0 0 8px}
.gnrech{display:flex;gap:8px;align-items:center;font:var(--t-title-s)}
.gnrech svg{width:20px;height:20px;flex:none}
.gnrec .smallbtn{margin-top:2px}
.gnflags{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:3px}
.gnflags li{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:var(--r-sm);font:var(--t-body-s);background:var(--md-surface-container)}
.gnflags li:first-child{border-radius:var(--r-md) var(--r-md) var(--r-sm) var(--r-sm)}
.gnflags li:last-child{border-radius:var(--r-sm) var(--r-sm) var(--r-md) var(--r-md)}
.gnflags li:only-child{border-radius:var(--r-md)}
.gnflags .ic{flex:none;width:18px;height:18px;margin-top:1px}
.gnflags .gnf-alto{background:var(--md-lv-alert-container);color:var(--md-on-lv-alert-container)}
.gnflags .gnf-medio{background:var(--md-lv-warn-container);color:var(--md-on-lv-warn-container)}
.gnlab{margin:14px 0 6px;font:var(--t-label-l);color:var(--md-on-surface-variant)}
.gnvol{display:flex;flex-wrap:wrap;gap:6px}
/* controles de la vista previa (8.2.3): días por semana y equipo, chips de filtro de Material 3 */
.gnopts{display:flex;flex-wrap:wrap;gap:6px}
.gnopts .chip{border:0;cursor:pointer;background:transparent;box-shadow:inset 0 0 0 1px var(--md-outline-variant);color:var(--md-on-surface-variant);transition:background-color var(--m3-effects-fast-d,.15s) var(--m3-effects-fast,ease),border-radius var(--m3-spatial-fast-d,.35s) var(--m3-spatial-fast,ease)}
.gnopts .chip.on{background:var(--md-secondary-container);color:var(--md-on-secondary-container);box-shadow:none}
.gnopts .chip .ic{width:16px;height:16px;margin-left:-4px}
.gnopts .chip:active{border-radius:var(--r-xs)}
.gnday li.opt{color:var(--md-on-surface-variant)}
.gnday li.opt .gnr{color:var(--md-on-surface-variant)}
.gnv{padding:4px 10px;border-radius:var(--r-full);font:var(--t-label-m);background:var(--md-surface-container-high);color:var(--md-on-surface-variant)}
.gnv b{font-weight:800;color:var(--md-on-surface)}
.gnv.pri{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.gnv.pri b{color:inherit}
.gnday{margin-top:12px;padding:10px 12px;border-radius:var(--r-md);background:var(--md-surface-container)}
.gndh{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.gndh b{font:var(--t-title-s)}
.gndh small{flex:none;font:var(--t-label-m);color:var(--md-on-surface-variant)}
.gnday ol{margin:6px 0 0;padding:0 0 0 20px;display:grid;gap:4px;font:var(--t-body-s)}
.gnday li{line-height:1.35}
.gnday .gns{margin-left:6px;color:var(--md-on-surface-variant);white-space:nowrap}
.gnday .gnr{margin-left:6px;font:var(--t-label-s);color:var(--md-tertiary)}
.gnday .gnplus{margin:0 6px;font-weight:800;color:var(--md-primary)}
.gnday li.ss{padding:2px 0 2px 8px;border-left:3px solid var(--md-primary-container);margin-left:-11px}
.gnacts{margin-top:14px;flex-wrap:wrap}
.gnacts .smallbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:0}
.famfacts .smallbtn,.famfno .smallbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:0}
.famfacts .smallbtn .ic,.famfno .smallbtn .ic{width:18px;height:18px}
.famfno{display:grid;gap:8px;margin-top:10px}
.famfno .in{text-align:left;padding:0 14px;font:var(--t-body-m)}
/* ---------- Cuestionario para pedir rutina o plan (pedir.js, v7.3): hoja de pasos con Material 3 Expressive ----------
   La hoja se arma una vez; adentro cambia el paso (entra desde el lado al que avanzas). Arriba: cerrar, título y
   «2 de 7»; la barra de avance con onda se estira con el resorte; abajo, «Atrás» y «Siguiente» siempre a la mano. */
html.pfopen{overflow:hidden}
#pfSheet .pfsheet{padding:0;overflow:hidden;gap:0}
.pfh{padding:10px 14px 0 12px;margin:0}
.pfh h2{font:var(--t-title-l);font-weight:800}
.pfh h2:focus{outline:none}
.pfn{flex:none;font:var(--t-label-l);color:var(--md-on-surface-variant);padding:6px 12px;border-radius:var(--r-full);background:var(--md-surface-container-highest)}
.pfbar{height:10px;margin:12px 18px 4px;border-radius:var(--r-full);background:var(--md-surface-container-highest);overflow:hidden}
.pfbar i{position:relative;display:block;height:100%;width:var(--w,0%);border-radius:var(--r-full);overflow:hidden;color:var(--md-primary);transition:width var(--m3-spatial-d) var(--m3-spatial)}
.pfbody{flex:1 1 auto!important;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 18px 18px}
.pfbody.pfgo{animation:axisX var(--m3-spatial-d) var(--m3-spatial) both}
.pfst{display:flex;align-items:center;gap:14px;margin:10px 0 6px}
.pfst h3{margin:0;font:var(--t-headline-s);font-size:22px}
.pfst .note{margin:2px 0 0}
.pfic{width:52px;height:52px;flex:none;display:grid;place-items:center;background:var(--md-primary-container);color:var(--md-on-primary-container);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.pfic .ic{width:26px;height:26px}
.pfbody .optlab.pfq{margin-top:18px;font:var(--t-title-s);color:var(--md-on-surface)}
.pfbody .pfhint{margin:-2px 0 8px;font:var(--t-body-s);color:var(--md-on-surface-variant)}
.pfq span{font:var(--t-label-m);color:var(--md-on-surface-variant)}
.pfopts{margin-top:8px}
.pfseg{margin-top:8px}
.pfseg button{min-width:0;padding:0 6px}
.pfgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 10px;margin-top:14px;align-items:start}
.pff{display:grid;gap:6px;margin-top:14px;min-width:0}
.pfgrid .pff{margin-top:0}
.pff.wide{grid-column:1/-1}
.pfl{font:var(--t-label-l);color:var(--md-on-surface-variant)}
.pfin{position:relative;display:flex;align-items:center}
.pfin .in{text-align:left;padding:0 14px;font:var(--t-body-l);font-weight:650;border-radius:var(--r-xs) var(--r-xs) 0 0;box-shadow:inset 0 -2px 0 var(--md-outline-variant)}
.pfin .in:focus{outline:none;box-shadow:inset 0 -3px 0 var(--md-primary)}
.pfin .in::placeholder{color:var(--md-on-surface-variant);font-weight:500;opacity:.8}
.pfin small{position:absolute;right:12px;font:var(--t-label-l);color:var(--md-on-surface-variant);pointer-events:none}
.pfin .in:has(+small){padding-right:46px}
.pff textarea.notein{margin-top:0;min-height:84px}
.pff.bad .pfin .in{box-shadow:inset 0 -3px 0 var(--md-error);background:color-mix(in srgb,var(--md-error) 8%,var(--md-surface-container-highest))}
.pff.bad .pfl{color:var(--md-error)}
.pferr{display:block;font:var(--t-label-m);font-style:normal;color:var(--md-error);margin-top:4px}
.pferr.big{margin:14px 0 0;padding:12px 14px;border-radius:var(--r-lg);background:var(--md-error-container);color:var(--md-on-error-container);font:var(--t-body-m)}
.pfhelp{margin:10px 2px 0}
.pfcards{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;margin-top:8px}
.pfcard{display:flex;align-items:center;gap:14px;width:100%;padding:14px;border:0;border-radius:var(--r-xs);background:var(--md-surface-container-high);color:var(--md-on-surface);text-align:left;cursor:pointer;
  transition:background-color var(--m3-effects-d) var(--m3-effects),border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.pfcard:first-child{border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg)}
.pfcard:last-child{border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}
.pfcard>span:nth-child(2){flex:1;min-width:0}
.pfcard b{display:block;font:var(--t-title-s)}
.pfcard small{display:block;font:var(--t-body-s);color:var(--md-on-surface-variant)}
.pfcic{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:var(--r-md);background:var(--md-surface-container-highest);color:var(--md-on-surface-variant);transition:border-radius var(--m3-spatial-d) var(--m3-spatial)}
.pfcic .ic{width:24px;height:24px}
.pfcard.on{background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-radius:var(--r-lg)}
.pfcard.on small{color:var(--md-on-secondary-container)}
.pfcard.on .pfcic{background:var(--md-secondary);color:var(--md-on-secondary);border-radius:var(--r-full)}
.pfck{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-full);background:var(--md-secondary);color:var(--md-on-secondary);animation:chkIn var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.pfck .ic{width:18px;height:18px}
.pfsum{margin-top:16px}
.pfdl{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;margin:0}
.pfdl>div{padding:12px 14px;border-radius:var(--r-xs);background:var(--md-surface-container-high)}
.pfdl>div:first-child{border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg)}
.pfdl>div:last-child{border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}
.pfdl dt{display:flex;align-items:center;justify-content:space-between;gap:8px;font:var(--t-label-l);color:var(--md-on-surface-variant)}
.pfdl dt .link{min-height:32px;margin:-6px -6px -6px 0;padding:0 8px}
.pfdl dd{margin:2px 0 0;font:var(--t-body-m);overflow-wrap:anywhere}
.pfnone{color:var(--md-on-surface-variant)}
.pfprice{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:12px 14px;border-radius:var(--r-lg);background:var(--md-success-container);color:var(--md-on-success-container)}
.pfprice p{margin:0;font:var(--t-body-m)}
.pfprice>.ic{width:22px;height:22px;flex:none;margin-top:1px}
.pfprice.paid{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.pfprice.short{background:var(--md-warning-container);color:var(--md-on-warning-container)}
.pffoot{flex:none!important;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--md-surface-container-low);box-shadow:0 -1px 0 var(--md-outline-variant)}
.pffoot .smallbtn{margin:0;min-height:48px}
.pffoot .cbtn{width:auto;flex:none;margin:0;min-height:52px;padding:0 22px;gap:8px}
.pffoot .cbtn .ic{width:20px;height:20px}
.pffoot .cbtn:disabled{background:var(--md-surface-container-highest);color:var(--md-on-surface-variant);opacity:.8}
/* tarjeta de solicitud y «¿Por qué este plan?»: en qué va tu solicitud */
.status.ok.rq-nueva{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.status.ok.rq-proceso{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.whyask{margin-top:16px;padding-top:14px;border-top:1px solid var(--md-outline-variant)}
.whyask .status{margin:0 0 8px}
.whyask .smallbtn{margin:0;display:inline-flex;align-items:center;gap:6px}
.whyask .smallbtn .ic{width:20px;height:20px}
.ulock{position:absolute;right:-4px;bottom:-2px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--md-surface-container-highest);color:var(--md-on-surface-variant);font-style:normal;filter:none}
.ulock .ic{width:15px;height:15px}
.skinfor{margin:0 0 10px}
.fskins{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:6px}
.fsk{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--md-surface-container-high);border-radius:var(--r-md);padding:6px 2px;text-align:center}
.fsk .kprev{width:44px;height:44px}
.fsk i{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:2px dashed var(--md-outline-variant);color:var(--md-on-surface-variant);font-style:normal;font-weight:800}
.fsk small{font:var(--t-label-s);font-size:10px;line-height:1.15;color:var(--md-on-surface-variant)}
@media (max-width:380px){.fskins{grid-template-columns:repeat(4,1fr)}}
/* récords de minijuegos */
.grow{align-items:flex-start}
.gic{position:relative;isolation:isolate;width:44px;height:44px;display:grid;place-items:center;flex:none;color:var(--md-on-tertiary-container)}
.gic::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--md-tertiary-container);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.gic .ic{width:24px;height:24px}
.gin{flex:1;min-width:0}
.gin>b{display:block;font:var(--t-title-m)}
.gin small{color:var(--md-on-surface-variant);font:var(--t-body-s)}
.gtop{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px;font:var(--t-body-s)}
.gtop .me{font-weight:800;color:var(--md-primary)}
.gamesc>.smallbtn{margin:0 0 8px}

/* --- Amigo: hoja con su racha, disfraces, récords y entrenos --- */
.fsheet h3{font:var(--t-title-l);margin:20px 0 8px}
.fhead{display:flex;gap:14px;align-items:center;padding-right:48px}
.fhead h2{margin:0;font:var(--t-headline-s)}
.fhead small{color:var(--md-on-surface-variant);font:var(--t-body-m)}
.recs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.recs div{background:var(--md-surface-container-high);border-radius:var(--r-lg);padding:12px 14px}
.recs b{display:block;font:var(--t-title-l)}
.recs small,.wrow small{color:var(--md-on-surface-variant);font:var(--t-body-s);display:flex;align-items:center;gap:4px}
.recs small .ic{width:16px;height:16px}
.wrow{display:block}
.wrow b{font:var(--t-title-s)}
.wrow .tops{color:var(--md-on-surface);opacity:.8}

/* --- Festejos a pantalla completa: sobre el material oscuro de la isla, con un sol que gira detrás --- */
.celebra{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,var(--md-island) 92%,transparent);color:var(--md-on-island);opacity:0;transition:opacity var(--m3-effects-d) var(--m3-effects);overflow:hidden}
.celebra.show{opacity:1}
.celebra::before{content:"";position:fixed;left:50%;top:34%;width:min(140vw,680px);aspect-ratio:1;margin-left:calc(min(140vw,680px) / -2);margin-top:calc(min(140vw,680px) / -2);background:var(--md-primary);opacity:.16;-webkit-mask:var(--shape-verysunny) center/contain no-repeat;mask:var(--shape-verysunny) center/contain no-repeat;animation:heroSpin 70s linear infinite;pointer-events:none}
.cbox{position:relative;text-align:center;color:var(--md-on-island);max-width:340px;transform:scale(.85);transition:transform var(--m3-spatial-d) var(--m3-spatial)}
.celebra.show .cbox{transform:none}
.cbox h2{font:var(--t-headline-m);margin:8px 0 6px}
.cbox p{color:color-mix(in srgb,var(--md-on-island) 84%,transparent);margin:0 0 22px;font:var(--t-body-l)}
.cbox .kick{font:var(--t-label-l);text-transform:uppercase;letter-spacing:.12em;color:var(--md-fire-bright);margin:0}
.bigflame .flame{width:130px;height:162px;filter:drop-shadow(0 10px 30px color-mix(in srgb,var(--md-fire) 55%,transparent))}
.cnum{font:var(--t-display-l);font-size:64px;line-height:1;color:var(--md-fire-bright);margin-top:-12px}
.badgebig{position:relative;isolation:isolate;display:grid;place-items:center;width:150px;height:150px;margin:0 auto 8px;font-size:80px;line-height:1;animation:m3Pop var(--m3-spatial-slow-d) var(--m3-spatial-slow) both}
.badgebig::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--md-tertiary-container);-webkit-mask:var(--shape-sunny) center/contain no-repeat;mask:var(--shape-sunny) center/contain no-repeat;animation:heroSpin 18s linear infinite}
.confetti{position:fixed;inset:0;width:100%;height:100%;z-index:201;pointer-events:none}
.celebra .cbtn{background-color:var(--md-primary-fixed-dim);color:var(--md-on-primary-fixed)}
.celebra .cbtn.sec{background-color:transparent;color:var(--md-on-island);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-on-island) 55%,transparent);margin:0 0 8px}
/* entreno terminado: racha tipo Duolingo, tu semana, tus números y tus amigos */
.celebra.wo{overflow-y:auto;place-items:start center;-webkit-overflow-scrolling:touch;background:color-mix(in srgb,var(--md-island) 97%,transparent)}
.celebra.wo .cbox{margin:auto;width:100%;max-width:360px;padding:6px 0 calc(10px + env(safe-area-inset-bottom,0px))}
.celebra.wo .cbtn{width:100%}
.woflame .flame{width:104px;height:130px}
.celebra.show .woflame,.celebra.show .wobadge{animation:woIn var(--m3-spatial-slow-d) var(--m3-spatial-slow) both}
@keyframes woIn{from{transform:scale(.4) translateY(30px);opacity:0}}
.wonum{font:var(--t-display-l);font-size:60px;line-height:1;color:var(--md-fire-bright);margin-top:-10px;height:64px;overflow:hidden}
.wonum .slot{display:inline-grid}
.wonum .slot b{grid-area:1/1}
.celebra.show .wonum .slot .o{animation:slotOut .45s .55s var(--m3-effects) forwards}
.celebra.show .wonum .slot .n{animation:slotIn var(--m3-spatial-d) .7s var(--m3-spatial) both}
@keyframes slotOut{to{transform:translateY(-70px);opacity:0}}
@keyframes slotIn{from{transform:translateY(70px);opacity:0}}
.wowk{display:flex;justify-content:center;gap:6px;margin:12px 0 4px}
.woc{width:38px;display:grid;justify-items:center;gap:4px;font:var(--t-label-m);color:color-mix(in srgb,var(--md-on-island) 75%,transparent)}
.woc i{position:relative;isolation:isolate;width:34px;height:34px;display:grid;place-items:center;font-style:normal}
.woc i::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:color-mix(in srgb,var(--md-on-island) 12%,transparent)}
.woc i .ic{width:18px;height:18px}
.woc.s-done i{color:var(--md-on-fire-bright)}
.woc.s-done i::before{border-radius:0;background:var(--md-fire-bright);-webkit-mask:var(--shape-sunny) center/contain no-repeat;mask:var(--shape-sunny) center/contain no-repeat}
.woc.s-frozen i{color:var(--md-on-ice-bright)}
.woc.s-frozen i::before{border-radius:0;background:var(--md-ice-bright);-webkit-mask:var(--shape-gem) center/contain no-repeat;mask:var(--shape-gem) center/contain no-repeat}
.woc.s-recovered i{color:var(--md-on-fire-bright)}
.woc.s-recovered i::before{border-radius:0;background:color-mix(in srgb,var(--md-fire-bright) 70%,var(--md-island));-webkit-mask:var(--shape-cookie4) center/contain no-repeat;mask:var(--shape-cookie4) center/contain no-repeat}
.woc.s-owed i{color:var(--md-fire-bright)}
.woc.s-owed i::before{background:transparent;border:2px dashed var(--md-fire-bright)}
.woc.s-missed i{color:color-mix(in srgb,var(--md-on-island) 55%,transparent)}
.woc.today span{color:var(--md-fire-bright)}
.woc.today i{border-radius:50%;box-shadow:0 0 0 2px var(--md-island),0 0 0 4px var(--md-fire-bright)}
.celebra.show .woc.today i{animation:todayPop var(--m3-spatial-d) 1.05s var(--m3-spatial) both}
@keyframes todayPop{from{transform:scale(.3)}}
.cbox p.wohint{margin:8px 0 12px;font:var(--t-body-m)}
.wostats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 14px}
.wostats div{background:color-mix(in srgb,var(--md-on-island) 10%,transparent);border-radius:var(--r-lg);padding:10px 4px}
.wostats b{display:block;font:var(--t-title-l);font-size:22px;color:var(--md-on-island)}
.wostats small{font:var(--t-body-s);color:color-mix(in srgb,var(--md-on-island) 75%,transparent)}
.wofr{text-align:left;margin:0 0 10px}
.wofr .kick{text-align:center;margin-bottom:8px}
.worow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-xs);background:color-mix(in srgb,var(--md-on-island) 9%,transparent);margin-bottom:3px}
.wofr .kick+.worow{border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg)}
.worow:not(:has(+.worow)){border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}
.celebra.show .worow{animation:m3In var(--m3-spatial-d) var(--m3-spatial) both;animation-delay:calc(1.1s + var(--i,0) * 90ms)}
.woi{flex:1;min-width:0}
.woi b{display:block;color:var(--md-on-island);font:var(--t-title-s);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.woi small{display:flex;align-items:center;gap:3px;color:color-mix(in srgb,var(--md-on-island) 80%,transparent);font:var(--t-body-s)}
.woi small .ic{width:15px;height:15px;color:var(--md-fire-bright)}
.wost{display:inline-flex;align-items:center;gap:4px;flex:none;font:var(--t-label-m);color:color-mix(in srgb,var(--md-on-island) 72%,transparent)}
.wost .ic{width:16px;height:16px}
.wost.ok{color:var(--md-success-container)}
.celebra .wocheer{min-height:36px;padding:0 12px;font:var(--t-label-m)}
.cbox p.wonote{display:flex;align-items:center;justify-content:center;gap:4px;font:var(--t-body-s);font-size:13.5px;color:color-mix(in srgb,var(--md-on-island) 78%,transparent);margin:6px 0 8px}
.wobadge{position:relative;isolation:isolate;display:grid;place-items:center;width:128px;height:128px;margin:8px auto 6px;font-size:64px;line-height:1}
.wobadge::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--md-tertiary-container);-webkit-mask:var(--shape-sunny) center/contain no-repeat;mask:var(--shape-sunny) center/contain no-repeat;animation:heroSpin 18s linear infinite}

/* ===================== 7 · Historial, Guía y Mi cuenta ===================== */
/* --- Historial --- */
.status{display:inline-flex;align-items:center;gap:6px;max-width:100%;margin:10px 0 0;padding:7px 14px 7px 10px;border-radius:var(--r-full);font:var(--t-label-m);background:var(--md-surface-container-highest);color:var(--md-on-surface)}
.status .ic{width:18px;height:18px;flex:none}
.status.ok{background:var(--md-success-container);color:var(--md-on-success-container)}
.status.bad{background:var(--md-warning-container);color:var(--md-on-warning-container)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 14px}
.stats div{background:var(--md-surface-container-low);border-radius:var(--r-xl);padding:14px 8px 12px;text-align:center;font:var(--t-body-s);color:var(--md-on-surface-variant);line-height:1.25}
.stats div:first-child{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.stats b{display:block;font:var(--t-display-s);font-size:30px;color:var(--md-on-surface);margin-bottom:2px}
.stats div:first-child b{color:var(--md-on-primary-container)}
/* entrenos por semana: barras redondas que suben con resorte; la de esta semana en el color complementario */
.weeks{display:flex;gap:8px;align-items:flex-end;height:104px;margin-top:12px}
.weeks div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font:var(--t-label-s);font-weight:600;color:var(--md-on-surface-variant);gap:4px}
.weeks i{display:block;width:100%;max-width:36px;border-radius:var(--r-full);background:var(--md-primary);min-height:8px;transform-origin:bottom;animation:rise var(--m3-spatial-slow-d) var(--m3-spatial-slow) both}
.weeks div:nth-child(2) i{animation-delay:.04s}.weeks div:nth-child(3) i{animation-delay:.08s}.weeks div:nth-child(4) i{animation-delay:.12s}.weeks div:nth-child(5) i{animation-delay:.16s}.weeks div:nth-child(6) i{animation-delay:.2s}
.weeks div.now i{background:var(--md-tertiary)}
.weeks div.now span{color:var(--md-tertiary);font-weight:800}
.weeks b{font:var(--t-title-s);color:var(--md-on-surface)}
/* entrenamientos guardados: lista que se despliega */
details.sess{margin:0 0 3px;padding:0 14px;border:0;border-radius:var(--r-xs);background:var(--md-surface-container-high);transition:border-radius var(--m3-spatial-d) var(--m3-spatial),background-color var(--m3-effects-d) var(--m3-effects),margin var(--m3-spatial-d) var(--m3-spatial)}
.card>.note+details.sess{border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg)}
details.sess:last-child{border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}
details.sess[open]{border-radius:var(--r-lg);margin:8px 0;background:var(--md-surface-container-highest)}
.sess summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;min-height:56px}
.sess summary b{font:var(--t-title-m);display:block}
.sess summary small{color:var(--md-on-surface-variant);font:var(--t-body-s)}
.sess summary span.ch{display:none}
.sess ul{margin:0 0 8px;padding-left:20px;font:var(--t-body-m)}
.sess li{margin:5px 0}
.sess .del{margin:4px 0 14px;background-color:var(--md-error-container);color:var(--md-on-error-container)}
/* Editar un entrenamiento guardado (7.4): botones conectados y filas con campos rellenos */
.sessbtns{display:flex;gap:4px;margin:4px 0 14px}
.sessbtns .smallbtn{margin:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1 1 auto;padding:0 14px}
.sessbtns .smallbtn.del.armed{background:var(--md-error);color:var(--md-on-error)}
.sessbtns .smallbtn .ic{width:18px;height:18px}
.sessbtns .smallbtn:first-child:not(:only-child){border-top-right-radius:var(--r-xs);border-bottom-right-radius:var(--r-xs)}
.sessbtns .smallbtn:last-child:not(:only-child){border-top-left-radius:var(--r-xs);border-bottom-left-radius:var(--r-xs)}
.sessbtns .smallbtn:not(.del):not(.pri){background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.hedit{margin:0 0 6px}
.hedit>.note{margin:0 0 8px}
.hedit>.note .ic{width:16px;height:16px;vertical-align:-3px}
.hex{margin:0 0 10px}
.hex>b{display:block;font:var(--t-title-s);margin:0 0 6px}
.herow{display:grid;grid-template-columns:28px 1fr 1fr 44px;gap:6px;align-items:center;margin:0 0 4px;transition:opacity var(--m3-effects-d) var(--m3-effects)}
.herow:has(> label:only-of-type){grid-template-columns:28px 1fr 44px}
.herow .hen{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-full);background:var(--md-surface-container-low);font:var(--t-label-l);color:var(--md-on-surface-variant)}
.herow label{position:relative;display:block}
.herow .in{height:44px;background:var(--md-surface-container-lowest);padding-right:34px}
.herow label span{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:var(--t-label-m);color:var(--md-on-surface-variant);pointer-events:none}
.hex-x{width:44px;height:44px;border:0;border-radius:var(--r-full);display:grid;place-items:center;background:var(--md-surface-container-low);color:var(--md-on-surface-variant);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-fast-d) var(--m3-effects-fast)}
.hex-x .ic{width:20px;height:20px}
.hex-x:active{border-radius:var(--r-md)}
.herow.gone .hen,.herow.gone label{opacity:.4}
.herow.gone .in{text-decoration:line-through;pointer-events:none}
.herow.gone .hex-x{background:var(--md-error-container);color:var(--md-on-error-container)}
/* progreso por ejercicio */
.prog,.mrow,.learn .flags li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;margin:0 0 3px;border-radius:var(--r-xs);background:var(--md-surface-container-high)}
.card>h3+.prog,.card>h3+.empty+.prog,.mrow:first-child,.learn .flags li:first-child{border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg)}
.prog:last-child,.mrow:last-child,.learn .flags li:last-child{border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}
.prog b{font:var(--t-title-s);display:block;line-height:1.25}
.prog small{color:var(--md-on-surface-variant);font:var(--t-body-s)}
.prog svg{flex:none;width:92px;height:30px}
/* medidas */
.mform{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.mform label{font:var(--t-label-m);color:var(--md-on-surface-variant);display:block}
.mform .in{height:48px;margin-top:4px}
.mrow{font:var(--t-body-m)}
.mrow small{color:var(--md-on-surface-variant);font:var(--t-body-s)}
.mrow button .ic{width:22px;height:22px}
/* lo que Forgia aprende de ti */
.learn .flags{list-style:none;margin:10px 0 0;padding:0}
.learn .flags li{justify-content:flex-start;align-items:flex-start;gap:12px;font:var(--t-body-m)}
.learn .flags li::before{content:"";flex:none;width:22px;height:22px;margin-top:-1px;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat;background:var(--md-success)}
.learn .flags li.ftip::before{-webkit-mask-image:var(--i-arrow-forward);mask-image:var(--i-arrow-forward);background:var(--md-warning)}

/* --- Guía: secciones que se despliegan, con su número en una galleta --- */
.subbar{display:flex;align-items:center;gap:4px;margin:2px 0 6px}
.subbar h2{font:var(--t-headline-s);margin:0}
.subbar .nback{margin-left:-8px;color:var(--md-on-surface)}
.g{background:transparent;border-radius:0;margin:8px 0 12px;padding:0}
.g details{margin:0 0 3px;padding:0 16px;border:0;border-radius:var(--r-xs);background:var(--md-surface-container-low);transition:border-radius var(--m3-spatial-d) var(--m3-spatial),margin var(--m3-spatial-d) var(--m3-spatial),background-color var(--m3-effects-d) var(--m3-effects)}
.g details:first-child{border-top-left-radius:var(--r-xl);border-top-right-radius:var(--r-xl)}
.g details:last-child{border-bottom-left-radius:var(--r-xl);border-bottom-right-radius:var(--r-xl)}
.g details[open]{border-radius:var(--r-xl);margin:10px 0;background:var(--md-surface-container)}
.g summary{font:var(--t-title-m);font-size:16.5px;display:flex;gap:14px;align-items:center;padding:12px 0;min-height:60px}
.g summary .n{position:relative;isolation:isolate;flex:none;width:36px;height:36px;display:grid;place-items:center;font:var(--t-label-l);color:var(--md-on-tertiary-container)}
.g summary .n::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--md-tertiary-container);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat;transition:transform var(--m3-spatial-slow-d) var(--m3-spatial-slow)}
.g details[open] summary .n{color:var(--md-on-primary)}
.g details[open] summary .n::before{background:var(--md-primary);-webkit-mask-image:var(--shape-sunny);mask-image:var(--shape-sunny);transform:rotate(45deg)}
.g .in2{padding:0 0 14px 50px;font:var(--t-body-m)}
.g .in2 p{margin:0 0 10px}
.g .in2 ul,.g .in2 ol{margin:0 0 10px;padding-left:18px}
.g .in2 li{margin:6px 0}
.g dl{margin:0}
.g dt{font:var(--t-title-s);margin-top:12px}
.g dd{margin:2px 0 0;color:var(--md-on-surface-variant);font:var(--t-body-m)}
.refs li{margin:8px 0}
@media (max-width:380px){.g .in2{padding-left:0}}

/* --- Mi cuenta --- */
.sect{font:var(--t-title-s);color:var(--md-primary);margin:26px 6px 6px;letter-spacing:.01em}
.prof{display:flex;gap:14px;align-items:center}
.prof.big{gap:18px;align-items:center;margin:12px 0 2px}
.avatar{width:56px;height:56px;border-radius:50%;background:var(--md-primary-container);color:var(--md-on-primary-container);display:grid;place-items:center;font:800 24px/1 var(--font-brand);flex:none}
img.avatar{object-fit:cover;display:block}
.pav{position:relative;flex:none}
.prof.big .kav.xl{width:128px;height:128px;margin:-8px -6px -6px -8px}
/* botón de cámara: botón flotante pequeño (cuadro redondeado) sobre la foto */
.pcam{position:absolute;right:-4px;bottom:0;width:42px;height:42px;border-radius:var(--r-md);background:var(--md-primary-container);color:var(--md-on-primary-container);display:grid;place-items:center;cursor:pointer;box-shadow:var(--e3);
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),transform var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.pcam:active{border-radius:var(--r-lg);transform:scale(.92)}
.pcam .ic{width:22px;height:22px}
.pinfo{min-width:0;display:flex;flex-direction:column;gap:4px}
.pinfo b{font:var(--t-title-l);line-height:1.2}
.pinfo small{color:var(--md-on-surface-variant);font:var(--t-body-m);word-break:normal;overflow-wrap:anywhere}
.pok{display:inline-flex;align-items:center;gap:4px;color:var(--md-success);font:var(--t-label-m)}
.pok .ic{width:16px;height:16px}
.plinks{display:flex;flex-wrap:wrap;gap:0 4px;margin-left:-12px}
.plinks .link{display:inline-flex;align-items:center;gap:6px;padding:8px 12px}
.plinks .link .ic{width:18px;height:18px}
.wipe .link,.pinfo .link{font:var(--t-label-l);text-decoration:none}
.photobtns{display:flex;gap:8px;flex-wrap:wrap}
.photobtns label.smallbtn{display:inline-flex;align-items:center;cursor:pointer}
/* tarjetas plegables con su estado a la vista (respaldo, avisos) */
.card.acc{padding:0;overflow:hidden}
.card.acc details{border:0;margin:0;padding:0}
.card.acc summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;min-height:64px;font:var(--t-title-l);font-size:18px}
.card.acc summary>span:first-child{flex:1}
.card.acc summary::after{margin-left:0}
.accst{display:inline-flex;align-items:center;gap:4px;font:var(--t-label-m);border-radius:var(--r-sm);padding:6px 10px;background:var(--md-surface-container-highest);color:var(--md-on-surface-variant);white-space:nowrap}
.accst .ic{width:16px;height:16px}
.accst.ok{background:var(--md-success-container);color:var(--md-on-success-container)}
.accst.bad{background:var(--md-error-container);color:var(--md-on-error-container)}
/* Familia (solo el administrador): lista en segmentos con chip de filtro «VIP» */
.card .famlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:3px}
.card .famrow{display:flex;align-items:center;gap:12px;margin:0;padding:10px 10px 10px 12px;border-radius:var(--r-xs);background:var(--md-surface-container-high)}
.card .famrow:first-child{border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg)}
.card .famrow:last-child{border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}
.famav{width:40px;height:40px;flex:none;display:grid;place-items:center;font:var(--t-title-m);background:var(--md-primary-container);color:var(--md-on-primary-container);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.famtx{flex:1;min-width:0}
.famtx b{display:block;font:var(--t-title-s)}
.famtx small{display:block;font:var(--t-body-s);color:var(--md-on-surface-variant);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.famrow .smallbtn{margin:0;flex:none}
.vipbtn{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:0;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--md-outline);background-color:transparent;color:var(--md-on-surface-variant);font:var(--t-label-l);cursor:pointer;
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects),color var(--m3-effects-d) var(--m3-effects),box-shadow var(--m3-effects-d) var(--m3-effects)}
.vipbtn .ic{width:18px;height:18px}
.vipbtn.on{box-shadow:none;background-color:var(--sw-lila);color:var(--sw-lila-on)}
.vipbtn:active{border-radius:var(--r-md)}
.famwait{display:grid;place-items:center;padding:12px}
.fam .link{display:inline-flex;align-items:center;gap:6px;margin-top:6px}
.fam .link .ic{width:18px;height:18px}
.accb{padding:0 18px 18px}
.accb .smallbtn{margin-right:4px}
.pmeta{margin-top:16px;padding-top:14px;border-top:1px solid var(--md-outline-variant)}
.pmh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.pmh h3{margin:0;font:var(--t-title-l);font-size:18px}
.pmh .smallbtn{margin:0}
/* Apariencia: muestras como las del fondo de pantalla de Android (principal arriba, contenedor y complemento abajo).
   La elegida pasa de círculo a cuadro redondeado y lleva palomita. */
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 12px;margin:10px 0 16px}
.sw{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;padding:0;background:none;color:var(--md-on-surface-variant);font:var(--t-label-s);font-weight:600;background-image:none}
.sw i{position:relative;display:grid;place-items:center;width:100%;max-width:64px;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:linear-gradient(to bottom,var(--sw) 50%,transparent 50%),conic-gradient(from 90deg,var(--swt) 0 25%,var(--swc) 25% 50%,var(--sw) 50%);
  box-shadow:inset 0 0 0 1px rgb(0 0 0/.06);transition:border-radius var(--m3-spatial-d) var(--m3-spatial),transform var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.sw:active i{transform:scale(.92)}
.sw.on i{border-radius:var(--r-lg)}
.sw.on i::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:30px;height:30px;border-radius:50%;background:var(--md-surface-container-lowest);box-shadow:0 1px 3px rgb(0 0 0/.25);animation:chkIn var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.sw.on i::before{content:"";position:absolute;z-index:1;left:50%;top:50%;translate:-50% -50%;width:20px;height:20px;background:var(--md-on-surface);-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat;animation:chkIn var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.sw.on{color:var(--md-on-surface);font-weight:800}
.sw .swvip{position:absolute;top:-6px;left:50%;translate:-50% 0;display:inline-flex;align-items:center;gap:2px;padding:2px 7px;border-radius:var(--r-full);background:var(--sw-lila);color:var(--sw-lila-on);font:var(--t-label-s);font-size:10px;line-height:14px;box-shadow:var(--e1);z-index:2}
.sw .swvip .ic{width:10px;height:10px}
.sw.on i,.sw:focus-visible i{outline:3px solid var(--md-primary);outline-offset:3px}
.themeseg button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.themeseg button .ic{width:20px;height:20px}
/* Borrar todo (botón con borde de error) y versión */
.reset{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0;width:100%;min-height:52px;border:0;border-radius:var(--r-full);box-shadow:inset 0 0 0 1px var(--md-error);color:var(--md-error);background-color:transparent;padding:0 16px;font:var(--t-label-l);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.reset:active{border-radius:var(--r-md)}
.reset .ic{width:20px;height:20px}
.appver h3{display:flex;align-items:center;gap:8px}
.guidecard{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;padding:16px 18px;margin:14px 0;border-radius:var(--r-xl);background-color:var(--md-tertiary-container);color:var(--md-on-tertiary-container);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.guidecard:active{border-radius:var(--r-lg)}
.guidecard .gdi{position:relative;isolation:isolate;flex:none;width:52px;height:52px;display:grid;place-items:center;color:var(--md-on-tertiary)}
.guidecard .gdi::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--md-tertiary);-webkit-mask:var(--shape-flower) center/contain no-repeat;mask:var(--shape-flower) center/contain no-repeat;animation:heroSpin 30s linear infinite}
.guidecard .gdi .ic{width:26px;height:26px}
.guidecard b{display:block;font:var(--t-title-l);font-size:18px}
.guidecard small{display:block;font:var(--t-body-m);opacity:.9;margin-top:2px}
.guidecard>.ic{width:24px;height:24px;margin-left:auto;flex:none}
.soon{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.soon div{background:var(--md-surface-container-high);border-radius:var(--r-md);padding:10px 6px;text-align:center;font:var(--t-body-s);color:var(--md-on-surface-variant)}

/* --- Pantalla de entrada (sin cuenta): formas que giran detrás del logo --- */
html.locked .wrap,html.locked .nav,html.locked .pill,html.locked .island{visibility:hidden}
.gate{position:fixed;inset:0;z-index:100;background:var(--md-surface);display:flex;align-items:center;justify-content:center;padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px));overflow:hidden;isolation:isolate}
.gate::before,.gate::after{content:"";position:absolute;z-index:-1;pointer-events:none;animation:heroSpin 80s linear infinite}
.gate::before{width:420px;height:420px;right:-170px;top:-150px;background:var(--md-primary-container);-webkit-mask:var(--shape-flower) center/contain no-repeat;mask:var(--shape-flower) center/contain no-repeat}
.gate::after{width:300px;height:300px;left:-120px;bottom:-110px;background:var(--md-tertiary-container);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat;animation-direction:reverse}
.gate .box{width:100%;max-width:380px;text-align:center;animation:m3In var(--m3-spatial-slow-d) var(--m3-spatial-slow) both}
.gate .logo{width:96px;height:96px;border-radius:var(--r-xl);margin:0 auto 16px;display:block;box-shadow:var(--e2)}
.gate h1{font:var(--t-display-m);margin:0;color:var(--md-on-surface)}
.gate p{color:var(--md-on-surface-variant);margin:10px 0 0;font:var(--t-body-l)}
.gate .gbtn{margin-top:26px;width:100%;min-height:56px;background-color:var(--md-surface-container-lowest);color:var(--md-on-surface);box-shadow:inset 0 0 0 1px var(--md-outline),var(--e1);font:var(--t-title-m)}
.gate .gbtn svg{width:22px;height:22px}
.gate .link{margin-top:14px}
.gate .fine{font:var(--t-body-s);margin-top:18px}
.gate .m3load{margin:18px auto 0}

/* --- Borrar todo: 1) casilla 2) escribir BORRAR 3) deslizar --- */
.wipe{padding:2px 0 6px}
.wipeic{position:relative;isolation:isolate;width:68px;height:68px;margin:6px auto 10px;display:grid;place-items:center;color:var(--md-on-error-container)}
.wipeic::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--md-error-container);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.wipeic .ic{width:32px;height:32px}
.wlead{text-align:center;margin:0 0 8px;font:var(--t-title-m)}
.wlist{margin:0 0 10px;padding:12px 16px 12px 34px;background:var(--md-surface-container-high);border-radius:var(--r-lg);font:var(--t-body-m)}
.wlist li{margin:3px 0}
.wstep{display:flex;align-items:center;gap:10px;margin:16px 0 8px;font:var(--t-title-s)}
.wstep span{width:26px;height:26px;border-radius:50%;background:var(--md-error);color:var(--md-on-error);display:grid;place-items:center;font:var(--t-label-m);flex:none}
.wchk{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r-lg);background:var(--md-surface-container-high);cursor:pointer;font:var(--t-body-m);transition:background-color var(--m3-effects-d) var(--m3-effects),border-radius var(--m3-spatial-d) var(--m3-spatial)}
.wchk input{width:22px;height:22px;margin:0;accent-color:var(--md-error);flex:none}
.wchk:has(input:checked){background:var(--md-error-container);color:var(--md-on-error-container);border-radius:var(--r-xl)}
.wtxt{width:100%;text-align:center;letter-spacing:.18em;font-weight:800;text-transform:uppercase}
.slide{position:relative;height:64px;border-radius:var(--r-full);background:var(--md-error-container);overflow:hidden;user-select:none;-webkit-user-select:none;margin-top:4px;--x:0px;--p:0}
.slide.off{background:var(--md-surface-container-highest)}
.slfill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--x) + 60px);background:var(--md-error);border-radius:var(--r-full);opacity:calc(.25 + var(--p)*.75)}
.slide.off .slfill{opacity:0}
.sltxt{position:absolute;inset:0;display:grid;place-items:center;padding-left:56px;font:var(--t-label-l);color:var(--md-on-error-container);opacity:calc(1 - var(--p)*1.4);pointer-events:none}
.slide.off .sltxt{color:var(--md-on-surface-variant)}
.slknob{position:absolute;left:6px;top:6px;width:52px;height:52px;border-radius:var(--r-full);border:0;background-color:var(--md-error);color:var(--md-on-error);display:grid;place-items:center;transform:translateX(var(--x));box-shadow:var(--e2);touch-action:none;cursor:grab;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.slknob .ic{width:26px;height:26px}
.slknob:disabled{background-color:var(--md-on-surface);color:var(--md-surface);opacity:.24;box-shadow:none;cursor:not-allowed}
.slide:not(.drag) .slknob,.slide:not(.drag) .slfill{transition:transform var(--m3-spatial-d) var(--m3-spatial),width var(--m3-spatial-d) var(--m3-spatial),border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.slide.drag .slknob{cursor:grabbing;border-radius:var(--r-md);scale:1.06}
.slide.done .slknob{animation:ckPop var(--m3-spatial-d) var(--m3-spatial)}
button.slknob:active:not(:disabled){transform:translateX(var(--x))}
.wipeno{width:100%;margin-top:14px}

/* ===================== 8 · Figura, biblioteca, rutinas propias, juegos y regalo ===================== */
/* --- Figura de los músculos (body.js): principal del color de la app, secundario a la mitad --- */
.bfig .bo{fill:var(--bout)}
.bfig .bm{fill:var(--bbase);transition:fill var(--m3-effects-d) var(--m3-effects)}
.bfig .bm.bd{fill:var(--bdec)}
.bfig .bm.l1{fill:var(--bl1)}
.bfig .bm.l2{fill:var(--bl2)}
.bfig [data-bm]{cursor:pointer}
@media (hover:hover){.bfig [data-bm]:hover{fill:var(--bl1)}}
.bpair{display:flex;justify-content:center;gap:4px}
.bpair svg{height:100%;width:auto}
.bpair.big{height:min(46vh,300px)}
.bmini{display:inline-flex;gap:2px;flex:none;height:78px}
.bmini svg{height:100%;width:auto;display:block}
.bmini.big{height:150px}
.bmini.day{height:74px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:0}
.dot.l2{background:var(--bl2)}.dot.l1{background:var(--bl1)}

/* --- Rutinas propias: selector, buscador y editor --- */
.rtbar{margin:10px 0 0}
.rtpick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:0;padding:2px 0}
.rtpick::-webkit-scrollbar{display:none}
.rtpick button{flex:0 0 auto;max-width:62vw;overflow:hidden;text-overflow:ellipsis}
.rtpick button[aria-disabled="true"]{opacity:.45}
.rtpick .rtnew{color:var(--md-primary);box-shadow:inset 0 0 0 1px var(--md-primary)}
.rtpick .rtnew .ic{width:18px;height:18px}
.rttools{display:flex;gap:8px;margin-top:10px}
/* «Buscar ejercicios»: barra de búsqueda de Material (píldora con ícono) */
.libbtn{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:56px;border-radius:var(--r-full);border:0;background-color:var(--md-surface-container-high);color:var(--md-on-surface-variant);padding:0 10px 0 18px;text-align:left;font:var(--t-body-l);
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects)}
.libbtn:active{border-radius:var(--r-lg)}
.libbtn .ic{width:24px;height:24px;color:var(--md-on-surface)}
.libbtn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.libbtn small{margin-left:auto;background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-radius:var(--r-full);padding:4px 10px;font:var(--t-label-m)}
.rtedit{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:56px;border-radius:var(--r-full);border:0;background-color:var(--md-secondary-container);color:var(--md-on-secondary-container);font:var(--t-label-l);padding:0 18px;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.rtedit:active{border-radius:var(--r-lg)}
.rtedit .ic{width:20px;height:20px}
.rtcreate{position:relative;overflow:hidden;isolation:isolate;text-align:center;background:var(--md-primary-container);color:var(--md-on-primary-container)}
.rtcreate::before{content:"";position:absolute;z-index:-1;width:220px;height:220px;right:-80px;top:-90px;background:var(--md-on-primary-container);opacity:.08;-webkit-mask:var(--shape-flower) center/contain no-repeat;mask:var(--shape-flower) center/contain no-repeat;animation:heroSpin 60s linear infinite}
.rtcreate h3{font:var(--t-headline-s);margin:6px 0 6px}
.rtcreate .note{color:inherit;opacity:.88}
.rtci{position:relative;isolation:isolate;width:64px;height:64px;margin:4px auto 0;display:grid;place-items:center;color:var(--md-on-primary)}
.rtci::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--md-primary);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat;animation:heroSpin 24s linear infinite}
.rtci .ic{width:30px;height:30px}
.rtcreate .ccb{justify-content:center}
.rtcreate .smallbtn:not(.pri){background-color:var(--md-surface-container-lowest)}
html.rtopen .toast,html.libopen .toast{z-index:97}
/* plantillas */
.tplg{display:grid;gap:8px;padding-bottom:8px}
.tplc{display:grid;gap:2px;text-align:left;border:0;border-radius:var(--r-lg);padding:16px;background-color:var(--md-surface-container-high);color:var(--md-on-surface);animation:m3In var(--m3-spatial-d) var(--m3-spatial) both;animation-delay:calc(var(--i)*45ms);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.tplc:active{border-radius:var(--r-xl)}
.tplc b{font:var(--t-title-m);font-size:17px}
.tplc small{color:var(--md-on-surface-variant);font:var(--t-body-s)}
.tpld{display:flex;gap:4px;margin-top:10px}
.tpld i{width:28px;height:28px;border-radius:var(--r-full);display:grid;place-items:center;font-style:normal;font:var(--t-label-s);background:var(--md-surface-container-highest);color:var(--md-on-surface-variant)}
.tpld i.on{background:var(--md-primary);color:var(--md-on-primary);border-radius:var(--r-sm)}
/* editor */
.rth{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.rth .xbtn{position:static;flex:none}
.rth h2{flex:1;margin:0;font:var(--t-headline-s);font-size:22px}
.rtname{flex:1;text-align:left;padding:0 14px;font:var(--t-title-l)}
.rth .smallbtn{margin:0;min-height:48px}
.rtdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.rtday,.ldays button{border:0;background-color:var(--md-surface-container-high);color:var(--md-on-surface);border-radius:var(--r-full);padding:8px 0 6px;font:var(--t-label-l);display:grid;gap:1px;min-width:0;
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects),color var(--m3-effects-d) var(--m3-effects)}
.rtday small,.ldays button small{font:var(--t-label-s);color:var(--md-on-surface-variant)}
.rtday.has,.ldays button.has{background-color:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.rtday.has small,.ldays button.has small{color:var(--md-on-secondary-container)}
.rtday.on,.ldays button.on{background-color:var(--md-primary);color:var(--md-on-primary);border-radius:var(--r-md)}
.rtday.on small,.ldays button.on small{color:inherit}
.rtdh{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px;align-items:end}
.rtdh>.in{text-align:left;padding:0 14px;font:var(--t-body-l);font-weight:650}
.rtlim{display:grid;gap:4px;font:var(--t-label-m);color:var(--md-on-surface-variant)}
.rtlim .in{width:auto;font-size:15px;padding:0 6px}
.rtest{display:flex;align-items:center;gap:6px;margin:12px 2px 4px;font:var(--t-label-l);color:var(--md-success)}
.rtest .ic{width:18px;height:18px}
.rtest.over{color:var(--md-warning)}
.rtempty{margin:14px 2px}
.rtlist{display:grid;gap:8px;margin-top:8px}
.rtex{position:relative;border:0;border-radius:var(--r-lg);padding:12px;background:var(--md-surface-container-high)}
.rtex.ss{border-bottom-left-radius:var(--r-xs);border-bottom-right-radius:var(--r-xs);box-shadow:inset 0 0 0 2px var(--md-primary-container)}
.rtex.ss2{border-top-left-radius:var(--r-xs);border-top-right-radius:var(--r-xs);margin-top:-6px;box-shadow:inset 0 0 0 2px var(--md-primary-container)}
.rtex.ss::after{content:"Superserie";position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);z-index:1;background:var(--md-primary);color:var(--md-on-primary);font:var(--t-label-s);border-radius:var(--r-full);padding:3px 10px}
.rtex.fresh{animation:nextUp 1.4s var(--m3-effects)}
.rtexh{display:flex;gap:12px;align-items:center}
.rtexh img,.rtnoimg{width:56px;height:56px;border-radius:var(--r-md);object-fit:cover;flex:none;background:var(--md-surface-container-highest)}
.rtnoimg{display:grid;place-items:center;background:var(--md-primary-container);color:var(--md-on-primary-container);font:800 20px/1 var(--font-brand)}
.rtn{flex:1;min-width:0;line-height:1.25}
.rtn b{display:block;font:var(--t-title-s);font-size:15px}
.rtn small{display:block;color:var(--md-on-surface-variant);font:var(--t-body-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rtmv{display:flex;gap:2px;flex:none}
.rtmv button{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:var(--r-full);border:0;background-color:var(--md-surface-container-highest);color:var(--md-on-surface);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.rtmv button:active:not(:disabled){border-radius:var(--r-sm)}
.rtmv button .ic{width:20px;height:20px}
.rtmv button:disabled{opacity:.3}
.rtpr{display:grid;grid-template-columns:auto 1fr 1fr;gap:8px;margin-top:12px}
.rtpr label{display:grid;gap:4px;font:var(--t-label-m);color:var(--md-on-surface-variant);min-width:0}
.rtpr .in{height:44px;font-size:15px;padding:0 4px}
.rtstep{display:flex;align-items:center;justify-content:space-between;gap:2px;height:44px;border-radius:var(--r-full);background:var(--md-surface-container-highest);padding:0 3px}
.rtstep button{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:var(--r-full);background-color:transparent;color:var(--md-primary)}
.rtstep button .ic{width:20px;height:20px}
.rtstep b{min-width:18px;text-align:center;color:var(--md-on-surface);font:var(--t-title-m)}
.rtopts{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px}
.rtopts label{display:flex;align-items:center;gap:8px;font:var(--t-body-m);font-weight:600}
.rtopts input{width:20px;height:20px;accent-color:var(--md-primary)}
.rtadd{margin:14px 0 4px}
.rtrest,.rtdelr{display:block;margin:8px auto 0;color:var(--md-on-surface-variant)}
.rtdelr{color:var(--md-error)}
.rtfoot{padding-bottom:6px}

/* --- Biblioteca de ejercicios --- */
.sheetbg.libbg{z-index:94}
.nsheet.libsheet{z-index:95}
.libsheet .nsh-h .libdone{margin:0 52px 0 0;min-height:40px}
.libbody.on{background-color:var(--md-primary);color:var(--md-on-primary)}
.libbody .ic{width:24px;height:24px}
.libfig{background:var(--md-surface-container);border-radius:var(--r-xl);padding:14px 8px 10px;margin:0 0 10px;animation:m3In var(--m3-spatial-d) var(--m3-spatial)}
.libfigb{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:0 6px;font:var(--t-body-m);color:var(--md-on-surface-variant)}
.libfigb b{color:var(--md-on-surface);font:var(--t-title-m)}
.seg.mini{display:inline-flex}
.seg.mini button{min-height:36px;padding:0 12px;font:var(--t-label-m)}
.libchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.libchips::-webkit-scrollbar{display:none}
.libsel{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 2px}
.libsel label{display:grid;gap:4px;font:var(--t-label-m);color:var(--md-on-surface-variant)}
.libsel .in{height:44px;font:var(--t-body-m);font-weight:600;text-align:left;padding:0 10px}
.libcount{margin:10px 4px 6px;font:var(--t-label-m);color:var(--md-on-surface-variant)}
.lrow{display:flex;align-items:center;gap:6px;margin:0 0 3px;padding:0 8px 0 0;border-radius:var(--r-xs);background:var(--md-surface-container-high);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.libcount+.lrow,.lrow:first-child{border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg)}
.lrow:not(:has(+.lrow)){border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}
.lmain{flex:1;min-width:0;display:flex;align-items:center;gap:12px;background-color:transparent;border:0;padding:8px 4px 8px 8px;text-align:left;color:var(--md-on-surface);border-radius:inherit}
.lmain .nn{flex:1;min-width:0;font:var(--t-title-s);font-size:15px}
.lmain .nn small{display:block;color:var(--md-on-surface-variant);font:var(--t-body-s);margin-top:1px}
.lth{width:56px;height:56px;border-radius:var(--r-md);object-fit:cover;flex:none;background:var(--md-surface-container-highest)}
.lnone{display:grid;place-items:center;background:var(--md-primary-container);color:var(--md-on-primary-container);font:800 20px/1 var(--font-brand)}
.lgo{display:grid;place-items:center;color:var(--md-on-surface-variant);flex:none}
.lgo .ic{width:22px;height:22px}
.lweb{font-style:normal;color:var(--md-primary);font-weight:700}
.lplus{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:var(--r-full);border:0;background-color:var(--md-secondary-container);color:var(--md-on-secondary-container);flex:none;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects)}
.lplus .ic{width:22px;height:22px}
.lplus.on{background-color:var(--md-success);color:var(--md-on-success);border-radius:var(--r-md)}
.lplus.pop{animation:ckPop var(--m3-spatial-d) var(--m3-spatial)}
.libcred{font:var(--t-body-s);color:var(--md-on-surface-variant);margin:12px 4px 4px}
.ldet .en{margin:8px 2px 0;color:var(--md-on-surface-variant);font:var(--t-body-m)}
/* foto del ejercicio: inicio y final se alternan */
.lph{position:relative;display:block;width:100%;aspect-ratio:3/2;border:0;padding:0;border-radius:var(--r-xl);overflow:hidden;background:#fff}
.lph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lph.two img.f2{animation:lflip 3.2s var(--m3-effects) infinite}
.lph.two.f1 img.f2{animation:none;opacity:1}
@keyframes lflip{0%,38%{opacity:0}50%,88%{opacity:1}100%{opacity:0}}
.lphl{position:absolute;left:10px;bottom:10px;display:flex;gap:4px}
.lphl i{font-style:normal;font:var(--t-label-s);color:var(--md-inverse-on-surface);background:color-mix(in srgb,var(--md-inverse-surface) 80%,transparent);border-radius:var(--r-full);padding:4px 10px}
.lph.two .lphl i:first-child{animation:lphA 3.2s var(--m3-effects) infinite}
.lph.two .lphl i:last-child{animation:lphB 3.2s var(--m3-effects) infinite}
@keyframes lphA{0%,38%,100%{background:var(--md-primary);color:var(--md-on-primary)}50%,88%{background:color-mix(in srgb,var(--md-inverse-surface) 80%,transparent);color:var(--md-inverse-on-surface)}}
@keyframes lphB{0%,38%,100%{background:color-mix(in srgb,var(--md-inverse-surface) 80%,transparent);color:var(--md-inverse-on-surface)}50%,88%{background:var(--md-primary);color:var(--md-on-primary)}}
.lph.two.f1 .lphl i{animation:none}
.lph.two.f1 .lphl i:last-child{background:var(--md-primary);color:var(--md-on-primary)}
.lmus{display:flex;align-items:center;gap:14px;background:var(--md-surface-container-high);border-radius:var(--r-xl);padding:12px 16px;margin:12px 0}
.lmusl p{margin:4px 0;font:var(--t-body-m)}
.lmusl b{display:flex;align-items:center;font:var(--t-label-s);text-transform:uppercase;letter-spacing:.06em;color:var(--md-on-surface-variant)}
.lh4{font:var(--t-title-m);font-size:17px;margin:18px 0 8px}
.lh4 small{font:var(--t-body-s);color:var(--md-on-surface-variant)}
.lsteps{margin:0;padding-left:22px;display:grid;gap:8px;font:var(--t-body-m)}
/* parecidos: carrusel de Material 3 (tarjetas con esquinas grandes que se deslizan) */
.lsim{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
.lsim::-webkit-scrollbar{display:none}
.lsc{flex:0 0 124px;scroll-snap-align:start;display:grid;gap:6px;text-align:left;border:0;border-radius:var(--r-xl);padding:6px 6px 10px;background-color:var(--md-surface-container-high);color:var(--md-on-surface);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.lsc:active{border-radius:var(--r-lg)}
.lsc img{width:100%;aspect-ratio:1;border-radius:var(--r-lg);object-fit:cover;background:var(--md-surface-container-highest)}
.lsc b{font:var(--t-label-m);padding:0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.laddp{border-radius:var(--r-xl);padding:14px;margin:6px 0 12px;background:var(--md-secondary-container);color:var(--md-on-secondary-container);animation:m3In var(--m3-spatial-d) var(--m3-spatial)}
.laddp .menus{margin:0 0 10px}
.ldays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.ldays button{background-color:var(--md-surface-container-lowest)}
.laddp .nact{margin-top:12px}
@media (max-width:360px){.rtpr{grid-template-columns:1fr 1fr}.rtpr label:first-child{grid-column:1/3}}

/* --- Minijuegos: capa a pantalla completa del material de la isla --- */
html.gaming,html.gaming body{overflow:hidden}
html.gaming .toast{z-index:96}
.gov{position:fixed;inset:0;z-index:95;display:flex;flex-direction:column;color:var(--md-on-island);padding:calc(env(safe-area-inset-top,0px) + 10px) 14px calc(env(safe-area-inset-bottom,0px) + 12px);
  background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--md-primary) 30%,var(--md-island)) 0%,var(--md-island) 70%);opacity:0;transform:scale(.98);transition:opacity var(--m3-effects-d) var(--m3-effects),transform var(--m3-spatial-d) var(--m3-spatial)}
.gov.show{opacity:1;transform:none}
.gtopb{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;max-width:520px;width:100%;margin:0 auto}
.gov .gx{background-color:color-mix(in srgb,var(--md-on-island) 12%,transparent);color:var(--md-on-island)}
.gtt b{display:block;font:var(--t-title-l);line-height:1.1}
.gtt small{font:var(--t-label-m);color:var(--md-primary-fixed-dim)}
.gtt small.soon{color:var(--md-success-container);animation:goBlink2 .6s steps(1,end) infinite}
@keyframes goBlink2{50%{opacity:.35}}
.gsc{text-align:right;min-width:64px}
.gsc b{display:block;font:var(--t-headline-m);line-height:1;font-variant-numeric:tabular-nums}
.gsc b.bump{animation:ckPop var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.gsc small{font:var(--t-label-m);color:var(--md-primary-fixed-dim);font-variant-numeric:tabular-nums}
.gsc small.low{color:var(--md-error-container)}
.gsc small .ic{width:16px;height:16px;color:var(--md-error-container);margin-left:1px}
.gbody{position:relative;flex:1;min-height:0;max-width:520px;width:100%;margin:10px auto;display:flex;flex-direction:column}
.gstage{position:relative;flex:1;min-height:0;border-radius:var(--r-xl);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;background:color-mix(in srgb,var(--md-on-island) 5%,transparent)}
.gcv{display:block;width:100%;height:100%;touch-action:none}
.gfoot{display:flex;gap:10px;max-width:520px;width:100%;margin:0 auto}
.gbtn{flex:1;min-height:56px;padding:0 20px;background-color:var(--md-primary-fixed-dim);color:var(--md-on-primary-fixed);font:var(--t-title-m);font-weight:800}
.gbtn .ic{width:22px;height:22px}
.gbtn.ghost{background-color:color-mix(in srgb,var(--md-on-island) 12%,transparent);color:var(--md-on-island)}
.gfloat{position:absolute;transform:translate(-50%,-50%);font:var(--t-title-l);color:var(--md-fire-bright);text-shadow:0 2px 8px rgb(0 0 0/.5);pointer-events:none;animation:gFloat .9s var(--m3-effects) forwards;white-space:nowrap;z-index:5}
@keyframes gFloat{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}20%{opacity:1;transform:translate(-50%,-70%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
/* menú de juegos */
.ghub{overflow:auto;padding:4px 2px}
.gsub{margin:2px 0 14px;color:color-mix(in srgb,var(--md-on-island) 78%,transparent);font:var(--t-body-m);text-align:center}
.gcards{display:grid;gap:4px}
.gcard{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;text-align:left;border:0;background-color:color-mix(in srgb,var(--md-on-island) 8%,transparent);color:var(--md-on-island);border-radius:var(--r-xs);padding:12px 14px 12px 12px;animation:m3In var(--m3-spatial-d) var(--m3-spatial) both;animation-delay:calc(var(--i)*45ms);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.gcard:first-child{border-top-left-radius:var(--r-xl);border-top-right-radius:var(--r-xl)}
.gcard:last-child{border-bottom-left-radius:var(--r-xl);border-bottom-right-radius:var(--r-xl)}
.gcard:active{border-radius:var(--r-xl)}
.gci{position:relative;isolation:isolate;width:56px;height:56px;display:grid;place-items:center;font-size:27px;color:var(--md-on-primary-fixed)}
.gci::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--md-primary-fixed-dim);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.gcard:nth-child(2) .gci::before{-webkit-mask-image:var(--shape-flower);mask-image:var(--shape-flower)}
.gcard:nth-child(3) .gci::before{-webkit-mask-image:var(--shape-pentagon);mask-image:var(--shape-pentagon)}
.gcard:nth-child(4) .gci::before{-webkit-mask-image:var(--shape-clover4);mask-image:var(--shape-clover4)}
.gcard:nth-child(5) .gci::before{-webkit-mask-image:var(--shape-sunny);mask-image:var(--shape-sunny)}
.gci .ic{width:28px;height:28px}
.gcn b{display:block;font:var(--t-title-m);font-size:16.5px}
.gcn small{color:color-mix(in srgb,var(--md-on-island) 72%,transparent);font:var(--t-body-s)}
.gcb{display:inline-flex;align-items:center;gap:2px;font:var(--t-label-m);color:var(--md-fire-bright);white-space:nowrap}
.gcb .ic{width:16px;height:16px}
/* cuenta 3-2-1 y resultado */
.gintro,.gres{position:absolute;inset:0;z-index:6;display:grid;place-items:center;text-align:center;padding:20px;background:color-mix(in srgb,var(--md-island) 82%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:var(--r-xl);animation:fadeIn var(--m3-effects-d) var(--m3-effects) both}
.gintro.out{opacity:0;transition:opacity var(--m3-effects-d) var(--m3-effects)}
.gintro b,.gres .gk{display:block;font:var(--t-headline-s);margin:8px 0 4px}
.gintro p,.gres p{margin:0 auto;max-width:300px;color:color-mix(in srgb,var(--md-on-island) 82%,transparent);font:var(--t-body-m)}
.gii{position:relative;isolation:isolate;display:grid;place-items:center;width:84px;height:84px;margin:0 auto;font-size:46px;line-height:1.1;color:var(--md-on-primary-fixed)}
.gii::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--md-primary-fixed-dim);-webkit-mask:var(--shape-sunny) center/contain no-repeat;mask:var(--shape-sunny) center/contain no-repeat;animation:heroSpin 16s linear infinite}
.gii .ic{width:40px;height:40px}
.gcount{display:block;font-style:normal;font:var(--t-display-l);font-size:64px;line-height:1;margin-top:14px;color:var(--md-success-container)}
.gcount.tick{animation:ckPop var(--m3-spatial-d) var(--m3-spatial)}
.gbig{display:block;font:var(--t-display-l);font-size:58px;line-height:1;margin:4px 0}
.gres.rec .gk{color:var(--md-fire-bright)}
.gbtns{display:flex;gap:10px;margin-top:18px}
.gbtns .gbtn{min-width:120px}
.gconf{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:7}
/* Memoria: cartas que giran; atrás, la galleta de Forgia */
.mem{display:grid;grid-template-columns:repeat(var(--c),1fr);gap:8px;height:100%;padding:8px;align-content:center}
.mc{position:relative;aspect-ratio:3/4;max-height:100%;border:0;background:transparent;background-image:none;perspective:600px;padding:0;animation:m3In var(--m3-spatial-d) var(--m3-spatial) both;animation-delay:calc(var(--i)*18ms)}
.mc .mf,.mc .mb{position:absolute;inset:0;border-radius:var(--r-lg);display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform var(--m3-spatial-d) var(--m3-spatial)}
.mc .mf{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.mc .mf i{position:relative;isolation:isolate;display:grid;place-items:center;width:52%;aspect-ratio:1;font-style:normal;font:800 20px/1 var(--font-brand);color:var(--md-primary-container)}
.mc .mf i::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--md-on-primary-container);opacity:.35;-webkit-mask:var(--shape-cookie4) center/contain no-repeat;mask:var(--shape-cookie4) center/contain no-repeat}
.mc .mb{background:var(--md-surface-container-lowest);color:var(--md-primary);font-size:clamp(24px,8vw,38px);transform:rotateY(180deg)}
.mc .mb .ic{width:58%;height:58%;max-width:44px;max-height:44px}
.mc.up .mf{transform:rotateY(-180deg)}
.mc.up .mb{transform:rotateY(0)}
.mc.ok .mb{background:var(--md-success-container);color:var(--md-on-success-container);box-shadow:0 0 0 3px var(--md-success);animation:ckPop var(--m3-spatial-d) var(--m3-spatial)}
/* Atrapa la pesa */
.mole{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;height:100%;padding:12px;align-content:center}
.hole{position:relative;aspect-ratio:1;border:0;border-radius:50%;background:radial-gradient(circle at 50% 70%,color-mix(in srgb,#000 55%,var(--md-island)) 0 55%,color-mix(in srgb,var(--md-primary) 32%,var(--md-island)) 56% 100%);background-image:radial-gradient(circle at 50% 70%,color-mix(in srgb,#000 55%,var(--md-island)) 0 55%,color-mix(in srgb,var(--md-primary) 32%,var(--md-island)) 56% 100%);overflow:hidden;padding:0}
.hole .itm{position:absolute;left:0;right:0;bottom:-70%;display:grid;place-items:center;font-size:clamp(34px,11vw,52px);line-height:1;transition:bottom var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.hole .itm .ic{width:clamp(36px,11vw,54px);height:clamp(36px,11vw,54px);color:var(--md-primary-fixed-dim)}
.hole.on .itm{bottom:22%}
.hole.on.bad .itm .ic{color:var(--md-error-container)}
.hole.on.bad{box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--md-error) 60%,transparent)}
.hole.hit{animation:ckPop var(--m3-spatial-fast-d) var(--m3-spatial-fast);box-shadow:0 0 0 4px var(--md-success-container)}
.hole.miss{animation:shake .35s;box-shadow:0 0 0 4px var(--md-error-container)}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* Simón: cuatro botones con formas expresivas */
.simon{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:12px}
.smsg{margin:0;font:var(--t-title-m);color:color-mix(in srgb,var(--md-on-island) 82%,transparent)}
.spads{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(100%,340px);aspect-ratio:1}
.spad{display:grid;place-items:center;border:0;border-radius:var(--r-xxl);background:var(--pc);background-image:none;opacity:.45;color:rgb(0 0 0/.55);transition:opacity var(--m3-effects-fast-d) var(--m3-effects-fast),transform var(--m3-spatial-fast-d) var(--m3-spatial-fast),box-shadow var(--m3-effects-fast-d) var(--m3-effects-fast),border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.spad:nth-child(1){border-bottom-right-radius:var(--r-md)}.spad:nth-child(2){border-bottom-left-radius:var(--r-md)}.spad:nth-child(3){border-top-right-radius:var(--r-md)}.spad:nth-child(4){border-top-left-radius:var(--r-md)}
.spad .ic{width:44px;height:44px}
.simon.yours .spad{opacity:.7}
.spad.lit{opacity:1;transform:scale(1.05);box-shadow:0 0 30px var(--pc);border-radius:var(--r-full)}
.spad.hint{opacity:1;animation:goBlink2 .3s steps(1,end) 4}

/* --- Regalo de bienvenida: la pesa rusa que se abre a toques --- */
html.rgopen,html.rgopen body{overflow:hidden}
html.rgopen .toast{z-index:207}
.regalo{position:fixed;inset:0;z-index:205;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--md-on-island);text-align:center;overflow:hidden;--charge:0;
  padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(120% 85% at 50% 36%,color-mix(in srgb,var(--md-primary) 34%,var(--md-island)) 0%,var(--md-island) 62%);opacity:0;transition:opacity var(--m3-effects-slow-d) var(--m3-effects-slow)}
.regalo.show{opacity:1}
.regalo.out{opacity:0;transition:opacity var(--m3-effects-d) var(--m3-effects)}
.regalo:focus{outline:none}
.regalo :focus-visible{outline-color:var(--md-fire-bright)}
.rgfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.rgrays{position:absolute;left:50%;top:44%;width:170vmax;height:170vmax;transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--md-fire-bright) 14%,transparent) 0deg 7deg,transparent 7deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 0 10%,transparent 48%);mask:radial-gradient(circle,#000 0 10%,transparent 48%);
  opacity:calc(.35 + var(--charge) * .45);animation:rgSpin 40s linear infinite;transition:opacity .4s}
.regalo.burst .rgrays,.regalo.reveal .rgrays{opacity:.85;animation-duration:18s;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--md-fire-bright) 26%,transparent) 0deg 7deg,transparent 7deg 22deg)}
@keyframes rgSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.rgflash{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,#FFFBE6 0%,var(--md-fire-bright) 32%,transparent 72%);opacity:0;pointer-events:none;z-index:4}
.regalo.burst .rgflash{animation:rgFlash .75s ease-out}
@keyframes rgFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.rgin{position:relative;z-index:2;width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center}
.rgkick{margin:0;text-transform:uppercase;letter-spacing:.16em;font:var(--t-label-m);color:var(--md-fire-bright)}
.regalo h2{font:var(--t-headline-l);font-size:clamp(26px,7.5vw,34px);line-height:1.08;margin:6px 0 4px;text-shadow:0 2px 18px rgb(0 0 0/.35)}
.rgsub{margin:0;color:color-mix(in srgb,var(--md-on-island) 84%,transparent);font:var(--t-body-l);min-height:1.5em;max-width:340px}
.rgstage{position:relative;width:min(66vw,270px);aspect-ratio:240/260;margin:12px 0 4px}
.rgkb{position:absolute;inset:0;border:0;background:none;padding:0;border-radius:40%;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;color:inherit}
.rgkb:focus-visible{outline:3px solid var(--md-fire-bright);outline-offset:6px}
.kbsvg{width:100%;height:100%;overflow:visible;display:block}
.rgstage>.kbsvg{position:absolute;inset:0}
.regalo.idle .rgkb .kbsvg{animation:rgFloat 2.8s ease-in-out infinite}
@keyframes rgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.kb{transform-box:view-box;transform-origin:120px 236px}
.regalo.idle .kb{animation:rgWiggle 3.4s ease-in-out 1s infinite}
@keyframes rgWiggle{0%,78%,100%{transform:none}82%{transform:rotate(-6deg)}86%{transform:rotate(6deg)}90%{transform:rotate(-4deg)}94%{transform:rotate(2deg)}}
.kb.hit{animation:rgHit .42s var(--m3-spatial-fast)}
@keyframes rgHit{0%{transform:none}16%{transform:scale(1.1,.86) rotate(var(--r))}42%{transform:scale(.94,1.08) rotate(calc(var(--r) * -.7))}68%{transform:scale(1.03,.97) rotate(calc(var(--r) * .3))}100%{transform:none}}
.regalo.charging .kb{animation:rgRumble .09s linear infinite}
@keyframes rgRumble{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-2px,1px) rotate(-1.5deg)}50%{transform:translate(2px,-1px) rotate(1.5deg)}75%{transform:translate(-1px,-1px) rotate(-1deg)}100%{transform:translate(1px,1px) rotate(1deg)}}
.kbshadow{fill:#000;fill-opacity:.42;transform-box:view-box;transform-origin:120px 246px}
.regalo.idle .kbshadow{animation:rgShadow 2.8s ease-in-out infinite}
@keyframes rgShadow{0%,100%{transform:scale(1)}50%{transform:scale(.86);fill-opacity:.3}}
.kbhalo{opacity:calc(.2 + var(--charge) * .8);transform-box:view-box;transform-origin:120px 162px;transform:scale(calc(.78 + var(--charge) * .42));transition:opacity .3s,transform .3s}
.regalo.charging .kbhalo{animation:rgHalo .5s ease-in-out infinite alternate}
@keyframes rgHalo{to{opacity:1;transform:scale(1.32)}}
.kbq{font:800 36px/1 var(--font-brand);fill:var(--md-fire-bright)}
.regalo.charging .kbq,.regalo:not(.idle) .kbq{fill:#FFF3C4}
.kbcr path{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dashoffset .28s ease-out}
.kbcr .glo path{stroke:#FFD15A;stroke-width:9;opacity:.9}
.kbcr .ln path{stroke:#FFFBE6;stroke-width:3.2}
.kbbow{transform-box:view-box;transform-origin:120px 46px}
.regalo.idle .kbbow{animation:rgBow 3.4s ease-in-out 1s infinite}
@keyframes rgBow{0%,78%,100%{transform:none}84%{transform:scale(1.12) rotate(4deg)}90%{transform:scale(.96) rotate(-3deg)}}
.kbsvg.gone{visibility:hidden}
.kbsvg.half{pointer-events:none;z-index:2}
.kbsvg.half.top{clip-path:polygon(0 0,100% 0,100% 58%,84% 63%,70% 56%,57% 64%,44% 57%,31% 65%,17% 58%,0 63%);animation:rgTop .95s var(--m3-effects-slow) forwards}
.kbsvg.half.bot{clip-path:polygon(0 63%,17% 58%,31% 65%,44% 57%,57% 64%,70% 56%,84% 63%,100% 58%,100% 100%,0 100%);animation:rgBot .95s var(--m3-effects-slow) forwards}
@keyframes rgTop{to{transform:translate(-26%,-70%) rotate(-32deg);opacity:0}}
@keyframes rgBot{to{transform:translate(18%,52%) rotate(22deg);opacity:0}}
.rgpips{display:flex;gap:8px;justify-content:center;margin:6px 0 2px}
.rgpips i{width:12px;height:12px;border-radius:50%;background:color-mix(in srgb,var(--md-on-island) 22%,transparent);transition:background-color var(--m3-effects-d) var(--m3-effects),border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.rgpips i.on{background:var(--md-fire-bright);border-radius:3px;box-shadow:0 0 12px var(--md-fire-bright);animation:ckPop var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.rghint{margin:6px 0 0;min-height:44px;color:color-mix(in srgb,var(--md-on-island) 78%,transparent);font:var(--t-label-l);display:flex;align-items:center;justify-content:center;gap:6px}
.rgfinger{display:inline-grid;place-items:center;animation:rgFinger 1.1s ease-in-out infinite}
.rgfinger .ic{width:24px;height:24px}
@keyframes rgFinger{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.rgcheer{font:var(--t-title-l);color:var(--md-fire-bright);animation:rgPop var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
@keyframes rgPop{from{transform:scale(.6);opacity:0}}
.rghint .smallbtn{margin:0}
.rglater{margin-top:8px;color:color-mix(in srgb,var(--md-on-island) 70%,transparent)}
.regalo.burst .rgpips,.regalo.burst .rghint,.regalo.burst .rglater,.regalo.reveal .rgpips,.regalo.reveal .rghint,.regalo.reveal .rglater{display:none}
.regalo.reveal .rgstage{display:none}
/* el premio: dos tarjetas con ruleta */
.rgres{width:100%}
.rgcards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 6px;perspective:900px}
.rgcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px 12px;border-radius:var(--r-xl);
  background:color-mix(in srgb,var(--md-on-island) 10%,transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rc) 70%,transparent),var(--e4);opacity:0;transform:rotateY(80deg) translateY(30px) scale(.9);transition:transform .75s var(--m3-spatial-slow),opacity .3s}
.rgcard.flip{opacity:1;transform:none}
.rgrar{font:var(--t-label-s);letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-full);background:color-mix(in srgb,var(--md-on-island) 12%,transparent);color:color-mix(in srgb,var(--md-on-island) 70%,transparent);transition:background-color .3s,color .3s}
.rgcard:not(.landed) .rgrar b{display:none}
.rgcard:not(.landed) .rgrar::after{content:"???"}
.rgcard.landed .rgrar{background:var(--rc);color:#1B1208}
.rgvis{position:relative;width:118px;height:118px;display:grid;place-items:center}
.rgreel{position:absolute;inset:0;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 24%,#000 76%,transparent);mask:linear-gradient(transparent,#000 24%,#000 76%,transparent);transition:opacity .25s}
.rgstrip{display:flex;flex-direction:column}
.rgstrip.go{transition:transform 1.65s cubic-bezier(.1,.82,.16,1);animation:rgReelBlur 1.65s ease-out}
@keyframes rgReelBlur{0%{filter:blur(2.5px)}70%{filter:blur(1px)}100%{filter:none}}
.rgit{flex:none;height:118px;display:grid;place-items:center}
.rgit .kprev{width:104px;height:104px}
.rgfinal{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.6)}
.rgcard.landed .rgreel{opacity:0}
.rgcard.landed .rgfinal{opacity:1;transform:none;transition:transform var(--m3-spatial-d) var(--m3-spatial),opacity .2s}
.rgfinal .flame{width:84px;height:105px;filter:drop-shadow(0 8px 20px color-mix(in srgb,var(--md-fire) 50%,transparent))}
.rgfinal .sav.xl{width:112px;height:112px;font-size:42px}
.rgname{font:var(--t-title-l);font-size:19px;line-height:1.15;margin-top:4px;opacity:0;transform:translateY(6px);transition:opacity .3s .15s,transform .3s .15s}
.rgcard.landed .rgname{opacity:1;transform:none}
.rgcard small{color:color-mix(in srgb,var(--md-on-island) 72%,transparent);font:var(--t-label-m)}
.rgcard.landed{animation:rgLand var(--m3-spatial-d) var(--m3-spatial)}
@keyframes rgLand{0%{scale:1}35%{scale:1.07}100%{scale:1}}
.rgcard.r-epico.landed{box-shadow:none;background:linear-gradient(180deg,color-mix(in srgb,#7A4FC0 45%,var(--md-island)) 0%,var(--md-island) 100%) padding-box,linear-gradient(120deg,#C38BFF,#FFD166,#7FD8F5,#C38BFF) border-box;border:2px solid transparent;background-size:100% 100%,300% 300%;animation:rgLand var(--m3-spatial-d) var(--m3-spatial),rgShine 2.6s linear infinite}
@keyframes rgShine{to{background-position:0 0,300% 0}}
.rgnote{margin:10px 0 4px;color:color-mix(in srgb,var(--md-on-island) 84%,transparent);font:var(--t-body-m);opacity:0;transition:opacity .4s}
.rgacts{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s;pointer-events:none}
.regalo.done .rgnote{opacity:1}
.regalo.done .rgacts{opacity:1;transform:none;pointer-events:auto}
.rgacts .cbtn.wide{margin:8px 0 4px;background-color:var(--md-primary-fixed-dim);color:var(--md-on-primary-fixed)}
/* Pesas rusas de las gemas: la misma pesa; rara y épica con el halo y los rayos del color de su rareza */
.regalo.chest.r-rara .kbhalo,.regalo.chest.r-rara .rgrays{filter:hue-rotate(175deg) saturate(1.25)}
.regalo.chest.r-epica .kbhalo,.regalo.chest.r-epica .rgrays{filter:hue-rotate(235deg) saturate(1.35)}
.regalo.chest.r-rara .rgkick{color:#8EC5FF}
.regalo.chest.r-epica .rgkick{color:#D9B8FF}
.rgcards.one{grid-template-columns:minmax(0,230px);justify-content:center}
.rgbig{width:104px;height:104px;display:grid;place-items:center;background:var(--rc);color:#1B1208;-webkit-mask:var(--shape-gem) center/contain no-repeat;mask:var(--shape-gem) center/contain no-repeat}
.rgbig.sh{-webkit-mask-image:var(--shape-cookie9);mask-image:var(--shape-cookie9)}
.rgbig .ic{width:52px;height:52px}
.rglink{color:var(--md-fire-bright)}
@media (max-width:360px){.rgvis{width:100px;height:100px}.rgit{height:100px}.rgit .kprev{width:90px;height:90px}.rgfinal .sav.xl{width:96px;height:96px}.rgfinal .flame{width:74px;height:92px}}

/* ===================== 9 · Movimiento (resortes de Material 3 Expressive) ===================== */
/* App quieta 20 s (html.idle): app.js pausa las animaciones infinitas de lo decorativo (idlePause; las que entran
   siempre terminan) y skins.js detiene la física de los disfraces; los degradados de los disfraces, aquí abajo (#skDefs). */
/* Aparecer: sube un poco y se aclara. Brotar: crece desde el centro. */
@keyframes m3In{from{opacity:0;transform:translateY(10px)}}
@keyframes m3Pop{from{opacity:0;transform:scale(.6)}}
/* Cambiar de pestaña: «fundido a través» (la vista nueva crece y se aclara, en cascada) */
#app.tabin>*{animation:fadeThrough var(--m3-spatial-d) var(--m3-spatial) both}
#app.tabin>*:nth-child(2){animation-delay:30ms}#app.tabin>*:nth-child(3){animation-delay:60ms}#app.tabin>*:nth-child(4){animation-delay:90ms}
#app.tabin>*:nth-child(5){animation-delay:120ms}#app.tabin>*:nth-child(n+6){animation-delay:150ms}
@keyframes fadeThrough{0%{opacity:0;transform:scale(.94) translateY(8px)}35%{opacity:1}100%{opacity:1;transform:none}}
/* Cambiar de día: «eje compartido» horizontal (entra desde el lado hacia donde avanzaste) */
#app.dayin>*:not(.strip){animation:axisX var(--m3-spatial-d) var(--m3-spatial) both}
@keyframes axisX{0%{opacity:0;transform:translateX(calc(var(--dx,1) * 28px))}40%{opacity:1}100%{opacity:1;transform:none}}
/* Lo que se despliega aparece suave */
details>*:not(summary){animation:m3In var(--m3-spatial-d) var(--m3-spatial)}
.g details>*:not(summary),details.sess>*:not(summary){animation:m3In var(--m3-spatial-d) var(--m3-spatial)}

/* «Reducir movimiento»: todo aparece en su lugar, sin desplazamientos, giros ni rebotes */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .flame .fo,.flame .fi,.fl-arcoiris .flame,.fl-arcoiris.minif,.sav.fr-diamante,.sav.fr-fuego{animation:none!important}
  .top .frase .fw{opacity:1;transform:none;filter:none}
  .pill.go{background-color:var(--md-success);color:var(--md-on-success)}
  .pill.fin{box-shadow:var(--e4)}
  .wonum .slot .o{display:none}
  .lph.two img.f2,.lph.two .lphl i{animation:none!important}
  .lph.two.f1 img.f2{opacity:1}.lph.two:not(.f1) img.f2{opacity:0}
  .lph.two:not(.f1) .lphl i:first-child{background:var(--md-primary);color:var(--md-on-primary)}
  .rgcard{opacity:1;transform:none}
  .mc .mf,.mc .mb{transition:none!important}
  button:active:not(:disabled),.cbtn:active,.tb:active,.smallbtn:active{transform:none}
}

/* ===================== 7.5 · Gemas arriba, recorrido del ciclo, tienda y disfraces nuevos ===================== */
/* --- Gema del encabezado (gemas.js): facetas con los tonos del terciario (cambian con el color de la app), un destello
   que la cruza y chispas que aparecen y se apagan. Al ganar gemas, brinca. --- */
.gemsvg{width:22px;height:22px;display:block;overflow:visible}
.gemsvg .g1{fill:var(--md-tertiary-fixed)}
.gemsvg .g2{fill:var(--md-tertiary-fixed-dim)}
.gemsvg .g3{fill:var(--md-tertiary)}
.gemsvg .g4{fill:#fff;opacity:.38}
.gemsvg .g5{fill:var(--md-tertiary);opacity:.55}
.gemsvg .gl{fill:none;stroke:var(--md-tertiary-fixed);stroke-width:.7;stroke-linejoin:round;opacity:.75}
.gemsvg .gsweep{fill:#fff;opacity:.75;animation:gmSweep 3.8s var(--m3-effects-slow) infinite}
@keyframes gmSweep{0%,60%{transform:translateX(0)}100%{transform:translateX(46px)}}
.gemwrap{position:relative;display:grid;place-items:center;width:26px;height:26px}
.gemwrap .gemsvg{animation:gmFloat 3.2s ease-in-out infinite}
@keyframes gmFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.5px) rotate(-4deg)}}
.gtw{position:absolute;width:7px;height:7px;background:var(--md-tertiary);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0;animation:gmTw 2.6s var(--m3-effects) infinite;pointer-events:none}
.gtw.t1{top:-4px;right:-4px}
.gtw.t2{bottom:-1px;left:-4px;width:5px;height:5px;animation-delay:.9s}
.gtw.t3{top:1px;left:-6px;width:4px;height:4px;animation-delay:1.7s}
@keyframes gmTw{0%,100%{opacity:0;transform:scale(.2) rotate(0)}45%,55%{opacity:1;transform:scale(1) rotate(45deg)}}
.gemhd{position:relative;display:inline-flex;align-items:center;gap:4px;height:44px;border:0;border-radius:var(--r-full);background-color:var(--md-tertiary-container);color:var(--md-on-tertiary-container);padding:0 12px 0 8px;
  font:var(--t-title-m);font-weight:800;flex:none;cursor:pointer;transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.gemhd:active{border-radius:var(--r-md)}
.gemhd .bdg{top:-4px;right:-4px;background:var(--md-tertiary);color:var(--md-on-tertiary);box-shadow:0 0 0 2px var(--md-surface);animation:bdgIn var(--m3-spatial-fast-d) var(--m3-spatial-fast),gmBdg 2.4s var(--m3-spatial) 1s infinite}
@keyframes gmBdg{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.25)}90%{transform:scale(.95)}}
.gemhd.gain .gemwrap{animation:gmGain .8s var(--m3-spatial-fast)}
@keyframes gmGain{0%{transform:scale(1)}35%{transform:scale(1.45) rotate(-12deg)}100%{transform:scale(1)}}
.minibar .gemhd{height:40px}
/* --- La llama del encabezado, con más vida: se mueve más y suelta chispas --- */
.flamechip .flame.on .fo{animation:flickHd 1.2s ease-in-out infinite}
.flamechip .flame.on .fi{animation:flickHd 0.85s ease-in-out infinite reverse}
@keyframes flickHd{0%,100%{transform:scale(1,1) skewX(0)}25%{transform:scale(1.05,.93) skewX(-4deg)}55%{transform:scale(.95,1.09) skewX(3deg)}80%{transform:scale(1.02,.97) skewX(-1deg)}}
.flamechip{position:relative}
.flamechip:not(.s-pending)::before,.flamechip:not(.s-pending)::after{content:"";position:absolute;left:19px;top:12px;width:3px;height:3px;border-radius:50%;background:var(--md-fire);opacity:0;animation:flEmber 1.9s ease-out infinite;pointer-events:none}
.flamechip:not(.s-pending)::after{left:24px;width:2.5px;height:2.5px;animation-delay:.95s}
@keyframes flEmber{0%{opacity:0;transform:translate(0,6px)}20%{opacity:.9}100%{opacity:0;transform:translate(3px,-12px)}}

/* --- Hoja de gemas (gemas.js): recorrido, tienda y movimientos --- */
html.gmopen{overflow:hidden}
#gmSheet .gmsheet{padding:0;overflow:hidden;gap:0}
#gmSheet.out{opacity:0;transition:opacity var(--m3-effects-fast-d) var(--m3-effects-fast)}
.gmh{padding:10px 14px 0 12px;margin:0}
.gmh h2{font:var(--t-title-l);font-weight:800}
.gmh h2:focus{outline:none}
.gmbody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 14px calc(18px + env(safe-area-inset-bottom,0px))}
.gmhero{display:flex;align-items:center;gap:14px;padding:10px 4px 14px}
.gembig{position:relative;display:grid;place-items:center;width:78px;height:78px;flex:none}
.gembig::before{content:"";position:absolute;inset:0;background:var(--md-tertiary-container);-webkit-mask:var(--shape-cookie12) center/contain no-repeat;mask:var(--shape-cookie12) center/contain no-repeat;animation:heroSpin 30s linear infinite}
.gembig .gemsvg{position:relative;width:46px;height:46px;filter:drop-shadow(0 3px 6px rgb(0 0 0/.18));animation:gmFloat 3.2s ease-in-out infinite}
.gembig .gtw{width:11px;height:11px}
.gembig .gtw.t1{top:8px;right:6px}.gembig .gtw.t2{bottom:8px;left:8px;width:8px;height:8px}.gembig .gtw.t3{top:14px;left:4px;width:6px;height:6px}
.gmhx{flex:1;min-width:0}
.gmbal{display:block;font:var(--t-display-s);line-height:1.05}
.gmhx small{color:var(--md-on-surface-variant);font:var(--t-body-m)}
.gmopenall{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 6px;border:0;border-radius:var(--r-full);background:var(--md-primary);color:var(--md-on-primary);font:var(--t-label-l);cursor:pointer;animation:gBounce 2.2s var(--m3-spatial) infinite}
.gmopenall .chic{width:34px;height:34px;border-radius:var(--r-full)}
.gmopenall .chic svg{width:28px;height:28px}
.gmtabs{margin:0 0 12px}
.gmtabs button .ic{width:18px;height:18px}
.gmpane:not(.still){animation:m3In var(--m3-spatial-d) var(--m3-spatial)}
.card.gmcard{margin:0 0 12px}
.gmcard h3{margin:0 0 8px}
.gmlist{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;margin:0 0 12px}
.gmcard .pfbar{margin:10px 0 8px}
.cychead{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.cychead .kick{margin:0}
.cychead h3{margin:0;font:var(--t-headline-s);font-weight:800}
.cycpct{font:var(--t-headline-s);font-weight:800;color:var(--md-primary)}
.cycnext{margin:0 0 4px;font:var(--t-body-m)}
/* recorrido: semanas y pesas en zigzag, unidas por un camino; lo recorrido va de color */
.gtrack{position:relative;margin:6px 0 16px}
.gline{position:absolute;left:50%;top:0;width:320px;height:100%;margin-left:-160px;overflow:visible;pointer-events:none}
.gline path{fill:none;stroke-width:7;stroke-linecap:round}
.gline .gl0{stroke:var(--md-surface-container-highest);stroke-dasharray:1 13}
.gline .gl1{stroke:var(--md-primary);opacity:.85}
.gnode{position:absolute;left:calc(50% + var(--x));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.gring{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--md-primary) calc(var(--f) * 360deg),var(--md-surface-container-highest) 0)}
.gwk{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--md-surface-container-high);font:var(--t-title-m);font-weight:800;color:var(--md-on-surface-variant)}
.gwk .ic{width:26px;height:26px}
.gnode.done .gwk{background:var(--md-primary);color:var(--md-on-primary)}
.gnode.now .gwk{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.gnode.now .gring{animation:gNow 2.4s var(--m3-effects) infinite}
@keyframes gNow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--md-primary) 35%,transparent)}50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--md-primary) 0%,transparent)}}
.gme{position:absolute;left:calc(100% + 2px);top:6px;line-height:0}
.gme .flame{width:28px;height:35px}
.gme .flamebox .flame{width:28px;height:35px}
.gtag{position:absolute;left:calc(100% + 34px);top:16px;white-space:nowrap;padding:4px 10px;border-radius:var(--r-full);background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);font:var(--t-label-m)}
.gnode.r .gme{left:auto;right:calc(100% + 2px)}
.gnode.r .gtag{left:auto;right:calc(100% + 34px)}
.gnode.chest{width:var(--s)}
.gchest{position:relative;width:var(--s);height:var(--s);display:grid;place-items:center;border:0;padding:0;background:transparent;color:inherit}
button.gchest{cursor:pointer}
.gchest::before{content:"";position:absolute;inset:0;background:var(--md-tertiary-fixed);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.gkb{position:relative;width:64%;height:64%;line-height:0}
.gkb svg{width:100%;height:100%;display:block}
.gnode.chest.r-rara .gchest::before{background:var(--md-tertiary-fixed-dim)}
.gnode.chest.r-epica .gchest::before{background:var(--md-primary-fixed-dim)}
.gnode.chest.r-grande .gchest::before{background:var(--md-carb-container);-webkit-mask-image:var(--shape-sunny);mask-image:var(--shape-sunny);animation:heroSpin 24s linear infinite}
.gnode.chest.lock .gchest::before{background:var(--md-surface-container-highest)}
.gnode.chest.lock:not(.r-grande) .gkb{filter:grayscale(1);opacity:.5}
.gnode.chest.r-grande.lock .gchest::before{background:var(--md-carb-container);opacity:.75}
.gnode.chest.r-grande.lock .gkb{opacity:.85}
.gnode.chest.ready .gchest{animation:gBounce 1.8s var(--m3-spatial) infinite}
@keyframes gBounce{0%,62%,100%{transform:translateY(0) scale(1)}72%{transform:translateY(-6px) scale(1.06)}84%{transform:translateY(0) scale(.97)}}
.gnode.chest.opened .gkb{opacity:.7}
.grays{position:absolute;inset:-24px;border-radius:50%;background:repeating-conic-gradient(color-mix(in srgb,var(--md-carb) 30%,transparent) 0 9deg,transparent 9deg 30deg);
  -webkit-mask:radial-gradient(circle,#000 38%,transparent 70%);mask:radial-gradient(circle,#000 38%,transparent 70%);animation:heroSpin 18s linear infinite;pointer-events:none}
.gcl{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap}
.gnode.r .gcl{left:auto;right:calc(100% + 10px);text-align:right}
.gcl b{display:block;font:var(--t-title-s)}
.gcl small{display:block;color:var(--md-on-surface-variant);font:var(--t-body-s)}
.gnode.chest.ready .gcl b{color:var(--md-primary)}
.gnode.big .gcl b{font:var(--t-title-m);font-weight:800}
.gblock{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none;
  width:max-content;max-width:100%;padding:6px 16px;border-radius:var(--r-lg);background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.gblock b{font:var(--t-label-l)}
.gblock small{font:var(--t-body-s);opacity:.85}
/* temporada */
.card.gmcard.season{background:linear-gradient(165deg,var(--md-fire-container) 0%,var(--md-surface-container-low) 62%)}
.sehead{display:flex;align-items:center;gap:12px}
.sehead .kick{margin:0}
.sehead h3{margin:0}
.sehead small{color:var(--md-on-surface-variant);font:var(--t-body-s)}
.seic{width:48px;height:48px;flex:none;display:grid;place-items:center;background:var(--md-fire);color:var(--md-on-fire,#fff);-webkit-mask:var(--shape-sunny) center/contain no-repeat;mask:var(--shape-sunny) center/contain no-repeat;animation:heroSpin 16s linear infinite}
.seic .ic{width:24px;height:24px;animation:heroSpin 16s linear infinite reverse}
.sebar{position:relative;margin:22px 0 4px}
.sebar .pfbar{margin:0}
.semark{position:absolute;top:-20px;transform:translateX(-100%);font:var(--t-label-s);color:var(--md-on-surface-variant)}
.semark.on{color:var(--md-primary);font-weight:800}
.sedays{margin:6px 0 10px;font:var(--t-body-m)}
.seprizes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px}
.seprize{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:10px 8px 12px;border-radius:var(--r-lg);color:var(--md-on-island);
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--md-carb) 34%,var(--md-island)) 0%,var(--md-island) 72%)}
.seprize .uic{width:92px;height:92px}
.seprize b{font:var(--t-title-s)}
.seprize small{display:flex;align-items:center;gap:3px;font:var(--t-label-m);color:color-mix(in srgb,var(--md-on-island) 78%,transparent)}
.seprize small .ic{width:14px;height:14px}
.seprize:not(.got) .uic{filter:saturate(.7) brightness(.85)}
.gmcard .smallbtn .ic{width:18px;height:18px;vertical-align:-4px;margin-right:4px}
.gmwhy summary{display:flex;align-items:center;gap:8px;font:var(--t-title-s);cursor:pointer}
.gmwhy summary .ic{width:22px;height:22px;color:var(--md-tertiary)}
.gmwhy p{font:var(--t-body-m);margin:10px 0 0}
.gmsrc{margin:10px 0 0;padding-left:18px;font:var(--t-body-s)}
.gmsrc li{margin:4px 0}
.gmsrc a{color:var(--md-primary)}
/* tienda: por rareza, legendarios arriba (oscuros, con lo que te falta) */
.ugrid.skins.lgrid{grid-template-columns:repeat(2,1fr)}
.ugrid.skins.lgrid .uic{width:96px;height:96px}
.utile.r-epico{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--md-primary) 38%,transparent)}
.utile.r-legendario{color:var(--md-on-island);background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--md-carb) 36%,var(--md-island)) 0%,var(--md-island) 72%)!important;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--md-carb-container) 55%,transparent)}
.utile.r-legendario small{color:color-mix(in srgb,var(--md-on-island) 78%,transparent)}
.utile.r-legendario:not(.got) .uic{filter:saturate(.8) brightness(.9)!important;opacity:1!important}
.utile.r-legendario.on{box-shadow:inset 0 0 0 2.5px var(--md-carb-container)}
.rchip{display:inline-block;padding:2px 8px;border-radius:var(--r-full);font:var(--t-label-s);font-weight:800}
.rchip.r-comun{background:var(--md-surface-container-highest);color:var(--md-on-surface-variant)}
.rchip.r-raro{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.rchip.r-epico{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.rchip.r-legendario{color:var(--md-on-carb-container);background:linear-gradient(100deg,var(--md-carb-container) 30%,#FFF8E6 50%,var(--md-carb-container) 70%) 0 0/250% 100%;animation:rgShine 3.2s linear infinite}
.lgmeta{display:block;width:84%;height:6px;margin-top:6px;border-radius:var(--r-full);background:color-mix(in srgb,var(--md-on-island) 18%,transparent);overflow:hidden}
.lgmeta i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--md-carb-container)}
.lgleft{font:var(--t-label-s)}
.buybtn .gemsvg.mini{width:16px;height:16px}
.buybtn .gemsvg.mini .gsweep{display:none}
.gmfoot{margin:4px 4px 12px}
.urar{margin:16px 0 8px;font:var(--t-title-s);display:flex;align-items:center;gap:6px}
.urar.r-legendario{color:var(--md-carb)}
.urar.r-epico{color:var(--md-primary)}
.urar.r-raro{color:var(--md-tertiary)}
.gemcall{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 12px;padding:12px 14px;border:0;border-radius:var(--r-xl);background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);text-align:left;cursor:pointer;
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.gemcall:active{border-radius:var(--r-md)}
.gemcall b{display:block;font:var(--t-title-s)}
.gemcall small{display:block;font:var(--t-body-s)}
.gemcall>span:nth-child(2){flex:1;min-width:0}
.gemcallic .gemsvg{width:34px;height:34px}
.gemcall>.ic{width:22px;height:22px}
.kprev{overflow:visible}
/* gran pesa rusa y legendarios al abrir (regalo.js) */
.chestbtn.r-grande .chic{background:var(--md-carb-container);box-shadow:inset 0 0 0 2px var(--md-carb)}
.regalo.chest.r-grande .kbhalo,.regalo.chest.r-grande .rgrays{filter:hue-rotate(18deg) saturate(1.7) brightness(1.15)}
.regalo.chest.r-grande .rgkick{color:#FFE08A}
.rgcard.r-legendario.landed{box-shadow:none;background:linear-gradient(180deg,color-mix(in srgb,#B7791F 50%,var(--md-island)) 0%,var(--md-island) 100%) padding-box,linear-gradient(120deg,#FFE9A6,#F7C948,#FF8A1F,#FFE9A6) border-box;
  border:2px solid transparent;background-size:100% 100%,300% 300%;animation:rgLand var(--m3-spatial-d) var(--m3-spatial),rgShine 2s linear infinite}
.regalo.legend .rgflash{background:radial-gradient(circle,#FFF3C4 0%,rgb(255 201 60/.5) 40%,transparent 72%)}
@media (prefers-reduced-motion:reduce){
  .gemsvg .gsweep,.gemwrap .gemsvg,.gtw,.gemhd .bdg,.gemhd.gain .gemwrap,.flamechip::before,.flamechip::after,.gembig::before,.gembig .gemsvg,.gmopenall,.gmpane,.gnode.now .gring,.gnode.chest.ready .gchest,
  .gnode.chest.r-grande .gchest::before,.grays,.seic,.seic .ic,.rchip.r-legendario,.rgcard.r-legendario.landed{animation:none!important}
  .gtw{opacity:.8}
}

/* --- Disfraces animados (skins.js, 7.5): épicos con movimiento sutil; legendarios con aura, brillo y partículas.
   Todo con transform-box: fill-box (funciona igual en la foto y en el trajecito de la llama). --- */
.sk-sway{transform-box:fill-box;transform-origin:50% 0;animation:skSway 3.2s ease-in-out infinite alternate}
@keyframes skSway{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.sk-look{animation:skLook 6s ease-in-out infinite}
@keyframes skLook{0%,40%{transform:translate(0,0)}50%,70%{transform:translate(-1.6px,.6px)}80%,100%{transform:translate(1.2px,0)}}
.sk-blink{transform-box:fill-box;transform-origin:50% 50%;animation:skBlink 5s infinite}
@keyframes skBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.sk-roll{animation:skRoll 3.4s ease-in-out infinite}.sk-roll2{animation:skRoll 2.6s ease-in-out infinite reverse}
@keyframes skRoll{0%,100%{transform:translate(0,0)}25%{transform:translate(-2px,1.5px)}50%{transform:translate(1px,2px)}75%{transform:translate(2px,-1px)}}
#skDefs stop{animation-play-state:paused}
html.skfx:not(.idle) #skDefs stop{animation-play-state:running}
.sk-hue1{animation:skHue1 7s ease-in-out infinite alternate}.sk-hue2{animation:skHue2 7s ease-in-out infinite alternate}.sk-hue3{animation:skHue3 7s ease-in-out infinite alternate}
@keyframes skHue1{0%{stop-color:#B6E85B}50%{stop-color:#FFD166}100%{stop-color:#FF8FB1}}
@keyframes skHue2{0%{stop-color:#4CC285}50%{stop-color:#7BD389}100%{stop-color:#B48CFF}}
@keyframes skHue3{0%{stop-color:#1F9E9E}50%{stop-color:#2E8F57}100%{stop-color:#4B6BDC}}
.sk-spout{transform-box:fill-box;transform-origin:50% 100%;animation:skSpout 2.8s ease-in-out infinite}
@keyframes skSpout{0%,100%{transform:scale(.85);opacity:.55}50%{transform:scale(1.08);opacity:1}}
@media (prefers-reduced-motion:reduce){.sk-sway,.sk-look,.sk-blink,.sk-roll,.sk-roll2,.sk-hue1,.sk-hue2,.sk-hue3,.sk-spout{animation:none}}
.sk-spin{transform-box:fill-box;transform-origin:50% 50%;animation:skSpin 24s linear infinite}
@keyframes skSpin{to{transform:rotate(360deg)}}
.sk-orbit{transform-box:view-box;transform-origin:0 0;animation:skSpin 14s linear infinite}
.sk-tw{transform-box:fill-box;transform-origin:50% 50%;animation:skTw 2.8s ease-in-out infinite}
@keyframes skTw{0%,100%{transform:scale(.2);opacity:0}45%,55%{transform:scale(1);opacity:1}}
.sk-flick{transform-box:fill-box;transform-origin:50% 100%;animation:skFlick 1.1s ease-in-out infinite alternate}
@keyframes skFlick{0%{transform:scale(.92,.86) skewX(-4deg)}50%{transform:scale(1.04,1.08) skewX(3deg)}100%{transform:scale(.97,1) skewX(-2deg)}}
.sk-wave{transform-box:fill-box;transform-origin:50% 100%;animation:skWave 2.6s ease-in-out infinite alternate}
@keyframes skWave{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.sk-ember{animation:skEmber 2.4s ease-out infinite}
@keyframes skEmber{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(4px,-26px);opacity:0}}
.sk-glow{transform-box:fill-box;transform-origin:50% 50%;animation:skGlow 2.4s ease-in-out infinite alternate}
@keyframes skGlow{from{opacity:.55;transform:scale(.9)}to{opacity:1;transform:scale(1.1)}}
.sk-iri1{animation:skIri1 5s ease-in-out infinite alternate}.sk-iri2{animation:skIri2 5s ease-in-out infinite alternate}
@keyframes skIri1{from{stop-color:#11B5A4}to{stop-color:#2C7BE5}}
@keyframes skIri2{from{stop-color:#C9FF7A}to{stop-color:#7CF5D2}}
.sk-aur1{animation:skAur1 6s ease-in-out infinite alternate}.sk-aur2{animation:skAur2 6s ease-in-out infinite alternate}.sk-aur3{animation:skAur3 6s ease-in-out infinite alternate}
@keyframes skAur1{from{stop-color:#7CF5D2}to{stop-color:#8A7CFF}}
@keyframes skAur2{from{stop-color:#8A7CFF}to{stop-color:#FF7CE5}}
@keyframes skAur3{from{stop-color:#FF7CE5}to{stop-color:#7CF5D2}}
@media (prefers-reduced-motion:reduce){.sk-spin,.sk-orbit,.sk-tw,.sk-flick,.sk-wave,.sk-ember,.sk-glow,.sk-iri1,.sk-iri2,.sk-aur1,.sk-aur2,.sk-aur3{animation:none}.sk-tw{opacity:.8}.sk-ember{opacity:0}}
.sk-float{animation:skFloat 3.2s ease-in-out infinite}
@keyframes skFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.sk-candle{animation:skCandle 1.3s ease-in-out infinite alternate}
@keyframes skCandle{0%{opacity:.78}40%{opacity:1}55%{opacity:.86}100%{opacity:1}}
.sk-flap{transform-box:view-box;transform-origin:0 0;animation:skFlap 1.8s ease-in-out infinite alternate}
@keyframes skFlap{from{transform:rotate(-9deg)}to{transform:rotate(7deg)}}
.sk-ale1{animation:skAle1 8s linear infinite}.sk-ale2{animation:skAle2 8s linear infinite}.sk-ale3{animation:skAle3 8s linear infinite}
@keyframes skAle1{0%,100%{stop-color:#FF3D9A}33%{stop-color:#7B61FF}66%{stop-color:#2EC4B6}}
@keyframes skAle2{0%,100%{stop-color:#FF8A1F}33%{stop-color:#FF3D9A}66%{stop-color:#7B61FF}}
@keyframes skAle3{0%,100%{stop-color:#FFD23F}33%{stop-color:#FF8A1F}66%{stop-color:#FF3D9A}}
@media (prefers-reduced-motion:reduce){.sk-float,.sk-candle,.sk-flap,.sk-ale1,.sk-ale2,.sk-ale3{animation:none}}
.sk-sheen{animation:skSheen 5.5s ease-in-out infinite}
@keyframes skSheen{0%,55%{transform:translateX(0)}100%{transform:translateX(175px)}}
@media (prefers-reduced-motion:reduce){.sk-sheen{animation:none;opacity:0}}

/* ===================== 7.6 · Mensajes entre amigos (mensajes.js) ===================== */
/* Conversación en una hoja: burbujas agrupadas (esquinas chicas donde se juntan), día en un chip, frases rápidas
   como chips de asistencia y el campo relleno con el botón de enviar que se llena cuando hay texto. */
html.msopen{overflow:hidden}
#msSheet .mssheet{padding:0;overflow:hidden;gap:0;display:flex;flex-direction:column}
#msSheet.out{opacity:0;transition:opacity var(--m3-effects-fast-d) var(--m3-effects-fast)}
.msh{display:flex;align-items:center;gap:10px;padding:10px 14px 8px 12px;margin:0;box-shadow:0 1px 0 var(--md-outline-variant)}
.msfav{flex:none;line-height:0}
.msfav .sav,.msfav .msav{width:42px;height:42px;font-size:18px}
.mshx{flex:1;min-width:0}
.mshx h2{margin:0;font:var(--t-title-l);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mshx h2:focus{outline:none}
.mshx small{color:var(--md-on-surface-variant);font:var(--t-body-s)}
.mslist{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 14px 12px;display:flex;flex-direction:column;gap:2px}
.mslist .m3load{margin:auto}
.msday{align-self:center;margin:12px 0 6px}
.msday span{display:inline-block;padding:4px 12px;border-radius:var(--r-full);background:var(--md-surface-container-high);color:var(--md-on-surface-variant);font:var(--t-label-m)}
.msday span::first-letter{text-transform:uppercase}
.msrow{display:flex;flex-direction:column;max-width:82%}
.msrow:not(.up){margin-top:6px}
.msrow.mine{align-self:flex-end;align-items:flex-end}
.msrow.their{align-self:flex-start;align-items:flex-start}
.msb{display:block;padding:10px 14px;border:0;border-radius:20px;font:var(--t-body-l);line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;margin:0}
.msrow.mine .msb{background:var(--md-primary);color:var(--md-on-primary)}
.msrow.their .msb{background:var(--md-surface-container-high);color:var(--md-on-surface)}
.msrow.mine.up .msb{border-top-right-radius:6px}.msrow.mine.dn .msb{border-bottom-right-radius:6px}
.msrow.their.up .msb{border-top-left-radius:6px}.msrow.their.dn .msb{border-bottom-left-radius:6px}
.msrow.sending .msb{opacity:.72}
.msrow.error .msb{background:var(--md-error-container);color:var(--md-on-error-container);cursor:pointer}
.msst{display:inline-flex;align-items:center;gap:3px;margin:3px 6px 0;font:var(--t-label-s);color:var(--md-on-surface-variant)}
.msst .ic{width:14px;height:14px}
.msst.err{color:var(--md-error)}
.msrow.fresh .msb{animation:msIn var(--m3-spatial-d) var(--m3-spatial) both}
.msrow.mine.fresh .msb{transform-origin:100% 100%}
.msrow.their.fresh .msb{transform-origin:0 100%}
@keyframes msIn{from{opacity:0;transform:scale(.55)}}
.msolder{align-self:center;margin:4px 0 8px;min-height:36px;padding:0 16px;border:0;border-radius:var(--r-full);background:var(--md-secondary-container);color:var(--md-on-secondary-container);font:var(--t-label-l)}
.msempty{margin:auto;max-width:300px;text-align:center;color:var(--md-on-surface-variant);font:var(--t-body-m)}
.msempty b{display:block;color:var(--md-on-surface);font:var(--t-title-m);margin:10px 0 4px}
.msempty p{margin:0}
.mshi{display:inline-grid;place-items:center;width:84px;height:84px;background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.mshi .ic{width:38px;height:38px}
.msquick{display:flex;gap:6px;overflow-x:auto;padding:8px 14px 4px;scrollbar-width:none;flex:none}
.msquick::-webkit-scrollbar{display:none}
.msq{flex:none;min-height:36px;padding:0 14px;border:1px solid var(--md-outline-variant);border-radius:var(--r-sm);background:var(--md-surface-container-low);color:var(--md-on-surface);font:var(--t-label-l);white-space:nowrap;cursor:pointer;
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-fast-d) var(--m3-effects-fast)}
.msq:active{border-radius:var(--r-full);background:var(--md-secondary-container)}
.mscomp{display:flex;align-items:flex-end;gap:8px;padding:6px 12px calc(12px + env(safe-area-inset-bottom,0px));flex:none}
.msfield{flex:1;min-width:0;display:block}
.msfield textarea{display:block;width:100%;min-height:48px;max-height:120px;resize:none;border:0;border-radius:24px;background:var(--md-surface-container-highest);color:var(--md-on-surface);font:var(--t-body-l);line-height:1.4;padding:12px 18px;outline:none;
  transition:box-shadow var(--m3-effects-fast-d) var(--m3-effects-fast)}
.msfield textarea:focus{box-shadow:inset 0 0 0 2px var(--md-primary)}
.msfield textarea::placeholder{color:var(--md-on-surface-variant)}
.mssend{flex:none;width:48px;height:48px;display:grid;place-items:center;border:0;border-radius:var(--r-full);background:var(--md-surface-container-highest);color:var(--md-on-surface-variant);cursor:pointer;
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects),color var(--m3-effects-d) var(--m3-effects)}
.mssend.on{background:var(--md-primary);color:var(--md-on-primary)}
.mssend:active{border-radius:var(--r-md)}
.mssend .ic{width:22px;height:22px}
/* en Social: botón de mensajes en cada amigo (con su globito) y «Mandar un mensaje» en su perfil */
.msgbtn{position:relative;flex:none;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:var(--r-full);background:var(--md-surface-container-high);color:var(--md-on-surface-variant);cursor:pointer;
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.msgbtn:active{border-radius:var(--r-md)}
.msgbtn .ic{width:20px;height:20px}
.msgbtn.has{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.msgbtn .bdg{top:-4px;right:-4px;box-shadow:0 0 0 2px var(--md-surface-container-low)}
.smallbtn.msgopen{display:inline-flex;align-items:center;gap:6px;margin:10px 0 2px}
.smallbtn.msgopen .ic{width:18px;height:18px}
.nav .ni .bdg{top:-4px;right:8px;box-shadow:0 0 0 2px var(--md-surface-container)}
@media (prefers-reduced-motion:reduce){.msrow.fresh .msb{animation:none}}
.frow .fbtns{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}

/* 7.6.1 · Perfil del amigo: su foto grande al centro, saliendo de la tarjeta, para presumir el disfraz.
   La hoja es transparente arriba: la tarjeta (.fcard) empieza a media foto y la foto se asoma sobre el fondo. */
.fsheet.fdet{background:transparent;box-shadow:none;padding:0;max-height:92vh;pointer-events:none}
.fdet .fcard{pointer-events:auto;position:relative;margin-top:92px;min-height:40vh;padding:106px 18px calc(24px + env(safe-area-inset-bottom,0px));background:var(--md-surface-container-low);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--e3)}
.fdet .fhero{position:absolute;left:50%;top:-92px;width:184px;height:184px;margin-left:-92px;display:grid;place-items:center;isolation:isolate;
  animation:heroIn var(--m3-spatial-slow-d) var(--m3-spatial-slow) .08s both}
.fdet .fhero::before{content:"";position:absolute;inset:18px;z-index:-1;border-radius:50%;background:var(--md-surface-container-low);box-shadow:var(--e2)}
.fdet .fhero.r-epico::before{box-shadow:var(--e2),0 0 0 3px color-mix(in srgb,var(--md-primary) 45%,transparent)}
.fdet .fhero.r-legendario::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--md-carb) 34%,var(--md-surface-container-low)),var(--md-surface-container-low));
  box-shadow:var(--e2),0 0 0 3px color-mix(in srgb,var(--md-carb) 70%,transparent),0 0 28px color-mix(in srgb,var(--md-carb) 55%,transparent)}
@keyframes heroIn{from{transform:translateY(24px) scale(.6);opacity:0}}
.sav.hero{width:168px;height:168px;font-size:60px}
.kav.hero{width:184px;height:184px}
.kav.hero .kph{font-size:48px}
.fdet .xbtn{top:12px;right:12px}
.fdet .fhead{display:grid;justify-items:center;text-align:center;gap:4px;padding:0}
.fdet .fhead h2{font:var(--t-headline-m)}
.fdet .fhead small{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center}
.fchips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:6px}
.fchip{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--r-full);font:var(--t-label-l);background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.fchip.rchip{font-weight:800}
.fdet .msgopen{display:flex;margin:14px auto 2px}
@media (max-width:360px){.fdet .fcard{margin-top:80px;padding-top:94px}.fdet .fhero{top:-80px;width:160px;height:160px;margin-left:-80px}.kav.hero{width:160px;height:160px}.sav.hero{width:144px;height:144px}}

/* 7.6.1 · Fotos de amigos más grandes en Social (con disfraz, el gorro ocupa más: la caja crece y se come el margen) */
.frow .sav,.lrow .sav,.worow .sav{width:50px;height:50px;font-size:20px}
.frow .kav,.lrow .kav,.worow .kav{width:68px;height:68px;margin:-9px}
.rrow .sav{width:40px;height:40px;font-size:16px}
.rrow .kav{width:54px;height:54px;margin:-7px}
.pod .sav.lg{width:68px;height:68px;font-size:26px}
.pod .kav.lg{width:88px;height:88px;margin-bottom:-2px}
.msfav .kav{width:58px;height:58px;margin:-8px}
@media (prefers-reduced-motion:reduce){.fdet .fhero{animation:none}}

/* 7.7 · Fotos de amigos que se tocan: llevan a su perfil (festejo, tabla, retos y conversación) */
.avbtn,button.msfav{flex:none;display:inline-grid;place-items:center;padding:0;border:0;background:none;border-radius:50%;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.avbtn:active,button.msfav:active{transform:scale(.92)}
.avbtn:focus-visible,button.msfav:focus-visible{outline:2px solid var(--md-primary);outline-offset:3px}

/* 7.7 · Gemas que vuelan a la gema de arriba: «+N» en el centro, gemas en arco y «+N» bajo la gema al llegar */
.gfly{position:fixed;inset:0;z-index:210;pointer-events:none}
.gfx,.gfy{position:absolute;display:block;width:0;height:0}
.gfy{left:0;top:0}
.gfg{position:absolute;display:block;width:26px;height:26px;margin:-13px 0 0 -13px;filter:drop-shadow(0 4px 8px rgb(0 0 0/.28))}
.gfg .gemsvg{width:26px;height:26px}
.gfplus{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:10px 20px 10px 12px;border-radius:var(--r-full);white-space:nowrap;
  background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);font:800 28px/1 var(--font-brand);font-variant-numeric:tabular-nums;box-shadow:var(--e4)}
.gfplus .gemsvg{width:30px;height:30px}
.gfplus.s2{font-size:34px;padding:12px 24px 12px 14px}.gfplus.s2 .gemsvg{width:36px;height:36px}
.gfplus.s3{font-size:40px;padding:14px 28px 14px 16px;background:var(--md-tertiary);color:var(--md-on-tertiary)}.gfplus.s3 .gemsvg{width:42px;height:42px}
.gfgot{position:fixed;z-index:210;pointer-events:none;transform:translateX(-50%);padding:4px 10px;border-radius:var(--r-full);background:var(--md-tertiary);color:var(--md-on-tertiary);
  font:var(--t-label-l);font-weight:800;font-variant-numeric:tabular-nums;box-shadow:var(--e2);animation:gfGot 1.5s var(--m3-spatial) forwards}
@keyframes gfGot{0%{opacity:0;transform:translate(-50%,-8px) scale(.5)}14%{opacity:1;transform:translate(-50%,0) scale(1)}72%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,8px) scale(.9)}}

/* 7.7 · El momento de la compra (regalo.js, modo «buy»): tus gemas caen en una forma que brilla, se carga y aparece lo que compraste */
.regalo.buy{--fill:0}
.regalo.buy.r-raro .rgrays{filter:hue-rotate(175deg) saturate(1.25)}
.regalo.buy.r-epico .rgrays{filter:hue-rotate(235deg) saturate(1.35)}
.regalo.buy.r-raro .rgkick{color:#8EC5FF}.regalo.buy.r-epico .rgkick{color:#D9B8FF}
.regalo.buy.legend{background:radial-gradient(120% 85% at 50% 40%,color-mix(in srgb,#B7791F 52%,var(--md-island)) 0%,var(--md-island) 64%)}
.regalo.buy.legend .rgrays{filter:hue-rotate(18deg) saturate(1.7) brightness(1.15)}
.regalo.buy.legend .rgkick{color:#FFE08A}
.bystage{position:relative;width:min(64vw,250px);aspect-ratio:1;margin:12px 0 6px;display:grid;place-items:center}
.bycore{position:absolute;inset:10%;display:grid;place-items:center;transform:scale(calc(.45 + var(--fill) * .55));transition:transform .28s var(--m3-spatial-fast),opacity .35s}
.bycore::before{content:"";position:absolute;inset:-22%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--rc,#FFC93C) 60%,transparent),transparent);opacity:calc(.3 + var(--fill) * .7)}
.bycore i{position:absolute;inset:0;background:linear-gradient(135deg,#FFFBE6 0%,var(--rc,#FFC93C) 55%,color-mix(in srgb,var(--rc,#FFC93C) 60%,#000) 100%);
  -webkit-mask:var(--shape-sunny) center/contain no-repeat;mask:var(--shape-sunny) center/contain no-repeat;animation:bySpin 9s linear infinite}
.regalo.buy.forge .bycore{animation:byShake .08s linear infinite}
.regalo.buy.forge .bycore i{animation-duration:.9s;-webkit-mask-image:var(--shape-verysunny,var(--shape-sunny));mask-image:var(--shape-verysunny,var(--shape-sunny))}
.regalo.buy.reveal .bycore{transform:scale(1.7);opacity:0;animation:none}
@keyframes bySpin{to{transform:rotate(360deg)}}
@keyframes byShake{0%{translate:1.5px 0}33%{translate:-1.5px 1px}66%{translate:1px -1.5px}100%{translate:0 0}}
.byitem{position:relative;z-index:1;display:grid;place-items:center;opacity:0;transform:scale(.25) rotate(-12deg)}
.regalo.buy.reveal .byitem{opacity:1;transform:none;transition:transform var(--m3-spatial-slow-d) var(--m3-spatial-slow),opacity .2s}
.byitem .kav.xl{width:220px;height:220px;margin:0}
.byitem .sav.xl:not(.kav){width:176px;height:176px;font-size:64px}
.regalo.buy.legend .byitem .kav{filter:drop-shadow(0 0 22px rgb(255 201 60/.55))}
.bybig.sh{display:grid;place-items:center;width:150px;height:150px;color:#9FD8FF;filter:drop-shadow(0 8px 24px rgb(127 216 245/.5))}
.bybig.sh .ic{width:140px;height:140px}
.bykb{display:block;width:170px}
.bykb svg{width:100%;height:auto;display:block}
.byprice{display:inline-flex;align-items:center;gap:6px;margin:4px 0 0;padding:6px 14px;border-radius:var(--r-full);background:color-mix(in srgb,var(--md-on-island) 12%,transparent);
  font:var(--t-title-m);font-variant-numeric:tabular-nums;transition:opacity .3s}
.byprice .gemsvg{width:18px;height:18px}
.byrar{margin:8px 0 0;opacity:0;transform:translateY(6px)}
.regalo.buy.reveal .byrar{opacity:1;transform:none;transition:opacity .3s .35s,transform .3s .35s}
.byrar .rchip{font-size:13px;padding:4px 12px}
.bygem{position:absolute;z-index:6;width:26px;height:26px;pointer-events:none}
.bygem .gemsvg{width:26px;height:26px;filter:drop-shadow(0 3px 6px rgb(0 0 0/.35))}
@media (max-width:360px){.byitem .kav.xl{width:180px;height:180px}.bystage{width:min(60vw,210px)}}
@media (prefers-reduced-motion:reduce){.gfgot,.bycore i,.regalo.buy.forge .bycore{animation:none}.byitem,.byrar{transition:none}}

/* 7.7 · Comida con estados claros: verde = del menú; terciario (complemento boho) = comiste otra cosa (y lo que comiste va
   dentro de ese bloque); grupo neutro = «Además del menú» o lo que registraste. Chip del estado en el encabezado. */
.nmh{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.nst{display:inline-flex;align-items:center;gap:4px;padding:3px 10px 3px 6px;border-radius:var(--r-full);font:var(--t-label-m);white-space:nowrap}
.nst .ic{width:16px;height:16px}
.nst.ok{background:var(--md-success-container);color:var(--md-on-success-container)}
.nst.rep{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.nst.log{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.ngrp{border-radius:var(--r-lg);background:var(--md-surface-container-high);padding:2px 12px 2px;margin:4px 0}
.ngrp .nitem{padding:10px 0;border-top-color:color-mix(in srgb,var(--md-outline-variant) 80%,transparent)}
.ngrp .nirow{border-top-color:color-mix(in srgb,var(--md-outline-variant) 80%,transparent)}
.ngl{display:flex;align-items:center;gap:4px;margin:10px 0 0;font:var(--t-label-m);color:var(--md-on-surface-variant);text-transform:uppercase;letter-spacing:.05em}
.ngl .ic{width:16px;height:16px}
.ngl+.nitem{border-top:0}
.ngrp.rep{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);border-radius:var(--r-xl);padding:12px 14px 4px;
  animation:nRepIn var(--m3-spatial-d) var(--m3-spatial)}
@keyframes nRepIn{from{border-radius:var(--r-lg);transform:scale(.97);opacity:.4}}
.ngrp.rep .nitem{color:inherit;border-top-color:color-mix(in srgb,currentColor 18%,transparent)}
.ngrp.rep .nirow{border-top-color:color-mix(in srgb,currentColor 18%,transparent)}
.ngrp.rep .ndel{color:inherit}
.ngrp.rep .nn small,.ngrp.rep .nkk small,.ngrp.rep .ngl{color:color-mix(in srgb,currentColor 72%,transparent)}
.nreph{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.nreph small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nrepb{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 0 52px;font:var(--t-body-s);opacity:.92}
.nrepi{width:40px;height:40px;border-radius:var(--r-full);display:grid;place-items:center;background:var(--md-tertiary);color:var(--md-on-tertiary)}
.nrepi .ic{width:22px;height:22px}
.nreph b{display:block;font:var(--t-title-s)}
.nreph small{font:var(--t-body-s);opacity:.85}
.ngrp.rep .link{color:inherit;font:var(--t-label-l);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;padding:8px 4px}
.nnone{margin:12px 0 8px;font:var(--t-body-m)}
.nadd.pri{background-color:var(--md-tertiary);color:var(--md-on-tertiary)}
/* agregar varios seguidos: lo agregado queda abajo en la «canasta» con «Listo» */
.nctx{margin:-6px 0 10px;font:var(--t-body-s);color:var(--md-on-surface-variant)}
.nfootw{position:sticky;bottom:-14px;z-index:2;background:var(--md-surface-container-low);margin-top:auto}
.nfootw .nfoot{position:static}
.nbask{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 10px 10px 16px;
  border-radius:var(--r-xl);background:var(--md-secondary-container);color:var(--md-on-secondary-container);box-shadow:var(--e3)}
.nbask.bump{animation:nbBump var(--m3-spatial-d) var(--m3-spatial)}
@keyframes nbBump{0%{transform:translateY(18px) scale(.94);opacity:.5}100%{transform:none;opacity:1}}
.nbl{flex:1;min-width:0}
.nbl b{display:block;font:var(--t-title-s)}
.nbch{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:var(--t-body-s);opacity:.85}
.nbch i{font-style:normal}
.nbch i+i::before{content:" · "}
.nbask .smallbtn{margin:0;flex:none;display:inline-flex;align-items:center;gap:4px}
.nbask .smallbtn .ic{width:18px;height:18px}
.nbask .nbundo{background-color:transparent;color:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 40%,transparent)}
@media (prefers-reduced-motion:reduce){.ngrp.rep,.nbask.bump{animation:none}}
/* 7.7 · Con la hoja de gemas o una conversación abierta, los avisos (toast) se ven encima (antes quedaban debajo) */
html.gmopen .toast,html.msopen .toast{z-index:95}

/* ============ 7.8 · Deportes (deportes.js) y Patinaje (patinaje.js, mapa.js) · rehecho alrededor de la isla en 7.9.2 ============ */
/* Negro de la pantalla bloqueada (AMOLED: el negro puro apaga esos píxeles) y el rojo que se lee sobre la isla oscura */
:root{--sk-amoled:#000;--isl-err:var(--md-error-container)}
:root[data-theme="dark"]{--isl-err:var(--md-error)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--isl-err:var(--md-error)}}

/* --- Cambiar de deporte: mantener presionado «Entreno». La isla se vuelve la cápsula de los deportes --- */
.nav button[data-arg="train"]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none}
.nav button.hold .ni{transform:scale(1.14);transition:transform 330ms var(--m3-effects)}
.nav button.hold .ni::before{opacity:1;transform:none}
html.spswon .island{opacity:0;pointer-events:none;transition:opacity var(--m3-effects-fast-d) var(--m3-effects-fast)}
.spsw{position:fixed;left:50%;bottom:calc(98px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:46;height:68px;touch-action:none;-webkit-user-select:none;user-select:none}
.spsw-bg{position:absolute;inset:0;border-radius:var(--r-full);background:var(--md-island);box-shadow:var(--e5),inset 0 0 0 1px var(--md-island-line)}
.spsw-in{position:relative;display:flex;align-items:center;gap:4px;height:100%;padding:0 8px;color:var(--md-on-island)}
.spo{position:relative;z-index:1;display:grid;place-items:center;flex:none;width:52px;height:52px;padding:0;border:0;border-radius:var(--r-full);background-color:transparent;background-image:none;color:inherit;
  transition:color var(--m3-effects-d) var(--m3-effects),transform var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.spo .ic{width:26px;height:26px}
.spo.soon{color:color-mix(in srgb,var(--md-on-island) 42%,transparent)}
.spo.hov{color:var(--md-on-primary-fixed);transform:scale(1.06)}
.spo.soon.hov{color:var(--md-on-island)}
.spo.cur::after{content:"";position:absolute;bottom:3px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:currentColor}
.spo:focus-visible{outline:3px solid var(--md-primary-fixed-dim);outline-offset:2px}
.spsw-ind{position:absolute;left:0;top:8px;width:52px;height:52px;border-radius:var(--r-full);background:var(--md-primary-fixed-dim);
  transition:transform var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects),opacity var(--m3-effects-fast-d) var(--m3-effects-fast)}
.spsw-ind.soon{background:color-mix(in srgb,var(--md-on-island) 16%,transparent)}
.spsw-ind.off{opacity:0}
.spsep{flex:none;width:1px;height:28px;margin:0 4px;background:color-mix(in srgb,var(--md-on-island) 18%,transparent)}
.spsw-lab{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:var(--r-full);white-space:nowrap;pointer-events:none;
  background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);font:var(--t-label-l);box-shadow:var(--e3)}
.spsw.cancel .spsw-lab{background:var(--md-surface-container-highest);color:var(--md-on-surface-variant)}
/* ícono de Entreno en la barra de abajo: cambia de deporte con un giro con resorte */
.nav .ni.swap .ic{animation:niSwap var(--m3-spatial-d) var(--m3-spatial)}
@keyframes niSwap{0%{transform:scale(.4) rotate(-35deg);opacity:0}100%{transform:none;opacity:1}}

/* --- Mapa (mapa.js): el contenedor vive fuera de la vista y se «muda» a su .mapslot --- */
.mapslot{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--md-surface-container)}
.maphost{position:absolute;inset:0}
.maphost .mapgl,.maphost .mapsvg{position:absolute;inset:0}
.maphost .mapsvg{display:grid;place-items:center;background:var(--md-surface-container)}
.maphost.loading::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;background:var(--md-primary);opacity:.85;
  -webkit-mask:var(--shape-softburst) center/contain no-repeat;mask:var(--shape-softburst) center/contain no-repeat;animation:spin 1.1s linear infinite}
.mapattr{position:absolute;right:8px;bottom:6px;z-index:2;margin:0;padding:2px 8px;border-radius:var(--r-full);font:var(--t-label-s);font-size:9.5px;background:color-mix(in srgb,var(--md-surface) 80%,transparent);color:var(--md-on-surface-variant)}
.mapattr a{color:inherit;text-decoration:none}
.maphost.nogl .mapattr{display:none}
.mapwait{display:grid;justify-items:center;gap:6px;color:var(--md-on-surface-variant);font:var(--t-body-s)}
.mapwait .ic{width:30px;height:30px;color:var(--md-primary)}
.mroute{width:100%;height:100%;display:block}
.mroute polyline{fill:none;stroke-linecap:round;stroke-linejoin:round}
.mroute .mrc{stroke:var(--md-surface);stroke-width:7;opacity:.9}
.mroute .mrs polyline{stroke-width:3.6}
.mroute .mra{fill:var(--md-success);stroke:var(--md-surface);stroke-width:2}
.mroute .mrz{fill:var(--md-primary);stroke:var(--md-surface);stroke-width:2}
.medot{width:22px;height:22px;display:grid;place-items:center}
.medot::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:color-mix(in srgb,var(--md-primary) 26%,transparent);animation:mePulse 2.4s var(--m3-effects) infinite}
.medot i{position:relative;width:16px;height:16px;border-radius:50%;background:var(--md-primary);border:3px solid var(--md-surface);box-shadow:var(--e2)}
@keyframes mePulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.3);opacity:0}}

/* --- Patinaje en vivo: el mapa de fondo y la isla al frente (#skStage) --- */
html.skon,html.skon body{overflow:hidden}
html.skon #miniBar{display:none}
html.skon .pill{cursor:pointer}
.skstage{position:fixed;inset:0;z-index:20;background:var(--md-surface-container)}
.skstage[hidden]{display:none}
.skstage .skmap{position:absolute;inset:0;border-radius:0}
.skstage .mapattr{top:calc(env(safe-area-inset-top,0px) + 70px);bottom:auto;right:12px}
.sktop{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 0;pointer-events:none}
.sktop>*{pointer-events:auto}
.skgap{flex:1}
.skfab{flex:none;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:var(--r-full);background-color:var(--md-surface-container-high);color:var(--md-on-surface);box-shadow:var(--e2);
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),transform var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.skfab .ic{width:24px;height:24px}
.skfab:active{border-radius:var(--r-lg);transform:scale(.95)}
.skfab[hidden]{display:none}
#skRc{color:var(--md-primary);animation:satPop var(--m3-spatial-d) var(--m3-spatial)}
.skgps{display:inline-flex;align-items:center;gap:8px;height:40px;margin:0;padding:0 16px 0 14px;border-radius:var(--r-full);white-space:nowrap;
  font:var(--t-label-l);background:var(--md-surface-container-high);color:var(--md-on-surface);box-shadow:var(--e2);transition:background-color var(--m3-effects-d) var(--m3-effects),color var(--m3-effects-d) var(--m3-effects)}
.skgps i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--md-outline)}
.skgps.ok i{background:var(--md-success)}
.skgps.mid i{background:var(--md-warning)}
.skgps.weak i{background:var(--md-error)}
.skgps.wait i{background:var(--md-tertiary);animation:gpsBlink 1.2s var(--m3-effects) infinite}
.skgps.off{background:var(--md-error-container);color:var(--md-on-error-container)}
.skgps.off i{background:var(--md-error)}
@keyframes gpsBlink{50%{opacity:.25}}
@keyframes satPop{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}

/* --- A los lados de la isla: botones del mismo material (bloquear y pausa; en pausa, terminar y seguir) --- */
.isat{position:relative;flex:none;display:flex;align-items:center;justify-content:center;height:60px;min-width:60px;padding:0 17px;border:0;border-radius:var(--r-full);
  background-color:var(--md-island);color:var(--md-on-island);box-shadow:var(--e4),inset 0 0 0 1px var(--md-island-line);
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),background-color var(--m3-effects-d) var(--m3-effects),color var(--m3-effects-d) var(--m3-effects),padding var(--m3-spatial-d) var(--m3-spatial)}
.isat[hidden]{display:none}
.isat .ic{flex:none;width:26px;height:26px}
.isat:active{border-radius:var(--r-lg)}
.isat .ist{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;font:var(--t-label-l);transition:max-width var(--m3-spatial-d) var(--m3-spatial),opacity var(--m3-effects-fast-d) var(--m3-effects-fast),margin var(--m3-spatial-d) var(--m3-spatial)}
.isat.on{color:var(--md-primary-fixed-dim)}
.isat.pri{background-color:var(--md-primary-fixed-dim);color:var(--md-on-primary-fixed)}
.isat.stop{color:var(--isl-err)}
.isat.stop.armed{background-color:var(--md-error);color:var(--md-on-error);animation:armIn var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.isat.born.isl{animation:satL var(--m3-spatial-d) var(--m3-spatial) both}
.isat.born.isr{animation:satR var(--m3-spatial-d) var(--m3-spatial) both}
@keyframes satL{0%{transform:translateX(56px) scale(.4);opacity:0}40%{opacity:1}100%{transform:none;opacity:1}}
@keyframes satR{0%{transform:translateX(-56px) scale(.4);opacity:0}40%{opacity:1}100%{transform:none;opacity:1}}

/* --- La isla mientras patinas: distancia grande y debajo tiempo y velocidad --- */
.pill.trk{padding-right:22px}
.pill.trk .pt{display:grid;gap:4px;line-height:1}
.pill.trk:not(.say) .pt{max-width:210px}
.pill.trk .pv{display:flex;align-items:baseline;gap:3px;font:800 26px/1 var(--font-brand);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pill.trk .pv small{font:var(--t-label-l);opacity:.72}
.pill.trk .pv2{font:var(--t-label-m);font-weight:650;opacity:.74;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* con botones a los lados (2 × 60 px + separaciones) la cápsula cede espacio: nunca se sale de la pantalla */
.island.sat .pill:not(.say) .pt{max-width:clamp(96px,calc(100vw - 252px),170px)}
.island.sat .pill.say .pl{max-width:clamp(96px,calc(100vw - 252px),170px)}
/* preparar: buscando (el anillo gira), listo («Empezar», lleno del color principal) y sin permiso */
.pill.trk.wait .rg{animation:spin 1.2s linear infinite}
.pill.trk.wait .rf{stroke:var(--md-tertiary-fixed-dim)}
.pill.trk.ready{background-color:var(--md-primary-fixed-dim);color:var(--md-on-primary-fixed);overflow:hidden}
.pill.trk.ready .rb{stroke:color-mix(in srgb,var(--md-on-primary-fixed) 22%,transparent)}
.pill.trk.ready .rf{stroke:var(--md-on-primary-fixed)}
.pill.trk.ready .pck,.pill.trk.bad .pck{opacity:1;transform:none}
.pill.trk.ready::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 35%,rgb(255 255 255/.3) 50%,transparent 65%);transform:translateX(-120%);animation:pillShine 3.4s ease-in-out .5s infinite;pointer-events:none}
.pill.trk.bad .rf{stroke:var(--isl-err)}
.pill.trk.bad .pck{color:var(--isl-err)}
/* 3, 2, 1: cada número entra con resorte y el anillo se vacía */
.pill.trk.cd .rf{stroke:var(--md-primary-fixed-dim);transition:stroke-dashoffset .25s linear}
.pill.trk.cd .cdn{font:800 34px/1 var(--font-brand);animation:cdPop var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
@keyframes cdPop{0%{transform:scale(.3);opacity:0}100%{transform:none;opacity:1}}
/* grabando: el anillo avanza con cada km (o hacia tu meta); en pausa, del color de pausa; meta cumplida, verde */
.pill.trk.rec .rf{stroke:var(--md-primary-fixed-dim)}
.pill.trk.rec.pause .rf{stroke:var(--md-warning-container)}
.pill.trk.rec.auto .rgw{animation:autoBeat 1.8s var(--m3-effects) infinite}
.pill.trk.goal .rf{stroke:var(--md-success-bright)}
@keyframes autoBeat{0%,100%{transform:none}50%{transform:scale(.9)}}

/* --- Tarjeta completa (crece desde la isla) y menús de preparar: el material de la isla --- */
.skcard{position:fixed;left:0;right:0;margin:0 auto;width:min(92vw,420px);bottom:calc(98px + 60px + 14px + env(safe-area-inset-bottom,0px));z-index:41;padding:12px 12px 14px;
  border-radius:var(--r-xl);color:var(--md-on-island);background:var(--md-island);box-shadow:var(--e5),inset 0 0 0 1px var(--md-island-line)}
.skcard[hidden]{display:none}
.skcard .cx{display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:var(--r-full);background-color:transparent;color:color-mix(in srgb,var(--md-on-island) 75%,transparent)}
.skcard .cx .ic{width:22px;height:22px}
.skch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 2px 6px}
.skst{display:inline-flex;align-items:center;gap:8px;margin:0;font:var(--t-label-l)}
.skst i{width:10px;height:10px;border-radius:50%;background:var(--isl-err);animation:livePulse 1.6s var(--m3-effects) infinite}
.skst.p i{background:var(--md-warning-container);animation:none}
.sknow{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:0 0 12px}
.sknow b{font:800 64px/1 var(--font-brand);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sknow small{font:var(--t-title-m);opacity:.72}
.skgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.skgrid div{display:grid;gap:3px;padding:10px 4px;text-align:center;border-radius:var(--r-sm);background:color-mix(in srgb,var(--md-on-island) 9%,transparent)}
.skgrid div:nth-child(1){border-top-left-radius:var(--r-lgi)}
.skgrid div:nth-child(3){border-top-right-radius:var(--r-lgi)}
.skgrid div:nth-child(4){border-bottom-left-radius:var(--r-lgi)}
.skgrid div:nth-child(6){border-bottom-right-radius:var(--r-lgi)}
.skgrid b{font:var(--t-title-l);font-size:20px;font-variant-numeric:tabular-nums}
.skgrid small{font:var(--t-label-s);opacity:.72}
.skgoal{margin:12px 4px 0;color:var(--md-primary-fixed-dim)}
.skgoal .barlabel{color:var(--md-on-island);opacity:.8}
.skacts{display:flex;gap:3px;margin-top:12px}
.skacts .cact{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:8px 4px;border-radius:var(--r-sm);
  background-color:color-mix(in srgb,var(--md-on-island) 12%,transparent);color:var(--md-on-island);font:var(--t-label-m)}
.skacts .cact:first-child{border-top-left-radius:var(--r-xl);border-bottom-left-radius:var(--r-xl)}
.skacts .cact:last-child{border-top-right-radius:var(--r-xl);border-bottom-right-radius:var(--r-xl)}
.skacts .cact .ic{width:24px;height:24px}
.skacts .cact.end{color:var(--isl-err)}
.skacts .cact.end.armed{background-color:var(--md-error);color:var(--md-on-error);animation:armIn var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.skmenu{padding:18px 12px 12px}
.skmenu>.cx{position:absolute;right:8px;top:8px}
.skmt{margin:0 44px 12px 6px;font:var(--t-title-m);font-size:16.5px}
.skmo{display:grid;gap:3px}
.skmo button{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;padding:10px 14px 10px 10px;border:0;border-radius:var(--r-sm);
  background-color:color-mix(in srgb,var(--md-on-island) 9%,transparent);color:var(--md-on-island);transition:background-color var(--m3-effects-d) var(--m3-effects),border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.skmo button:first-child{border-top-left-radius:var(--r-xl);border-top-right-radius:var(--r-xl)}
.skmo button:last-child{border-bottom-left-radius:var(--r-xl);border-bottom-right-radius:var(--r-xl)}
.skmo button.on{background-color:var(--md-primary-fixed-dim);color:var(--md-on-primary-fixed)}
.skmo .smi{width:40px;height:40px;display:grid;place-items:center;background:color-mix(in srgb,currentColor 14%,transparent);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.skmo .smi .ic{width:22px;height:22px}
.skmo b{display:block;font:var(--t-title-s);font-size:15px}
.skmo small{display:block;font:var(--t-body-s);opacity:.78}
.skmo button>.ic{width:22px;height:22px}
.skmg{display:flex;flex-wrap:wrap;gap:6px;margin:0 4px}
.skmg button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border:0;border-radius:var(--r-sm);background-color:color-mix(in srgb,var(--md-on-island) 10%,transparent);color:var(--md-on-island);font:var(--t-label-l);
  transition:background-color var(--m3-effects-d) var(--m3-effects),border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast),padding var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.skmg button.on{background-color:var(--md-primary-fixed-dim);color:var(--md-on-primary-fixed);border-radius:var(--r-md);padding-left:10px}
.skmg button .ic{width:18px;height:18px}
.skmn{margin:12px 6px 2px;font:var(--t-body-s);opacity:.72}

/* --- Pantalla bloqueada (AMOLED): negro puro, la silueta de tu ruta en gris y la isla tenue --- */
/* ojo: la clase de <html> NO puede llamarse igual que el panel (.sklock): se le aplicarían sus estilos a toda la página */
html.skbloq .island,html.skbloq .nav,html.skbloq .toast{visibility:hidden}
.sklock{position:fixed;inset:0;z-index:120;background:var(--sk-amoled);opacity:0;touch-action:none;-webkit-user-select:none;user-select:none;transition:opacity var(--m3-effects-slow-d) var(--m3-effects-slow);
  --amo-1:color-mix(in srgb,var(--md-on-island) 15%,var(--sk-amoled));--amo-2:color-mix(in srgb,var(--md-on-island) 30%,var(--sk-amoled));--amo-3:color-mix(in srgb,var(--md-on-island) 50%,var(--sk-amoled));--amo-4:color-mix(in srgb,var(--md-on-island) 68%,var(--sk-amoled));color:var(--amo-4)}
.sklock.show{opacity:1}
.sklock[hidden]{display:none}
.sklk-in{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto auto;justify-items:center;align-items:center;gap:16px;padding:calc(env(safe-area-inset-top,0px) + 28px) 24px calc(env(safe-area-inset-bottom,0px) + 36px);transition:translate 3s var(--m3-effects-slow)}
.sklk-t{display:inline-flex;align-items:center;gap:8px;margin:0;font:var(--t-label-l);color:var(--amo-2)}
.sklk-t .ic{width:18px;height:18px}
.sklk-r{width:min(76vw,340px);aspect-ratio:1}
.sklk-r svg{display:block;width:100%;height:100%;overflow:visible}
.sklk-r polyline{fill:none;stroke:var(--amo-1);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.sklk-r .a{fill:var(--amo-1)}
.sklk-r .me{fill:var(--amo-3)}
.sklk-p{position:relative;display:flex;align-items:center;height:64px;padding:0 24px 0 9px;border:0;border-radius:var(--r-full);background-color:var(--sk-amoled);background-image:none;color:var(--amo-4);box-shadow:inset 0 0 0 1px var(--amo-1);touch-action:none}
.sklk-p:focus-visible{outline:2px solid var(--amo-3);outline-offset:4px}
.sklk-p .rgw{display:grid;place-items:center;width:46px;height:46px}
.sklk-p .rg{width:46px;height:46px}
.sklk-p .rb{fill:none;stroke:var(--amo-1);stroke-width:4}
.sklk-p .rf{fill:none;stroke:var(--amo-3);stroke-width:4;stroke-linecap:round;stroke-dasharray:81.68}
.sklk-p .pt{display:grid;gap:4px;margin-left:12px;text-align:left}
.sklk-p .pv{display:flex;align-items:baseline;gap:3px;font:800 26px/1 var(--font-brand);font-variant-numeric:tabular-nums}
.sklk-p .pv small{font:var(--t-label-l);opacity:.8}
.sklk-p .pv2{font:var(--t-label-m);color:var(--amo-3);font-variant-numeric:tabular-nums}
.sklk-h{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sklk-h rect{fill:none;stroke:var(--amo-4);stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round}
.sklk-p.holding{box-shadow:inset 0 0 0 1px var(--amo-2)}
.sklk-p.ready{color:var(--md-on-island);box-shadow:inset 0 0 0 1px var(--amo-3)}
.sklk-n{margin:0;font:var(--t-label-m);color:var(--amo-2)}

/* --- Inicio de Patinaje (como Gimnasio): tira de la semana, tarjeta principal, antes de rodar, marcas y salidas --- */
.hero.skate::before{-webkit-mask-image:var(--shape-softburst);mask-image:var(--shape-softburst)}
.hero.skate::after{-webkit-mask-image:var(--shape-flower);mask-image:var(--shape-flower)}
.skstrip .dsel{cursor:default}
.skstrip .dsel:active{transform:none}
.skrecg{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;margin-top:10px}
.skrec{display:grid;gap:2px;text-align:left;padding:12px 14px;border:0;border-radius:var(--r-sm);background-color:var(--md-surface-container-high);color:var(--md-on-surface);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.skrec:nth-child(1){border-top-left-radius:var(--r-xl)}
.skrec:nth-child(2){border-top-right-radius:var(--r-xl)}
.skrec:nth-last-child(1){border-bottom-right-radius:var(--r-xl)}
.skrec:nth-last-child(2):nth-child(odd),.skrec:nth-last-child(1):nth-child(odd){border-bottom-left-radius:var(--r-xl)}
.skrec:active{border-radius:var(--r-xl)}
.skrec small{font:var(--t-label-m);color:var(--md-on-surface-variant)}
.skrec b{font:var(--t-title-l);font-variant-numeric:tabular-nums}
.skrides{margin:18px 0 8px}
.skhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 8px}
.skhead h3{margin:0;font:var(--t-title-l)}
.skhead .link{display:inline-flex;align-items:center;gap:6px}
.skhead .link .ic{width:20px;height:20px}
.sklist{display:grid;gap:3px}
.skitem{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px 10px 10px;border:0;border-radius:var(--r-sm);text-align:left;background-color:var(--md-surface-container-low);color:var(--md-on-surface);
  transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.skitem:first-child{border-top-left-radius:var(--r-xl);border-top-right-radius:var(--r-xl)}
.skitem:last-child{border-bottom-left-radius:var(--r-xl);border-bottom-right-radius:var(--r-xl)}
.skitem:active{border-radius:var(--r-lg)}
.skitem>.ic{flex:none;width:22px;height:22px;color:var(--md-on-surface-variant)}
.skth{flex:none;width:64px;height:64px;border-radius:var(--r-lg);overflow:hidden;background:var(--md-surface-container-highest)}
.skit{flex:1;min-width:0;display:grid;gap:2px}
.skit b{font:var(--t-title-s);font-size:15px}
.skit small{color:var(--md-on-surface-variant);font:var(--t-body-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skis{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:2px;font:var(--t-body-s);color:var(--md-on-surface-variant)}
.skis i{font-style:normal}
.skis b{color:var(--md-on-surface);font:var(--t-label-l);font-variant-numeric:tabular-nums}
.skempty{display:grid;justify-items:center;gap:4px;padding:22px 18px;text-align:center;border-radius:var(--r-xl);background:var(--md-surface-container-low)}
.skempty .reqicon{margin:0 0 6px}
.skempty b{font:var(--t-title-l)}
.skempty p{margin:0;font:var(--t-body-m);color:var(--md-on-surface-variant)}

/* --- Resumen (la hoja de Entreno): mapa, números, récords, tiempos por km y velocidad --- */
.sksd{margin:-2px 2px 12px;font:var(--t-body-m);color:var(--md-on-surface-variant)}
.skmaps{height:220px;margin:0 0 4px}
.skstats{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.skstats div{display:grid;gap:2px;padding:10px 4px;text-align:center;border-radius:var(--r-sm);background:var(--md-surface-container-high)}
.skstats div:first-child{border-radius:var(--r-lg) var(--r-sm) var(--r-sm) var(--r-lg)}
.skstats div:last-child{border-radius:var(--r-sm) var(--r-lg) var(--r-lg) var(--r-sm)}
.skstats b{font:var(--t-title-m);font-size:17px;font-variant-numeric:tabular-nums}
.skstats small{font:var(--t-label-s);color:var(--md-on-surface-variant)}
.skrecnew{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.skrchip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:var(--r-sm);background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);font:var(--t-label-l);font-size:13.5px}
.skrchip .ic{width:18px;height:18px}
.skh{font:var(--t-title-m);margin:18px 2px 8px}
.sksplits{display:grid;gap:6px}
.sksplits div{display:grid;grid-template-columns:22px 1fr auto auto;gap:10px;align-items:center;font:var(--t-body-m)}
.sksplits span{color:var(--md-on-surface-variant);text-align:right;font-variant-numeric:tabular-nums}
.sksplits i{height:12px;width:calc(var(--w) * 100%);min-width:8px;border-radius:var(--r-full);background:color-mix(in srgb,var(--md-primary) 40%,var(--md-surface-container-high));transform-origin:left;animation:fill var(--m3-spatial-slow-d) var(--m3-spatial-slow) both}
.sksplits .best i{background:var(--md-primary)}
.sksplits b{font-variant-numeric:tabular-nums}
.sksplits small{color:var(--md-on-surface-variant);font:var(--t-label-m)}
.skchart{border-radius:var(--r-lg);background:var(--md-surface-container-high);padding:10px 10px 6px}
.skchart svg{display:block;width:100%;height:90px}
.skchart p{display:flex;justify-content:space-between;margin:4px 0 0;font:var(--t-label-s);color:var(--md-on-surface-variant)}
#sheet .trow1 .tb .ic{width:22px;height:22px}

@media (prefers-reduced-motion:reduce){
  .spsw-bg,.spo,.spsw-ind,.isat,.isat .ist,.sklk-in,.nav button.hold .ni{transition:none}
  .isat.born.isl,.isat.born.isr,.pill.trk.wait .rg,.pill.trk.cd .cdn,.pill.trk.rec.auto .rgw,.pill.trk.ready::after,.skst i,#skRc,.medot::before,.sksplits i,.nav .ni.swap .ic,.maphost.loading::after,.skgps.wait i{animation:none}
}

/* ============ 8.3 · Motor 2 (periodo.js): bloque del ciclo, ajuste de la semana, chequeo antes de entrenar, técnica y resultados ============ */
/* chip del bloque en el encabezado del día (chip de asistencia tonal, sobre el color del encabezado) */
.blkchip{display:inline-flex;align-items:center;gap:6px;min-height:32px;margin:8px 0 0;padding:0 14px 0 10px;border:0;border-radius:var(--r-sm);font:var(--t-label-l);
  background:color-mix(in srgb,var(--hero-on) 16%,transparent);color:var(--hero-on);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.blkchip .ic{width:18px;height:18px}
.blkchip:active{border-radius:var(--r-xs)}
/* la hoja del ciclo: 12 segmentos por bloque (acumulación, intensidad, descarga, mejores marcas) y la semana actual */
.cytrack{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin:4px 0 6px}
.cytrack i{height:14px;border-radius:var(--r-xs);background:var(--blk,var(--md-surface-container-highest));opacity:.45;transition:opacity var(--m3-effects-d) var(--m3-effects)}
.cytrack i:first-child{border-radius:var(--r-full) var(--r-xs) var(--r-xs) var(--r-full)}
.cytrack i:last-child{border-radius:var(--r-xs) var(--r-full) var(--r-full) var(--r-xs)}
.cytrack i.past{opacity:.8}
.cytrack i.now{opacity:1;height:22px;margin-top:-4px;border-radius:var(--r-sm);box-shadow:0 0 0 2px var(--md-surface-container-low),0 0 0 4px var(--blk);animation:cyNow 1.6s var(--m3-effects) 2}
@keyframes cyNow{50%{transform:scaleY(1.15)}}
.k-acum{--blk:var(--md-secondary);--blkc:var(--md-secondary-container);--onblkc:var(--md-on-secondary-container)}
.k-int{--blk:var(--md-primary);--blkc:var(--md-primary-container);--onblkc:var(--md-on-primary-container)}
.k-desc{--blk:var(--md-outline);--blkc:var(--md-surface-container-highest);--onblkc:var(--md-on-surface)}
.k-real{--blk:var(--md-tertiary);--blkc:var(--md-tertiary-container);--onblkc:var(--md-on-tertiary-container)}
.cyaxis{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin:0 0 12px;font:var(--t-label-s);color:var(--md-on-surface-variant);text-align:center}
.cynow{padding:12px 14px;border-radius:var(--r-lg);background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.cynow b{font:var(--t-title-s)}
.cynow p{margin:4px 0 0;font:var(--t-body-m)}
.cylist{list-style:none;margin:12px 0;padding:0;display:grid;gap:3px}
.cylist li{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:12px;border-radius:var(--r-sm);background:var(--md-surface-container)}
.cylist li:first-child{border-radius:var(--r-lg) var(--r-lg) var(--r-sm) var(--r-sm)}
.cylist li:last-child{border-radius:var(--r-sm) var(--r-sm) var(--r-lg) var(--r-lg)}
.cylist li.cur{background:var(--blkc);color:var(--onblkc)}
.cylist .cyi{width:40px;height:40px;display:grid;place-items:center;color:var(--onblkc);background:var(--blkc);-webkit-mask:var(--shape-cookie9) center/contain no-repeat;mask:var(--shape-cookie9) center/contain no-repeat}
.cylist li.cur .cyi{background:var(--blk);color:var(--md-surface)}
.cylist .cyi .ic{width:20px;height:20px}
.cylist b{font:var(--t-title-s)}
.cylist small{display:block;font:var(--t-label-m);opacity:.8}
.cylist p{margin:4px 0 0;font:var(--t-body-s)}
/* «Antes de empezar» con bloques: lo que toca esta semana */
.phase.blk p b{font-weight:700}
.phase.blk .link{margin-top:6px}
/* ajuste de la semana (series a la medida): lista en segmentos dentro de la tarjeta */
.volcard{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.volcard .cci{color:var(--md-on-secondary)}
.volcard .cci::before{background:var(--md-secondary)}
.vollist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:3px}
.vollist li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:10px 12px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--md-on-secondary-container) 8%,transparent)}
.vollist li:first-child{border-radius:var(--r-md) var(--r-md) var(--r-sm) var(--r-sm)}
.vollist li:last-child{border-radius:var(--r-sm) var(--r-sm) var(--r-md) var(--r-md)}
.vollist li:only-child{border-radius:var(--r-md)}
.vollist .vi{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-full);background:var(--md-secondary);color:var(--md-on-secondary)}
.vollist li.dn .vi{background:var(--md-tertiary);color:var(--md-on-tertiary)}
.vollist .vi .ic{width:18px;height:18px}
.vollist b{display:block;font:var(--t-title-s)}
.vollist small{display:block;font:var(--t-body-s);opacity:.85}
.volcard .dlwhy{margin-top:8px}
.volcard .dlwhy summary{cursor:pointer;font:var(--t-label-l);list-style:none;display:inline-flex;align-items:center;min-height:32px}
.volcard .dlwhy summary::-webkit-details-marker{display:none}
.volcard .dlwhy p{margin-top:4px;font:var(--t-body-s);opacity:.9}
/* chequeo antes de entrenar, dentro de la tarjeta del Coach en vivo: 4 grupos de botones conectados (material de la isla) */
.coach .ckwrap{grid-column:1/-1;min-width:0}
.coach .cchk{margin-top:4px;display:grid;gap:10px}
.coach .ckrow{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:8px;width:100%}
.coach .cklab{display:inline-flex;align-items:center;gap:6px;font:var(--t-label-l);color:color-mix(in srgb,var(--md-on-island) 85%,transparent)}
.coach .cklab .ic{width:18px;height:18px}
.coach .cacts.rdyg{display:grid;gap:3px;margin:0;width:100%;min-width:0;justify-self:stretch}
.coach .cacts.rdyg .cact{width:100%;min-width:0;justify-content:center;min-height:40px;padding:0 6px;border-radius:var(--r-sm);font:var(--t-label-l);background-color:color-mix(in srgb,var(--md-on-island) 12%,transparent);color:var(--md-on-island);transition:background-color var(--m3-effects-fast-d) var(--m3-effects-fast),border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.coach .cacts.rdyg .cact:first-child{border-radius:var(--r-full) var(--r-sm) var(--r-sm) var(--r-full)}
.coach .cacts.rdyg .cact:last-child{border-radius:var(--r-sm) var(--r-full) var(--r-full) var(--r-sm)}
.coach .cacts.rdyg .cact.on{background-color:var(--ck,var(--md-primary-fixed-dim));color:var(--onck,var(--md-on-primary-fixed));border-radius:var(--r-md)}
.coach .ckzones{display:flex;flex-wrap:wrap;gap:6px;padding-left:96px;animation:m3In var(--m3-spatial-d) var(--m3-spatial)}
.coach .ckzones .chip{border:0;cursor:pointer;min-height:32px;background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-on-island) 40%,transparent);color:var(--md-on-island)}
.coach .ckzones .chip.on{background:color-mix(in srgb,var(--md-on-island) 18%,transparent);box-shadow:none}
.coach .ckzones .chip .ic{width:16px;height:16px}
.coach .cchk>.cacts{margin-top:4px}
/* técnica avanzada en la última serie: chip tonal debajo de las series */
.techchip{display:inline-flex;align-items:center;gap:6px;min-height:32px;margin:8px 0 0;padding:0 14px 0 10px;border:0;border-radius:var(--r-sm);font:var(--t-label-l);
  background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);transition:border-radius var(--m3-spatial-fast-d) var(--m3-spatial-fast)}
.techchip .ic{width:18px;height:18px}
.techchip:active{border-radius:var(--r-xs)}
/* tus resultados (Historial): anillo con la calificación y barras con onda */
.card.results .rshead{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.card.results h3{margin:0 0 2px}
.rsring{--p:0;position:relative;width:84px;height:84px;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:conic-gradient(var(--md-primary) calc(var(--p)*1%),var(--md-surface-container-highest) 0)}
.rsring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--md-surface-container-low)}
.rsring b,.rsring small{position:relative}
.rsring b{font:var(--t-headline-s);font-weight:800;line-height:1}
.rsring small{font:var(--t-label-s);color:var(--md-on-surface-variant)}
.rsbar{display:grid;grid-template-columns:116px 1fr 32px;gap:10px;align-items:center;margin-top:10px}
.rsl{display:inline-flex;align-items:center;gap:6px;font:var(--t-label-l)}
.rsl .ic{width:18px;height:18px;color:var(--md-primary)}
.rsv{height:10px;border-radius:var(--r-full);background:var(--md-surface-container-highest);overflow:hidden}
.rsv i{display:block;height:100%;border-radius:var(--r-full);background:var(--md-primary);transform-origin:left;animation:rsGrow var(--m3-spatial-slow-d,.8s) var(--m3-spatial-slow,ease) both}
@keyframes rsGrow{from{transform:scaleX(0)}}
.rsbar b{font:var(--t-title-s);text-align:right}
.rsna{grid-column:2/4;font:var(--t-body-s);color:var(--md-on-surface-variant)}
.rstxt{margin:12px 0 0;padding-left:18px;font:var(--t-body-s);color:var(--md-on-surface-variant)}
.card.results .dlwhy{margin-top:8px}
.card.results .dlwhy summary{cursor:pointer;font:var(--t-label-l);min-height:32px}
.card.results .dlwhy p{font:var(--t-body-s);color:var(--md-on-surface-variant)}
@media (prefers-reduced-motion:reduce){
  .cytrack i.now,.rsv i,.coach .ckzones{animation:none}
  .blkchip,.techchip,.coach .cacts.rdyg .cact{transition:none}
}