/* ============================================================================
   Heracles — sistema de diseño (claro)
   Referencia: iOS light. Jerarquía por tamaño y peso, no por cajas.
   Ritmo de 4 pt, números tabulares, una sola familia tipográfica.

   La paleta NO es la oscura invertida: sobre blanco, los verdes y cianes
   luminosos pierden todo el contraste, así que bajan de luminosidad y suben
   de saturación. El naranja necesita dos versiones —una para rellenos y otra,
   más oscura, para texto— porque el mismo tono no supera el contraste en ambos.
   ========================================================================= */

:root{
  /* Superficies — fondo agrupado gris, tarjetas blancas, como los ajustes de iOS */
  --bg:#F2F2F7;
  --card:#FFFFFF;
  --card-2:#EFEFF4;
  --fill:rgba(118,118,128,.12);
  --sep:rgba(60,60,67,.13);

  /* Texto — opacidades del sistema iOS en claro */
  --t1:#000;
  --t2:rgba(60,60,67,.60);
  --t3:rgba(60,60,67,.32);

  /* Anillos: más oscuros y saturados que en la versión nocturna */
  --r1a:#F5194B; --r1b:#FF6B8A;   /* constancia */
  --r2a:#1DA33F; --r2b:#4FCE6D;   /* volumen    */
  --r3a:#0083B0; --r3b:#22BEE4;   /* progreso   */

  --accent:#F07300;        /* rellenos, marcas, gráficas */
  --accent-text:#B45309;   /* texto e iconos sobre blanco: 4,8:1 de contraste */
  --ok:#1DA33F; --warn:#B7791F; --bad:#D70015;

  --r-card:22px;
  --r-ctl:14px;
  --ease:cubic-bezier(.32,.72,0,1);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--t1);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',
    'Segoe UI',Roboto,sans-serif;
  font-size:17px;line-height:1.29;letter-spacing:-.022em;
  overscroll-behavior-y:none;-webkit-font-smoothing:antialiased;
}
.hidden{display:none!important}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;
  letter-spacing:inherit}
input{font:inherit;letter-spacing:inherit}

/* Números siempre tabulares: si bailan de ancho al actualizarse, la interfaz
   se siente inestable justo en el dato que más se mira. */
.num,.val,.vl,.ring-v,.hero-n{font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1}

/* ------------------------------------------------------------------ escala */
.large-title{font-size:34px;font-weight:700;letter-spacing:-.037em;line-height:1.1}
.title-1{font-size:28px;font-weight:700;letter-spacing:-.033em}
.title-3{font-size:20px;font-weight:640;letter-spacing:-.026em}
.headline{font-size:17px;font-weight:640;letter-spacing:-.022em}
.body{font-size:17px;letter-spacing:-.022em}
.callout{font-size:16px;letter-spacing:-.02em}
.subhead{font-size:15px;letter-spacing:-.016em}
.footnote{font-size:13px;letter-spacing:-.006em;color:var(--t2);line-height:1.4}
.caption{font-size:12px;letter-spacing:0;color:var(--t3);line-height:1.35}

.section-title{font-size:22px;font-weight:700;letter-spacing:-.028em;margin:36px 0 12px}
.section-title:first-child{margin-top:0}
/* Solo la primera letra: `capitalize` daría «Lunes, 13 De Julio». */
.cap-first::first-letter{text-transform:uppercase}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--t3)}

/* ================================================================== LOGIN */
.login{min-height:100dvh;display:grid;place-items:center;padding:32px;
  background:var(--card)}
.login-card{width:100%;max-width:300px;text-align:center}
/* El logo ya trae su propio fondo oscuro, así que la máscara redondeada basta:
   nada de degradado detrás, que competiría con la marca. */
.mark{width:78px;height:78px;margin:0 auto 20px;border-radius:20px;display:block;
  object-fit:cover;box-shadow:0 8px 22px rgba(0,0,0,.16)}
.login h1{font-size:26px;font-weight:700;letter-spacing:-.03em}
.login p{color:var(--t2);font-size:15px;margin:6px 0 28px}
.login input{width:100%;padding:15px 16px;background:var(--card-2);border:none;
  border-radius:var(--r-ctl);color:var(--t1);margin-bottom:10px;text-align:center}
