@font-face { font-family: 'Doto'; font-weight: 100 900; font-display: swap; src: url('fonts/doto.woff2') format('woff2'); }

:root {
  /* superficies y texto */
  --bg: #0B0B0C;
  --sup: #151517;
  --sup2: #1C1C1F;
  --linea: #232327;
  --txt: #F4F3EF;
  --mut: #A3A3A8;
  --dim: #76767B;
  /* un color por área */
  --entreno: #457BF1;
  --comida: #D2693F;
  --sueno: #DC308F;
  --pulso: #D0A8C9;
  --cuerpo: #A6CFB8;
  --ahora: #E7FE55;   /* solo "dónde estás": hoy, marcador actual, sugerencia, descanso */
  --aviso: #F5B94A;
  /* nombres viejos que usa el resto del CSS, apuntando a los nuevos */
  --card: var(--sup);
  --card2: var(--sup2);
  --line: var(--linea);
  --acc: var(--entreno);
  --ok: var(--entreno);
  --warn: var(--aviso);
  --bad: #FF5A5F;
  --prot: var(--comida);
  --kcal: #E8956F;
  --num: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.35;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px calc(var(--nav-h) + var(--safe-b) + 24px);
  overscroll-behavior-y: none;
}
body.con-timer { padding-bottom: calc(var(--nav-h) + var(--safe-b) + 130px); }
body.modo-entreno { padding-bottom: calc(var(--safe-b) + 40px); }
body.modo-entreno.con-timer { padding-bottom: calc(var(--safe-b) + 130px); }
body.modo-entreno .nav { display: none; }
main { max-width: 560px; margin: 0 auto; }

h1 { font-size: 1.9rem; margin: 2px 0; line-height: 1.05; }
h2 { font-size: 1.3rem; margin: 26px 0 10px; }
h3 { font-size: 1.02rem; margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
small { color: var(--mut); font-size: .8rem; font-weight: 400; }

/* ----- lenguaje visual ----- */
.big { font-family: var(--num); font-weight: 600; letter-spacing: .01em; }
.k { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); font-weight: 600; }
.k.fuerte { color: var(--txt); }
.k.azul, .azul { color: var(--acc); }
.mut { color: var(--mut); }
.chico { font-size: .82rem; }
.warn { color: var(--warn); }
.c { display: block; width: 100%; background: var(--card); border: 0; border-radius: 16px; padding: 14px; margin-top: 10px; text-align: left; }
.fila-k { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.link { background: none; border: 0; padding: 6px 0; color: var(--acc); font-weight: 600; font-size: .9rem; }

/* botones principales */
.primario {
  display: block; width: 100%; min-height: 52px; margin-top: 14px; border: 0; border-radius: 999px;
  background: var(--txt); color: var(--bg); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem;
}
.primario.azul { background: var(--acc); color: #04121d; }
.primario.gris { background: none; color: var(--txt); border: 1px solid var(--line); }
.primario:active, .secund:active { transform: scale(.98); }
.secund {
  min-height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2);
  font-weight: 600; font-size: .9rem; padding: 6px 10px;
}
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }

