/* MAINEVOLVE · pantallas de la app pública (primer uso, Hoy, Comer, Entrenar, Progreso, Coach…).
   Nacieron en el prototipo de la Fase 0 (public/prototipo). */
.grow { flex: 1; min-width: 0; }
/* ───── Primer uso ───── */
.ob-wrap { min-height: 100dvh; display: grid; place-items: stretch center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.ob { width: min(560px, 100%); display: grid; grid-template-rows: auto 1fr auto; gap: 18px; min-height: calc(100dvh - 32px); }
.ob-cab { display: grid; grid-template-columns: 44px 1fr 64px; align-items: center; gap: 10px; }
.ob-progreso { height: 6px; border-radius: 6px; background: var(--fill); overflow: hidden; }
.ob-progreso i { display: block; height: 100%; background: var(--grad); border-radius: inherit; transition: width 380ms var(--ease); }
.ob-cuerpo { align-self: center; animation: ob-entra 320ms var(--ease); }
@keyframes ob-entra { from { opacity: 0; transform: translateX(14px); } }
.ob-hola { display: grid; justify-items: center; text-align: center; gap: 14px; }
.ob-hola h1 { font-size: clamp(46px, 12vw, 68px); }
.ob-lead { color: var(--muted); font-size: 17px; line-height: 1.55; margin: 0; max-width: 40ch; }
.ob-tit { font-family: var(--display); font-size: clamp(34px, 9vw, 46px); text-transform: uppercase; margin-bottom: 6px; }
:root[data-estilo='salud'] .ob-tit { font-family: var(--font); font-weight: 700; font-size: 28px; text-transform: none; letter-spacing: -0.02em; }
.ob-sub { color: var(--muted); margin: 0 0 16px; }
.ob-lista { display: grid; gap: 10px; margin-top: 14px; }
.ob-opcion { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 15px 16px; border-radius: 18px; border: 1px solid var(--glass-border); background: var(--fill); color: var(--text); font: inherit; cursor: pointer; transition: border-color 160ms var(--ease), background 160ms var(--ease), transform 200ms var(--spring); }
.ob-opcion b { display: block; font-size: 16px; }
.ob-opcion small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.ob-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--glass-bg); border: 1px solid var(--glass-border); flex-shrink: 0; }
.ob-ic svg { width: 21px; height: 21px; color: var(--accent-text); }
.ob-check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--glass-border); flex-shrink: 0; }
.ob-check svg { width: 14px; height: 14px; color: #fff; opacity: 0; }
.ob-opcion.on { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 10%, var(--fill)); }
.ob-opcion.on .ob-check { background: var(--grad); border-color: transparent; }
.ob-opcion.on .ob-check svg { opacity: 1; }
.ob-opcion:active { transform: scale(0.98); }
.ob-sexo { margin: 10px 0 18px; }
.ob-nums { display: grid; gap: 10px; }
.ob-num { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 18px; border-radius: 18px; background: var(--fill); border: 1px solid var(--glass-border); }
.ob-stepper { display: flex; align-items: center; gap: 10px; }
.ob-stepper button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--text); font: 600 20px/1 var(--font); cursor: pointer; }
.ob-stepper b { font: 400 36px/1 var(--display); min-width: 92px; text-align: center; }
.ob-stepper small { font: 500 12px var(--font); color: var(--muted); margin-left: 2px; }
.ob-estilos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ob-estilo { display: grid; gap: 4px; padding: 12px; border-radius: 20px; border: 2px solid var(--glass-border); background: var(--fill); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ob-estilo.on { border-color: var(--orange); }
.ob-estilo b { font-size: 16px; margin-top: 6px; }
.ob-estilo small { color: var(--muted); font-size: 12px; }
.ob-mini { display: grid; gap: 6px; padding: 10px; height: 110px; border-radius: 14px; }
.ob-mini i { display: block; border-radius: 8px; }
.ob-estilo--fitness .ob-mini { background: radial-gradient(80% 70% at 100% 0%, rgba(255, 90, 31, 0.6), transparent 70%), #0b0a0d; }
.ob-estilo--fitness .ob-mini i { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); }
.ob-estilo--fitness .ob-mini i:first-child { background: linear-gradient(90deg, #ff5a1f, #eb3141); }
.ob-estilo--salud .ob-mini { background: #fbf7f3; border: 1px solid rgba(40, 20, 10, 0.08); }
.ob-estilo--salud .ob-mini i { background: #fff; box-shadow: 0 2px 8px rgba(70, 30, 10, 0.08); }
.ob-estilo--salud .ob-mini i:first-child { background: linear-gradient(90deg, #ff5a1f, #eb3141); height: 14px; width: 60%; }
.ob-final { display: grid; gap: 16px; }
.ob-objetivos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .ob-objetivos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ob-objetivos div { display: grid; justify-items: center; gap: 2px; padding: 14px 8px; border-radius: 18px; background: var(--fill); border: 1px solid var(--glass-border); }
.ob-objetivos span svg { width: 20px; height: 20px; color: var(--accent-text); }
.ob-objetivos b { font: 400 30px/1 var(--display); }
.ob-objetivos small { color: var(--muted); font-size: 12px; }
.ob-regalo { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--yellow) 14%, var(--fill)); border: 1px solid color-mix(in srgb, var(--yellow) 45%, transparent); }
.ob-regalo > svg { width: 26px; height: 26px; color: var(--accent-text); flex-shrink: 0; }
.ob-check-legal { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.ob-check-legal input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--orange); flex-shrink: 0; }
.ob-check-legal small { display: block; margin-top: 2px; }
.ob-pie { display: grid; gap: 12px; }
.ob-siguiente { width: 100%; padding: 16px; font-size: 21px; }
.ob-siguiente:disabled { opacity: 0.45; }
.ob-alt { display: flex; justify-content: center; gap: 10px; font-size: 14px; color: var(--faint); }

/* ───── Hoy y pantallas ───── */
.hoy-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hoy-col { display: grid; gap: 16px; min-width: 0; }
.hoy-col > .card + .card { margin-top: 0; }
@media (max-width: 980px) { .hoy-grid { grid-template-columns: minmax(0, 1fr); } }
.p-racha, .p-premium { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--fill); border: 1px solid var(--glass-border); font-size: 13px; font-weight: 600; }
.p-racha svg, .p-premium svg { width: 16px; height: 16px; color: var(--accent-text); }
.p-racha b { font: 400 20px/1 var(--display); }
.p-resumen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 26px; align-items: center; }
.p-resumen .p-anadir { grid-column: 1 / -1; justify-self: start; }
.p-resumen--compacto { gap: 14px 20px; }
.p-macros { display: grid; gap: 12px; }
.p-macros .metric + .metric { margin-top: 0; }
.p-anillo .pista { fill: none; stroke: var(--fill-hover); }
.p-anillo .valor { fill: none; stroke: var(--orange); stroke-linecap: round; transition: stroke-dashoffset 600ms var(--ease); }
.p-anillo .num { font: 400 30px var(--display); fill: var(--text); }
.p-anillo .lbl { font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--muted); }
.p-plato .borde { fill: none; stroke: var(--hairline); stroke-width: 6; }
.p-plato .pl { font: 700 7.5px var(--font); fill: #fff; }
.p-semaforos { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.p-semaforos i, .p-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; }
.verde { background: #22a06b; } .amarillo { background: #e0a100; } .rojo { background: #eb3141; }
.p-entreno-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.p-ejs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.p-ejs span { font-size: 12px; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--fill); border: 1px solid var(--glass-border); color: var(--muted); }
.p-ejs span.on { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, transparent); }
.p-habitos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.p-habito { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--glass-border); background: var(--fill); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.p-habito > svg { width: 20px; height: 20px; color: var(--accent-text); flex-shrink: 0; }
.p-habito b { display: block; font-size: 14px; }
.p-habito small { color: var(--muted); font-size: 12px; }
.p-tick { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--glass-border); }
.p-tick svg { width: 13px; height: 13px; color: #fff; opacity: 0; }
.p-habito.on .p-tick { background: var(--up); border-color: var(--up); }
.p-habito.on .p-tick svg { opacity: 1; }
.p-evo .mascota-dice { align-items: flex-end; }
.p-vasos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; max-width: 420px; }
.p-vaso { width: 100%; height: 50px; border-radius: 12px 12px 16px 16px; border: 1px solid var(--glass-border); background: var(--fill); color: var(--faint); display: grid; place-items: center; cursor: pointer; transition: background 200ms var(--ease), color 200ms var(--ease), transform 220ms var(--spring); }
.p-vaso svg { width: 20px; height: 20px; }
.p-vaso.on { background: linear-gradient(180deg, #7cc7ff, #2f8cff); border-color: transparent; color: #fff; }
.p-vaso:active { transform: scale(0.92); }
.p-ayuno { display: flex; align-items: center; gap: 18px; }
.p-ayuno b { display: block; font-size: 18px; margin-top: 4px; }
.p-reto h2 { margin: 4px 0 10px; }
.p-coach { display: flex; align-items: center; gap: 14px; color: var(--text); background: linear-gradient(120deg, color-mix(in srgb, var(--orange) 16%, var(--glass-bg)), var(--glass-bg)); }
.p-coach > svg:first-child { width: 28px; height: 28px; color: var(--accent-text); flex-shrink: 0; }
.p-coach b { display: block; }
.p-coach small { color: var(--muted); }
.p-coach > svg:last-child { width: 20px; height: 20px; color: var(--muted); }

.p-acciones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.p-accion { display: grid; justify-items: center; gap: 6px; padding: 14px 4px; border-radius: 18px; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--text); font: 600 12px var(--font); cursor: pointer; }
.p-accion svg { width: 22px; height: 22px; color: var(--accent-text); }
.p-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.p-item:last-of-type { border-bottom: 0; }
.p-item b { display: block; font-size: 14px; font-weight: 600; }
.p-item small { color: var(--muted); font-size: 12px; }
.p-comida h2 small { font: 500 13px var(--font); text-transform: none; letter-spacing: 0; }
.p-dias { display: flex; gap: 6px; }
.p-dias span { flex: 1; text-align: center; padding: 10px 0; border-radius: 12px; background: var(--fill); font: 400 18px var(--display); }
.p-dias span.hoy { background: var(--grad); color: #fff; }
.p-receta { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.p-receta:last-child { border-bottom: 0; }
.p-receta-img { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, #f7c59f, #ed5c23 60%, #a3201e); flex-shrink: 0; }
.p-receta b { display: block; font-size: 14px; }
.p-receta small { color: var(--muted); font-size: 12px; }
.p-receta > svg { width: 18px; height: 18px; color: var(--muted); }

.p-entreno--grande .p-ej { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.p-ej-img { width: 52px; height: 52px; border-radius: 12px; background: #fff; object-fit: cover; flex-shrink: 0; }
.p-ej b { display: block; font-size: 14px; }
.p-ej small { color: var(--muted); font-size: 12px; }
.p-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.p-tipo { display: grid; gap: 2px; padding: 16px; border-radius: 18px; border: 1px solid var(--glass-border); background: var(--fill); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.p-tipo svg { width: 24px; height: 24px; color: var(--accent-text); margin-bottom: 6px; }
.p-tipo small { color: var(--muted); font-size: 12px; }
.p-generar { display: grid; gap: 12px; }
.p-generar .btn { justify-self: start; }
.p-programas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.p-programa { display: grid; gap: 2px; color: var(--text); }
.p-programa-portada { display: grid; place-items: center; height: 92px; border-radius: 16px; margin-bottom: 6px; color: rgba(255, 255, 255, 0.85); }
.p-programa-portada svg { width: 30px; height: 30px; }
.pg1 { background: linear-gradient(135deg, #ff8a1f, #eb3141); } .pg2 { background: linear-gradient(135deg, #eb3141, #8e1b4a); } .pg3 { background: linear-gradient(135deg, #fbbb0b, #ed5c23); }
.pg4 { background: linear-gradient(135deg, #2fb37a, #11795a); } .pg5 { background: linear-gradient(135deg, #3b82f6, #1e40af); } .pg6 { background: linear-gradient(135deg, #a855f7, #6d28d9); }
.p-programa b { font-size: 14px; }
.p-programa small { color: var(--muted); font-size: 12px; }
.p-programa .badge { justify-self: start; margin-top: 4px; }
.p-herramientas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.p-herramienta { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--glass-border); background: var(--fill); color: var(--text); font: 600 14px var(--font); cursor: pointer; }
.p-herramienta svg { width: 20px; height: 20px; color: var(--accent-text); }

.p-cifras { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 10px; }
.p-cifras b { display: block; font: 400 34px/1 var(--display); }
.p-cifras small { color: var(--muted); font-size: 12px; }
.p-grafica { width: 100%; height: auto; }
.g-linea { stroke: var(--chart-grid); }
.g-eje { font: 9px var(--font); fill: var(--chart-tick); }
.g-punto { fill: var(--muted); opacity: 0.45; }
.g-media { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.p-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-fotos figure { margin: 0; }
.p-fotos span { display: block; aspect-ratio: 3 / 4; border-radius: 16px; background: linear-gradient(180deg, var(--fill-hover), var(--fill)); border: 1px dashed var(--glass-border); }
.p-fotos figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; text-align: center; }
.p-trofeo svg { width: 22px; height: 22px; color: var(--yellow); }
.p-bloqueado { text-align: center; display: grid; justify-items: center; }
.p-candado { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--fill); margin-bottom: 10px; }
.p-candado svg { width: 24px; height: 24px; color: var(--accent-text); }

.p-coach-hero { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; padding: 30px; background: radial-gradient(60% 90% at 100% 0%, color-mix(in srgb, var(--orange) 22%, transparent), transparent 70%), var(--glass-bg); }
.p-coach-foto { width: 150px; height: 150px; border-radius: 50%; padding: 5px; background: var(--grad); flex-shrink: 0; }
.p-coach-foto span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--glass-solid); font: 400 54px var(--display); color: var(--text); }
.p-plazas { font-size: 14px; color: var(--muted); }
.p-plazas svg { width: 16px; height: 16px; color: var(--accent-text); vertical-align: -3px; margin-right: 6px; }
.p-coach-hero .grow { flex: 1 1 300px; }
.p-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.p-pasos .card + .card { margin-top: 0; }
.p-paso { display: grid; gap: 4px; }
.p-paso > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; font: 400 20px var(--display); margin-bottom: 6px; }
.p-paso small { color: var(--muted); }
.p-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.p-planes .card + .card { margin-top: 0; }
.p-plan-c { display: grid; gap: 6px; align-content: start; }
.p-plan-c.top { border-color: var(--orange); box-shadow: var(--glass-shadow), 0 0 0 1px var(--orange); }
.p-top { justify-self: start; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--grad); padding: 3px 9px; border-radius: var(--radius-pill); }
.p-precio { font: 400 42px/1 var(--display); }
.p-precio small { font: 500 14px var(--font); color: var(--muted); }
.p-plan-c .btn { justify-self: start; margin-top: 6px; }
.p-testimonio p { font-size: 16px; line-height: 1.5; margin: 12px 0 6px; }
.p-antes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p-antes span { display: grid; place-items: end center; aspect-ratio: 4 / 5; border-radius: 14px; background: var(--fill-hover); font-size: 11px; color: var(--muted); padding-bottom: 8px; }
.p-historial { display: flex; gap: 14px; align-items: center; margin-top: 16px; }
.p-historial > svg { width: 24px; height: 24px; color: var(--accent-text); flex-shrink: 0; }
.p-historial b { display: block; }
.p-historial small { color: var(--muted); }

.p-mas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.p-mas { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text); }
.p-mas > svg:first-child { width: 22px; height: 22px; color: var(--accent-text); flex-shrink: 0; }
.p-mas > svg:last-child { width: 18px; height: 18px; color: var(--faint); }
.p-mas b { display: block; font-size: 15px; }
.p-mas small { color: var(--muted); font-size: 12px; }
.p-mas.destacado { background: var(--grad-sheen), var(--grad); border-color: transparent; color: #fff; }
.p-mas.destacado svg, .p-mas.destacado small { color: #fff; }

.p-galeria { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-end; }
.p-galeria figure { margin: 0; display: grid; justify-items: center; gap: 8px; }
.p-galeria figcaption { font-size: 13px; color: var(--muted); }
.p-logros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.p-logro { display: grid; justify-items: center; gap: 6px; text-align: center; opacity: 0.4; filter: grayscale(1); }
.p-logro span { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--grad); color: #fff; box-shadow: 0 6px 18px rgba(235, 49, 65, 0.3); }
.p-logro span svg { width: 26px; height: 26px; }
.p-logro.on { opacity: 1; filter: none; }
.p-logro small { font-size: 12px; }
.p-share { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.p-share-card { width: 170px; aspect-ratio: 9 / 16; border-radius: 22px; display: grid; justify-items: center; align-content: center; gap: 2px; padding: 14px; color: #fff; text-align: center;
  background: radial-gradient(90% 60% at 50% 20%, rgba(255, 140, 40, 0.55), transparent 70%), linear-gradient(180deg, #1a0d0b, #07070a); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
.p-share-card b { font: 400 54px/1 var(--display); margin-top: 6px; }
.p-share-card span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; }
.p-share-card small { margin-top: 14px; font: 400 14px var(--display); letter-spacing: 0.2em; opacity: 0.8; }
.p-share p { flex: 1; min-width: 160px; }

/* ───── Hoy en modo sencillo ───── */
.hs { display: grid; gap: 18px; max-width: 760px; }
.hs-evo .mascota-bocadillo { font-size: 20px; }
.hs-leer { justify-self: start; }
.hs-leer svg { width: 22px; height: 22px; }
.hs-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hs-boton { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 150px; padding: 18px; border-radius: 26px; background: var(--glass-bg); border: 2px solid var(--glass-border); color: var(--text); text-align: center; box-shadow: var(--glass-shadow); }
.hs-boton svg { width: 46px; height: 46px; color: var(--accent-text); }
.hs-boton b { font-size: 22px; }
.hs-boton small { color: var(--muted); font-size: 15px; margin-top: -6px; }
.hs-pastilla { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border: 2px solid color-mix(in srgb, var(--orange) 50%, transparent); }
.hs-pastilla-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--grad); color: #fff; }
.hs-pastilla-ic svg { width: 30px; height: 30px; }
.hs-pastilla b, .hs-dato b { display: block; font-size: 20px; }
.hs-pastilla span, .hs-dato span { color: var(--muted); }
.hs-dato { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hs-semaforo { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; }

@media (max-width: 760px) {
  .p-resumen { grid-template-columns: 1fr; justify-items: center; }
  .p-resumen .p-macros { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .p-resumen .p-macros .metric-row { flex-direction: column; align-items: flex-start; gap: 0; font-size: 12px; }
  .p-resumen .p-macros .metric-row b { font-size: 21px; }
  .p-resumen .p-anadir { justify-self: stretch; }
  .p-acciones { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .p-accion { padding: 12px 2px; font-size: 11px; }
  .p-coach-hero { padding: 22px; gap: 18px; }
  .p-coach-foto { width: 96px; height: 96px; }
  .p-coach-foto span { font-size: 36px; }
  .hs-boton { min-height: 132px; }
}

/* Símbolo en la bienvenida, consejo del día y tarjeta de racha (Evo solo en rachas y logros) */
.ob-simbolo { filter: drop-shadow(0 12px 30px rgba(237, 92, 35, 0.35)); animation: ob-flota 4s ease-in-out infinite; }
@keyframes ob-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .ob-simbolo { animation: none; } }
.p-consejo .label-caps { margin-bottom: 12px; }
.p-racha-card { display: flex; align-items: center; gap: 18px; color: var(--text); background: radial-gradient(70% 90% at 0% 100%, color-mix(in srgb, var(--orange) 20%, transparent), transparent 70%), var(--glass-bg); }
.p-racha-card b { display: block; font: 400 30px/1 var(--display); margin: 4px 0 2px; }
:root[data-estilo='salud'] .p-racha-card b { font: 700 22px/1.2 var(--font); }
.p-racha-card small { color: var(--muted); font-size: 13px; }
.p-racha-card .metric, .p-racha-card .bar { display: block; }
.p-racha-card .metric { margin-top: 8px; }
.p-racha-card .metric-row { display: none; }
.hs-consejo .simbolo-bocadillo { font-size: 20px; }

/* ───── Fase 1: primer uso real, entrada y ajustes ───── */
.ob-idioma { margin-top: 10px; }
.ob-cuenta { display: grid; gap: 12px; margin-top: 6px; padding: 18px; border-radius: 20px; background: var(--fill); border: 1px solid var(--glass-border); }
.ob-cuenta h2 { margin: 0; }
.ob-o { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; margin: 8px 0; }
.ob-o::before, .ob-o::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }
.ob-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.p-habito--campo { cursor: default; }
.p-habito--campo input { padding: 9px 30px 9px 12px; }
.login-enlaces { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.login-olvido { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.login-olvido[hidden] { display: none; }
.ajustes-filas { display: grid; gap: 14px; }
.ajustes-filas > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 600; }
.p-coach { flex-wrap: wrap; }
.p-coach .grow { flex: 1 1 200px; }

/* Objetivos diarios en Ajustes: dos columnas también en el móvil (si no, la tarjeta es larguísima) */
@media (max-width: 560px) { .ajustes-objetivos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.ajustes-app:not(:empty) { margin-bottom: 16px; }

/* ───────── Comer (Fase 2) ───────── */
.dia-grid { align-items: start; }
.dia-grid .p-acciones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 16px; }
.dia-grid .dia-comida, .dia-grid .dia-consejos { margin-top: 16px; }
.dia-grid .hoy-col > .card + .card { margin-top: 16px; }
.dia-comida-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.dia-herramientas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dia-herramientas p { flex-basis: 100%; }
.dia-resumen--plato { display: flex; gap: 22px; align-items: center; }
.dia-resumen--plato h2 { margin: 0; }
.dia-comida .card-head .p-plato { vertical-align: middle; }
.dia-entrada .title { font-weight: 500; }
/* Pestañas del cuadro «Añadir» (se desplazan en el móvil) */
.dia-pestanas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin: -2px 0 12px; scrollbar-width: none; }
.dia-pestanas::-webkit-scrollbar { display: none; }
.dia-pestanas button { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--fill); color: var(--muted); font: 600 13px var(--font); cursor: pointer; }
.dia-pestanas button svg { width: 16px; height: 16px; }
.dia-pestanas button[aria-selected='true'] { background: var(--grad); color: #fff; border-color: transparent; }
.dia-bloque { margin: 12px 0 4px; }
.dia-lista .list-row.dia-evitar { opacity: 0.72; }
.dia-sel-cab { display: flex; gap: 10px; align-items: center; }
.dia-fav svg { width: 20px; height: 20px; }
.dia-fav.on { color: #f5b400; }
.dia-fav.on svg { fill: currentColor; }
.dia-cant { display: grid; grid-template-columns: minmax(90px, 0.7fr) minmax(140px, 1.3fr) minmax(130px, 1fr); gap: 10px; margin-top: 12px; align-items: end; }
.dia-prev { margin: 10px 0 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dia-parte { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; }
.dia-parte--verdura { background: #2f9e5b; }
.dia-parte--proteina { background: #d9531e; }
.dia-parte--hidratos { background: #c99300; }
.dia-avisos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.dia-aviso { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.5; }
.dia-aviso svg { width: 12px; height: 12px; }
.dia-aviso--alergia, .dia-aviso--dieta { background: color-mix(in srgb, var(--down) 16%, transparent); color: var(--down); }
.dia-aviso--trazas, .dia-aviso--salud { background: color-mix(in srgb, #e0a100 18%, transparent); color: #a87400; }
:root[data-theme='dark'] .dia-aviso--trazas, :root[data-theme='dark'] .dia-aviso--salud { color: #f2c14e; }
.dia-aviso--gusto { background: var(--fill-hover); color: var(--muted); }
.dia-guardada { display: flex; align-items: center; gap: 6px; padding: 0; }
.dia-guardada.is-sel { background: var(--fill-hover); border-color: var(--orange); }
.dia-guardada-elegir { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dia-guardada-elegir svg { width: 18px; height: 18px; color: var(--accent-text); flex-shrink: 0; }
.dia-alergenos { border: 0; padding: 0; margin: 14px 0 0; }
.dia-alergenos legend { margin-bottom: 8px; }
.chip-check { position: relative; display: inline-flex; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--fill); font-size: 13px; cursor: pointer; }
.chip-check input:checked + span { background: var(--grad); color: #fff; border-color: transparent; }
.chip-check input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
/* Ayuno */
.ay-anillo { width: 104px; height: 104px; flex-shrink: 0; }
.ay-anillo .pista { fill: none; stroke: var(--fill-hover); stroke-width: 9; }
.ay-anillo .valor { fill: none; stroke: #8b6cff; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 400ms var(--ease); }
.ay-anillo .valor.hecho { stroke: var(--up); }
.ay-anillo .num { font: 400 21px var(--display); fill: var(--text); }
.ay-anillo .lbl { font-size: 7px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--muted); }
.ay-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.ay-empezar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.ay-empezar input[type='time'] { width: auto; padding: 6px 10px; margin-left: 6px; }
@media (max-width: 760px) {
  .dia-grid .p-acciones { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dia-cant { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .dia-cant > label:last-child { grid-column: 1 / -1; }
  .dia-resumen--plato { flex-direction: column; text-align: center; }
  .dia-resumen--plato .p-semaforos { justify-content: center; }
}
.dia-entrada > b { font: 600 14px var(--font); white-space: nowrap; letter-spacing: 0; text-transform: none; }
.dia-comida-botones .btn.ghost { padding-inline: 10px; }
.modal .dia-lista { overflow-x: hidden; }
.modal .dia-lista .list-row { min-width: 0; box-sizing: border-box; }
.dia-grid .dia-barras .metric-row { flex-direction: column; align-items: flex-start; gap: 0; }
.dia-grid .dia-barras .metric-row b { font-size: 22px; }

/* ───────── Entrenar (Fase 3) ───────── */
button.p-ej { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--hairline); color: inherit; font: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 0; }
button.p-ej:last-of-type { border-bottom: 0; }
.p-ej .ej-thumb { border-radius: 12px; flex-shrink: 0; }
.p-tipo { cursor: pointer; text-align: left; }
.p-herramienta { color: var(--text); font-weight: 600; font-size: 14px; }
.e-mio { cursor: default; }
.e-mio .btn { flex-shrink: 0; }
.e-prog-cab { display: flex; gap: 18px; align-items: flex-start; }
.e-prog-cab .p-programa-portada { width: 120px; height: 120px; flex-shrink: 0; margin: 0; }
.e-rutinas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.e-rutina { display: flex; align-items: center; gap: 14px; color: var(--text); padding: 16px 18px; }
.e-rutina b { display: block; }
.e-rutina small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.e-rutina-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--grad); color: #fff; flex-shrink: 0; }
.e-rutina-ic svg { width: 24px; height: 24px; }
.e-descansos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.e-barra { display: flex; align-items: center; justify-content: center; gap: 3px; height: 90px; margin-top: 12px; }
.e-eje { width: 70px; height: 8px; border-radius: 4px; background: var(--muted); opacity: 0.6; }
.e-disco { display: block; width: 12px; border-radius: 4px; background: var(--grad); }
.e-fin { margin-top: 16px; }
.gen-u { display: grid; gap: 16px; }
.gen-u .label-caps { margin-bottom: 8px; }
.gen-u-fila { display: flex; gap: 18px; flex-wrap: wrap; }
.gen-u details summary { cursor: pointer; color: var(--accent-text); font-weight: 600; }
.gen-u-prev { padding: 14px 16px; border-radius: 16px; background: var(--fill); border: 1px solid var(--glass-border); }
.gen-u-ses { padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.gen-u-ses:last-of-type { border-bottom: 0; }
.lg-anadir { margin-top: 12px; }
.lg-head { position: relative; }
.lg-head > .btn.icon { margin-left: auto; align-self: flex-start; }
/* Reproductor de rutinas, HIIT y descanso */
.tm-card { display: grid; justify-items: center; text-align: center; gap: 6px; max-width: 560px; margin: 0 auto; padding: 22px 18px 20px; transition: background 300ms var(--ease); }
.tm-visual { min-height: 0; }
.tm-visual:empty { display: none; }
.tm-img { width: 220px; max-width: 70vw; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; background: #fff; margin-bottom: 6px; }
.tm-reloj { position: relative; width: 210px; height: 210px; }
.tm-reloj svg { width: 100%; height: 100%; }
.tm-reloj .pista { fill: none; stroke: var(--fill-hover); stroke-width: 8; }
.tm-reloj .valor { fill: none; stroke: var(--orange); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 200ms linear, stroke 300ms; }
.tm-num { position: absolute; inset: 0; display: grid; place-items: center; font: 400 64px/1 var(--display); letter-spacing: 0.02em; }
.tm-fase { font: 400 32px/1.1 var(--display); text-transform: uppercase; margin-top: 4px; }
.tm-texto { margin: 2px 0 0; color: var(--muted); max-width: 40ch; min-height: 1.4em; }
.tm-barra { width: 100%; height: 6px; border-radius: 99px; background: var(--fill); overflow: hidden; margin-top: 10px; }
.tm-barra i { display: block; height: 100%; width: 0; background: var(--grad); transition: width 200ms linear; }
.tm-controles { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
.tm-play { min-width: 150px; }
.tm[data-tipo='trabajo'] .valor { stroke: #eb3141; }
.tm[data-tipo='trabajo'] .tm-fase { color: #eb3141; }
.tm[data-tipo='descanso'] .valor, .tm[data-tipo='fin'] .valor { stroke: #22a06b; }
.tm[data-tipo='descanso'] .tm-fase, .tm[data-tipo='fin'] .tm-fase { color: #22a06b; }
.tm[data-tipo='prep'] .valor { stroke: #e0a100; }
.tm[data-tipo='resp'] .valor { stroke: #3b82f6; }
.tm-burbuja { width: 170px; height: 170px; display: grid; place-items: center; margin-bottom: 8px; transform: scale(0.5); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9cc9ff, #3b82f6 70%); box-shadow: 0 0 60px rgba(59, 130, 246, 0.45); }
.tm[data-tipo='resp'] .tm-reloj { width: 120px; height: 120px; }
.tm[data-tipo='resp'] .tm-num { font-size: 40px; }
@media (prefers-reduced-motion: reduce) { .tm-burbuja { transition: none !important; } }
@media (max-width: 760px) {
  .e-prog-cab { flex-direction: column; }
  .e-prog-cab .p-programa-portada { width: 100%; height: 110px; }
  .tm-reloj { width: 180px; height: 180px; }
  .tm-num { font-size: 54px; }
}
/* Las tarjetas de las columnas nunca se ensanchan por un texto largo de una línea (títulos con «…») */
.hoy-col > * { min-width: 0; max-width: 100%; }
@media (max-width: 760px) {
  .tm .topbar h1 { font-size: 30px; }
  .tm-img { width: 190px; }
  .tm-reloj { width: 160px; height: 160px; }
  .tm-num { font-size: 48px; }
  .tm-fase { font-size: 26px; }
  .tm-card { gap: 4px; padding: 16px 14px; }
  .tm-burbuja { width: 140px; height: 140px; }
}

/* ───────── Coach 1:1 (Fase 4) ───────── */
.p-coach-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--glass-solid); }
.co-plazas { color: var(--up); }
.co-plazas.llenas { color: #c98a00; }
.co-estado { display: flex; gap: 14px; align-items: center; margin-top: 16px; border-color: color-mix(in srgb, var(--up) 45%, var(--glass-border)); }
.co-estado > svg { width: 24px; height: 24px; color: var(--up); flex-shrink: 0; }
.co-estado--espera { border-color: color-mix(in srgb, #e0a100 50%, var(--glass-border)); }
.co-estado--espera > svg { color: #e0a100; }
.co-estado b { display: block; }
.co-estado small { color: var(--muted); }
.co-testimonios { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.co-testimonio { margin: 0; display: grid; gap: 10px; align-content: start; }
.co-antes-despues { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.co-antes-despues span { position: relative; display: block; }
.co-antes-despues img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; display: block; background: var(--fill); }
.co-antes-despues small { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11px; font-weight: 600; }
.co-resultado { font: 400 24px/1.1 var(--display); color: var(--accent-text); }
.co-testimonio blockquote { margin: 0; font-size: 14px; line-height: 1.5; }
.co-testimonio figcaption { color: var(--muted); font-size: 13px; }
.co-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.co-opcion { position: relative; display: block; cursor: pointer; }
.co-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.co-opcion span { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--fill); }
.co-opcion small { color: var(--muted); }
.co-opcion input:checked + span { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.co-opcion input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.co-codigo { display: flex; gap: 8px; }
.co-codigo input { flex: 1; min-width: 0; }
.co-sugerencia { display: flex; gap: 14px; align-items: center; border-color: color-mix(in srgb, var(--orange) 45%, var(--glass-border)); }
.co-sugerencia .grow b { display: block; }
.co-sugerencia .grow small { color: var(--muted); }
.co-sugerencia-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ───────── Panel del coach: escaparate, códigos y métricas (Fase 4) ───────── */
.esc-foto { display: flex; gap: 16px; align-items: center; }
.esc-foto .p-coach-foto { width: 96px; height: 96px; }
.esc-foto .p-coach-foto > span { font-size: 34px; }
.esc-paso { display: grid; grid-template-columns: 28px minmax(0, 0.8fr) minmax(0, 1.6fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.esc-paso > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700; font-size: 13px; }
.esc-test { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; color: inherit; font: inherit; cursor: pointer; }
.esc-mini { display: flex; gap: 3px; width: 72px; height: 48px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 10px; background: var(--fill); overflow: hidden; }
.esc-mini img { width: 36px; height: 48px; object-fit: cover; }
.esc-mini svg { width: 20px; height: 20px; color: var(--muted); }
.esc-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.esc-foto-test { display: grid; gap: 8px; justify-items: start; padding: 12px; border-radius: 14px; border: 1px dashed var(--glass-border); }
.esc-foto-test img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; }
.esc-foto-test > span { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; background: var(--fill); }
.esc-guardar { position: sticky; bottom: 12px; display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 12px 16px; border-radius: 18px; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 2; }
.emb { display: grid; gap: 10px; }
.emb-fila { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto 44px; gap: 10px; align-items: center; font-size: 14px; }
.emb-barra { height: 12px; border-radius: 99px; background: var(--fill); overflow: hidden; }
.emb-barra i { display: block; height: 100%; background: var(--grad); border-radius: inherit; }
@media (max-width: 760px) { .esc-paso { grid-template-columns: 26px minmax(0, 1fr) auto; } .esc-paso input:nth-of-type(2) { grid-column: 2 / 3; } .emb-fila { grid-template-columns: minmax(0, 1fr) auto 44px; } .emb-barra { display: none; } }
.esc-grid > * { min-width: 0; }
.esc-guardar { margin-bottom: 8px; }
/* Filas de lista que son botones (códigos, interesados…): sin el aspecto de botón del navegador */
:where(button.list-row) { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; color: inherit; font: inherit; cursor: pointer; }
:where(button.list-row):hover { background: var(--fill); }
.p-plan-c .badge { justify-self: start; }