.login input::placeholder{color:var(--t3)}
.login button{width:100%;padding:15px;background:var(--t1);color:#fff;
  border-radius:var(--r-ctl);font-weight:640}
.err{color:var(--bad);font-size:13px;margin-top:14px;min-height:18px}

/* ==================================================================== APP */
.app{min-height:100dvh;display:flex;flex-direction:column}
main{flex:1;padding:8px 20px calc(108px + env(safe-area-inset-bottom));
  max-width:680px;margin:0 auto;width:100%}

.nav-head{padding:14px 0 6px}
.nav-head .large-title{margin-bottom:2px}
.nav-head .sub{color:var(--t2);font-size:15px}

.tabbar{position:fixed;bottom:0;left:0;right:0;display:flex;z-index:50;
  background:rgba(249,249,251,.82);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  backdrop-filter:saturate(180%) blur(24px);
  border-top:.5px solid rgba(60,60,67,.2);
  padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{flex:1;padding:9px 2px 7px;font-size:10px;font-weight:500;
  letter-spacing:-.002em;color:var(--t3);display:flex;flex-direction:column;
  align-items:center;gap:4px;transition:color .18s}
.tabbar button svg{width:25px;height:25px;fill:currentColor}
.tabbar button.active{color:var(--accent-text)}

/* ================================================================ ANILLOS */
.rings-wrap{display:flex;flex-direction:column;align-items:center;padding:2px 0 0}
.rings{width:min(206px,54vw);aspect-ratio:1;display:block;overflow:visible}
.ring-bg{fill:none;stroke-linecap:round;opacity:.15}
.ring-fg{fill:none;stroke-linecap:round}   /* animado desde JS, ver fillRings */

.ring-legend{width:100%;margin-top:14px;display:flex;flex-direction:column;gap:0}
.leg{display:flex;align-items:center;gap:13px;padding:9px 2px;
  border-bottom:.5px solid var(--sep);cursor:pointer;
  transition:opacity .18s}
.leg:active{opacity:.5}
.leg .chev{margin-left:-4px}
.leg:last-child{border-bottom:none}
.leg-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.leg-name{font-size:15px;font-weight:590;letter-spacing:-.016em;flex:1}
.leg-val{font-size:17px;font-weight:640;letter-spacing:-.022em}
.leg-val small{font-size:13px;font-weight:500;color:var(--t3);margin-left:1px}

/* ---------------------------------------------------------------- tarjetas */
.card{background:var(--card);border-radius:var(--r-card);padding:18px 20px;
  margin-bottom:12px}
.card.tap{transition:transform .2s var(--ease),background .2s}
.card.tap:active{transform:scale(.975);background:var(--card-2)}

/* --------------------------------------------------------------- destacado */
.hero{display:flex;align-items:baseline;gap:8px;margin-top:2px}
.hero-n{font-size:44px;font-weight:700;letter-spacing:-.042em;line-height:1}
.hero-u{font-size:15px;color:var(--t2);font-weight:500}

.streak{display:flex;align-items:center;gap:15px}
.streak-badge{width:52px;height:52px;border-radius:16px;flex-shrink:0;display:grid;
  place-items:center;font-size:25px;
  background:linear-gradient(145deg,rgba(255,159,10,.20),rgba(245,25,75,.14))}
.streak-badge.off{background:var(--fill);filter:grayscale(1) opacity(.55)}

/* --------------------------------------------------------------- tira días */
.strip{display:flex;gap:6px;margin-top:4px}
.strip-day{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px}
.strip-dow{font-size:11px;font-weight:600;color:var(--t3);letter-spacing:.02em}
.strip-dot{width:100%;aspect-ratio:1;min-width:0;max-width:38px;border-radius:11px;
  background:var(--fill);display:grid;place-items:center;font-size:9px;
  font-weight:700;color:var(--t3);letter-spacing:-.01em;
  transition:transform .3s var(--ease)}
.strip-dot.done{background:linear-gradient(160deg,var(--r2b),var(--r2a));color:#fff}
.strip-dot.today{box-shadow:0 0 0 2px var(--accent)}

/* ------------------------------------------------------------------- lista */
.list{background:var(--card);border-radius:var(--r-card);overflow:hidden;
  margin-bottom:12px}
.row{display:flex;align-items:center;gap:13px;padding:14px 18px;
  border-bottom:.5px solid var(--sep);transition:background .18s}
.row:last-child{border-bottom:none}
.row.tap:active{background:var(--card-2)}
.row-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:15px;flex-shrink:0}
.row-main{flex:1;min-width:0}
.row-title{font-size:16px;font-weight:560;letter-spacing:-.02em}
.row-sub{font-size:13px;color:var(--t2);margin-top:2px;letter-spacing:-.006em}
.row-val{font-size:16px;font-weight:620;letter-spacing:-.02em;color:var(--t2)}
.chev{color:var(--t3);font-size:15px;flex-shrink:0}

/* ==================================================== SESIÓN / EJERCICIOS */
.ex-card{background:var(--card);border-radius:var(--r-card);margin-bottom:12px;
  overflow:hidden}
.ex-head{display:flex;align-items:center;gap:13px;padding:16px 18px 13px}
.ex-fig{width:54px;height:54px;border-radius:15px;background:var(--card-2);
  flex-shrink:0;overflow:hidden}
.ex-fig svg{width:100%;height:100%;display:block}
.ex-info{flex:1;min-width:0}
.ex-name{font-size:16px;font-weight:620;letter-spacing:-.021em;line-height:1.25}
.ex-meta{font-size:12.5px;color:var(--t2);margin-top:3px;letter-spacing:-.004em}
.ex-done{font-size:15px;font-weight:640;color:var(--ok);flex-shrink:0}

/* Ejercicio completado: se pliega a la cabecera con su resumen. */
.ex-card.collapsed .sets,
.ex-card.collapsed .note{display:none}
.ex-card.collapsed{opacity:.66;transition:opacity .3s}
.ex-card.collapsed .ex-head{padding-bottom:16px}

.set-row{display:flex;align-items:center;gap:9px;padding:9px 18px;
  border-top:.5px solid var(--sep)}
.set-n{width:17px;font-size:13px;color:var(--t3);font-weight:600}
.stepper{display:flex;align-items:center;background:var(--card-2);
  border-radius:11px;flex:1;overflow:hidden}
.stepper button{width:38px;height:42px;font-size:20px;font-weight:400;color:var(--t2);
  transition:background .12s}
.stepper button:active{background:rgba(0,0,0,.07);color:var(--t1)}
.stepper .val{flex:1;text-align:center;font-weight:620;font-size:16px;
  letter-spacing:-.022em;line-height:1.05;cursor:pointer;
  border-radius:7px;transition:background .15s}
.stepper .val:active{background:rgba(0,0,0,.06)}
.stepper .unit{display:block;font-size:9.5px;color:var(--t3);font-weight:500;
  letter-spacing:.01em;margin-top:1px}
.set-done{width:46px;height:42px;border-radius:11px;background:var(--card-2);
  color:var(--t3);font-size:17px;flex-shrink:0;
  transition:transform .22s var(--ease),background .22s,color .22s}
.set-done:active{transform:scale(.9)}
.set-row.logged .set-done{background:var(--ok);color:#fff}
.set-row.logged .stepper{opacity:.45}

.rir-block{padding:12px 18px 15px;border-top:.5px solid var(--sep)}
.rir-q{font-size:13px;color:var(--t2);margin-bottom:9px;letter-spacing:-.006em}
.chips{display:flex;gap:7px}
.chip{flex:1;padding:9px 2px;background:var(--card-2);border-radius:11px;
  text-align:center;color:var(--t2);transition:transform .2s var(--ease),background .2s}
.chip:active{transform:scale(.94)}
.chip b{display:block;font-size:16px;font-weight:640;letter-spacing:-.02em}
.chip span{display:block;font-size:9.5px;margin-top:1px;color:var(--t3);
  letter-spacing:.005em}
.chip.on{background:var(--accent);color:#fff}
.chip.on span{color:rgba(255,255,255,.78)}

.note{font-size:13px;color:var(--t2);line-height:1.45;padding:11px 18px 15px;
  letter-spacing:-.006em}
.note.hi{color:var(--accent-text);font-weight:500}

/* -------------------------------------------------------------- descanso */
.rest{position:fixed;left:16px;right:16px;
  bottom:calc(78px + env(safe-area-inset-bottom));z-index:60;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border:.5px solid rgba(60,60,67,.16);
  border-radius:19px;padding:13px 18px;display:flex;align-items:center;gap:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.14);
  animation:slideUp .38s var(--ease)}
@keyframes slideUp{from{transform:translateY(120%);opacity:0}to{transform:none;opacity:1}}
.rest-ring{width:34px;height:34px;flex-shrink:0}
.rest-t{font-size:22px;font-weight:660;letter-spacing:-.03em;flex:1}
.rest-l{font-size:12px;color:var(--t2);letter-spacing:-.004em}
.rest button{font-size:15px;font-weight:590;color:var(--accent-text)}

/* -------------------------------------------------------------- primario */
.btn{width:100%;padding:16px;background:var(--t1);color:#fff;
  border-radius:var(--r-ctl);font-weight:640;font-size:17px;letter-spacing:-.022em;
  transition:transform .2s var(--ease),opacity .2s;margin-top:6px}
.btn:active{transform:scale(.975);opacity:.9}
.btn.accent{background:linear-gradient(140deg,#FF9500,#F07300);color:#fff}
/* --card sería blanco sobre blanco dentro de una tarjeta: el botón desaparecía. */
.btn.quiet{background:var(--card-2);color:var(--t1)}

/* ------------------------------------------------------------- gráficas */
.spark{width:100%;height:60px;display:block;margin:10px 0 2px;overflow:visible}
.mini-spark{width:58px;height:22px;flex-shrink:0;overflow:visible}
.str-row .pill{width:52px;text-align:center;flex-shrink:0}
.str-row .row-title{font-size:15px}
.chart-x{display:flex;justify-content:space-between;font-size:12px;color:var(--t3)}

.bar-row{display:flex;align-items:center;gap:11px;padding:8px 0}
.bar-nm{width:88px;font-size:13px;color:var(--t2);flex-shrink:0;letter-spacing:-.006em}
.bar-track{flex:1;height:7px;background:var(--fill);border-radius:4px;
  position:relative;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;transition:width .9s var(--ease)}
.bar-zone{position:absolute;top:0;bottom:0;background:rgba(60,60,67,.16)}
.bar-vl{width:30px;text-align:right;font-size:13px;color:var(--t2);font-weight:560}

/* ------------------------------------------------------------------ ficha */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:100;
  display:flex;align-items:flex-end;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:fade .28s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-inner{background:var(--card);width:100%;max-height:92dvh;overflow-y:auto;
  border-radius:14px 14px 0 0;max-width:680px;margin:0 auto;
  padding:0 20px calc(30px + env(safe-area-inset-bottom));
  animation:slideUp .42s var(--ease)}
.grabber{width:36px;height:5px;border-radius:3px;background:rgba(60,60,67,.28);
  margin:8px auto 4px}
.sheet-bar{position:sticky;top:0;background:var(--card);padding:8px 0 14px;z-index:2;
  display:flex;justify-content:flex-end}
.sheet-bar button{font-size:17px;color:var(--accent-text);font-weight:560}
.figure{width:100%;max-width:238px;margin:6px auto 18px;display:block;
  background:var(--card-2);border-radius:20px}
.cue{display:flex;gap:11px;font-size:15px;color:var(--t2);margin-bottom:11px;
  line-height:1.42;letter-spacing:-.012em}
.cue i{color:var(--accent-text);font-style:normal;font-weight:700;flex-shrink:0}
.vid{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;
  background:var(--card-2);border-radius:var(--r-ctl);margin-top:18px;
  color:var(--t1);font-size:16px;text-decoration:none;font-weight:560}
.vid span{color:var(--accent-text)}

/* ------------------------------------------------------------ calendario */
/* minmax(0,1fr), no 1fr: si no, el contenido de un día (número + etiqueta)
   ensancha su columna y las siete dejan de ser iguales. */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.cal .dow{font-size:11px;color:var(--t3);text-align:center;padding-bottom:6px;
  font-weight:600}
/* min-width:0 es obligatorio: con aspect-ratio, el tamaño mínimo automático del
   ítem de grid fija la anchura a partir de la altura e impide que 1fr encoja,
   así que las siete columnas desbordaban la pantalla. */
/* La celda es más alta que ancha: el número vive arriba a la derecha y deja el
   centro libre para el tipo de entrenamiento, que es la información que se
   busca de un vistazo. */
.cal .day{aspect-ratio:.82;min-width:0;border-radius:10px;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;background:var(--fill);overflow:hidden;padding:14px 2px 4px}
.cal .day[data-open]{cursor:pointer;transition:transform .18s var(--ease)}
.cal .day[data-open]:active{transform:scale(.92)}
.cal .day.done{background:var(--card-2)}
/* Previsto: sin relleno y con borde. Tiene que leerse distinto de lo hecho a
   primera vista, no solo por el color de la etiqueta. */
.cal .day.planned{background:transparent;box-shadow:inset 0 0 0 1.5px var(--sep)}
.cal .day.fallo{background:rgba(215,0,21,.055);
  box-shadow:inset 0 0 0 1.5px rgba(215,0,21,.22)}
.cal .day.fallo .dnum{color:var(--bad)}
.cal .day.day-rest{background:transparent}
.cal .day.day-rest .dnum{color:var(--t3)}
.cal .day.today{box-shadow:inset 0 0 0 2px var(--accent)}
.cal .day.today .dnum{color:var(--accent-text);font-weight:700}

.cal .dnum{position:absolute;top:3px;right:5px;font-size:10px;line-height:1;
  color:var(--t3);font-weight:560;font-variant-numeric:tabular-nums}
.cal .day.done .dnum{color:var(--t2)}

.cal .marks{display:flex;flex-direction:column;gap:3px;justify-content:center;
  align-items:center;max-width:100%;width:100%}
/* 8px con padding mínimo: «Espalda» es la etiqueta más larga y tiene que caber
   entera en 40 px sin recortarse a «Espa…». */
.mk{font-size:8px;font-weight:700;letter-spacing:-.02em;line-height:1;
  border-radius:4px;padding:3px 1px;white-space:nowrap;width:100%;
  text-align:center;overflow:hidden}
.mk-str{background:linear-gradient(160deg,var(--r2b),var(--r2a));color:#fff}
/* El previsto también va destacado en color, pero en tinta sobre fondo tenue:
   se ve a la primera sin confundirse con lo ya completado. */
.mk-plan{background:rgba(240,115,0,.13);color:var(--accent-text)}
/* Fallo: tocaba entrenar y no se registró nada. Rojo tenue, no un grito —
   marca la adherencia, no castiga. */
.mk-fallo{background:rgba(215,0,21,.11);color:var(--bad)}
.mk-rest{background:var(--fill);color:var(--t3);font-size:7px}

/* Las salidas propias van como puntos bajo la etiqueta: caben junto a la sesión
   de fuerza sin competir por el mismo espacio ni recortarse. */
.cal .dots{display:flex;gap:3px;justify-content:center;align-items:center}
.cal .dot{width:5px;height:5px;border-radius:50%;display:block}

.cal-key{display:flex;gap:14px;justify-content:center;margin-top:14px;
  font-size:11px;color:var(--t3)}
.cal-key span{display:flex;align-items:center;gap:5px}
.cal-key .sw{width:9px;height:9px;border-radius:3px;display:inline-block}
.cal-key .sw-str{background:linear-gradient(160deg,var(--r2b),var(--r2a))}
.cal-key .sw-plan{background:rgba(240,115,0,.22);box-shadow:inset 0 0 0 1.5px rgba(240,115,0,.5)}
.cal-key .sw-dot{width:6px;height:6px;border-radius:50%}
.cal-key .sw-fallo{background:rgba(215,0,21,.14);
  box-shadow:inset 0 0 0 1.5px rgba(215,0,21,.35)}

.day-state{background:var(--card-2);border-radius:var(--r-ctl);padding:14px 16px;
  font-size:14px;color:var(--t2);line-height:1.45;margin-top:20px}
.day-state.bad{background:rgba(215,0,21,.07);color:#9B1C1C}

/* -------------------------------------------------------------- actividad */
/* Control segmentado, como el del sistema: fondo hundido y pastilla blanca. */
.seg{display:flex;background:var(--card-2);border-radius:10px;padding:2px;
  margin-bottom:18px}
.seg button{flex:1;padding:7px 4px;border-radius:8px;font-size:13px;
  font-weight:560;letter-spacing:-.008em;color:var(--t2);
  transition:background .2s var(--ease),color .2s}
.seg button.on{background:var(--card);color:var(--t1);font-weight:620;
  box-shadow:0 1px 3px rgba(0,0,0,.10)}

/* Fila de métricas desplazable: cinco no caben repartidas a lo ancho sin que el
   texto se corte, así que se deslizan. */
.chips-scroll{overflow-x:auto;margin:0 -20px 18px;padding:0 20px 2px;
  scrollbar-width:none}
.chips-scroll::-webkit-scrollbar{display:none}
.chips-scroll .chip{flex:0 0 auto;padding:8px 14px}

.act-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:16px}
.act-n{font-size:32px;font-weight:700;letter-spacing:-.036em;line-height:1;
  font-variant-numeric:tabular-nums}
.act-n span{font-size:15px;font-weight:500;color:var(--t2);letter-spacing:-.01em}
.act-l{font-size:13px;color:var(--t2);margin-top:5px;letter-spacing:-.006em}

/* Gráfico de barras: una por periodo, la actual a plena opacidad y las cerradas
   atenuadas, porque la última siempre va por detrás hasta que termina. */
.bars{display:flex;align-items:flex-end;gap:4px;height:118px}
.bar-col{flex:1;min-width:0;display:flex;flex-direction:column;
  align-items:center;height:100%}
.bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end;
  justify-content:center}
.bar{width:100%;max-width:26px;border-radius:4px 4px 2px 2px;
  transition:height .5s var(--ease)}
.bar-lbl{font-size:9.5px;color:var(--t3);margin-top:7px;white-space:nowrap;
  letter-spacing:-.01em}
.bar-lbl.now{color:var(--t1);font-weight:700}

.delta{display:inline-block;margin-top:7px;font-size:11.5px;font-weight:620;
  padding:2px 7px;border-radius:99px;letter-spacing:-.004em}
.delta.up{background:rgba(29,163,63,.14);color:#157A2F}
.delta.down{background:rgba(215,0,21,.12);color:var(--bad)}
.delta.flat{background:var(--fill);color:var(--t3)}

/* ------------------------------------------------------------------ hitos */
/* Una sola tarjeta, columnas centradas y la ilustración bajo la cifra.
   Fondo blanco como el resto de tarjetas de la app.
   El margen superior lo daba el .section-title que este bloque sustituyó. */
.hitos-card{background:var(--card);border-radius:var(--r-card);
  padding:22px 18px 24px;margin:34px 0 12px}
.hitos-title{font-size:20px;font-weight:640;letter-spacing:-.026em;margin-bottom:4px}
.hitos-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

.hito{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:14px;min-width:0}
.hito-label{font-size:14px;color:var(--t2);line-height:1.25;letter-spacing:-.012em;
  min-height:34px}
.hito-num{font-size:30px;font-weight:700;letter-spacing:-.034em;margin-top:10px;
  font-variant-numeric:tabular-nums;line-height:1}
.hito-num span{font-size:14px;font-weight:500;color:var(--t2);letter-spacing:-.01em}
/* La ilustración es el elemento con más peso visual tras la cifra, como en la
   referencia.
   `mix-blend-mode:multiply` funde el fondo blanco opaco del render con la
   tarjeta: sin esto se ve el recuadro de la imagen. Y por eso tampoco lleva
   drop-shadow — sombrearía el cuadrado, no el objeto. La sombra ya viene
   pintada dentro del propio render. */
.hito-art{margin:18px 0 14px;height:92px;display:flex;align-items:center;
  justify-content:center}
.hito-art img{max-height:100%;max-width:100%;object-fit:contain;display:block;
  mix-blend-mode:multiply}
.hito-equiv{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.hito-next{font-size:11.5px;color:var(--t3);line-height:1.3;margin-top:5px}

/* ----------------------------------------------------------------- ruleta */
/* El desvanecido arriba y abajo es lo que da la sensación de rodillo: sin él
   parece una lista recortada. La banda central marca el valor elegido. */
.wheel-wrap{position:relative;height:220px;margin:22px 0 8px;overflow:hidden}
.wheel-band{position:absolute;left:0;right:0;top:88px;height:44px;
  background:var(--card-2);border-radius:11px;pointer-events:none}
.wheel{position:relative;height:100%;overflow-y:auto;scroll-snap-type:y mandatory;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent)}
.wheel::-webkit-scrollbar{display:none}
.wheel-pad{height:88px}
.wheel-item{height:44px;display:flex;align-items:center;justify-content:center;
  gap:5px;scroll-snap-align:center;font-size:22px;font-weight:600;
  letter-spacing:-.03em;color:var(--t3);font-variant-numeric:tabular-nums;
  transition:color .15s,transform .15s}
.wheel-item span{font-size:13px;font-weight:500}
.wheel-item.on{color:var(--t1);font-weight:700;transform:scale(1.08)}

/* ------------------------------------------------------------------ varios */
.pill{display:inline-block;padding:4px 10px;border-radius:99px;font-size:12px;
  font-weight:620;letter-spacing:-.006em}
.pill.ok{background:rgba(29,163,63,.14);color:#157A2F}
.pill.warn{background:rgba(183,121,31,.16);color:#8A5A12}
.pill.mute{background:var(--fill);color:var(--t3)}

/* Campos con etiqueta persistente: el placeholder desaparece al escribir y con
   cuatro casillas numéricas seguidas deja de saberse cuál es cuál. */
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-size:12px;color:var(--t2);font-weight:560;letter-spacing:-.004em;
  padding-left:3px;display:flex;justify-content:space-between;align-items:baseline}
.field label span{color:var(--t3);font-weight:500;font-size:11px}
.field input{width:100%;padding:13px 14px;background:var(--card-2);border:none;
  border-radius:var(--r-ctl);color:var(--t1);min-width:0}
.field input::placeholder{color:var(--t3)}

.inline-form{display:flex;gap:9px;margin-top:14px}
.inline-form input{flex:1;padding:13px 15px;background:var(--card-2);border:none;
  border-radius:var(--r-ctl);color:var(--t1);min-width:0}
.inline-form input::placeholder{color:var(--t3)}
.inline-form button{padding:13px 20px;background:var(--accent);color:#fff;
  border-radius:var(--r-ctl);font-weight:620;flex-shrink:0}

.myth{padding:13px 0;border-bottom:.5px solid var(--sep)}
.myth:last-child{border-bottom:none}
.myth b{font-size:15px;font-weight:560;color:var(--t2);
  text-decoration:line-through;text-decoration-color:rgba(215,0,21,.75)}
.myth p{color:var(--t3);font-size:13px;margin-top:5px;line-height:1.45}

.empty{text-align:center;color:var(--t3);font-size:15px;padding:56px 24px;
  line-height:1.5}
.empty .big{font-size:44px;margin-bottom:14px;opacity:.35}

.confetti{position:fixed;inset:0;pointer-events:none;z-index:200}

.toast{position:fixed;left:16px;right:16px;
  bottom:calc(78px + env(safe-area-inset-bottom));z-index:120;
  background:rgba(28,28,30,.94);color:#fff;border-radius:16px;
  padding:14px 17px;font-size:14px;line-height:1.4;letter-spacing:-.01em;
  box-shadow:0 12px 30px rgba(0,0,0,.28);max-width:648px;margin:0 auto;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  animation:slideUp .38s var(--ease)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}