/* ----- inicio ----- */
.ini-top { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px 0; }
.diales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 16px; }
.dial { background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dial svg { width: 96px; height: 96px; }
.dial-bg { fill: none; stroke: var(--card2); stroke-width: 6; }
.dial-fg { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray .4s; }
.dial-n { fill: var(--txt); font-family: var(--num); font-weight: 600; font-size: 21px; }
.reco { margin: 12px 2px 0; padding-left: 10px; border-left: 3px solid var(--z); font-size: .92rem; color: var(--txt); }

.check .q { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.check .q > span { font-size: .92rem; }
.ops { display: grid; grid-template-columns: repeat(3, 66px); gap: 6px; }
.op { min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); font-size: .85rem; font-weight: 600; padding: 0; }
.op.on { background: var(--txt); color: var(--bg); border-color: var(--txt); }

.sesion h2 { margin: 6px 0 2px; font-size: 2rem; line-height: 1; }
.segm { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 14px; padding: 4px; border-radius: 12px; background: var(--bg); }
.segm button { min-height: 42px; border: 0; border-radius: 9px; background: none; color: var(--mut); font-weight: 600; font-size: .9rem; }
.segm button.on { background: var(--card2); color: var(--txt); }
.segm + .chico { margin-top: 6px; }
.sesion .seg { margin-top: 10px; }
.seg { color: var(--warn); font-size: .8rem; }
.hecha { margin-top: 12px; color: var(--ok); font-weight: 600; }
.links { display: flex; gap: 18px; margin-top: 8px; }
.prev { list-style: none; padding: 0; margin: 6px 0 0; }
.prev li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.prev li.k { border: 0; padding-top: 12px; }
.prev li span.mut { flex-shrink: 0; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.opciones p { grid-column: 1 / -1; }

.tira { color: inherit; }
.dias7 { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 10px; text-align: center; }
.d7 { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.d7 .l { font-size: .72rem; color: var(--mut); font-weight: 600; }
.d7 .pt { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; }
.d7 .s { font-size: .6rem; color: var(--dim); white-space: nowrap; }
.d7.ok .pt { background: var(--ok); border-color: var(--ok); color: #06210f; }
.d7.hoy .pt { border-color: var(--acc); border-width: 2.5px; }
.d7.hoy .l, .d7.hoy .s { color: var(--acc); }
.d7.pasado .pt { border-style: dashed; }

.fila-peso { display: flex; justify-content: space-between; align-items: center; }
.peso-der { display: flex; align-items: center; gap: 10px; }
.delta { font-family: var(--num); font-size: 1.05rem; font-weight: 600; text-align: right; line-height: 1.1; }
.delta small { display: block; font-family: -apple-system, system-ui, sans-serif; font-size: .62rem; font-weight: 500; }
.delta.baja { color: var(--ok); }
.delta.sube { color: var(--warn); }

/* ----- avisos ----- */
.aviso {
  display: block; width: 100%; text-align: left; margin-top: 12px;
  background: var(--card); border-left: 3px solid var(--warn); border-radius: 0;
  padding: 10px 12px; font-size: .9rem;
}
.aviso .link { padding: 0; color: var(--txt); }
.aviso.mini { margin: 8px 0 10px; }

/* ----- entrenando ----- */
.en-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; text-align: center; }
.icono { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--card); color: var(--mut); font-size: 1rem; }
.reloj { font-size: 1.9rem; }
.barra { height: 4px; border-radius: 4px; background: var(--card2); margin-top: 10px; overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--acc); border-radius: 4px; transition: width .3s; }
.en-sub { margin: 10px 2px 4px; color: var(--mut); font-size: .85rem; }
.k.sec { margin: 18px 2px 4px; }
.fila {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 50px;
  margin-top: 6px; padding: 10px 14px; background: var(--card); border: 0; border-radius: 12px; text-align: left; font-size: .95rem;
}
.fila .mut { flex-shrink: 0; font-size: .85rem; }
.fila.hecha { background: none; border: 1px solid var(--card2); color: var(--mut); }
.fila.hecha > span:first-child { color: var(--ok); }
.actual { background: var(--card); border: 1.5px solid var(--acc); border-radius: 16px; padding: 14px; margin-top: 8px; scroll-margin-top: 70px; }
.actual .ej-top h3 { font-family: var(--num); font-size: 1.45rem; font-weight: 600; line-height: 1.05; }
.sube { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(22, 236, 6, .1); color: var(--ok); font-size: .9rem; }
.sube small { color: var(--ok); opacity: .8; }
.tabla { margin-top: 12px; }
.fila-h, .serie { display: grid; grid-template-columns: 22px 1fr 66px 54px 44px; gap: 8px; align-items: center; }
.fila-h { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 600; padding-bottom: 4px; }
.fila-h span:nth-child(3), .fila-h span:nth-child(4) { text-align: center; }
.serie { padding: 6px 0; border-top: 1px solid var(--line); }
.serie.simple { grid-template-columns: 22px 1fr 44px; }
.serie .n { color: var(--mut); font-weight: 600; font-size: .9rem; }
.serie .ant { color: var(--mut); font-size: .85rem; }
.serie input {
  width: 100%; min-width: 0; height: 44px; text-align: center; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--txt); font-family: var(--num); font-size: 1.3rem; font-weight: 600; padding: 0;
}
.serie input::placeholder { color: var(--dim); }
.serie input:focus { outline: 0; border-color: var(--acc); }
.ck { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: none; color: var(--dim); font-size: 1.1rem; font-weight: 700; }
.ck.on { background: var(--ok); border-color: var(--ok); color: #06210f; }
.serie.on input { border-color: transparent; background: none; color: var(--ok); }
.todo-ok { margin-top: 14px; text-align: center; color: var(--ok); font-weight: 600; }

/* ----- resumen ----- */
.titulo-res { font-size: 2.2rem; margin-top: 8px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { text-align: center; }
.stat .big { display: block; font-size: 2rem; }
.res-lista { list-style: none; padding: 0; margin: 6px 0 0; }
.res-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.ok-t { color: var(--ok); font-weight: 600; flex-shrink: 0; }

/* ----- encabezado de pestañas ----- */
.top { margin: 4px 0 14px; }
.sub { color: var(--mut); font-size: .95rem; margin-top: 2px; }
.chip { display: inline-block; margin-top: 8px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); font-weight: 600; }

/* ----- tarjetas (semana, comida, progreso) ----- */
.card, .ej { background: var(--card); border: 0; border-radius: 16px; padding: 14px; margin-bottom: 10px; }
.card h3 { margin-bottom: 8px; }
.card p + p { margin-top: 6px; }
.meta { color: var(--mut); font-size: .86rem; margin-top: 4px; }
.seccion { font-size: .68rem; color: var(--mut); text-transform: uppercase; letter-spacing: .12em; margin: 18px 0 8px; }
.ej-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ej-top h3 { font-size: 1.02rem; }
.dosis { flex-shrink: 0; font-family: var(--num); font-weight: 600; font-size: 1.15rem; color: var(--acc); text-align: right; max-width: 55%; }
.lista { list-style: none; margin: 10px 0 0; padding: 0; }
.lista > li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.lista > li span.ds { color: var(--mut); flex-shrink: 0; margin-left: auto; }
.lista > li details { width: 100%; }
.lista > li summary { display: flex; gap: 8px; align-items: baseline; list-style: none; cursor: pointer; }
.lista > li summary::-webkit-details-marker { display: none; }
.lista .tec { margin: 8px 0 4px; }
.bloque.actual-b { box-shadow: inset 0 0 0 1.5px var(--acc); }
.seguridad h3 { color: var(--warn); }
.cambiar { width: 100%; min-height: 46px; margin: 0 0 10px; border-radius: 12px; border: 1px dashed var(--line); background: none; font-weight: 600; text-align: left; padding: 8px 14px; }

/* técnica */
.nombre { background: none; border: 0; padding: 0; text-align: left; font: inherit; font-weight: inherit; line-height: inherit; }
.info { color: var(--acc); font-size: .75em; font-weight: 400; font-family: -apple-system, system-ui, sans-serif; }
.tec { background: var(--card2); border-radius: 12px; padding: 10px 12px; margin-top: 10px; font-size: .9rem; }
.pasos { margin: 0; padding-left: 20px; list-style: decimal; }
.pasos li { margin: 4px 0; }
.error { color: var(--warn); margin-top: 8px; }
.video { display: inline-flex; align-items: center; min-height: 42px; margin-top: 8px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--txt); text-decoration: none; font-weight: 600; font-size: .85rem; }

/* semana */
.dia { background: var(--card); border-radius: 14px; margin-bottom: 8px; overflow: hidden; box-shadow: inset 4px 0 0 var(--sc, var(--line)); }
.dia.hoy { box-shadow: inset 4px 0 0 var(--sc), inset 0 0 0 1.5px var(--acc); }
.dia-fila { display: grid; grid-template-columns: 30px 1fr auto; gap: 2px 8px; padding: 13px 14px 13px 8px; min-height: 62px; align-items: center; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.dia-fila .asa { grid-row: 1 / span 2; }
.dia-fila .dn { grid-column: 2; }
.dia-fila .dt { grid-column: 2; }
.dia-fila .dd { grid-column: 3; grid-row: 1 / span 2; }
.dn { font-weight: 700; }
.dn em { font-style: normal; color: var(--acc); font-size: .75rem; margin-left: 6px; text-transform: uppercase; letter-spacing: .1em; }
.dt { color: var(--mut); font-size: .9rem; }
.dt .tipo-k { font-size: .62rem; margin-right: 4px; }
.dd { align-self: center; color: var(--mut); font-size: .85rem; }
.dia-body { padding: 12px; border-top: 1px solid var(--line); }
.dia-body .ej { background: var(--card2); }
.dia.pasado:not(.hoy) summary { opacity: .6; }
.tag { font-size: .62rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--card2); color: var(--mut); vertical-align: middle; letter-spacing: .06em; text-transform: uppercase; }
.tag.ok { background: rgba(22, 236, 6, .14); color: var(--ok); }
.mover { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.mover .meta { margin: 0 4px 0 0; }
.mover button { min-height: 38px; min-width: 46px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-weight: 600; font-size: .82rem; }

/* comida */
.prot-top { display: flex; justify-content: space-between; align-items: baseline; }
.prot-n { color: var(--mut); }
.prot-n b { font-size: 2.2rem; color: var(--txt); }
.bar { height: 8px; background: var(--card2); border-radius: 8px; overflow: hidden; margin: 8px 0 4px; }
.bar span { display: block; height: 100%; background: var(--prot); border-radius: 8px; transition: width .3s; }
.bar.llena span { background: var(--ok); }
.botonera { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.btn { flex: 1 1 0; min-height: 50px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2); font-weight: 700; font-size: .95rem; }
.btn.grande { background: var(--txt); color: var(--bg); border-color: var(--txt); font-family: var(--num); font-size: 1.3rem; font-weight: 600; }
.btn.sec { font-weight: 600; }
.btn.on { background: rgba(22, 236, 6, .1); border-color: var(--ok); color: var(--ok); }
.btn:disabled { opacity: .4; }
.btn:active { transform: scale(.97); }
.comidas .btn { flex: 1 1 40%; font-size: .88rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 10px; }
.tile { background: var(--card2); border-radius: 12px; padding: 10px 4px; text-align: center; }
.tile b { display: block; font-size: 1.25rem; white-space: nowrap; }
.tile span { font-size: .7rem; color: var(--mut); }
.plegable summary { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.plegable summary::-webkit-details-marker { display: none; }
.plegable summary::after { content: '⌄'; color: var(--mut); font-size: 1.1rem; }
.plegable[open] summary::after { content: '⌃'; }
.plegable summary h3 { margin: 0; }
.plegable[open] summary { margin-bottom: 8px; }
.comidas-lista { list-style: none; padding: 0; margin: 4px 0 0; }
.comidas-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.comidas-lista li:first-child { border-top: 0; }
.comidas-lista p { color: var(--mut); font-size: .9rem; margin-top: 2px; }
.comidas-lista span { color: var(--prot); font-weight: 700; flex-shrink: 0; }
.reglas { margin: 6px 0 0; padding-left: 20px; }
.reglas li { margin: 6px 0; font-size: .92rem; }

/* progreso */
.segmentos { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 12px; padding-bottom: 2px; scrollbar-width: none; }
.segmentos::-webkit-scrollbar { display: none; }
.segmentos button { flex-shrink: 0; min-height: 42px; padding: 0 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 600; font-size: .88rem; }
.segmentos button.on { background: var(--txt); color: var(--bg); border-color: var(--txt); }
.segmentos.chico button { min-height: 38px; font-size: .82rem; background: var(--card2); }
.segmentos.chico button.on { background: var(--txt); }
.campo { padding: 12px 0; border-top: 1px solid var(--line); }
.tests h3 + .campo { border-top: 0; }
.campo label { display: block; font-weight: 600; margin-bottom: 8px; }
.campo label small { display: block; margin-top: 1px; }
.campo.fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.campo.fila label { margin: 0; }
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tres input { min-height: 50px; min-width: 0; width: 100%; text-align: center; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; color: var(--txt); font-family: var(--num); font-size: 1.35rem; font-weight: 600; }
.tres input:focus { outline: 0; border-color: var(--acc); }
.prom { margin-top: 8px; color: var(--mut); }
.prom b { color: var(--txt); }
.check-foto { width: 100%; text-align: left; min-height: 50px; margin-top: 8px; padding: 10px 12px; background: var(--card2); border: 1px solid var(--line); border-radius: 12px; font-weight: 600; }
.check-foto small { display: block; }
.check-foto.on { border-color: var(--ok); color: var(--ok); }
.svg-g { width: 100%; height: auto; display: block; margin-top: 4px; }
.g-grid { stroke: var(--line); stroke-width: 1; }
.g-eje { fill: var(--mut); font-size: 11px; }
.g-obj { fill: rgba(22, 236, 6, .1); }
.g-linea { fill: none; stroke: var(--acc); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.g-punto { fill: var(--acc); stroke: var(--bg); stroke-width: 2; }
.g-val { fill: var(--txt); font-size: 12px; font-weight: 700; }
.vacio-g { padding: 20px 0; text-align: center; }

/* campo con unidad */
.kg-box { display: flex; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; min-height: 50px; flex-shrink: 0; }
.kg-box input { width: 80px; background: transparent; border: 0; outline: 0; color: var(--txt); font-family: var(--num); font-size: 1.4rem; font-weight: 600; padding: 0; text-align: right; }
.kg-box.chico { min-height: 44px; }
.kg-box.chico input { width: 56px; }
.kg-box input::placeholder { color: var(--dim); }
.kg-box span { color: var(--mut); margin-left: 4px; font-size: .85rem; }
.kg-box:focus-within { border-color: var(--acc); }

/* ----- temporizador ----- */
.timer {
  position: fixed; left: 12px; right: 12px; z-index: 20;
  bottom: calc(var(--nav-h) + var(--safe-b) + 10px);
  max-width: 540px; margin: 0 auto;
  background: #0f2233; border: 1px solid var(--acc); border-radius: 18px;
  padding: 10px 12px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
body.modo-entreno .timer { bottom: calc(var(--safe-b) + 12px); }
.timer.fin { background: #0c2a10; border-color: var(--ok); animation: pulso .6s ease-in-out 3; }
@keyframes pulso { 50% { transform: scale(1.03); } }
.timer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.timer-lbl { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48vw; }
.timer-t { font-family: var(--num); font-size: 2.6rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.timer-btns { display: flex; gap: 8px; flex-shrink: 0; }
.timer-btns button { min-height: 50px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--card2); font-weight: 700; white-space: nowrap; }
.timer-btns button[data-timer="fin"] { background: var(--txt); color: var(--bg); }
.timer-bar { height: 4px; background: var(--card2); border-radius: 4px; margin-top: 8px; overflow: hidden; }
.timer-bar span { display: block; height: 100%; background: var(--acc); width: 100%; transition: width .25s linear; }

/* ----- navegación ----- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: rgba(11, 15, 18, .96); border-top: 1px solid var(--card2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.nav button { background: none; border: 0; color: var(--dim); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav button.on { color: var(--txt); }

/* ----- toast ----- */
.toast { position: fixed; left: 50%; transform: translateX(-50%); z-index: 40; top: calc(env(safe-area-inset-top, 0px) + 12px); background: var(--card2); border-radius: 12px; padding: 10px 16px; font-size: .92rem; box-shadow: 0 8px 24px rgba(0,0,0,.6); max-width: 90vw; }
.prev-dia .dn, .prev-dia .dt { grid-column: 1; }

/* comida por alimentos */
.macro { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.macro + .bar { margin-top: 6px; }
.bar + .macro { margin-top: 12px; }
.macro b { font-size: 1.7rem; }
.bar.kcal span { background: var(--acc); }
.bar.pasado span { background: var(--warn); }
.check-foto.mini { min-height: 44px; margin-top: 12px; font-size: .9rem; }
.tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tipo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 58px; padding: 10px 12px; border-radius: 12px; border: 0; background: var(--card); text-align: left; }
.tipo small { font-size: .75rem; }
.tipo:active { transform: scale(.98); background: var(--card2); }
.picker input[type=search] { width: 100%; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--txt); padding: 0 14px; font-size: 1rem; margin-bottom: 10px; -webkit-appearance: none; }
.picker input[type=search]:focus { outline: 0; border-color: var(--acc); }
.ali-lista { list-style: none; padding: 0; margin: 0; }
.ali-lista li { border-top: 1px solid var(--line); }
.ali { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 2px; background: none; border: 0; text-align: left; }
.ali b { display: block; font-weight: 600; font-size: .95rem; }
.ali small { font-size: .75rem; }
.ali .mut { font-size: .8rem; flex-shrink: 0; }
.cant { display: grid; grid-template-columns: auto repeat(5, 1fr); gap: 6px; align-items: center; padding: 0 0 10px; }
.cant .k { margin-right: 4px; }
.cant button { min-height: 44px; border-radius: 10px; border: 0; background: var(--txt); color: var(--bg); font-family: var(--num); font-size: 1.25rem; font-weight: 600; }
.lista-hoy { padding: 4px 14px; }
.item-c { display: grid; grid-template-columns: 1fr auto 36px; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.item-c:first-child { border-top: 0; }
.item-c b { display: block; font-weight: 600; font-size: .92rem; }
.item-c small { font-size: .74rem; }
.item-c .mut { font-size: .82rem; }
.x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--card2); color: var(--mut); font-size: .8rem; }

/* progreso */
.sel { width: 100%; height: 46px; margin: 10px 0 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--txt); padding: 0 12px; font-size: .95rem; -webkit-appearance: none; appearance: none; }
.blanco { color: var(--txt); font-size: 1rem; letter-spacing: 0; }
.g-dia { fill: var(--mut); }

/* ----- distinguir bloques ----- */
.titulo-sec { display: flex; align-items: center; gap: 8px; margin: 22px 2px 0; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--txt); }
.titulo-sec::before { content: ''; width: 4px; height: 14px; border-radius: 2px; background: var(--tc, var(--acc)); }
.titulo-sec + .c { margin-top: 8px; }
.tipo-k { color: var(--sc, var(--acc)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; }
.sesion { background: color-mix(in srgb, var(--sc) 12%, var(--card)); box-shadow: inset 4px 0 0 var(--sc); }
.sesion .segm { background: rgba(0, 0, 0, .35); }
.d7 .pt { border-color: var(--sc); }
.d7 .s { color: var(--sc); opacity: .85; }
.d7.ok .pt { background: var(--sc); border-color: var(--sc); color: #071016; }
.d7.hoy .pt { border-color: var(--txt); border-width: 2.5px; }
.d7.hoy .l { color: var(--txt); }
.d7.hoy .s { color: var(--sc); opacity: 1; }
.prev-dia { box-shadow: none; }

/* comida por momento */
.momento { box-shadow: inset 4px 0 0 var(--mc); padding-left: 16px; }
.mom-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mom-n { font-family: var(--num); font-weight: 600; font-size: 1.35rem; color: var(--mc); }
.mom-top .mut { font-size: .82rem; }
.momento .item-c:first-of-type { border-top: 1px solid var(--line); margin-top: 6px; }
.mom-acc { display: flex; gap: 8px; margin-top: 10px; }
.mom-acc .secund { flex: 1; min-height: 44px; }
.secund.on-mom { background: var(--txt); color: var(--bg); border-color: var(--txt); }
.momento .picker { margin-top: 12px; }

/* cambiar ejercicio */
.link.chico { font-size: .82rem; padding: 8px 0 0; }
.opc-ej { display: grid; gap: 6px; margin-top: 8px; }
.opc-ej .secund { text-align: left; padding: 8px 12px; }

.mover.poner button { border-color: var(--sc); color: var(--sc); }

/* editar valores de alimentos */
.edit-v { background: var(--card2); border-radius: 12px; padding: 10px 12px 12px; margin: 4px 0 10px; }
.edit-v .k { margin-bottom: 8px; }
.cn-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cn { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--mut); position: relative; }
.cn input { height: 46px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--txt); padding: 0 44px 0 12px; font-family: var(--num); font-size: 1.3rem; font-weight: 600; width: 100%; min-width: 0; }
.cn.ancho { margin-bottom: 8px; }
.cn.ancho input { font-family: -apple-system, system-ui, sans-serif; font-size: 1rem; font-weight: 500; padding-right: 12px; }
.cn input:focus { outline: 0; border-color: var(--acc); }
.cn small { position: absolute; right: 10px; bottom: 14px; font-size: .75rem; }
.edit-v .dos { margin-top: 10px; }
.secund.crear { width: 100%; margin-top: 10px; border-style: dashed; }
.item-n { background: none; border: 0; padding: 0; text-align: left; color: inherit; min-width: 0; }
.link.rojo { color: var(--bad); }

/* garmin */
.diales.cuatro { grid-template-columns: repeat(4, 1fr); gap: 2px; }
.diales.cuatro .dial svg { width: 78px; height: 78px; }
.diales.cuatro .k { font-size: .6rem; letter-spacing: .08em; }
.reco .det { display: block; color: var(--mut); font-size: .78rem; margin-top: 2px; }
.garmin-sync { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.garmin-sync > span:first-child { display: flex; flex-direction: column; }
.garmin-sync b { font-weight: 600; }
.g-btns { display: flex; gap: 6px; flex-shrink: 0; }
.g-btns .secund { min-height: 42px; padding: 0 14px; }
.ayuda-g { margin: 6px 4px 0; }
.ayuda-g summary { color: var(--mut); font-size: .8rem; cursor: pointer; }
.ayuda-g p { margin-top: 6px; }
.pegar-txt { width: 100%; min-height: 90px; margin-top: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--txt); padding: 10px; font: inherit; font-size: .9rem; }
.aviso.garmin { border-left-color: var(--acc); }
.aviso.garmin .dos { margin-top: 8px; }
.g-noche { fill: var(--prot); opacity: .85; }


/* =====================================================================
   REDISEÑO · etapa 1: base visual (tokens + componentes)
   ===================================================================== */
html { font-size: 15px; }
h1 { font-size: 28px; font-weight: 500; letter-spacing: -.01em; }
h2 { font-size: 22px; font-weight: 500; }
h3 { font-size: 17px; font-weight: 500; }
.big { font-family: var(--num); font-weight: 500; letter-spacing: -.02em; }
.dot { font-family: 'Doto', monospace; font-weight: 700; font-variation-settings: "ROND" 100; line-height: .82; letter-spacing: .02em; }
.k { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--mut); }
.k.fuerte { color: var(--txt); font-weight: 500; }
.chip { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 400; }
.meta, .mut { color: var(--mut); }
.c, .card, .ej { background: var(--sup); border-radius: 20px; }

/* --- Primario: pastilla clara con círculo y flecha. Uno por pantalla. --- */
.primario {
  display: flex; align-items: center; justify-content: space-between; width: 100%; height: 56px; min-height: 56px;
  padding: 0 6px 0 24px; border-radius: 999px; background: var(--txt); color: var(--bg); border: 0;
  font-size: 17px; font-weight: 500; letter-spacing: 0; text-transform: none; text-align: left;
}
.primario::after {
  content: ''; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F3EF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.primario.azul { background: var(--txt); color: var(--bg); }
/* "Terminar" mientras entrenás no es la acción principal: va como secundario. */
.primario.gris { justify-content: center; height: 48px; min-height: 48px; padding: 0 18px; background: rgba(244,243,239,.05); color: var(--txt); border: 1px solid rgba(244,243,239,.3); font-size: 15px; }
.primario.gris::after { display: none; }

/* --- Secundario: pastilla con borde --- */
.secund, .btn, .check-foto {
  min-height: 44px; border-radius: 999px; border: 1px solid rgba(244,243,239,.3); background: rgba(244,243,239,.05);
  color: var(--txt); font-size: 15px; font-weight: 500; padding: 0 18px;
}
.secund.confirmar { background: var(--txt); color: var(--bg); border-color: var(--txt); }
.btn.on, .check-foto.on { background: rgba(69,123,241,.16); border-color: var(--entreno); color: var(--txt); }
.check-foto { text-align: center; width: auto; }
.check-foto.mini { min-height: 44px; }
.secund.on-mom { background: var(--txt); color: var(--bg); border-color: var(--txt); }
.secund.crear { border-style: dashed; }

/* --- Link: texto subrayado --- */
.link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0;
  color: var(--txt); font-size: 15px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(244,243,239,.4);
}
.link.chico { font-size: 13px; min-height: 44px; padding: 0; }
.link.rojo { color: var(--bad); text-decoration-color: rgba(255,90,95,.5); }
.links { gap: 22px; margin-top: 4px; }

/* --- Fila navegable: siempre con chevron --- */
.fila { background: var(--sup); border-radius: 16px; min-height: 52px; padding: 0 14px; font-size: 15px; }
.fila::after, .dia-fila::after {
  content: ''; width: 16px; height: 16px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.fila.hecha { background: none; border: 1px solid var(--linea); }
.fila.hecha > span:first-child { color: var(--txt); }
.plegable summary::after { content: ''; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .2s; }
.plegable[open] summary::after { content: ''; transform: rotate(180deg); }

/* --- Tarjeta de color con degradé y grano (.t) --- */
.t, .sesion { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; padding: 18px; color: var(--txt); }
.t::before, .sesion::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 80% 74% at 50% 54%, #09090B 0%, rgba(9,9,11,.93) 38%, rgba(9,9,11,.38) 74%, rgba(9,9,11,0) 100%);
}
/* Tarjetas altas o con listas: elipse más grande para que el texto caiga siempre sobre lo oscuro. */
.t.alta::before { background: radial-gradient(ellipse 92% 88% at 50% 54%, #09090B 0%, rgba(9,9,11,.93) 52%, rgba(9,9,11,.38) 80%, rgba(9,9,11,0) 100%); }
.t::after, .sesion::after { content: ''; position: absolute; inset: 0; z-index: -1; background: url(fonts/grano.png); mix-blend-mode: overlay; opacity: .9; pointer-events: none; }
.sesion { background: var(--sc, var(--entreno)); box-shadow: none; }
.sesion h2 { font-size: 34px; font-weight: 500; letter-spacing: -.02em; margin: 34px 0 4px; }
.sesion .tipo-k { color: var(--txt); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.sesion .hecha { color: var(--txt); }
.ir { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; background: rgba(244,243,239,.16); display: flex; align-items: center; justify-content: center; }

/* --- Selector: pastillas, la elegida rellena --- */
.segm, .segmentos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding: 4px; border-radius: 999px; background: var(--sup); }
.segmentos { display: flex; overflow-x: auto; }
.segm button, .segmentos button { min-height: 40px; border-radius: 999px; border: 0; background: none; color: var(--mut); font-size: 15px; font-weight: 500; padding: 0 14px; flex-shrink: 0; }
.segm button.on, .segmentos button.on { background: var(--txt); color: var(--bg); }
.sesion .segm { background: rgba(0,0,0,.45); }
.sesion .segm button { color: #B9B9BE; }
.sesion .segm button.on { background: rgba(244,243,239,.18); color: var(--txt); }
.segmentos.chico { background: var(--sup2); }
.segmentos.chico button { min-height: 36px; font-size: 13px; background: none; }
.segmentos.chico button.on { background: var(--txt); }

/* --- Títulos de sección: sin mayúsculas, color del área --- */
.titulo-sec { font-size: 17px; font-weight: 500; letter-spacing: 0; text-transform: none; margin: 26px 2px 0; }
.titulo-sec::before { width: 8px; height: 8px; border-radius: 50%; }

/* --- Avisos: fila gris con ícono ámbar --- */
.aviso { background: var(--sup); border-left: 0; border-radius: 16px; padding: 12px 14px; }
.aviso.garmin { border-left: 0; }

/* --- Tira de días (Hoy) --- */
.d7 .pt { width: 38px; height: 38px; border: 1px solid #3A3A3F; }
.d7.hoy .pt { border: 2px solid var(--ahora); }
.d7.hoy .l, .d7.hoy .s { color: var(--txt); }
.d7.ok .pt { background: var(--txt); border-color: var(--txt); color: var(--bg); }

/* --- Diales --- */
.dial-n { font-family: var(--num); font-weight: 500; }

/* --- Entrenando (sin degradés) --- */
.actual { background: var(--sup); border: 1.5px solid var(--entreno); border-radius: 20px; }
.actual .ej-top h3 { font-family: var(--num); font-size: 23px; font-weight: 500; letter-spacing: -.01em; }
.reloj { font-size: 30px; }
.k.azul { color: #8FB0FF; }
.serie input { height: 48px; border-radius: 14px; background: rgba(0,0,0,.45); border: 1px solid rgba(244,243,239,.3); font-family: var(--num); font-size: 20px; font-weight: 500; }
.fila-h, .serie { grid-template-columns: 22px 1fr 68px 56px 48px; }
.ck { width: 48px; height: 48px; }
.ck.on { background: var(--entreno); border-color: var(--entreno); color: var(--txt); }
.serie.on input { color: #8FB0FF; }
.sube { background: rgba(231,254,85,.1); color: var(--ahora); }
.sube small { color: var(--ahora); }
.todo-ok { color: #8FB0FF; }

/* --- Temporizador flotante: tiempo en Doto, barra lima --- */
.timer { background: var(--sup); border: 1px solid var(--linea); border-radius: 24px; }
.timer.fin { background: var(--sup); border-color: var(--ahora); }
.timer-t { font-family: 'Doto', monospace; font-weight: 700; font-variation-settings: "ROND" 100; font-size: 46px; line-height: .9; }
.timer-lbl { font-size: 13px; letter-spacing: 0; text-transform: none; }
.timer-bar span { background: var(--ahora); }
.timer-btns button { min-height: 48px; border-radius: 999px; border: 1px solid rgba(244,243,239,.3); background: rgba(244,243,239,.05); font-weight: 500; }
.timer-btns button[data-timer="fin"] { background: var(--txt); color: var(--bg); border-color: var(--txt); }

/* --- Comida: todo en terracota --- */
.mom-n { color: var(--comida); font-family: var(--num); font-weight: 500; font-size: 17px; }
.momento { box-shadow: none; }
.bar span, .bar.llena span { background: var(--comida); }
.bar.kcal span { background: var(--kcal); }
.bar.pasado span { background: var(--aviso); }
.comidas-lista span { color: var(--comida); }
.btn.grande { background: var(--txt); color: var(--bg); font-family: var(--num); }

/* --- Cuerpo: peso en jade, sueño en magenta --- */
.delta.baja { color: var(--cuerpo); }
.g-linea { stroke: var(--txt); stroke-width: 2; }
.g-punto { fill: var(--txt); }
.g-obj { fill: rgba(166,207,184,.14); }
.g-noche { fill: var(--sueno); }
.tag.ok { background: rgba(69,123,241,.16); color: #8FB0FF; }

/* --- Campos --- */
.kg-box, .tres input, .cn input, .picker input[type=search], .sel { background: rgba(0,0,0,.45); border: 1px solid rgba(244,243,239,.3); border-radius: 14px; }
.kg-box input, .tres input, .cn input { font-family: var(--num); font-weight: 500; }

/* --- Navegación --- */
.nav { height: calc(84px + var(--safe-b) - 20px); background: rgba(11,11,12,.94); border-top: 1px solid #1E1E21; }
.nav button { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--dim); }
.nav svg { stroke-width: 1.7; }
.nav button.on { color: var(--txt); }

/* --- Semana --- */
.dia.hoy { box-shadow: inset 4px 0 0 var(--sc), inset 0 0 0 2px var(--ahora); }
.dia-fila { grid-template-columns: 30px 1fr auto 16px; }
.dia-fila::after { grid-column: 4; grid-row: 1 / span 2; }
.fila .mut { margin-left: auto; }

/* =====================================================================
   REDISEÑO · etapa 2: Hoy
   ===================================================================== */
.cab { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 18px; }
.cab h1 { margin: 0; }
.tira-dias { display: flex; justify-content: space-between; }
.td { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 44px; }
.tdc { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #3A3A3F; background: none; color: var(--txt); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; padding: 0; position: relative; }
.tdc::after { content: ''; position: absolute; inset: -4px; } /* zona táctil de 46 px */
.tdc.sel { background: var(--txt); color: var(--bg); border-color: var(--txt); }
.tdc.hoy { border: 2px solid var(--ahora); }
.tdc.fut { color: var(--dim); }
.tdc.atras { background: var(--sup2); border-color: var(--sup2); }
.tdp { width: 5px; height: 5px; border-radius: 50%; }
.tdp.on { background: var(--entreno); }
.volver-hoy { float: right; }

.heroe { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 26px; background: none; border: 0; color: var(--txt); padding: 0; }
.heroe-k { font-size: 17px; font-weight: 500; }
.heroe-n { display: flex; align-items: flex-end; gap: 6px; margin-top: 16px; }
.heroe-n .dot { font-size: 104px; }
.heroe-u { font-size: 20px; color: var(--mut); padding-bottom: 4px; }
.ruler { position: relative; display: block; width: 300px; max-width: 86%; height: 30px; margin-top: 28px;
  background: repeating-linear-gradient(90deg, rgba(244,243,239,.32) 0 1.5px, transparent 1.5px 9px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.mk { position: absolute; top: -8px; width: 3px; height: 40px; background: var(--ahora); border-radius: 2px; }
.tri { position: absolute; top: -16px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--ahora); }
.heroe-t { margin-top: 14px; font-size: 15px; text-align: center; line-height: 1.4; }

.garmin-sync { display: block; margin-top: 24px; padding: 16px; }
.g-cab b { display: block; font-size: 17px; font-weight: 500; }
.g-cab small { display: block; margin-top: 2px; font-size: 13px; }
.garmin-sync .dos { margin-top: 12px; }
.garmin-sync .secund { width: 100%; }

.aviso { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 14px; line-height: 1.35; }
.ic-aviso { flex-shrink: 0; margin-top: 1px; }
.aviso-txt { flex: 1; }
.aviso-txt b { font-weight: 600; }
.aviso .link.chico { min-height: 32px; }
.aviso-acc { display: flex; gap: 18px; }

.sesion { display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; margin-top: 14px; }
.ses-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ses-dur { font-size: 13px; opacity: .8; }
.sesion h2 { margin: 0; }
.ses-sub { margin: 4px 0 14px; font-size: 15px; color: #C9C9CE; }
.ses-sub.chico { margin: 6px 4px 0; font-size: 13px; }
.sesion .primario { margin-top: 10px; }
.ses-70 { margin: 10px 4px 0; font-size: 13px; color: var(--aviso); }
.ses-acc { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.sesion .hecha { margin-top: 6px; font-size: 17px; font-weight: 500; color: var(--txt); }
.sesion + .links { padding: 4px 4px 0; display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 0; }
.prev, .opciones { margin-top: 6px; }

.tarjeta { display: flex; flex-direction: column; justify-content: space-between; width: 100%; border: 0; text-align: left; margin-top: 10px; min-height: 150px; }
.t-k { font-size: 15px; font-weight: 500; }
.t-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.t-col { display: flex; flex-direction: column; gap: 8px; }
.t-n { font-size: 34px; letter-spacing: -.02em; font-weight: 400; }
.t-n.g { font-size: 38px; }
.t-u { font-size: 15px; color: #D9D9DD; }
.minibar { display: block; height: 5px; border-radius: 5px; background: rgba(244,243,239,.18); overflow: hidden; }
.minibar span { display: block; height: 100%; border-radius: 5px; background: var(--txt); }
.t-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.t-par .tarjeta { margin-top: 10px; }
.peso-t { flex-direction: row; align-items: center; min-height: 118px; }
.peso-izq { display: flex; flex-direction: column; gap: 10px; }
.peso-in { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 13px; color: #D9D9DD; }
.peso-in input { width: 74px; height: 44px; border-radius: 14px; background: rgba(0,0,0,.45); border: 1px solid rgba(244,243,239,.3); color: var(--txt); text-align: right; padding: 0 10px; font-family: var(--num); font-size: 20px; }
.peso-in input:focus { outline: 0; border-color: var(--txt); }

/* =====================================================================
   REDISEÑO · etapa 3: días anteriores y Comida
   ===================================================================== */
.cab .k { display: block; margin-top: 2px; }
.cab { align-items: center; }
.hoy-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px; }
.tdp.on.comida { background: var(--comida); }
.minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.mini { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 20px; background: var(--sup); border: 0; color: var(--txt); text-align: left; }
.mini .k { display: flex; align-items: center; gap: 6px; }
.pto { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.mini-n { font-size: 26px; letter-spacing: -.02em; }
.mini-n small { font-size: 14px; color: var(--mut); }
.t.alta::before { background: radial-gradient(ellipse 92% 90% at 50% 52%, #09090B 0%, rgba(9,9,11,.95) 55%, rgba(9,9,11,.4) 85%, rgba(9,9,11,0) 100%); }
.tarjeta-dia { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.tarjeta-dia h2 { margin: 0; font-size: 30px; font-weight: 500; letter-spacing: -.02em; }
.estado-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 10px; border-radius: 999px; background: rgba(244,243,239,.14); }
.cuentas { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.cuentas b { font-size: 26px; font-weight: 400; letter-spacing: -.02em; }
.cuentas small { font-size: 13px; color: #C9C9CE; }
.fr { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; border: 0; border-top: 1px solid rgba(244,243,239,.12); background: none; color: var(--txt); font-size: 15px; padding: 0; text-align: left; }
.fr .v { color: #C9C9CE; font-size: 14px; text-align: right; white-space: nowrap; }
.fr-d { display: flex; align-items: center; gap: 8px; }
.chev { flex-shrink: 0; color: #8A8A90; }
.fr.sin { color: #C9C9CE; }
.tarjeta-dia .secund { align-self: flex-start; }
.k.claro { color: #D9D9DD; }
.peso-t.chica { min-height: 92px; justify-content: space-between; }
.tarjeta-dia + .links { padding: 4px 4px 0; display: flex; gap: 22px; }

/* Comida */
.heroe-com { display: flex; flex-direction: column; align-items: center; margin-top: 20px; padding-top: 22px; }
.heroe-com .heroe-n .dot { font-size: 88px; }
.heroe-com .heroe-u { font-size: 18px; color: #C9C9CE; padding-bottom: 2px; }
.heroe-com .ruler { width: 290px; margin-top: 26px; }
.meta-l { position: absolute; top: -4px; left: 80%; width: 2px; height: 38px; background: rgba(244,243,239,.85); }
.com-txt { margin-top: 12px; font-size: 14px; color: #D9D9DD; }
.sep { width: 100%; height: 1px; background: rgba(244,243,239,.14); margin: 16px 0 12px; }
.com-pie { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.t-n.chico { font-size: 26px; }
.secund.chico { min-height: 40px; padding: 0 14px; font-size: 14px; }
.momentos { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.mom { border-radius: 22px; background: var(--sup); padding: 16px; }
.mh { display: flex; justify-content: space-between; align-items: baseline; }
.mh h3 { margin: 0; font-size: 18px; font-weight: 500; }
.mom-items { margin-top: 8px; }
.it { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; gap: 10px; align-items: center; min-height: 52px; border-top: 1px solid var(--linea); }
.it b { display: block; font-weight: 500; font-size: 15px; }
.it small { font-size: 13px; color: #8A8A90; }
.it .v { font-size: 14px; color: #C9C9CE; white-space: nowrap; }
.it .item-n { min-height: 44px; }
.x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #222226; color: var(--mut); display: flex; align-items: center; justify-content: center; padding: 0; }
.mom-acc { display: flex; gap: 8px; margin-top: 8px; }
.vacio { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; padding: 0 10px 0 16px; border-radius: 22px; background: var(--sup); }
.vacio-n { font-size: 17px; font-weight: 500; }
.vacio-b { display: flex; gap: 6px; }
.guia-t { margin: 22px 4px 8px; }
.guia { border-radius: 22px; background: var(--sup); padding: 0 16px; }
.guia-f { border-top: 1px solid var(--linea); }
.guia-f:first-child { border-top: 0; }
.guia-f summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; list-style: none; cursor: pointer; font-size: 15px; }
.guia-f summary::-webkit-details-marker { display: none; }
.guia-f[open] .chev { transform: rotate(90deg); }
.guia-c { padding: 0 0 14px; }
.aviso-t { font-size: 13px; color: var(--aviso); }

/* =====================================================================
   REDISEÑO · etapa 4: Cuerpo y detalles
   ===================================================================== */
.ico { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--sup2); color: var(--txt); display: flex; align-items: center; justify-content: center; padding: 0; }
.cab-det { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; margin: 4px 0 16px; }
.cab-det h1 { margin: 0; text-align: center; font-size: 17px; font-weight: 500; }
.segm.periodo, .segm { margin-bottom: 0; }
.alta-c { min-height: 210px; margin-top: 14px; }
.spark { width: 100%; height: 60px; display: block; }
.t-fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; width: 100%; }
.t-der { font-size: 14px; color: #D9D9DD; text-align: right; white-space: pre-line; }
.tarjeta.media { min-height: 170px; }
.mini-barras { display: flex; align-items: flex-end; gap: 5px; height: 34px; }
.mini-barras i { width: 10px; border-radius: 3px; background: rgba(244,243,239,.55); }
.mini-puntos { display: flex; align-items: center; justify-content: space-between; height: 34px; }
.mini-puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--txt); }
.chica-t { min-height: 118px; }
.t-n.m { font-size: 28px; }
.ejs { gap: 6px; justify-content: flex-start; min-height: 0; }
.ejs .t-k { margin-bottom: 4px; }
.ejs .fr b { font-weight: 500; }
.heroe-det { display: flex; flex-direction: column; align-items: center; margin-top: 14px; gap: 0; }
.heroe-det.izq { align-items: stretch; gap: 14px; }
.heroe-det .heroe-n { margin-top: 20px; }
.heroe-det .heroe-n .dot { font-size: 92px; }
.heroe-det > .t-u { margin-top: 10px; }
.heroe-det .svg-g, .barras { width: 100%; height: auto; margin-top: 18px; }
.sugerencia { align-self: stretch; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: rgba(231,254,85,.1); color: var(--ahora); font-size: 14px; line-height: 1.35; }
.sugerencia.aviso-s { background: rgba(245,185,74,.12); color: var(--aviso); }
.chips3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 16px; }
.chip3 { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; background: rgba(244,243,239,.1); }
.chip3 .k { color: #C9C9CE; }
.chip3 b { font-size: 18px; font-weight: 400; }
.horario { margin-top: 10px; border-radius: 28px; padding: 18px; }
.g-noche { fill: var(--sueno); }
.g-noche.ult { fill: var(--ahora); }
.g-ult { fill: var(--ahora); }
.lista-reglas { padding: 6px 16px; }
.lista-reglas p { margin: 0; padding: 10px 0; border-top: 1px solid var(--linea); font-size: 14px; line-height: 1.4; }
.lista-reglas p:first-child { border-top: 0; }
.vacio-det { margin-top: 14px; }
.tests h3 small { color: var(--mut); }
.historial { margin-right: 18px; }

/* =====================================================================
   REDISEÑO · etapa 5: Semana y modo entrenamiento
   ===================================================================== */
.flechas { display: flex; gap: 8px; }
.flechas .ico { width: 40px; height: 40px; }
.ayuda { margin: 14px 2px; font-size: 14px; line-height: 1.4; color: var(--mut); }
.dias-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.dia { background: var(--sup); border-radius: 20px; margin: 0; box-shadow: none; overflow: hidden; }
.dia.pasado { background: none; border: 1px solid #1F1F23; }
.dia.hoy { box-shadow: none; border: 2px solid var(--ahora); }
.dia-fila { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 22px; gap: 10px; align-items: center; min-height: 68px; padding: 0 12px 0 14px; }
.dia-fila::after { display: none; }
.dia-fila .dn { display: flex; flex-direction: column; font-size: 15px; font-weight: 500; grid-column: auto; }
.dia-fila .dn small { font-size: 13px; color: var(--mut); font-weight: 400; }
.dia-fila .dn small.hoy-t { color: var(--ahora); }
.ses { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ses b { font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tipo-l { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mut); }
.tipo-l i, .pto { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.est { font-size: 13px; color: var(--mut); white-space: nowrap; }
.dia-fila .asa { color: #5A5A60; grid-row: auto; font-size: 1rem; letter-spacing: -.2em; }
.dia-body { border-top: 1px solid var(--linea); padding: 12px 14px; }
.dia-body .k { margin: 4px 0 6px; }
.mover { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mover .secund.chico { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.mover.poner button { border-color: rgba(244,243,239,.3); color: var(--txt); }
.dia.destino { box-shadow: inset 0 0 0 2px var(--entreno); background: rgba(69,123,241,.12); }
.prev-dia.cambia { border: 1px solid var(--entreno); }
.propuesta { margin-top: 12px; box-shadow: inset 0 0 0 1.5px var(--entreno); }
.bloque-f { padding: 10px 0; border-top: 1px solid var(--linea); }
.bloque-f:first-child { border-top: 0; }
.bloque-f p { margin: 4px 0 0; font-size: 14px; }
.bloque-f.actual-b b { color: var(--ahora); }

/* entrenando */
.en-top { grid-template-columns: 44px 1fr 44px; }
.reloj { font-size: 30px; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.en-prog { text-align: right; font-size: 15px; font-weight: 500; color: #8FB0FF; }
.barra { background: #1F1F23; margin-top: 14px; }
.barra span { background: var(--entreno); }
.en-sub { margin: 12px 2px 14px; font-size: 14px; color: var(--mut); }
.en-lista { display: flex; flex-direction: column; gap: 6px; }
.en-lista .k.sec { margin: 14px 4px 2px; }
.hecho-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--linea); background: none; color: var(--mut); font-size: 15px; text-align: left; }
.hecho-n { display: flex; align-items: center; gap: 10px; }
.ok-c { width: 22px; height: 22px; border-radius: 50%; background: var(--entreno); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pend { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 56px; padding: 0 14px 0 16px; border-radius: 18px; border: 0; background: var(--sup); color: var(--txt); font-size: 16px; text-align: left; }
.v { color: var(--mut); font-size: 14px; white-space: nowrap; }
.actual { border-radius: 24px; background: #131316; border: 1.5px solid var(--entreno); padding: 18px 16px 16px; margin: 6px 0; }
.actual .ej-top h3 { font-size: 23px; line-height: 1.15; }
.actual .dosis { font-family: var(--num); font-size: 19px; font-weight: 400; color: #8FB0FF; }
.actual > .k { margin-top: 6px; }
.act-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.act-links .link.chico { font-size: 14px; }
.sube { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 14px; font-size: 15px; }
.sube b { font-weight: 600; }
.sube small { opacity: .75; }
.fila-h { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--dim); }
.fila-h, .serie { grid-template-columns: 20px minmax(0, 1fr) 70px 58px 48px; }
.serie input { background: var(--bg); border-color: #34343A; font-size: 21px; font-weight: 400; }
.ck { border-color: #3A3A3F; color: var(--dim); }
.ck.on { color: var(--bg); }
.serie.on input { border-color: transparent; background: none; color: #8FB0FF; }
.secund.terminar { width: 100%; min-height: 52px; margin-top: 18px; }
.timer-t { font-size: 56px; }
.timer-lbl { margin-bottom: 8px; }
.timer-btns button { min-height: 52px; padding: 0 18px; }
.timer-bar { background: #1F1F23; }

.aviso-version { position: fixed; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 18px; background: var(--sup2); border: 1px solid var(--ahora); font-size: 14px; max-width: 540px; margin: 0 auto; }