/* ===================================================================
   FitControl — Sistema de diseño
   Oscuro premium, atlético y preciso. Los datos son el héroe; el acento
   lima→teal (los colores del logo) se reserva para acción primaria, selección
   y estado. El texto sobre el acento va en oscuro, como el logo.
   Cristal y glow solo donde aportan profundidad (barra, modales, toasts).
   Sin dependencias externas. Cubre todas las clases que usa la app.
   =================================================================== */

@property --pct { syntax: "<number>"; inherits: false; initial-value: 0; }

:root {
  /* ---- Lienzo y tinta ---- */
  --bg:        #0a0b0f;
  --surface-1: #14161d;   /* tarjetas */
  --surface-2: #191c25;   /* hover / elevado */
  --surface-3: #20242f;   /* inputs, items internos */
  --text:      #f4f6fb;
  --text-dim:  #aab3c4;   /* secundario, ≥4.5:1 sobre superficies */
  --muted:     #939db2;   /* terciario (≥4.5:1 sobre superficies) */

  /* ---- Bordes ---- */
  --stroke:    rgba(255,255,255,.08);
  --stroke-2:  rgba(255,255,255,.16);

  /* ---- Acento de marca (lima→teal, del logo) ---- */
  --accent:    #bce000;
  --accent-2:  #15c2b0;
  --accent-soft: rgba(188,224,0,.14);
  --on-accent: #0a0b0f;   /* texto OSCURO sobre el acento (el lima es claro) */

  /* ---- IA (teal→cian, tonos fríos del logo), zona Coach/IA ---- */
  --ai:        #15c2b0;
  --ai-2:      #22d3ee;

  /* ---- Datos / semántico ---- */
  --prote:     #34e3a0;
  --carb:      #38bdf8;
  --fat:       #fbbf24;
  --good:      #34e3a0;
  --warn:      #fbbf24;
  --bad:       #fb7185;
  --danger:    #fb7185;

  --grad-primary: linear-gradient(135deg, #bce000 0%, #15c2b0 100%);
  --grad-ai:      linear-gradient(135deg, #15c2b0 0%, #22d3ee 100%);

  /* ---- Forma ---- */
  --radius:    16px;   /* tarjetas */
  --radius-s:  12px;   /* inputs, items */
  --radius-pill: 999px;

  /* ---- Sombra ---- */
  --shadow:    0 24px 60px -28px rgba(0,0,0,.85);
  --shadow-sm: 0 10px 30px -18px rgba(0,0,0,.7);
  --ring-accent: 0 0 0 3px rgba(188,224,0,.30);

  /* ---- Ritmo de espaciado ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* ---- Tipografía (escala fija, ratio ~1.2; product UI) ---- */
  --fs-micro:  .78rem;   /* 12.5 */
  --fs-sm:     .875rem;  /* 14 */
  --fs-base:   1rem;     /* 16 */
  --fs-lead:   1.125rem; /* 18 */
  --fs-h3:     1.25rem;  /* 20 */
  --fs-h2:     1.625rem; /* 26 */
  --fs-data:   2.5rem;   /* 40, héroe numérico */

  /* ---- Capas (z-index semántico) ---- */
  --z-nav: 30;
  --z-bottomnav: 90;
  --z-modal-backdrop: 100;
  --z-modal: 101;
  --z-toast: 200;
  --z-tooltip: 300;

  --ease: cubic-bezier(.22,.61,.36,1); /* ease-out suave */

  --track: rgba(255,255,255,.08);   /* fondo de anillos y barras de progreso */

  font-size: 16px;
  color-scheme: dark;
}

/* ---- Tema claro ---- */
:root[data-theme="light"] {
  --bg:        #f4f6fb;
  --surface-1: #ffffff;
  --surface-2: #eceff5;
  --surface-3: #e3e8f0;
  --text:      #11151d;
  --text-dim:  #4f586a;   /* ≥4.5:1 sobre blanco */
  --muted:     #717b8d;
  --stroke:    rgba(15,20,35,.10);
  --stroke-2:  rgba(15,20,35,.17);
  /* En claro, el lima puro no contrasta sobre blanco: usamos un verde más
     profundo para texto/bordes de acento (el relleno sigue llevando texto oscuro). */
  --accent:    #5c9a00;
  --accent-2:  #0e9e88;
  --accent-soft: rgba(122,168,0,.14);
  --ring-accent: 0 0 0 3px rgba(122,168,0,.30);
  --ai:        #0a8f7e;   /* teal más profundo para texto IA legible sobre blanco */
  --shadow:    0 24px 60px -28px rgba(20,28,50,.28);
  --shadow-sm: 0 10px 30px -18px rgba(20,28,50,.20);
  --track:     rgba(15,20,35,.09);
  color-scheme: light;
}
/* Ajustes de superficies que llevaban color fijo, para que el tema claro respire */
:root[data-theme="light"] .topbar { background: linear-gradient(to bottom, rgba(244,246,251,.93), rgba(244,246,251,.55) 70%, transparent); }
:root[data-theme="light"] .bottom-nav { background: rgba(255,255,255,.85); }
:root[data-theme="light"] body::before { opacity: .14; filter: saturate(.75) brightness(1.2); }
:root[data-theme="light"] body::after { opacity: .22; }
:root[data-theme="light"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234f586a' d='M6 8L2 4h8z'/%3E%3C/svg%3E"); }
:root[data-theme="light"] input[type="date"] { color-scheme: light; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  isolation: isolate;
}
.tnum { font-variant-numeric: tabular-nums; }

.fc-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.fc-icon {
  width: 1.08em;
  height: 1.08em;
  flex: 0 0 auto;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: -0.16em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: currentColor;
  shape-rendering: geometricPrecision;
  transition: transform .22s var(--ease), filter .22s var(--ease), opacity .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}
.icon-btn .fc-icon { width: 18px; height: 18px; stroke-width: 2.2; }
.gate-close .fc-icon, .cmp-close .fc-icon, .rest-x .fc-icon,
.item-del .fc-icon, .proto-del .fc-icon, .plato-del .fc-icon,
.perfil-del .fc-icon, .gal-del .fc-icon, .conoc-del .fc-icon,
.ph-x .fc-icon, .eval-slot-x .fc-icon, .seg-del .fc-icon, .info .fc-icon {
  width: 1em;
  height: 1em;
  stroke-width: 2.35;
}
.tab .fc-icon, .seg-btn .fc-icon, .qr-tab .fc-icon, .quick-actions .fc-icon,
.btn .fc-icon, .logger-title .fc-icon, .section-title .fc-icon {
  width: 1.12em;
  height: 1.12em;
  stroke-width: 2.18;
}
.tab .fc-icon, .seg-btn .fc-icon, .qr-tab .fc-icon {
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 8px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(188,224,0,.13), transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px -16px rgba(21,194,176,.75);
  color: color-mix(in srgb, var(--text-dim) 84%, var(--accent));
}
.tab.is-active .fc-icon, .seg-btn.is-active .fc-icon, .qr-tab.is-active .fc-icon {
  color: var(--on-accent);
  background:
    radial-gradient(120% 120% at 35% 20%, rgba(255,255,255,.22), transparent 62%),
    rgba(5,7,10,.16);
  border-color: rgba(5,7,10,.24);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.24));
}
.tab:hover:not(.is-active) .fc-icon, .seg-btn:hover:not(.is-active) .fc-icon, .qr-tab:hover:not(.is-active) .fc-icon {
  color: var(--accent);
  border-color: rgba(188,224,0,.26);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(188,224,0,.20), transparent 62%),
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
}
.logger-title > .fc-icon, .section-title > .fc-icon {
  color: var(--accent);
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 10px;
  background:
    radial-gradient(110% 110% at 30% 15%, rgba(188,224,0,.18), transparent 64%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  border: 1px solid rgba(188,224,0,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px -20px rgba(188,224,0,.7);
  filter: drop-shadow(0 0 10px rgba(188,224,0,.14));
}
.title-inline { width: .9em; height: .9em; color: var(--accent); vertical-align: -0.08em; }

/* ---------- Fondo visual FitControl: atmosferico, virtual y legible ---------- */
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}
body::before {
  background:
    linear-gradient(90deg, rgba(10,11,15,.86), rgba(10,11,15,.52) 45%, rgba(10,11,15,.84)),
    linear-gradient(180deg, rgba(10,11,15,.9) 0%, rgba(10,11,15,.34) 42%, rgba(10,11,15,.97) 100%),
    url("../assets/fitcontrol-bg.webp") center top / cover no-repeat;
  opacity: .62;
  transform: scale(1.025);
  will-change: transform;
  animation: ambient-pan 34s var(--ease) infinite alternate;
}
body::after {
  z-index: -1;
  background:
    radial-gradient(70% 50% at 18% 22%, rgba(188,224,0,.09), transparent 64%),
    radial-gradient(60% 54% at 86% 76%, rgba(21,194,176,.11), transparent 68%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: auto, auto, 100% 26px;
  opacity: .74;
}
body.is-hoy-view::before {
  background:
    linear-gradient(90deg, rgba(5,7,10,.82), rgba(5,7,10,.30) 47%, rgba(5,7,10,.80)),
    linear-gradient(180deg, rgba(5,7,10,.94) 0%, rgba(5,7,10,.28) 46%, rgba(5,7,10,.98) 100%),
    url("../assets/fitcontrol-hoy-scene.webp") center top / cover no-repeat;
  opacity: .72;
}
body.is-hoy-view::after {
  background:
    radial-gradient(60% 48% at 22% 60%, rgba(188,224,0,.12), transparent 68%),
    radial-gradient(58% 52% at 86% 55%, rgba(34,211,238,.13), transparent 70%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: auto, auto, 100% 24px;
}
@keyframes ambient-pan {
  to { transform: scale(1.055) translate3d(-1.4vw, -1vh, 0); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* ---------- Inicio / Landing + Login ---------- */
body.gated { overflow: hidden; }
.gate { position: fixed; inset: 0; z-index: var(--z-modal); overflow: hidden auto;
  --bg: #06070b;
  --surface-1: #14161d;
  --surface-2: #191c25;
  --surface-3: #20242f;
  --text: #f4f6fb;
  --text-dim: #aab3c4;
  --muted: #939db2;
  --stroke: rgba(255,255,255,.08);
  --stroke-2: rgba(255,255,255,.16);
  --accent: #bce000;
  --accent-2: #15c2b0;
  --accent-soft: rgba(188,224,0,.14);
  --on-accent: #0a0b0f;
  --ai: #15c2b0;
  --ai-2: #22d3ee;
  background: #06070b;
  color: var(--text);
  display: grid; place-items: center; padding: 32px 20px calc(32px + env(safe-area-inset-bottom)); isolation: isolate;
  animation: gate-in .5s var(--ease) both; }
@keyframes gate-in { from { opacity: 0; } }

/* Mesh gradient con profundidad: orbes de color desenfocados que derivan lento */
.gate-orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.gate-orbs span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.gate-orbs span:nth-child(1) { width: 46vw; height: 46vw; left: -8vw; top: -12vh;
  background: radial-gradient(circle at 35% 35%, var(--accent), transparent 65%); animation: orb-a 26s var(--ease) infinite alternate; }
.gate-orbs span:nth-child(2) { width: 40vw; height: 40vw; right: -10vw; top: 8vh;
  background: radial-gradient(circle at 50% 50%, var(--accent-2), transparent 65%); opacity: .4; animation: orb-b 32s var(--ease) infinite alternate; }
.gate-orbs span:nth-child(3) { width: 44vw; height: 44vw; right: -6vw; bottom: -16vh;
  background: radial-gradient(circle at 50% 50%, var(--ai), transparent 66%); opacity: .35; animation: orb-c 38s var(--ease) infinite alternate; }
@keyframes orb-a { to { transform: translate(10vw, 9vh) scale(1.12); } }
@keyframes orb-b { to { transform: translate(-9vw, 7vh) scale(1.08); } }
@keyframes orb-c { to { transform: translate(-7vw, -8vh) scale(1.14); } }
/* grano sutil encima del mesh */
.gate::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.022) 1px, transparent 1px); background-size: 24px 24px; }

.gate-close { position: fixed; top: 16px; right: 18px; z-index: 1; appearance: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--stroke-2);
  color: var(--text); font-size: 1rem; backdrop-filter: blur(10px); transition: background .15s var(--ease), transform .15s var(--ease); }
.gate-close:hover { background: rgba(255,255,255,.12); transform: rotate(90deg); }
.gate-inner { width: 100%; max-width: 940px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
.gate-hero { min-width: 0; }

/* Entrada escalonada de los elementos del hero (reveal, no oculta el contenido por defecto) */
.gate-brand, .gate-title, .gate-sub, .gate-feats li, .gate-auth { animation: gate-rise .6s var(--ease) both; }
.gate-brand { animation-delay: .06s; } .gate-title { animation-delay: .12s; } .gate-sub { animation-delay: .18s; }
.gate-feats li:nth-child(1) { animation-delay: .24s; } .gate-feats li:nth-child(2) { animation-delay: .30s; }
.gate-feats li:nth-child(3) { animation-delay: .36s; } .gate-auth { animation-delay: .26s; }
@keyframes gate-rise { from { opacity: 0; transform: translateY(16px); } }

.gate-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; }
.gate-logo { font-size: 26px; display: grid; place-items: center; width: 44px; height: 44px;
  background: none; animation: logo-float 5s ease-in-out infinite; }
/* Logo libre (sin recuadro): el emblema flota; si falla la carga, queda el emoji */
.logo, .gate-logo { position: relative; }
.logo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35)); }
@keyframes logo-float { 50% { transform: translateY(-4px); } }
/* Logo grande del hero: emblema flotando, con los bordes grises del PNG
   fundidos por una máscara radial y un glow verde a juego. */
.gate-logo-hero { display: block; width: clamp(170px, 26vw, 260px); height: auto; aspect-ratio: 1; object-fit: cover;
  margin: -10px 0 6px -8px;
  -webkit-mask: radial-gradient(circle at 50% 47%, #000 56%, rgba(0,0,0,.4) 65%, transparent 72%);
          mask: radial-gradient(circle at 50% 47%, #000 56%, rgba(0,0,0,.4) 65%, transparent 72%);
  filter: drop-shadow(0 16px 40px rgba(163,230,53,.30));
  animation: logo-float 5.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .gate-logo-hero { animation: none; } }

.gate-title { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.04;
  margin: 6px 0 14px; text-wrap: balance; }
.gate-title em { font-style: normal; color: var(--accent); position: relative; }
.gate-title em::after { content: ""; position: absolute; inset: -8% -10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(188,224,0,.35), transparent 70%); animation: pulse-247 3.2s ease-in-out infinite; }
@keyframes pulse-247 { 0%,100% { opacity: .5; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
.gate-sub { color: var(--text-dim); font-size: var(--fs-lead); line-height: 1.55; max-width: 52ch; text-wrap: pretty; }
.gate-feats { list-style: none; margin: 24px 0 0; display: flex; flex-direction: column; gap: 14px; }
.gate-feats li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-sm); color: var(--text); }
.gate-feats b { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid var(--stroke); color: var(--accent); font-size: 1rem;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); }
.gate-feats b .fc-icon { width: 18px; height: 18px; }
.gate-feats li:hover b { transform: translateY(-2px); border-color: var(--accent); background: var(--accent-soft); }
.gate-feats span { color: var(--text-dim); padding-top: 6px; }

/* Tarjeta de login: cristal real (glassmorphism) con profundidad y borde de luz */
.gate-auth { position: relative; border-radius: var(--radius); padding: 24px;
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12); }
.gate-auth::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.10), transparent 60%); }
.gate-auth .cuenta-card { margin: 0; padding: 0; background: none; border: none; }
.gate-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-micro); margin: 16px 0; text-transform: uppercase; letter-spacing: .1em; }
.gate-or::before, .gate-or::after { content: ""; flex: 1; height: 1px; background: var(--stroke); }
.gate-skip { width: 100%; }
.gate-note { margin-top: 14px; }
@media (max-width: 760px) {
  .gate { place-items: start; }
  .gate-inner { grid-template-columns: 1fr; gap: 24px; max-width: 460px; }
  .gate-feats { gap: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .gate, .gate-brand, .gate-title, .gate-sub, .gate-feats li, .gate-auth { animation: none; }
  .gate-orbs span, .gate-logo, .gate-title em::after { animation: none; }
  .gate-close:hover { transform: none; }
}

/* ---------- Topbar (cristal: aporta separación al hacer scroll) ---------- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-nav);
  padding: 14px 18px 0;
  background: linear-gradient(to bottom, rgba(10,11,15,.92), rgba(10,11,15,.55) 70%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.brand-lockup {
  height: clamp(56px, 6.3vw, 92px);
  width: auto;
  max-width: min(48vw, 380px);
  display: block;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.55));
}
.logo {
  font-size: 30px; line-height: 1; display: grid; place-items: center;
  width: 46px; height: 46px; flex: 0 0 auto;
  background: none;
}
.topbar h1 { font-size: 1.22rem; letter-spacing: -.02em; font-weight: 700; }
.tagline { color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.35; max-width: 46ch; }
.topbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.icon-btn { appearance: none; cursor: pointer; width: 42px; height: 42px; border-radius: var(--radius-pill);
  background:
    radial-gradient(120% 120% at 28% 18%, rgba(188,224,0,.12), transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025)),
    var(--surface-1);
  border: 1px solid rgba(255,255,255,.105); color: var(--text); font-size: 1rem; line-height: 1;
  display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 28px -24px rgba(21,194,176,.7);
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); }
.icon-btn:hover { background:
    radial-gradient(120% 120% at 28% 18%, rgba(188,224,0,.19), transparent 62%),
    linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035)),
    var(--surface-2);
  border-color: rgba(188,224,0,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 14px 32px -22px rgba(188,224,0,.55); }
.icon-btn:hover .fc-icon { color: var(--accent); filter: drop-shadow(0 0 9px rgba(188,224,0,.22)); }
.icon-btn:active { transform: scale(.92); }

/* pestañas tipo píldora (escritorio) */
.tabs { position: relative; display: flex; gap: 2px; margin-top: 14px; padding: 4px; overflow-x: auto; scrollbar-width: none;
  background: var(--surface-1); border: 1px solid var(--stroke); border-radius: 14px; }
.tabs::-webkit-scrollbar { display: none; }
/* Indicador deslizante: el resaltado se mueve entre pestañas (estilo 2026) */
.tab-ind { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 10px; z-index: 0; opacity: 0;
  background: var(--grad-primary); box-shadow: 0 8px 20px -12px rgba(21,194,176,.9);
  transition: transform .44s cubic-bezier(.5,.12,.12,1), width .44s cubic-bezier(.5,.12,.12,1), opacity .2s var(--ease);
  will-change: transform, width; }
.tab {
  appearance: none; border: none; cursor: pointer; white-space: nowrap; position: relative; z-index: 1;
  background: transparent; color: var(--text-dim);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: -.01em;
  padding: 9px 15px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  transition: color .25s var(--ease);
}
.tab span, .tab .fc-icon { font-size: 1.05rem; transition: transform .25s var(--ease); }
.tab:hover { color: var(--text); }
.tab:hover:not(.is-active) span, .tab:hover:not(.is-active) .fc-icon { transform: translateY(-1px); }
.tab.is-active {
  color: var(--on-accent);
  background: color-mix(in srgb, var(--accent) 82%, var(--accent-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 8px 20px -15px rgba(21,194,176,.85);
}
.tab-ind ~ .tab.is-active { background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .tab-ind { transition: opacity .2s; } }
/* Alta completada: Perfil y Objetivo dejan de ocupar la navegación (van a Ajustes ⚙️) */
body.setup-done .tab[data-tab="perfil"], body.setup-done .tab[data-tab="objetivo"],
body.setup-done .bnav-btn[data-tab="perfil"], body.setup-done .bnav-btn[data-tab="objetivo"] { display: none; }

/* ---------- Layout ---------- */
.container { max-width: 1160px; margin: 0 auto; padding: 26px 18px 120px; }
.panel { display: none; }
.panel.is-active { display: block; animation: panelIn .36s cubic-bezier(.22,.61,.36,1) both; }
@keyframes panelIn {
  from { opacity: 0; transform: translateX(var(--panel-dir, 18px)) scale(.992); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) { .panel.is-active { animation: none; } }

/* Sub-pestañas de «Hoy»: cada cosa en su sitio, sin scroll infinito */
.hoy-subnav { margin: 0 0 18px; }
.hoy-subnav .seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.hoy-subnav .seg-btn span, .hoy-subnav .seg-btn .fc-icon { font-size: 1rem; }
#hoy[data-sub="resumen"] .hoy-block:not([data-sub="resumen"]),
#hoy[data-sub="comida"]  .hoy-block:not([data-sub="comida"]),
#hoy[data-sub="entreno"] .hoy-block:not([data-sub="entreno"]),
#hoy[data-sub="cuerpo"]  .hoy-block:not([data-sub="cuerpo"]) { display: none; }
#hoy.sub-anim .hoy-block { animation: subIn .3s var(--ease) both; }
@keyframes subIn { from { opacity: 0; transform: translateY(8px); } }
#hoy.is-active {
  position: relative;
  isolation: isolate;
}
#hoy.is-active::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  top: -22px;
  width: min(1380px, calc(100vw - 48px));
  height: clamp(620px, 74vh, 790px);
  transform: translateX(-50%);
  border-radius: 30px;
  background:
    linear-gradient(90deg, rgba(5,7,10,.46), rgba(5,7,10,.08) 48%, rgba(5,7,10,.56)),
    linear-gradient(180deg, rgba(5,7,10,.46), rgba(5,7,10,.08) 46%, rgba(5,7,10,.80)),
    url("../assets/fitcontrol-hoy-scene.webp") center 112px / cover no-repeat;
  border: 1px solid rgba(255,255,255,.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 38px 110px -70px rgba(0,0,0,.95);
  opacity: .72;
}
#hoy.is-active::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -22px;
  width: min(1380px, calc(100vw - 48px));
  height: clamp(620px, 74vh, 790px);
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: 30px;
  background:
    radial-gradient(48% 60% at 20% 64%, rgba(188,224,0,.18), transparent 70%),
    radial-gradient(46% 58% at 86% 50%, rgba(34,211,238,.16), transparent 72%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: auto, auto, 100% 22px;
  opacity: .58;
  mask-image: linear-gradient(#000 0 84%, transparent 100%);
}
/* Mismo patrón de sub-pestañas para Protocolos y Coach */
#protocolos[data-sub="hoy"] .proto-block:not([data-sub="hoy"]),
#protocolos[data-sub="protocolo"] .proto-block:not([data-sub="protocolo"]),
#protocolos[data-sub="analiticas"] .proto-block:not([data-sub="analiticas"]),
#ia[data-sub="coach"] .coach-block:not([data-sub="coach"]),
#ia[data-sub="fotos"] .coach-block:not([data-sub="fotos"]),
#ia[data-sub="ajustes"] .coach-block:not([data-sub="ajustes"]) { display: none; }
#protocolos.sub-anim .proto-block, #ia.sub-anim .coach-block { animation: subIn .3s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { #hoy.sub-anim .hoy-block, #protocolos.sub-anim .proto-block, #ia.sub-anim .coach-block { animation: none; } }

h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; text-wrap: balance; }
.section-title {
  font-size: var(--fs-sm); letter-spacing: -.01em;
  color: var(--text); font-weight: 700; margin: var(--sp-6) 0 var(--sp-4);
  display: flex; align-items: center; gap: 12px;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--stroke); }
.hint { color: var(--text-dim); font-size: var(--fs-sm); margin-bottom: var(--sp-5); max-width: 68ch; text-wrap: pretty; }
.perfil-guide-btn { margin: -8px 0 var(--sp-5); }
.micro { color: var(--muted); font-size: var(--fs-micro); margin-top: 6px; text-wrap: pretty; }
.micro a { color: var(--accent); text-decoration: none; font-weight: 600; }
.micro a:hover { text-decoration: underline; }
.hidden { display: none !important; }

/* Bandas visuales por pantalla: assets propios, datos siempre por encima. */
.screen-visual {
  --visual: url("../assets/fitcontrol-progress.webp");
  position: relative; overflow: hidden; height: clamp(150px, 18vw, 225px);
  margin: 14px 0 var(--sp-5); border: 1px solid rgba(188,224,0,.18);
  border-radius: var(--radius); box-shadow: 0 18px 46px -34px rgba(0,0,0,.9);
  background-image:
    linear-gradient(90deg, rgba(5,7,10,.46), rgba(5,7,10,.22) 50%, rgba(5,7,10,.30)),
    linear-gradient(180deg, rgba(5,7,10,.18), rgba(5,7,10,.04) 48%, rgba(5,7,10,.42)),
    var(--visual);
  background-position: center, center, center;
  background-size: cover, cover, cover;
  background-repeat: no-repeat;
}
.screen-visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 60%, rgba(188,224,0,.09) 60.4%, transparent 61.1%),
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px);
  background-size: auto, 100% 18px;
  opacity: .5;
}
.visual-profile { --visual: url("../assets/fitcontrol-profile.webp"); }
.visual-goals { --visual: url("../assets/fitcontrol-goals.webp"); }
.visual-coach { --visual: url("../assets/fitcontrol-coach.webp"); }

/* ---------- Superficie de tarjeta base (sólida, no cristal) ---------- */
.metric, .macro-card, .goal-body, .logger, .predict-card, .chart-box,
.plan-box, .extra-item {
  background: var(--surface-1);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
}
.glass { background: var(--surface-1); border: 1px solid var(--stroke); border-radius: var(--radius); }

/* ---------- Formularios ---------- */
.grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-food { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: var(--fs-sm); color: var(--text-dim); font-weight: 600; display: flex; align-items: center; }
.field em { color: var(--muted); font-style: normal; font-weight: 500; margin-left: 5px; }

input, select {
  width: 100%; font-size: var(--fs-base); color: var(--text); font-family: inherit;
  background: var(--surface-3);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-s);
  padding: 12px 13px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
input::placeholder { color: var(--muted); }
input:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: var(--ring-accent);
}
input:disabled, select:disabled { opacity: .5; cursor: not-allowed; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23aab3c4' d='M6 8L2 4h8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px; }
input[type="date"] { color-scheme: dark; }

/* ---------- Botones ---------- */
.cta-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.btn {
  appearance: none; cursor: pointer; border: 1px solid transparent; font-family: inherit;
  border-radius: var(--radius-s); padding: 12px 20px; font-size: var(--fs-base); font-weight: 600; letter-spacing: -.01em;
  color: var(--on-accent); display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  transition: transform .1s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease), background .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-accent); }
.btn-primary { background: var(--grad-primary); box-shadow: 0 10px 26px -14px rgba(21,194,176,.85); }
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 14px 32px -14px rgba(21,194,176,.95); }
.btn-ai { background: var(--grad-ai); box-shadow: 0 10px 26px -14px rgba(21,194,176,.8); color: var(--on-accent); }
.btn-ai:hover { filter: brightness(1.07); }
.btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--stroke-2); }
.btn-ghost:hover { background: var(--surface-3); border-color: var(--stroke-2); }
.btn-sm { min-height: 38px; padding: 8px 14px; font-size: var(--fs-sm); border-radius: 10px; }
.btn:hover .fc-icon { transform: translateY(-1px); }
/* Confirmación momentánea de guardado en cualquier botón */
.btn.guardado-ok { background: var(--good) !important; color: #052012 !important; box-shadow: 0 10px 26px -14px rgba(52,227,160,.85) !important; filter: none !important; }

/* ---------- Objetivo: tarjetas ---------- */
.goal-cards { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.goal-card { position: relative; cursor: pointer; }
.goal-card input { position: absolute; opacity: 0; pointer-events: none; }
.goal-body {
  position: relative; overflow: hidden; min-height: 128px; padding: 18px 16px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.goal-body::after {
  content: ""; position: absolute; right: -34px; top: -34px; width: 112px; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 36%, rgba(188,224,0,.26) 38% 44%, transparent 46%),
    conic-gradient(from -90deg, rgba(21,194,176,.28), rgba(188,224,0,.24), transparent 62%);
  opacity: .56; pointer-events: none;
}
.goal-body:hover { border-color: var(--stroke-2); background: var(--surface-2); }
.goal-card input:checked + .goal-body { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); transform: translateY(-2px); }
.goal-card input:focus-visible + .goal-body { box-shadow: var(--ring-accent); }
.goal-emoji {
  position: relative; z-index: 1; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 14px;
  display: grid; place-items: center; color: var(--accent);
  background: linear-gradient(145deg, rgba(188,224,0,.15), rgba(21,194,176,.08));
  border: 1px solid rgba(188,224,0,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 24px -20px rgba(188,224,0,.55);
}
.goal-emoji .fc-icon { width: 22px; height: 22px; stroke-width: 2.25; }
.goal-body strong { font-size: var(--fs-base); font-weight: 700; }
.goal-body strong, .goal-body small { position: relative; z-index: 1; }
.goal-body small { color: var(--text-dim); font-size: var(--fs-sm); }

/* ---------- Botón de ayuda ---------- */
.info { appearance: none; border: none; cursor: pointer; background: var(--surface-3); color: var(--text-dim);
  width: 18px; height: 18px; border-radius: 50%; font-size: .68rem; line-height: 18px; padding: 0; margin-left: 6px; transition: .15s; }
.info:hover { background: var(--accent); color: var(--on-accent); }
.help-pop { position: absolute; z-index: var(--z-tooltip); max-width: 270px; font-size: var(--fs-sm); line-height: 1.5;
  background: rgba(16,18,24,.98); border: 1px solid var(--stroke-2); color: var(--text);
  padding: 12px 14px; border-radius: var(--radius-s); box-shadow: var(--shadow); backdrop-filter: blur(12px); }

/* ---------- Avanzado / plan ---------- */
.advanced { margin-top: var(--sp-2); border: 1px solid var(--stroke); border-radius: var(--radius-s); padding: 2px 16px; background: var(--surface-1); }
.advanced summary { cursor: pointer; color: var(--text-dim); font-weight: 600; padding: 12px 0; font-size: var(--fs-sm); list-style: none; }
.advanced summary::-webkit-details-marker { display: none; }
.advanced[open] summary { color: var(--text); }
.plan-box { margin-top: var(--sp-5); padding: 20px; }

/* ---------- Métricas ---------- */
.metrics { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.metric { padding: 16px; position: relative; transition: border-color .16s var(--ease), transform .16s var(--ease); }
.metric:hover { border-color: var(--stroke-2); transform: translateY(-2px); }
.metric .label { font-size: var(--fs-micro); color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.metric .value { font-size: 1.7rem; font-weight: 700; margin-top: 6px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.metric .unit { font-size: var(--fs-sm); color: var(--text-dim); font-weight: 600; margin-left: 3px; }
.metric .sub { font-size: var(--fs-micro); color: var(--text-dim); margin-top: 4px; }
.metric.badge-good .value { color: var(--good); }
.metric.badge-warn .value { color: var(--warn); }
.metric.badge-bad  .value { color: var(--bad); }

/* ---------- Macros (anillos animados) ---------- */
.macros { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.macro-card { padding: 18px 16px; text-align: center; transition: border-color .16s var(--ease), transform .16s var(--ease); }
.macro-card:hover { border-color: var(--stroke-2); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .metric:hover, .macro-card:hover { transform: none; } }
.macro-ring {
  --pct: 0; --col: var(--accent);
  width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 12px;
  background: conic-gradient(var(--col) calc(var(--pct) * 1%), var(--track) 0);
  display: grid; place-items: center; position: relative;
  animation: ringIn .9s var(--ease);
}
@keyframes ringIn { from { --pct: 0; } }
@media (prefers-reduced-motion: reduce) { .macro-ring { animation: none; } }
.macro-ring span { width: 72px; height: 72px; border-radius: 50%; background: var(--surface-1);
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.macro-card .macro-name { font-weight: 600; font-size: var(--fs-sm); color: var(--text-dim); }
.macro-card .macro-grams { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.macro-card .macro-cals { color: var(--text-dim); font-size: var(--fs-micro); }
/* --col se fija en el propio anillo: gana a la herencia de la tarjeta y
   colorea cada arco con el color de su macro (no con el acento por defecto). */
.macro-prote .macro-ring { --col: var(--prote); } .macro-prote .macro-grams, .macro-prote .macro-ring span { color: var(--prote); }
.macro-carb  .macro-ring { --col: var(--carb); }  .macro-carb  .macro-grams, .macro-carb  .macro-ring span { color: var(--carb); }
.macro-gras  .macro-ring { --col: var(--fat); }   .macro-gras  .macro-grams, .macro-gras  .macro-ring span { color: var(--fat); }
.macro-kcal { display: grid; place-content: center; }
.macro-kcal .macro-grams { color: var(--accent); font-size: 1.9rem; }

/* ---------- Barras de progreso ---------- */
.day-progress { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.prog { padding: 14px; background: var(--surface-1); border: 1px solid var(--stroke); border-radius: var(--radius-s); }
.prog .ptop { display: flex; justify-content: space-between; align-items: baseline; }
.prog .pname { font-weight: 600; font-size: var(--fs-sm); }
.prog .pval { font-size: var(--fs-micro); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.prog .pval .fc-icon { width: 12px; height: 12px; color: var(--warn); vertical-align: -0.16em; }
.prog .bar { height: 8px; background: var(--track); border-radius: var(--radius-pill); margin-top: 9px; overflow: hidden; }
.prog .bar > i { display: block; height: 100%; border-radius: var(--radius-pill); transition: width .6s var(--ease); }
.prog.kcal .bar > i { background: var(--grad-primary); }
.prog.prot .bar > i { background: var(--prote); }
.prog.carb .bar > i { background: var(--carb); }
.prog.gras .bar > i { background: var(--fat); }
.prog.over .bar > i { background: var(--bad); }
@media (prefers-reduced-motion: reduce) { .prog .bar > i { transition: none; } }

/* ---------- Día (Hoy) ---------- */
.day-head {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  max-width: 900px; margin: 6px auto var(--sp-5); padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    radial-gradient(80% 120% at 50% 0%, rgba(188,224,0,.08), transparent 58%);
  box-shadow: 0 20px 52px -38px rgba(0,0,0,.9);
}
.day-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(21,194,176,.12), transparent);
  opacity: .28;
}
.day-nav { appearance: none; cursor: pointer; width: 46px; height: 46px; border-radius: var(--radius-s); flex: 0 0 auto;
  background: var(--surface-1); border: 1px solid var(--stroke); color: var(--text); font-size: 1.3rem; transition: .15s; }
.day-nav:hover { border-color: var(--stroke-2); background: var(--surface-2); }
.day-nav:disabled { opacity: .3; cursor: not-allowed; }
.day-nav, .day-label { position: relative; z-index: 1; }
.day-label { text-align: center; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.day-label strong { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.02em; text-transform: capitalize; }
.day-label input[type="date"] { background: transparent; border: none; color: var(--text-dim); text-align: center; font-size: var(--fs-sm); padding: 0; }
.day-summary { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: var(--sp-5); }

/* ---------- Loggers ---------- */
.logger { padding: 18px; margin-bottom: var(--sp-4); }
.logger-title { font-size: var(--fs-lead); font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-4); letter-spacing: -.01em; }
.logger-title .btn { margin-left: auto; }
.logger-title .btn + .btn { margin-left: 0; }
.log-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.log-row input { flex: 1; min-width: 130px; }
.log-grid { display: grid; gap: 9px; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr auto; align-items: center; }
#form-comida.log-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr auto; }
#form-pesas.log-grid, #form-cardio.log-grid { grid-template-columns: 2fr 1fr 1fr auto; }

/* Entrada de comida en lenguaje natural (la vía rápida) */
.nl-comida { display: flex; gap: 8px; align-items: stretch; margin-bottom: 6px; }
.nl-comida input { flex: 1 1 auto; min-width: 0; }
.nl-comida .btn { white-space: nowrap; }
#nl-hint { margin-bottom: var(--sp-3); }
.nl-manual { margin: 4px 0 8px; }
.nl-manual > summary { cursor: pointer; color: var(--text-dim); font-size: var(--fs-sm); font-weight: 600;
  list-style: none; padding: 6px 0; user-select: none; display: inline-flex; align-items: center; gap: 7px; }
.nl-manual > summary::-webkit-details-marker { display: none; }
.nl-manual[open] > summary { margin-bottom: 10px; }
.pasos-kcal { color: var(--prote); font-weight: 700; font-size: var(--fs-sm); }

/* Línea de tiempo del día */
.day-timeline-wrap:not(.hidden) { display: block; }
.timeline { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 46px 20px 1fr; gap: 10px; align-items: start; padding: 7px 0; }
.tl-time { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--text-dim); font-weight: 600; text-align: right; padding-top: 1px; }
.tl-mid { position: relative; display: flex; justify-content: center; align-self: stretch; }
.tl-mid::before { content: ""; position: absolute; top: 6px; bottom: -13px; width: 2px; background: var(--stroke); }
.tl-item:last-child .tl-mid::before { display: none; }
.tl-dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 3px; position: relative; z-index: 1;
  background: var(--tl-c, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tl-c, var(--accent)) 22%, transparent); }
.tl-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tl-title { font-weight: 600; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 7px; }
.tl-title .fc-icon { color: var(--accent); width: 16px; height: 16px; }
.tl-sub { color: var(--text-dim); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; }

/* Hora editable en cada registro (clic para cambiarla) */
.hora-edit { appearance: none; border: none; background: transparent; cursor: pointer; padding: 0;
  font: inherit; color: var(--text-dim); border-bottom: 1px dashed transparent; transition: color .15s, border-color .15s; }
.hora-edit:hover { color: var(--accent); border-bottom-color: var(--accent); }
.hora-edit.hora-add { color: var(--muted); font-style: italic; }
.hora-edit .fc-icon { width: 12px; height: 12px; margin-right: 3px; vertical-align: -0.18em; }

/* Toggle "en cinta" + campos de velocidad/inclinación */
.cinta-toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; margin: 12px 0 4px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-dim); }
.cinta-toggle input { width: auto; flex: 0 0 auto; accent-color: var(--accent); width: 18px; height: 18px; }
.cinta-toggle span { line-height: 1.35; }
.cinta-toggle span .fc-icon { width: 16px; height: 16px; color: var(--accent); margin-right: 4px; }
.cinta-fields { margin-top: 10px; }
#c-cinta-calc:empty { display: none; }
#c-cinta-calc { color: var(--accent); font-weight: 600; }

/* ---------- Plan del entrenador (modo dieta) ---------- */
.plan-loader > summary.plan-loader-sum { cursor: pointer; font-weight: 700; font-size: var(--fs-lead); list-style: none; }
.plan-loader > summary::-webkit-details-marker { display: none; }
.dieta-texto { width: 100%; resize: vertical; font-family: inherit; font-size: var(--fs-base); margin-top: 10px;
  background: var(--surface-3); border: 1px solid var(--stroke); border-radius: var(--radius-s); color: var(--text); padding: 12px 13px; }
.dieta-texto:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring-accent); }
.plan-card { border-color: var(--stroke-2); }
.plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.plan-eyebrow { font-size: var(--fs-micro); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.plan-name { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.02em; margin: 2px 0; }
.plan-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.plan-bar { height: 7px; border-radius: var(--radius-pill); background: var(--track); overflow: hidden; margin: 12px 0 4px; }
.plan-bar i { display: block; height: 100%; background: var(--grad-primary); transition: width .6s var(--ease); }
.plan-meals { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.plan-meal { background: var(--surface-3); border: 1px solid var(--stroke); border-radius: var(--radius-s); padding: 12px 13px; transition: border-color .15s var(--ease); }
.plan-meal.done { border-color: rgba(52,227,160,.40); background: rgba(52,227,160,.06); }
.pm-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pm-title { font-weight: 700; font-size: var(--fs-sm); }
.plan-meal.done .pm-title::before { content: "✓ "; color: var(--good); }
.pm-kcal { color: var(--text-dim); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.pm-items { color: var(--text-dim); font-size: var(--fs-sm); margin: 5px 0 6px; line-height: 1.5; }
.pm-items small { color: var(--muted); }
.pm-macros { font-size: var(--fs-micro); color: var(--text-dim); margin-bottom: 9px; font-variant-numeric: tabular-nums; font-weight: 600; }
.plan-macros { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; margin: 10px 0 2px; font-size: var(--fs-sm); color: var(--text-dim); }
.plan-macros b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 800; }
.plan-macros .mp b { color: var(--prote); } .plan-macros .mc b { color: var(--carb); } .plan-macros .mg b { color: var(--fat); }
.plan-macros .mo { margin-left: auto; color: var(--muted); }

/* ---------- Tabla de alimentación base ---------- */
.food-planner {
  border-color: rgba(188,224,0,.28);
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(188,224,0,.10), transparent 58%),
    linear-gradient(145deg, rgba(21,194,176,.055), transparent 46%),
    var(--surface-1);
}
.planner-grid { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(120px, .45fr) minmax(260px, 1.6fr); gap: 12px; margin-top: 14px; }
.planner-foods textarea {
  width: 100%;
  min-height: 94px;
  resize: vertical;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-s);
  padding: 11px 12px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  line-height: 1.35;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.planner-foods textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 62%, var(--stroke));
  box-shadow: 0 0 0 3px rgba(188,224,0,.12), inset 0 1px 0 rgba(255,255,255,.04);
}
.planner-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}
.planner-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}
.planner-actions { margin-top: 12px; gap: 8px; }
.tabla-resultado { margin-top: 14px; display: grid; gap: 12px; }
.tabla-strategy {
  border: 1px solid rgba(21,194,176,.22);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  background: rgba(21,194,176,.075);
  color: var(--text-dim);
}
.tabla-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tabla-summary > div {
  border: 1px solid var(--stroke);
  border-radius: var(--radius-s);
  padding: 12px;
  background: rgba(255,255,255,.045);
}
.tabla-summary span { display: block; color: var(--text-dim); font-size: var(--fs-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.tabla-summary b { display: block; margin-top: 3px; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.tabla-summary small { display: block; color: var(--text-dim); margin-top: 2px; font-variant-numeric: tabular-nums; }
.tabla-warn { color: var(--warn); }
.tabla-sources { display: flex; gap: 8px; flex-wrap: wrap; }
.tabla-sources a {
  color: var(--text-dim);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-pill);
  padding: 5px 9px;
  background: rgba(255,255,255,.035);
  font-size: var(--fs-micro);
  font-weight: 800;
  text-decoration: none;
}
.tabla-sources a:hover { color: var(--accent); border-color: rgba(188,224,0,.28); }
.tabla-meals { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 10px; }
.tabla-meal {
  border: 1px solid var(--stroke);
  border-radius: var(--radius-s);
  padding: 12px;
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(34,211,238,.07), transparent 60%),
    var(--surface-2);
}
.tm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.tm-head b { font-size: var(--fs-base); }
.tm-head span { color: var(--accent); font-weight: 900; font-variant-numeric: tabular-nums; }
.tm-items { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-items span { border: 1px solid var(--stroke); border-radius: 999px; padding: 5px 8px; color: var(--text-dim); background: rgba(255,255,255,.04); font-size: var(--fs-micro); }
.tm-items b { color: var(--text); font-variant-numeric: tabular-nums; }
.tm-macros { margin-top: 10px; color: var(--text-dim); font-size: var(--fs-micro); font-weight: 800; font-variant-numeric: tabular-nums; }
.pm-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.log-list { list-style: none; margin-top: var(--sp-4); display: flex; flex-direction: column; gap: 7px; }
.log-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface-3); border: 1px solid var(--stroke); border-radius: var(--radius-s); padding: 11px 13px; transition: .15s; }
.log-item:hover { border-color: var(--stroke-2); background: var(--surface-2); }
.log-item > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.li-title { font-weight: 600; font-size: var(--fs-sm); }
.li-sub { color: var(--text-dim); font-size: var(--fs-micro); }
.log-empty { color: var(--muted); font-size: var(--fs-sm); text-align: center; padding: 16px; }
.item-del { cursor: pointer; background: none; border: none; color: var(--bad); font-size: 1rem; padding: 5px 9px; flex: 0 0 auto; border-radius: 8px; transition: .15s; }
.item-del:hover { background: rgba(251,113,133,.15); }
.ia-tag { background: var(--grad-ai); color: var(--on-accent); font-size: .6rem; font-weight: 800; padding: 2px 7px; border-radius: 7px; vertical-align: middle; letter-spacing: .04em; }
.meal-head { display: flex; justify-content: space-between; align-items: baseline; color: var(--text-dim);
  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 14px 2px 2px; }
.meal-title { display: inline-flex; align-items: center; gap: 7px; }
.meal-title .fc-icon { width: 15px; height: 15px; color: var(--accent); }
.meal-head span { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---------- Segmentos / chips ---------- */
.seg { display: flex; gap: 3px; background: var(--surface-1); border: 1px solid var(--stroke); border-radius: var(--radius-s); padding: 3px; margin-bottom: var(--sp-3); }
.seg-btn { flex: 1; appearance: none; border: none; cursor: pointer; background: transparent; color: var(--text-dim);
  font-weight: 600; font-size: var(--fs-sm); min-height: 44px; padding: 9px 6px; border-radius: 9px; transition: .18s var(--ease); }
.seg-btn:hover { color: var(--text); }
.seg-btn.is-active { background: var(--grad-primary); color: var(--on-accent); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: var(--sp-3); }
.chips-platos:empty { display: none; }
.chip-plato { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.35); color: var(--text);
  border-radius: var(--radius-pill); padding: 6px 11px; font-size: var(--fs-sm); font-weight: 600; }
.chip-plato:hover { background: rgba(251,191,36,.18); }
.chip-plato small { color: var(--text-dim); font-weight: 500; }
.chip-plato .fc-icon { width: 14px; height: 14px; color: var(--warn); }
.plato-del { border: none; background: transparent; color: var(--text-dim); cursor: pointer;
  font-size: .8rem; line-height: 1; padding: 0 2px; }
.plato-del:hover { color: var(--danger); }

/* Onboarding visual */
.onboarding {
  position: relative;
  margin-bottom: var(--sp-5);
  padding: 20px;
  border: 1px solid rgba(188,224,0,.22);
  border-radius: var(--radius);
  background:
    radial-gradient(95% 100% at 0% 0%, rgba(188,224,0,.12), transparent 58%),
    radial-gradient(85% 100% at 100% 12%, rgba(21,194,176,.12), transparent 62%),
    var(--surface-1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 60px -46px rgba(21,194,176,.8);
}
.onb-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.045);
  color: var(--text-dim);
  cursor: pointer;
}
.onb-close:hover { color: var(--text); border-color: var(--stroke-2); }
.onb-head { max-width: 760px; padding-right: 38px; }
.onb-kicker { display: inline-block; color: var(--accent); font-size: var(--fs-micro); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.onb-title { font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 900; letter-spacing: -.03em; margin-top: 3px; }
.onb-sub { color: var(--text-dim); font-size: var(--fs-sm); margin-top: 6px; line-height: 1.45; }
.onb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.onb-card {
  border: 1px solid var(--stroke);
  border-radius: var(--radius-s);
  background: rgba(255,255,255,.045);
  overflow: hidden;
}
.onb-card[open] { border-color: rgba(188,224,0,.28); background: rgba(255,255,255,.06); }
.onb-card summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
  color: var(--text);
  font-weight: 850;
}
.onb-card summary::-webkit-details-marker { display: none; }
.onb-card summary span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.onb-card summary b { color: var(--muted); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; }
.onb-card p { color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.45; padding: 0 13px; margin: 10px 0 12px; }
.onb-card .btn { margin: 0 13px 13px; }
.demo-clip {
  position: relative;
  min-height: 116px;
  margin: 0 13px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-s);
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    radial-gradient(110% 90% at 20% 20%, rgba(188,224,0,.12), transparent 58%),
    rgba(5,7,10,.42);
  background-size: 100% 18px, auto, auto;
}
.demo-clip::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
}
.demo-clip::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: 9px;
  width: 42%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  animation: demo-progress 4.8s ease-in-out infinite;
}
.demo-goal > i {
  position: absolute;
  width: 62px;
  height: 44px;
  top: 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  animation: demo-pop 4.8s ease-in-out infinite;
}
.demo-goal > i:nth-child(1) { left: 16px; }
.demo-goal > i:nth-child(2) { left: 90px; animation-delay: .25s; }
.demo-goal > i:nth-child(3) { left: 164px; animation-delay: .5s; }
.demo-bars { position: absolute; left: 18px; right: 18px; bottom: 26px; display: grid; gap: 6px; }
.demo-bars span { height: 7px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.demo-bars span::before { content: ""; display: block; height: 100%; width: 66%; border-radius: inherit; background: var(--accent-2); animation: demo-fill 4.8s ease-in-out infinite; }
.demo-food > i {
  position: absolute;
  width: 72px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  left: 16px;
  animation: demo-slide 5.2s ease-in-out infinite;
}
.demo-food > i:nth-child(1) { top: 18px; }
.demo-food > i:nth-child(2) { top: 52px; animation-delay: .2s; }
.demo-food > i:nth-child(3) { top: 86px; animation-delay: .4s; }
.demo-input { position: absolute; right: 18px; top: 24px; width: 98px; height: 68px; border-radius: 12px; background: rgba(188,224,0,.12); border: 1px solid rgba(188,224,0,.28); }
.demo-input::after { content: ""; position: absolute; inset: 16px 14px auto; height: 8px; border-radius: 99px; background: var(--accent); box-shadow: 0 20px 0 rgba(21,194,176,.65); }
.demo-training > i {
  position: absolute;
  left: 18px;
  width: 78px;
  height: 9px;
  border-radius: 99px;
  background: rgba(255,255,255,.14);
}
.demo-training > i:nth-child(1) { top: 26px; }
.demo-training > i:nth-child(2) { top: 50px; width: 124px; }
.demo-training > i:nth-child(3) { top: 74px; width: 104px; }
.demo-pulse { position: absolute; right: 30px; top: 24px; width: 58px; height: 58px; border-radius: 50%; border: 10px solid rgba(188,224,0,.18); border-top-color: var(--accent); animation: demo-spin 3.8s linear infinite; }
.demo-progress svg { position: absolute; inset: 10px 14px auto; width: calc(100% - 28px); height: 78px; }
.demo-progress path { fill: none; stroke: var(--accent-2); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 260; animation: demo-draw 5s ease-in-out infinite; }
.demo-progress circle { fill: var(--accent); filter: drop-shadow(0 0 10px rgba(188,224,0,.45)); }
.demo-chat { position: absolute; right: 18px; bottom: 25px; width: 76px; height: 28px; border-radius: 12px 12px 3px 12px; background: rgba(188,224,0,.16); border: 1px solid rgba(188,224,0,.28); animation: demo-pop 5s ease-in-out infinite; }
@keyframes demo-progress { 0%, 15% { width: 12%; } 55% { width: 76%; } 100% { width: 42%; } }
@keyframes demo-pop { 0%, 100% { transform: translateY(0); opacity: .78; } 45% { transform: translateY(-3px); opacity: 1; } }
@keyframes demo-fill { 0% { width: 22%; } 55% { width: 82%; } 100% { width: 66%; } }
@keyframes demo-slide { 0%, 100% { transform: translateX(0); } 48% { transform: translateX(34px); } }
@keyframes demo-spin { to { transform: rotate(360deg); } }
@keyframes demo-draw { 0% { stroke-dashoffset: 260; } 55%, 100% { stroke-dashoffset: 0; } }
@media (max-width: 760px) {
  .onboarding { padding: 17px; }
  .onb-grid { grid-template-columns: 1fr; }
  .demo-clip { min-height: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-clip::after,
  .demo-goal > i,
  .demo-bars span::before,
  .demo-food > i,
  .demo-pulse,
  .demo-progress path,
  .demo-chat {
    animation: none;
  }
}

/* Resumen de perfil (cuando ya está configurado) */
.perfil-resumen { margin-bottom: var(--sp-2); }
.pr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pr-head h2 { margin: 0; }
.pr-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.pr-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin-top: var(--sp-4); }
.pr-chip { padding: 12px 13px; border-radius: var(--radius-s); background: var(--surface-1); border: 1px solid var(--stroke); }
.pr-chip b { display: block; font-size: var(--fs-lead); font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pr-chip span { display: block; font-size: var(--fs-micro); color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* Cuenta / sincronización */
.cuenta-card { margin-bottom: var(--sp-5); padding: 18px; }
.cuenta-card:empty { display: none; }
.cuenta-form { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.cuenta-form input { width: 100%; }
.cuenta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cuenta-mail { margin-top: 8px; font-size: var(--fs-base); }
.cuenta-estado { margin-top: 10px; font-size: var(--fs-sm); min-height: 1em; }
.cuenta-estado.ok { color: var(--good); }
.cuenta-estado.bad { color: var(--danger); }

/* ---------- Protocolos ---------- */
.aviso-medico { background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.35);
  color: #f6cfcf; border-radius: var(--radius-s); padding: 13px 15px; font-size: var(--fs-sm);
  line-height: 1.5; margin-bottom: var(--sp-5); }
.aviso-medico strong { color: #fff; }
.aviso-medico .fc-icon { width: 18px; height: 18px; color: var(--bad); margin-right: 6px; vertical-align: -0.24em; }
.proto-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.proto-grid select, .proto-grid input { flex: 1 1 130px; min-width: 0; }
.proto-grid button { flex: 0 0 auto; }
#pr-ficha { margin-top: 12px; }

.proto-hoy { background: var(--surface-1); border: 1px solid var(--stroke); border-radius: var(--radius-s);
  padding: 14px 16px; margin-bottom: var(--sp-5); }
.proto-hoy.ok { color: var(--text-dim); font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px; }
.proto-hoy.ok .fc-icon { color: var(--prote); }
.ph-title { font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.ph-title .fc-icon { color: var(--accent); width: 16px; height: 16px; }
.ph-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; }
.ph-item span { font-weight: 500; }

.proto-card { background: var(--surface-1); border: 1px solid var(--stroke); border-radius: var(--radius-s);
  padding: 14px 16px; margin-bottom: 12px; }
.proto-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.proto-name { font-weight: 700; font-size: var(--fs-base); }
.proto-meta { color: var(--text-dim); font-size: var(--fs-sm); margin-top: 2px; }
.proto-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.proto-del { border: none; background: transparent; color: var(--text-dim); cursor: pointer; font-size: .95rem; padding: 4px; }
.proto-del:hover { color: var(--danger); }
.proto-nivel { margin-top: 10px; font-size: var(--fs-sm); color: var(--text-dim); }
.proto-nivel strong { color: var(--text); }
.spark { display: block; width: 100%; height: 44px; margin-top: 6px; opacity: .9; }
.proto-ficha { margin-top: 10px; }
.proto-ficha > summary { cursor: pointer; color: var(--text-dim); font-size: var(--fs-sm); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.proto-ficha > summary::-webkit-details-marker { display: none; }
.proto-ficha > summary .fc-icon { width: 15px; height: 15px; color: var(--accent); }
.proto-ficha p { margin-top: 8px; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-dim); }
.proto-ultima { margin-top: 8px; font-size: var(--fs-micro); color: var(--text-dim); }

/* Analíticas */
.an-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--stroke); }
.an-item:last-child { border-bottom: none; }
.an-name { font-weight: 600; font-size: var(--fs-sm); }
.an-fecha { display: block; font-size: var(--fs-micro); color: var(--text-dim); margin-top: 1px; }
.an-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-badge { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--radius-pill); margin-left: 6px; letter-spacing: .03em; }
.an-good { background: rgba(52,211,153,.16); color: var(--good); }
.an-warn { background: rgba(251,191,36,.16); color: var(--warn); }
.an-bad  { background: rgba(248,113,113,.18); color: var(--bad); }

/* Modo a fuego (sprint) */
.sprint { background: linear-gradient(135deg, rgba(21,194,176,.16), rgba(251,191,36,.08));
  border: 1px solid rgba(21,194,176,.35); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
.sprint-off, .sprint-done { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sprint-off { background: var(--surface-1); border-color: var(--stroke); }
.sprint-top { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.sprint-top .fc-icon { color: var(--accent); width: 17px; height: 17px; }
.sprint-sub { font-size: var(--fs-sm); color: var(--text-dim); margin-top: 3px; }
.sprint-bar { height: 7px; border-radius: var(--radius-pill); background: var(--track); overflow: hidden; margin: 9px 0; }
.sprint-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--fat)); }
.sprint > button { margin-top: 10px; }
.sprint-off > button, .sprint-done > button { margin-top: 0; }
.chip { appearance: none; cursor: pointer; background: var(--surface-2); border: 1px solid var(--stroke); color: var(--text);
  border-radius: var(--radius-pill); padding: 7px 13px; font-size: var(--fs-sm); font-weight: 600; transition: .15s; }
.chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.chip small { color: var(--text-dim); font-weight: 500; }

/* ---------- Más del día ---------- */
.extra-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.extra-item { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.extra-label { font-size: var(--fs-sm); color: var(--text-dim); font-weight: 600; }
.extra-label em { font-style: normal; color: var(--muted); font-weight: 500; margin-left: 4px; }
.extra-unit { color: var(--text-dim); font-size: var(--fs-sm); }
.agua-row { display: flex; align-items: center; gap: 12px; }
.agua-row strong { font-size: 1.5rem; min-width: 28px; text-align: center; font-weight: 700; color: var(--carb); font-variant-numeric: tabular-nums; }
.agua-btn { appearance: none; cursor: pointer; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--stroke);
  background: var(--surface-2); color: var(--text); font-size: 1.3rem; line-height: 1; transition: .15s; }
.agua-btn:hover { border-color: var(--carb); color: var(--carb); }

/* ---------- Predicción (héroe de Progreso) ---------- */
.predict-card { padding: 24px; position: relative; overflow: hidden; }
.predict-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-primary); }
.predict-card::after {
  content: ""; position: absolute; right: -34px; bottom: -42px; width: min(46%, 430px); aspect-ratio: 16 / 10;
  background: url("../assets/fitcontrol-progress.webp") center / contain no-repeat;
  opacity: .18; pointer-events: none; filter: saturate(1.05);
}
.predict-card > * { position: relative; z-index: 1; }
.predict-big { font-size: var(--fs-data); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums; }
.predict-big .fc-icon { width: .8em; height: .8em; color: var(--warn); vertical-align: -0.08em; margin-right: .08em; }
.predict-band { margin-top: 12px; font-size: var(--fs-sm); color: var(--text-dim);
  background: var(--surface-3); border: 1px solid var(--stroke); border-radius: var(--radius-s); padding: 9px 12px; }
.predict-band strong { color: var(--text); }
.predict-rows { margin-top: var(--sp-4); }
.predict-rows .row, .predict-card .row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--stroke); }
.predict-rows .row:last-child { border-bottom: none; }
.predict-rows .row span:first-child { color: var(--text-dim); }
.predict-rows .row span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Gráfica ---------- */
.chart-box { padding: 16px; }
.chart { width: 100%; height: auto; display: block; }
.chart-leyenda { display: flex; gap: 16px; justify-content: center; margin-top: 10px; font-size: var(--fs-micro); color: var(--text-dim); }
.lg::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.lg-peso::before { background: var(--accent); } .lg-tend::before { background: var(--prote); } .lg-obj::before { background: var(--carb); }

/* ---------- Nebulosa de evolución ---------- */
.chart-nebula { padding: 0; overflow: hidden; }
.nebula { position: relative; width: 100%; aspect-ratio: 760 / 320; border-radius: var(--radius); overflow: hidden;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(21,194,176,.14), transparent 55%),
    radial-gradient(120% 100% at 92% 100%, rgba(34,211,238,.12), transparent 55%),
    radial-gradient(100% 120% at 60% 50%, rgba(21,194,176,.10), transparent 60%),
    #0a0c12;
}
.nebula::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 70px 10px rgba(0,0,0,.5); }
.nebula-fog { position: absolute; inset: 0; width: 100%; height: 100%; }
.nebula-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nebula-svg text { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.nebula-leyenda { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-top: 12px;
  font-size: var(--fs-micro); color: var(--text-dim); }
.nebula-leyenda .lg::before { width: 14px; height: 3px; }
.lg-real::before { background: #fff; } .lg-tend::before { background: var(--accent-2); }
.lg-obj::before { background: var(--ai-2); } .lg-pred::before { background: var(--ai); }

.nebula-orbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.orbe { display: flex; align-items: center; gap: 9px; padding: 12px 13px; border-radius: var(--radius-s);
  background: var(--surface-1); border: 1px solid var(--stroke); }
.orbe-dot { width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 35%, #fff, var(--oc) 60%);
  box-shadow: 0 0 12px 1px var(--oc); animation: orbe-pulse 2.6s ease-in-out infinite; }
.orbe b { display: block; font-size: var(--fs-base); font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.orbe span { display: block; font-size: var(--fs-micro); color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
@keyframes orbe-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.86); } }

.nebula-empty { display: flex; align-items: center; gap: 12px; min-height: 150px; padding: 24px;
  border-radius: var(--radius); color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.5;
  background: radial-gradient(120% 120% at 30% 20%, rgba(21,194,176,.12), transparent 60%), #0a0c12; }
.neb-spark { font-size: 1.6rem; color: var(--ai); animation: orbe-pulse 2.4s ease-in-out infinite; }

@media (max-width: 480px) { .nebula-orbs { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .orbe-dot, .neb-spark { animation: none; } }

/* ---------- IA ---------- */
.ai-banner { background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.4); color: #f5e6bd;
  border-radius: var(--radius-s); padding: 13px 15px; font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.ai-banner code { background: rgba(0,0,0,.35); padding: 1px 7px; border-radius: 6px; }
.ai-banner .fc-icon { width: 17px; height: 17px; color: var(--warn); margin-right: 5px; vertical-align: -0.22em; }
.ai-output { padding: 18px 20px; margin-top: var(--sp-4); font-size: var(--fs-base); line-height: 1.65;
  background: var(--surface-1); border: 1px solid var(--stroke); border-radius: var(--radius); position: relative; }
.ai-output::before { content: "Entrenador IA"; display: block; font-size: var(--fs-micro); font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 8px; color: var(--ai); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(6,7,11,.72); display: grid; place-items: center; z-index: var(--z-modal-backdrop); backdrop-filter: blur(8px); animation: fadeIn .18s; }
@keyframes fadeIn { from { opacity: 0; } }
.modal-box { z-index: var(--z-modal); background: var(--surface-1); border: 1px solid var(--stroke-2); border-radius: var(--radius);
  padding: 28px 34px; text-align: center; box-shadow: var(--shadow); }
.spinner { width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 16px;
  background: conic-gradient(from 0deg, transparent, var(--ai)); -webkit-mask: radial-gradient(farthest-side, transparent 60%, #000 62%); mask: radial-gradient(farthest-side, transparent 60%, #000 62%); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: spin 1.6s linear infinite; } }

/* ---------- Toasts ---------- */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: var(--z-toast); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { pointer-events: auto; max-width: 440px; width: max-content; max-inline-size: 92vw;
  background: rgba(16,18,24,.94); border: 1px solid var(--stroke-2); color: var(--text);
  padding: 13px 18px; border-radius: var(--radius-s); font-size: var(--fs-sm); font-weight: 500; box-shadow: var(--shadow); backdrop-filter: blur(12px);
  display: flex; align-items: center; gap: 10px; animation: toastIn .3s var(--ease); }
.toast.out { animation: toastOut .26s forwards; }
.toast.ok  { border-color: rgba(52,227,160,.5); }
.toast.bad { border-color: rgba(251,113,133,.5); }
.toast::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--ai); box-shadow: 0 0 12px rgba(34,211,238,.45); flex: 0 0 auto; }
.toast.ok::before { background: var(--good); box-shadow: 0 0 12px rgba(52,227,160,.45); }
.toast.bad::before { background: var(--danger); box-shadow: 0 0 12px rgba(251,113,133,.45); }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } .toast.out { animation: none; opacity: 0; } }

/* ---------- Barra inferior (móvil, tipo app) ---------- */
.bottom-nav { display: none; }
.bottom-nav {
  position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: var(--z-bottomnav);
  justify-content: space-around; padding: 7px; gap: 4px;
  background: rgba(16,18,24,.82); border: 1px solid var(--stroke-2); border-radius: 20px;
  backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--shadow);
}
.bnav-btn { appearance: none; border: none; cursor: pointer; background: transparent; color: var(--text-dim);
  display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .64rem; font-weight: 600;
  padding: 6px 8px; border-radius: 13px; flex: 1; min-height: 46px; transition: color .18s var(--ease), background .18s var(--ease); }
.bnav-btn b { font-size: 1.25rem; line-height: 1; font-weight: 400; }
.bnav-btn .fc-icon {
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 7px;
  stroke-width: 2.2;
  background:
    radial-gradient(110% 110% at 30% 18%, rgba(188,224,0,.13), transparent 62%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.10);
}
.bnav-btn:hover { color: var(--text); }
.bnav-btn.is-active { color: var(--text); background: var(--accent-soft); }
.bnav-btn.is-active b, .bnav-btn.is-active .fc-icon {
  transform: translateY(-1px);
  color: var(--accent);
  border-color: rgba(188,224,0,.34);
  background:
    radial-gradient(110% 110% at 30% 18%, rgba(188,224,0,.22), transparent 64%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  filter: drop-shadow(0 0 10px rgba(188,224,0,.24));
}
body.guide-open .bottom-nav { display: none !important; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--stroke); padding: 26px 18px; text-align: center; margin-top: var(--sp-6); }
.foot p { color: var(--muted); font-size: var(--fs-micro); max-width: 640px; margin: 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .topbar { padding: 10px 12px 0; }
  .topbar-row { gap: 8px; }
  .brand-lockup { height: clamp(34px, 9vw, 42px); max-width: calc(100vw - 190px); }
  .topbar-actions { gap: 6px; }
  .topbar .tabs { display: none; }
  .bottom-nav { display: flex; }
  :root { --fs-h2: 1.45rem; --fs-data: 2.25rem; }
  .screen-visual {
    height: 132px; margin-top: 8px;
    background-position: center, center, center;
    background-size: cover, cover, cover;
  }
  .log-grid, #form-pesas.log-grid, #form-cardio.log-grid { grid-template-columns: 1fr 1fr; }
  .log-grid > button[type="submit"] { grid-column: 1 / -1; }
  .container { padding-bottom: 110px; }
}
@media (min-width: 721px) { .bottom-nav { display: none !important; } }

/* ---------- Selector de perfil ---------- */
.perfil-chip { appearance: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  background: var(--surface-1); border: 1px solid var(--stroke); color: var(--text);
  padding: 5px 12px 5px 5px; border-radius: var(--radius-pill); font-weight: 600; font-size: var(--fs-sm); transition: .15s; }
.perfil-chip:hover { border-color: var(--stroke-2); background: var(--surface-2); }
.pc-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-ai); color: var(--on-accent); font-weight: 800; font-size: var(--fs-sm); flex: 0 0 auto; }
.pc-caret { color: var(--text-dim); font-size: .7rem; }
.perfil-box { text-align: left; min-width: 300px; max-width: 92vw; }
.perfil-box h3 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 4px; }
.perfil-list { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.perfil-item { display: flex; align-items: center; gap: 8px; }
.perfil-switch { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left;
  background: var(--surface-2); border: 1px solid var(--stroke); color: var(--text); border-radius: var(--radius-s); padding: 11px 13px; font-weight: 600; font-size: var(--fs-base); transition: .15s; }
.perfil-item.activo .perfil-switch { border-color: var(--ai); box-shadow: inset 0 0 0 1px var(--ai); }
.perfil-switch:hover { border-color: var(--stroke-2); }
.perfil-del { cursor: pointer; background: none; border: 1px solid var(--stroke); color: var(--bad); width: 38px; height: 38px; border-radius: var(--radius-s); font-size: 1rem; transition: .15s; }
.perfil-del:hover { background: rgba(251,113,133,.14); border-color: rgba(251,113,133,.5); }

/* ---------- Tarjeta Entrenador Elite ---------- */
#progreso-foto-output::before { content: "Entrenador Elite"; }
.eval-head { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.eval-score { display: flex; align-items: baseline; gap: 2px; }
.eval-score b { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--ai); font-variant-numeric: tabular-nums; }
.eval-score span { color: var(--text-dim); font-weight: 700; }
.eval-nivel { font-weight: 700; font-size: var(--fs-base); }
.eval-bf { color: var(--text-dim); font-size: var(--fs-sm); }
.eval-sec { margin-top: 14px; }
.eval-sec h4 { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: 6px; }
.eval-sec ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.eval-sec li { font-size: var(--fs-sm); display: flex; align-items: center; gap: 7px; }
.eval-sec li .fc-icon { width: 15px; height: 15px; color: var(--accent); }
.eval-sec p { font-size: var(--fs-sm); }
.eval-weeks { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-s); font-weight: 700;
  background: rgba(21,194,176,.12); border: 1px solid rgba(21,194,176,.35); }
.eval-weeks .fc-icon { width: 16px; height: 16px; color: var(--accent); margin-right: 5px; vertical-align: -0.2em; }

/* ---------- Coach: "lo que te queda hoy" ---------- */
.coach-hoy { margin-bottom: var(--sp-4); }
.coach-card { display: flex; gap: 14px; align-items: flex-start; min-width: 0; padding: 18px;
  border-radius: var(--radius); background: linear-gradient(135deg, rgba(21,194,176,.14), rgba(34,211,238,.08));
  border: 1px solid rgba(21,194,176,.35); box-shadow: var(--shadow-sm); }
.coach-card > div:not(.coach-av) { min-width: 0; overflow-wrap: anywhere; }
.coach-line, .coach-tip { min-width: 0; overflow-wrap: anywhere; }
.coach-card.coach-warn { background: linear-gradient(135deg, rgba(251,191,36,.16), rgba(251,146,60,.08)); border-color: rgba(251,191,36,.42); }
.coach-card + .coach-card { margin-top: 12px; }
.coach-av { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center; font-size: 1.5rem;
  background: var(--grad-ai); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
.coach-av .fc-icon { width: 24px; height: 24px; color: var(--on-accent); stroke-width: 2.3; }
.coach-line { min-width: 0; font-size: var(--fs-lead); font-weight: 700; letter-spacing: -.01em; line-height: 1.4; overflow-wrap: anywhere; }
.coach-line b { color: #fff; }
.coach-tip { min-width: 0; color: var(--text-dim); font-size: var(--fs-sm); margin-top: 5px; overflow-wrap: anywhere; }
.coach-tip .fc-icon { width: 16px; height: 16px; color: var(--accent); margin-right: 5px; vertical-align: -0.18em; }

/* ---------- Chat con el coach ---------- */
.chat { display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--sp-5); }
.chat-msgs { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; padding: 4px; scrollbar-width: thin; }
.msg { display: flex; }
.msg.me { justify-content: flex-end; }
.bubble { max-width: 82%; min-width: 0; padding: 12px 15px; border-radius: 16px; font-size: var(--fs-base); line-height: 1.5; overflow-wrap: anywhere; }
.msg.coach .bubble { background: var(--surface-2); border: 1px solid var(--stroke); border-bottom-left-radius: 5px; }
.msg.me .bubble { background: var(--grad-ai); color: var(--on-accent); border-bottom-right-radius: 5px; }
.chat-input-row { display: flex; gap: 9px; align-items: center; }
.chat-input-row input { flex: 1; border-radius: var(--radius-pill); }
#chat-send { border-radius: 50%; width: 46px; height: 46px; padding: 0; font-size: 1.1rem; flex: 0 0 auto; display: grid; place-items: center; }

/* ===================================================================
   Componentes de funciones nuevas (entrada universal, agente de
   bolsillo, rediseño de Protocolos). Portados del trabajo en paralelo
   y adaptados a los tokens del sistema. Usan --accent/--stroke/--prote…
   =================================================================== */

.eyebrow { color: var(--accent); font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 5px; }

.ia-domain-warn { display: inline-block; margin-top: 6px; color: var(--warn); line-height: 1.45; }

.ia-domain-warn a { color: var(--warn); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

.pocket-hoy {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, .88fr); gap: 14px;
  min-height: clamp(472px, 48vw, 565px);
  margin: 0 auto 20px; padding: 14px;
  border: 1px solid rgba(188,224,0,.18); border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(7,9,13,.52), rgba(7,9,13,.16) 46%, rgba(7,9,13,.60)),
    radial-gradient(72% 140% at 18% 72%, rgba(188,224,0,.18), transparent 55%),
    radial-gradient(74% 130% at 90% 50%, rgba(34,211,238,.16), transparent 64%),
    rgba(9,12,17,.40);
  box-shadow: 0 34px 96px -58px rgba(0,0,0,.98), inset 0 1px 0 rgba(255,255,255,.075);
  backdrop-filter: blur(10px) saturate(132%);
}

.pocket-hoy::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,6,9,.18), rgba(4,6,9,.04) 52%, rgba(4,6,9,.34)),
    linear-gradient(180deg, rgba(4,6,9,.24), rgba(4,6,9,.02) 48%, rgba(4,6,9,.54)),
    url("../assets/fitcontrol-hoy-scene.webp") center 48px / cover no-repeat;
  opacity: .90;
  transform: scale(1.025);
}

.pocket-hoy::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 61%, rgba(188,224,0,.14) 61.3%, transparent 62%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: auto, 100% 22px, 56px 100%;
  opacity: .42;
}

.pocket-agent, .pocket-side {
  position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--stroke);
  background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow: 0 18px 46px -30px rgba(0,0,0,.9); backdrop-filter: blur(18px) saturate(132%);
}

.pocket-agent {
  min-height: clamp(445px, 43vw, 535px);
  padding: clamp(30px, 3vw, 42px) clamp(24px, 3vw, 34px) 26px;
  border-color: rgba(188,224,0,.24);
  background:
    linear-gradient(90deg, rgba(13,17,22,.84) 0%, rgba(13,17,22,.55) 54%, rgba(13,17,22,.26) 100%),
    radial-gradient(70% 72% at 84% 64%, rgba(21,194,176,.22), transparent 64%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
}

.pocket-agent::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,10,14,.36), rgba(8,10,14,.04) 48%, rgba(8,10,14,.40)),
    linear-gradient(180deg, rgba(8,10,14,.10), rgba(8,10,14,.03) 48%, rgba(8,10,14,.44)),
    url("../assets/fitcontrol-hoy-scene.webp") left 154px / auto 84% no-repeat;
  opacity: .58;
  filter: saturate(1.08) contrast(1.02);
  transform-origin: 42% 68%;
  animation: none;
}

.pocket-agent::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,9,13,.40), rgba(7,9,13,.08) 48%, rgba(7,9,13,.34)),
    radial-gradient(44% 58% at 18% 76%, rgba(188,224,0,.18), transparent 72%),
    linear-gradient(115deg, transparent 0 56%, rgba(188,224,0,.09) 56.4%, transparent 57.2%),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: auto, auto, auto, 100% 18px;
  opacity: .62;
}

@keyframes agent-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg) scale(1); }
  50% { transform: translate3d(-8px, -12px, 0) rotate(1deg) scale(1.018); }
}

.pocket-agent .eyebrow { position: relative; z-index: 1; margin: 0 0 10px; }

.pocket-agent h2 {
  position: relative; z-index: 1; margin: 0 0 10px; max-width: 19ch;
  font-size: clamp(2.12rem, 3.45vw, 3.32rem); line-height: 1.02;
  text-shadow: 0 8px 34px rgba(0,0,0,.55);
}

.pocket-agent h2 b { color: #fff; }

.pocket-agent p:not(.eyebrow) {
  position: relative; z-index: 1; color: var(--text-dim); margin: 0; max-width: 50ch;
  text-shadow: 0 2px 18px rgba(0,0,0,.58);
}

.quick-log {
  position: relative; z-index: 1; display: flex; gap: 9px; align-items: stretch;
  margin-top: clamp(18px, 4vw, 50px);
  margin-left: clamp(0px, 16vw, 178px);
  max-width: 570px;
}

.quick-log input {
  flex: 1; min-width: 0; border-radius: 17px;
  background: rgba(8,10,15,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 16px 34px -28px rgba(0,0,0,.9);
}

.quick-log .btn { flex: 0 0 auto; }

.quick-voice {
  appearance: none; cursor: pointer; flex: 0 0 48px; width: 48px; min-height: 48px; border-radius: 17px; border: 1px solid var(--stroke);
  color: var(--text); background: rgba(255,255,255,.07); font-size: 1.05rem; transition: .15s;
}

.quick-voice:hover { border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.12); }

.quick-voice.is-listening { color: #fff; border-color: rgba(21,194,176,.75); background: rgba(21,194,176,.22); box-shadow: 0 0 0 4px rgba(21,194,176,.12); }

.quick-result { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0 clamp(0px, 16vw, 178px); }

.quick-result span {
  display: inline-flex; align-items: center; min-height: 28px; padding: 5px 9px; border-radius: 999px;
  background: rgba(52,227,160,.1); border: 1px solid rgba(52,227,160,.18); color: var(--text); font-size: .76rem; font-weight: 800;
}

.quick-actions {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 14px 0 0 clamp(0px, 16vw, 178px);
  max-width: 600px;
}

.quick-actions button {
  appearance: none; cursor: pointer; border: 1px solid var(--stroke); color: var(--text); background: rgba(255,255,255,.055);
  border-radius: 999px; padding: 8px 12px; font-weight: 800; font-size: .82rem; transition: .15s;
  display: inline-flex; align-items: center; gap: 7px;
}

.quick-actions button:hover { border-color: rgba(188,224,0,.42); background: rgba(188,224,0,.1); }
.quick-actions button:hover .fc-icon { color: var(--accent); transform: translateY(-1px); }

.qr { position: relative; z-index: 1; max-width: 620px; margin-top: 12px; display: none; }
.qr.is-open { display: block; }

.pocket-side {
  padding: 14px; display: grid; gap: 14px;
  align-self: stretch;
  background:
    linear-gradient(180deg, rgba(18,22,30,.78), rgba(18,22,30,.48)),
    radial-gradient(90% 70% at 50% 0%, rgba(34,211,238,.14), transparent 66%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  border-color: rgba(255,255,255,.12);
}

.pocket-rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.pocket-ring {
  appearance: none; cursor: pointer; color: var(--text); font: inherit;
  position: relative; overflow: hidden;
  padding: 17px 10px 14px; border-radius: 16px; text-align: center;
  background:
    radial-gradient(85% 90% at 50% 0%, color-mix(in srgb, var(--ring, var(--accent)) 13%, transparent), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.038));
  border: 1px solid rgba(255,255,255,.105);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 34px -28px rgba(0,0,0,.9);
  transform: translateY(0);
  animation: pocket-card-in .48s var(--ease) both;
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.pocket-ring:nth-child(2) { animation-delay: .06s; }
.pocket-ring:nth-child(3) { animation-delay: .12s; }
.pocket-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 18%, rgba(255,255,255,.10) 48%, transparent 78%);
  opacity: .16;
  transform: translateX(-56%);
  pointer-events: none;
}
.pocket-ring:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--ring, var(--accent)) 28%, rgba(255,255,255,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 44px -30px color-mix(in srgb, var(--ring, var(--accent)) 38%, rgba(0,0,0,.8));
}
.pocket-ring:active { transform: translateY(-1px) scale(.985); }
.pocket-ring:hover::before { animation: ring-card-sheen 1.15s var(--ease); }
@keyframes pocket-card-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
}

/* Anillo de actividad estilo Apple Salud: se rellena con animación al cargar
   (transición de --pct, registrado con @property) y arranca arriba (-90deg). */
.pocket-ring span {
  --pct: 0;
  --ring-size: clamp(72px, 6.1vw, 92px);
  width: var(--ring-size);
  height: var(--ring-size);
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin: 0 auto 12px;
  background:
    radial-gradient(circle at 50% 50%, transparent 48%, rgba(255,255,255,.12) 49% 51%, transparent 52%),
    conic-gradient(from -90deg,
      color-mix(in srgb, var(--ring, var(--accent)) 72%, #fff 28%) 0 calc(var(--pct) * 1%),
      rgba(255,255,255,.07) 0 100%);
  position: relative;
  transition: --pct 1.05s cubic-bezier(.2,.72,.18,1);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--ring, var(--accent)) 34%, transparent));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 -14px 26px rgba(0,0,0,.42);
}
.pocket-ring span::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from -90deg,
      rgba(255,255,255,.28) 0deg 1.7deg,
      transparent 1.7deg 12deg);
  -webkit-mask: radial-gradient(farthest-side, transparent 61%, #000 63% 71%, transparent 73%);
          mask: radial-gradient(farthest-side, transparent 61%, #000 63% 71%, transparent 73%);
  opacity: .30;
  pointer-events: none;
}
.pocket-ring span::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 32%, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(180deg, #121822, #0b0f16);
  box-shadow:
    inset 0 0 20px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(255,255,255,.045);
}
.pocket-ring span i {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--ring, var(--accent)) 24%, transparent),
    0 0 18px color-mix(in srgb, var(--ring, var(--accent)) 90%, transparent);
  transform: rotate(calc(var(--pct) * 3.6deg - 90deg)) translateX(calc(var(--ring-size) / 2 - 7px));
  transform-origin: center;
  opacity: .92;
  transition: transform 1.05s cubic-bezier(.2,.72,.18,1), opacity .35s var(--ease);
}
.pocket-ring span[data-pct="0"] i {
  opacity: .32;
  background: rgba(255,255,255,.46);
  box-shadow: 0 0 0 4px rgba(255,255,255,.04);
}
.pocket-ring span strong {
  position: relative;
  z-index: 3;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
  color: color-mix(in srgb, var(--ring, var(--accent)) 82%, #fff 18%);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px color-mix(in srgb, var(--ring, var(--accent)) 35%, transparent);
}
.pocket-ring span u {
  position: relative; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid color-mix(in srgb, var(--ring, var(--accent)) 36%, rgba(255,255,255,.08));
  font-size: .98rem; font-weight: 900; text-decoration: none; color: var(--ring, var(--accent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.pocket-ring span u .fc-icon { width: 17px; height: 17px; stroke-width: 2.7; }

/* Objetivo superado: anillo cerrado, glow fuerte y pulso (como cerrar el aro). */
.pocket-ring.over span { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--ring) 72%, transparent)); animation: ring-pulse 2.4s ease-in-out infinite; }
@keyframes ring-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ring) 50%, transparent)); }
  50% { filter: drop-shadow(0 0 20px color-mix(in srgb, var(--ring) 90%, transparent)); }
}
@keyframes ring-card-sheen {
  from { transform: translateX(-56%); opacity: .10; }
  52% { opacity: .24; }
  to { transform: translateX(56%); opacity: .06; }
}
@media (prefers-reduced-motion: reduce) {
  .pocket-ring,
  .pocket-ring:hover::before,
  .pocket-ring.over span {
    animation: none;
  }
  .pocket-ring,
  .pocket-ring:hover {
    transform: none;
  }
  .pocket-ring span,
  .pocket-ring span i {
    transition: none;
  }
}

.pocket-ring em { display: block; color: var(--text-dim); font-style: normal; font-size: .72rem; font-weight: 900; margin-bottom: 4px; text-transform: uppercase; }
.pocket-ring b { display: block; font-size: 1.02rem; font-weight: 900; letter-spacing: 0; }
.pocket-ring small { color: var(--text-dim); font-size: .72rem; }
.pocket-ring.kcal { --ring: var(--accent); }
.pocket-ring.protein { --ring: var(--prote); }
.pocket-ring.steps { --ring: var(--carb); }
.pocket-ring.water { --ring: var(--ai-2); }

.pocket-tasks { display: grid; gap: 9px; }

.pocket-task { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px; border-radius: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,.062), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.095);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.pocket-task i { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-weight: 900;
  background: rgba(255,255,255,.065); }
.pocket-task i .fc-icon { width: 18px; height: 18px; color: var(--accent); stroke-width: 2.3; }
.pocket-task.warn i .fc-icon { color: var(--warn); }
.pocket-task.ok i .fc-icon { color: var(--prote); }
.pocket-task .task-letter { color: var(--accent); font-size: .9rem; letter-spacing: .02em; }

.pocket-task b { display: block; font-size: .88rem; line-height: 1.1; }

.pocket-task span { display: block; color: var(--text-dim); font-size: .74rem; margin-top: 2px; }

.pocket-task strong { color: var(--text-dim); font-size: .76rem; white-space: nowrap; }

.pocket-task.ok strong { color: var(--prote); }

.pocket-task.warn strong { color: var(--warn); }

/* ---------- Protocolos ---------- */
.protocol-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  min-height: clamp(170px, 19vw, 240px); margin: 12px 0 16px; padding: 22px;
  border: 1px solid rgba(188,224,0,.18); border-radius: var(--radius);
  box-shadow: 0 18px 46px -34px rgba(0,0,0,.9);
  background:
    linear-gradient(90deg, rgba(5,7,10,.74), rgba(5,7,10,.42) 46%, rgba(5,7,10,.24)),
    linear-gradient(180deg, rgba(5,7,10,.18), rgba(5,7,10,.02) 48%, rgba(5,7,10,.50)),
    url("../assets/fitcontrol-protocol.webp") center center / cover no-repeat,
    var(--surface-1);
}

.protocol-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 58%, rgba(251,191,36,.12) 58.4%, transparent 59%),
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px);
  background-size: auto, 100% 18px;
  opacity: .52;
}

.protocol-hero > * { position: relative; z-index: 1; }

.protocol-hero h2 { margin-bottom: 4px; }

.protocol-hero .hint { margin-bottom: 0; }

.protocol-kpis { display: grid; grid-template-columns: repeat(3, minmax(86px, 1fr)); gap: 8px; min-width: min(100%, 330px); }

.protocol-kpis span {
  padding: 11px 12px; border-radius: 14px;
  background: rgba(12,16,22,.76); border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.protocol-kpis b { display: block; font-size: .88rem; font-weight: 900; }

.protocol-kpis small { display: block; color: var(--text-dim); font-size: .7rem; margin-top: 1px; }

.protocol-alert { position: relative; padding-left: 18px; box-shadow: inset 3px 0 0 rgba(248,113,113,.6); }

.protocol-layout { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 18px; align-items: start; }

.protocol-rail { position: sticky; top: 116px; align-self: start; }

.protocol-main { min-width: 0; }

.protocol-section-head { margin-top: 22px; }

.protocol-section-head .section-title { margin-bottom: 6px; }

.protocol-section-head .micro { margin: -2px 0 12px; max-width: 62ch; }

.proto-grid-compact { grid-template-columns: 1fr; }

.protocol-add .proto-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.protocol-add #pr-comp { grid-column: span 2; }

.protocol-add #pr-nombre, .protocol-add #pr-vida { grid-column: span 2; }

.protocol-add .proto-grid button { grid-column: span 2; }

.protocol-phase, .protocol-add, .protocol-labs { overflow: hidden; }

.protocol-phase { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035)); }

.protocol-add { border-color: rgba(188,224,0,.2); }

.protocol-labs { margin-top: 22px; }

.protocol-lab-ai { margin-top: 13px; }

.protocol-list { display: grid; gap: 12px; }

.protocol-log:empty::before, .protocol-list:empty::before { content: "Sin registros todavía."; display: block; color: var(--muted);
  text-align: center; padding: 18px; border: 1px dashed var(--stroke); border-radius: 14px; background: rgba(255,255,255,.025); }

@media (max-width: 960px) {
  .protocol-hero { align-items: stretch; flex-direction: column; background-position: center, center, center, center; }
  .protocol-kpis { width: 100%; min-width: 0; }
  .protocol-layout { grid-template-columns: 1fr; }
  .protocol-rail { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
  .protocol-rail .logger, .protocol-rail .proto-hoy { margin-bottom: 0; }
  .protocol-add .proto-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .protocol-add .proto-grid button { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .protocol-hero { min-height: 220px; padding: 18px; background-size: cover, cover, cover, cover; }
  .protocol-kpis { grid-template-columns: 1fr; }
  .protocol-kpis span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .protocol-alert { font-size: .8rem; }
  .proto-head, .ph-item { align-items: stretch; flex-direction: column; }
  .proto-actions { width: 100%; justify-content: space-between; }
  .proto-actions .btn { flex: 1; }
  .an-item { grid-template-columns: 1fr; }
  .an-val { white-space: normal; }
  .nl-comida { flex-direction: column; }
  .nl-comida .btn { width: 100%; }
  .bottom-nav { left: 8px; right: 8px; padding: 6px; gap: 2px; border-radius: 18px; }
  .bnav-btn { padding: 6px 3px; font-size: .6rem; border-radius: 12px; min-width: 0; min-height: 46px; }
  .bnav-btn b { font-size: 1.08rem; }
  .bnav-btn .fc-icon { width: 20px; height: 20px; padding: 3px; }
  .planner-grid, .tabla-summary { grid-template-columns: 1fr; }
  .tabla-meals { grid-template-columns: 1fr; }
}
/* ---------- Móvil: agente de bolsillo apilado + sub-nav cómoda (override final) ---------- */
@media (max-width: 720px) {
  #hoy.is-active::before,
  #hoy.is-active::after {
    top: -14px;
    width: calc(100vw - 16px);
    height: 760px;
    border-radius: 22px;
  }
  #hoy.is-active::before { background-position: 38% top; opacity: .50; }
  #hoy.is-active::after { opacity: .36; }
  .pocket-hoy {
    grid-template-columns: 1fr !important;
    min-height: 0;
    gap: 12px;
    margin-bottom: 14px;
    padding: 8px;
    border-radius: 20px;
  }
  .pocket-hoy::before { background-position: 36% 58px; opacity: .62; }
  .pocket-agent {
    min-height: 430px;
    padding: 20px 18px;
  }
  .pocket-agent::before {
    inset: 0;
    background-position: 8% 178px;
    background-size: auto 68%;
    opacity: .48;
    animation: none;
  }
  .pocket-agent::after { opacity: .42; }
  .pocket-agent h2 { font-size: 1.55rem; max-width: none; line-height: 1.12; }
  .pocket-agent p:not(.eyebrow) { max-width: none; }
  .quick-log, .quick-result, .quick-actions { margin-left: 0; max-width: none; }
  .quick-log { margin-top: 18px; }
  .pocket-side { padding: 12px; }
  .hoy-subnav { gap: 2px; }
  .hoy-subnav .seg-btn { padding: 9px 4px; font-size: .8rem; gap: 4px; }
  .hoy-subnav .seg-btn span, .hoy-subnav .seg-btn .fc-icon { font-size: .95rem; }
}
@media (max-width: 520px) {
  .quick-log { flex-wrap: wrap; }
  .quick-log input { flex: 1 1 100%; }
  .quick-log .btn { flex: 1 1 calc(100% - 58px); }
  .predict-card::after { width: 72%; opacity: .11; right: -80px; bottom: -52px; }
  .logros-grid::before { grid-column: 1 / -1; min-height: 132px; }
  .visual-empty { min-height: 150px; }
  .visual-empty::before { background-position: center center; background-size: cover; opacity: .72; }
}

/* ===================================================================
   Auditoría 2026 — accesibilidad y pulido (foco, táctil, tema claro, motion)
   =================================================================== */
:root { --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }

/* 1) Foco de teclado visible en TODOS los controles (WCAG 2.4.7) */
.tab:focus-visible, .seg-btn:focus-visible, .bnav-btn:focus-visible,
.icon-btn:focus-visible, .day-nav:focus-visible, .agua-btn:focus-visible,
.chip:focus-visible, .chip-plato:focus-visible, .quick-actions button:focus-visible,
.perfil-chip:focus-visible, .gate-close:focus-visible, .info:focus-visible,
.hora-edit:focus-visible, .item-del:focus-visible, .proto-del:focus-visible,
.quick-voice:focus-visible, .advanced summary:focus-visible, .nl-manual > summary:focus-visible,
.plan-loader > summary:focus-visible, .goal-card input:focus-visible + .goal-body,
.pocket-ring:focus-visible {
  outline: none; box-shadow: var(--focus); border-radius: 10px;
}
.pocket-ring:focus-visible { border-radius: 16px; }

/* 2) Área táctil ≥44px en controles pequeños (sin agrandar el visual) */
.info, .item-del, .proto-del, .plato-del, .hora-edit { position: relative; }
.info::after, .item-del::after, .proto-del::after, .plato-del::after, .hora-edit::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
@media (pointer: coarse) { .tab { padding-block: 12px; } .btn-sm { min-height: 44px; } }
/* En móvil, al enfocar un input no debe quedar tapado por la bottom-nav ni el teclado. */
input:focus, select:focus, textarea:focus { scroll-margin-bottom: 130px; scroll-margin-top: 80px; }
/* Saltar al contenido: oculto hasta que recibe foco con el teclado. */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 999; background: var(--accent); color: #06231f;
  padding: 10px 16px; border-radius: 10px; font-weight: 700; transition: top .15s; }
.skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }

/* 4) Cristal del agente: contraste sin matar la escena visual */
.pocket-agent::after { opacity: .56; }
.pocket-side {
  background:
    linear-gradient(180deg, rgba(18,22,30,.78), rgba(18,22,30,.48)),
    radial-gradient(90% 70% at 50% 0%, rgba(34,211,238,.14), transparent 66%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  backdrop-filter: blur(18px) saturate(132%);
  -webkit-backdrop-filter: blur(18px) saturate(132%);
}

/* 5) Texto sobre degradado: peso + sombra para asegurar contraste */
.seg-btn.is-active, .tab.is-active { text-shadow: 0 1px 2px rgba(0,0,0,.35); font-weight: 700; }

/* 8) Los números héroe entran como los anillos (coherencia "los datos cobran vida") */
.predict-big, .eval-score b { animation: data-pop .5s var(--ease) both; }
@keyframes data-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } }

/* 9) Nada de desbordes en móvil; el dato héroe se adapta al ancho de su tarjeta */
.pocket-agent h2, .gate-title, h2, .predict-big, .metric .value { overflow-wrap: anywhere; }
.metric .value { font-size: clamp(1.35rem, 4.5vw, 1.7rem); }

/* 10) Tema claro: superficies "cristal" y énfasis en blanco que se rompían */
:root[data-theme="light"] .pocket-agent,
:root[data-theme="light"] .pocket-side,
:root[data-theme="light"] .pocket-ring,
:root[data-theme="light"] .pocket-task,
:root[data-theme="light"] .protocol-kpis span,
:root[data-theme="light"] .quick-actions button,
:root[data-theme="light"] .quick-voice,
:root[data-theme="light"] .gate-feats b {
  background: var(--surface-2); backdrop-filter: none; -webkit-backdrop-filter: none;
}
:root[data-theme="light"] .coach-line b,
:root[data-theme="light"] .pocket-agent h2 b { color: var(--text); }
:root[data-theme="light"] .pocket-agent {
  background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.84) 56%, rgba(255,255,255,.58) 100%),
    radial-gradient(70% 70% at 90% 54%, rgba(21,194,176,.16), transparent 64%),
    var(--surface-2);
}
:root[data-theme="light"] .pocket-agent::before { opacity: .32; filter: saturate(.82) brightness(1.05); }
:root[data-theme="light"] .pocket-hoy::before { opacity: .44; }
@media (max-width: 720px) { .pocket-agent::after { opacity: .42; } }
:root[data-theme="light"] .screen-visual {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.62), rgba(255,255,255,.34) 50%, rgba(255,255,255,.28)),
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.08) 48%, rgba(255,255,255,.44)),
    var(--visual);
}
:root[data-theme="light"] .protocol-hero {
  background:
    linear-gradient(90deg, rgba(255,255,255,.76), rgba(255,255,255,.48) 50%, rgba(255,255,255,.32)),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04) 48%, rgba(255,255,255,.44)),
    url("../assets/fitcontrol-protocol.webp") center center / cover no-repeat,
    var(--surface-2);
}
:root[data-theme="light"] .visual-empty::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.70), rgba(255,255,255,.42) 54%, rgba(255,255,255,.34)),
    url("../assets/fitcontrol-progress.webp") center center / cover no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .predict-big, .eval-score b, .pocket-agent::before { animation: none; }
}

/* Coach · próxima acción (una sola, destacada) */
.coach-next { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--stroke);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text); display: flex; flex-wrap: wrap; min-width: 0; gap: 8px; align-items: baseline; line-height: 1.4; }
.coach-next span { font-size: var(--fs-micro); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); padding: 3px 9px; border-radius: 999px; flex: 0 0 auto; }
.coach-next span .fc-icon { width: 13px; height: 13px; margin-right: 4px; vertical-align: -0.2em; }
.coach-next b { color: #fff; overflow-wrap: anywhere; }
:root[data-theme="light"] .coach-next b { color: var(--text); }

/* Pulsómetro Bluetooth · panel en vivo */
.fc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 12px; }
.fc-stat { text-align: center; padding: 14px 8px; border-radius: var(--radius-s); background: var(--surface-3); border: 1px solid var(--stroke); }
.fc-stat b { display: block; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1; }
.fc-stat span { font-size: var(--fs-micro); color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.fc-stat:first-child b { color: var(--bad); }

/* ===================================================================
   DIARIO DE FUERZA · ejercicios, series y récords (PR)
   =================================================================== */
.ej-builder { margin-top: 12px; border-top: 1px solid var(--stroke); padding-top: 10px; }
.ej-builder > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; list-style: none; user-select: none; }
.ej-builder > summary::-webkit-details-marker { display: none; }
.ej-builder > summary::before { content: "▸"; display: inline-block; margin-right: 6px; transition: transform .18s ease; color: var(--text-dim); }
.ej-builder[open] > summary::before { transform: rotate(90deg); }
.ej-opt { color: var(--text-dim); font-weight: 400; font-size: var(--fs-micro); }
.ej-row { display: grid; grid-template-columns: 1fr 60px 70px 58px auto; gap: 8px; margin-top: 10px; }
.ej-row input { min-width: 0; }
.ej-draft { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ej-card { background: var(--surface-3); border: 1px solid var(--stroke); border-radius: var(--radius-s); padding: 10px 12px; }
.ej-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ej-head b { font-size: var(--fs-sm); }
.ej-1rm { font-size: var(--fs-micro); color: var(--prote); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ej-series { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ej-serie { font-size: var(--fs-micro); padding: 4px 9px; border-radius: 999px; background: var(--surface-1); border: 1px solid var(--stroke-2); color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; }
.ej-serie:hover { border-color: var(--bad); color: var(--bad); }
/* Resumen compacto en la sesión guardada */
.ej-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ej-tag { font-size: var(--fs-micro); color: var(--text-dim); background: rgba(255,255,255,.04); border: 1px solid var(--stroke); border-radius: 999px; padding: 2px 8px; }
.pr-badge { color: #1a1d27; background: var(--accent); border-radius: 999px; padding: 1px 6px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.pr-badge .fc-icon { width: 12px; height: 12px; stroke-width: 2.4; }

/* Tarjetas de récords personales */
.prs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pr-card { background: var(--surface-3); border: 1px solid var(--stroke); border-radius: var(--radius-s); padding: 12px 14px; }
.pr-name { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 6px; }
.pr-1rm { font-size: 1.7rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pr-1rm span { font-size: var(--fs-micro); font-weight: 500; color: var(--text-dim); letter-spacing: 0; margin-left: 4px; }
.pr-meta { font-size: var(--fs-micro); color: var(--text-dim); margin-top: 6px; font-variant-numeric: tabular-nums; }
.empty-hint { color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.5; text-wrap: pretty; }
.visual-empty {
  position: relative; overflow: hidden; min-height: 176px; display: flex; align-items: flex-end;
  grid-column: 1 / -1;
  padding: 18px; border: 1px dashed var(--stroke-2); border-radius: var(--radius); background: var(--surface-1);
  color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.5; text-wrap: pretty;
}
.visual-empty::before {
  content: ""; position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(5,7,10,.72), rgba(5,7,10,.46) 48%, rgba(5,7,10,.26)),
    url("../assets/fitcontrol-progress.webp") center center / cover no-repeat;
  opacity: .86; pointer-events: none;
}
.visual-empty span { position: relative; z-index: 1; max-width: 44ch; }

/* Confeti de récord */
.confeti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.confeti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; opacity: .95; animation: confeti-caida 1.9s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes confeti-caida { to { transform: translateY(105vh) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .confeti { display: none; } }

@media (max-width: 540px) {
  .ej-row { grid-template-columns: 1fr 1fr 1fr; }
  .ej-row > input:first-child { grid-column: 1 / -1; }
  .ej-row > button { grid-column: 1 / -1; }
}

/* ===================================================================
   REVISIÓN SEMANAL · veredicto + tarjetas de insight
   =================================================================== */
.insights-verdict { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--radius-s); border: 1px solid var(--stroke); background: var(--surface-2); margin-bottom: 12px; }
.insights-verdict b { font-size: 1.15rem; letter-spacing: -.01em; }
.insights-verdict span { font-size: var(--fs-micro); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.insights-verdict.win, .insights-verdict.insight-tone-win {
  border-color: rgba(52,227,160,.4); background: linear-gradient(180deg, rgba(52,227,160,.10), var(--surface-2));
}
.insights-verdict.alert, .insights-verdict.insight-tone-alert {
  border-color: rgba(251,113,133,.4); background: linear-gradient(180deg, rgba(251,113,133,.10), var(--surface-2));
}
.insights-verdict.tip, .insights-verdict.insight-tone-tip, .insights-verdict.insight-tone-info {
  border-color: rgba(255,209,102,.4); background: linear-gradient(180deg, rgba(255,209,102,.10), var(--surface-2));
}
.insights-verdict.win b, .insights-verdict.insight-tone-win b { color: var(--good); }
.insights-verdict.alert b, .insights-verdict.insight-tone-alert b { color: var(--bad); }

.insights { display: flex; flex-direction: column; gap: 8px; }
.insight { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-s); background: var(--surface-3); border: 1px solid var(--stroke); }
.insight i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); }
.insight i .fc-icon { width: 17px; height: 17px; color: var(--accent); stroke-width: 2.35; }
.insight.alert i .fc-icon, .insight.insight-tone-alert i .fc-icon { color: var(--bad); }
.insight.win i .fc-icon, .insight.insight-tone-win i .fc-icon { color: var(--prote); }
.insight b { display: block; font-size: var(--fs-sm); margin-bottom: 2px; }
.insight span { font-size: var(--fs-micro); color: var(--text-dim); line-height: 1.45; }
.insight.win, .insight.insight-tone-win {
  border-color: rgba(52,227,160,.32); background: rgba(52,227,160,.06);
}
.insight.alert, .insight.insight-tone-alert {
  border-color: rgba(251,113,133,.32); background: rgba(251,113,133,.06);
}
.insight.tip, .insight.insight-tone-tip, .insight.insight-tone-info {
  border-color: rgba(255,209,102,.30); background: rgba(255,209,102,.05);
}

/* ===================================================================
   GALERÍA DE PROGRESO · comparador antes/después · informe PDF
   =================================================================== */
.galeria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.gal-card { position: relative; margin: 0; border-radius: var(--radius-s); overflow: hidden; border: 1px solid var(--stroke); background: var(--surface-3); aspect-ratio: 3/4; }
.gal-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 10px; font-size: var(--fs-micro); color: #fff; background: linear-gradient(to top, rgba(0,0,0,.78), transparent); }
.gal-card figcaption b { font-variant-numeric: tabular-nums; }
.gal-del { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; font-size: .8rem; line-height: 1; }
.gal-del:hover { background: var(--bad); }
.gal-card.selectable { cursor: pointer; }
.gal-card.selectable:hover { border-color: var(--accent); }
.gal-card.sel { outline: 3px solid var(--accent); outline-offset: -3px; }
.gal-pick { position: absolute; top: 6px; right: 6px; min-width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 800; font-size: var(--fs-micro); }

/* Overlay comparador */
.cmp-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(6,8,12,.92); display: grid; place-items: center; padding: 24px; backdrop-filter: blur(6px); }
.cmp-close { position: absolute; top: 16px; right: 18px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--stroke-2); background: var(--surface-2); color: var(--text); font-size: 1.1rem; cursor: pointer; }
.cmp-stage { width: min(900px, 100%); }
.cmp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cmp-pair figure { margin: 0; border-radius: var(--radius-s); overflow: hidden; border: 1px solid var(--stroke-2); background: var(--surface-1); position: relative; }
.cmp-pair img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; display: block; background: #000; }
.cmp-pair figcaption { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; font-size: var(--fs-sm); }
.cmp-pair figcaption em { font-style: normal; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; font-size: var(--fs-micro); }
.cmp-pair figcaption b { font-variant-numeric: tabular-nums; }
.cmp-delta { text-align: center; margin-top: 14px; font-weight: 800; font-size: var(--fs-lead); font-variant-numeric: tabular-nums; }
.cmp-delta.good { color: var(--good); } .cmp-delta.warn { color: var(--warn); }

/* Informe imprimible: oculto en pantalla, visible al imprimir */
#informe-print { display: none; }
@media (max-width: 560px) { .cmp-pair img { max-height: 42vh; } }
@media print {
  body.printing > *:not(#informe-print) { display: none !important; }
  body.printing #informe-print { display: block !important; color: #111; background: #fff; padding: 0; }
  #informe-print h1 { font-size: 22px; margin: 0 0 4px; }
  #informe-print .inf-head { border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 16px; }
  #informe-print .inf-head p { color: #555; margin: 0; }
  #informe-print h2 { font-size: 15px; margin: 18px 0 8px; border-bottom: 1px solid #ccc; padding-bottom: 4px; }
  #informe-print table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  #informe-print th { text-align: left; color: #555; font-weight: 600; padding: 4px 8px 4px 0; width: 45%; vertical-align: top; }
  #informe-print td { padding: 4px 0; font-weight: 700; }
  #informe-print .inf-ins { margin: 0; padding-left: 18px; font-size: 12.5px; }
  #informe-print .inf-ins li { margin: 4px 0; }
  #informe-print .inf-fotos { display: flex; gap: 12px; }
  #informe-print .inf-fotos figure { margin: 0; flex: 1; }
  #informe-print .inf-fotos img { width: 100%; border: 1px solid #ccc; border-radius: 6px; }
  #informe-print .inf-fotos figcaption { font-size: 11px; color: #555; margin-top: 4px; text-align: center; }
  #informe-print .inf-foot { margin-top: 22px; font-size: 10px; color: #777; border-top: 1px solid #ccc; padding-top: 8px; }
  @page { margin: 14mm; }
}

/* Total en vivo de la sesión de fuerza (cálculo científico) */
.ej-total { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--accent-soft); border: 1px solid var(--stroke); }
.ej-total span { font-size: var(--fs-micro); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ej-total b { color: var(--accent); font-size: var(--fs-base); font-weight: 800; margin-right: 3px; }
.ej-tag.metric { background: var(--accent-soft); border-color: var(--stroke-2); color: var(--text); font-variant-numeric: tabular-nums; }
.ej-tag b { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ===================================================================
   CIENCIA AVANZADA · volumen por músculo · zona FC · logros
   =================================================================== */
/* Volumen semanal por grupo muscular (MEV/MAV/MRV) */
.vol-grid { display: flex; flex-direction: column; gap: 12px; }
.vol-row .vol-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.vol-row .vol-top span { font-weight: 600; }
.vol-row .vol-top b { font-size: var(--fs-micro); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.vol-bar { position: relative; height: 12px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--stroke); overflow: visible; }
.vol-bar i { position: absolute; inset: 0; right: auto; border-radius: 999px; display: block; }
.vol-bar .vol-mk { position: absolute; top: -3px; width: 2px; height: 18px; background: var(--stroke-2); border-radius: 2px; }
.vol-bar .vol-mk.vol-mrv { background: var(--bad); }
.vol-bajo   .vol-bar i { background: var(--warn); }
.vol-optimo .vol-bar i { background: var(--good); }
.vol-alto   .vol-bar i { background: var(--warn); }
.vol-exceso .vol-bar i { background: var(--bad); }
.vol-bajo   .vol-top b { color: var(--warn); }
.vol-optimo .vol-top b { color: var(--good); }
.vol-exceso .vol-top b { color: var(--bad); }

/* Zona de FC en vivo (pulsómetro) */
.fc-zona { display: flex; flex-direction: column; gap: 1px; padding: 10px 14px; border-radius: var(--radius-s); margin-bottom: 12px; border: 1px solid var(--stroke); background: var(--surface-3); }
.fc-zona:empty { display: none; }
.fc-zona b { font-size: var(--fs-base); }
.fc-zona span { font-size: var(--fs-micro); color: var(--text-dim); }
.fc-zona.z1 { background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.4); } .fc-zona.z1 b { color: #38bdf8; }
.fc-zona.z2 { background: rgba(52,227,160,.12); border-color: rgba(52,227,160,.4); } .fc-zona.z2 b { color: var(--good); }
.fc-zona.z3 { background: rgba(190,224,0,.12); border-color: rgba(190,224,0,.4); } .fc-zona.z3 b { color: var(--accent); }
.fc-zona.z4 { background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.45); } .fc-zona.z4 b { color: var(--warn); }
.fc-zona.z5 { background: rgba(251,113,133,.14); border-color: rgba(251,113,133,.45); } .fc-zona.z5 b { color: var(--bad); }

/* Logros / medallas */
.logros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  perspective: 900px;
}
.logros-grid::before {
  content: ""; min-height: 146px; grid-column: span 2; border-radius: var(--radius-s);
  border: 1px solid rgba(188,224,0,.22);
  background:
    linear-gradient(90deg, rgba(20,24,31,.96), rgba(20,24,31,.44)),
    radial-gradient(70% 120% at 76% 8%, rgba(34,211,238,.20), transparent 58%),
    url("../assets/fitcontrol-progress.webp") center / cover no-repeat;
  box-shadow: inset 0 0 60px rgba(0,0,0,.45), 0 18px 44px -34px rgba(21,194,176,.9);
  transform: translateZ(0);
  animation: logros-panel-drift 9s var(--ease) infinite alternate;
}
.logro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 146px;
  text-align: center;
  padding: 16px 12px;
  border-radius: var(--radius-s);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.045), transparent), var(--surface-3);
  box-shadow: 0 16px 36px -32px rgba(0,0,0,.9);
  opacity: 0;
  transform: translate3d(0, 12px, 0) rotateX(4deg) scale(.985);
  animation: logro-in .54s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 58ms);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease), transform .2s var(--ease);
}
.logro::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(88% 70% at 50% 0%, rgba(188,224,0,.18), transparent 62%),
    radial-gradient(75% 70% at 88% 90%, rgba(21,194,176,.18), transparent 64%);
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.logro::after {
  content: "";
  position: absolute;
  inset: -55% -120%;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%);
  opacity: 0;
  transform: translateX(-34%) rotate(10deg);
  pointer-events: none;
}
.logro:hover {
  transform: translate3d(0, -3px, 0) rotateX(0) scale(1);
  border-color: rgba(21,194,176,.36);
  box-shadow: 0 24px 48px -34px rgba(21,194,176,.8);
}
.logro i {
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.logro i .fc-icon { width: 26px; height: 26px; color: var(--accent); stroke-width: 2.2; }
.logro b { display: block; font-size: var(--fs-sm); }
.logro span { display: block; margin-top: 4px; font-size: var(--fs-micro); color: var(--text-dim); line-height: 1.35; }
.logro.off { filter: grayscale(.86); }
.logro.off i, .logro.off b, .logro.off span { opacity: .52; }
.logro.off:hover i, .logro.off:hover b, .logro.off:hover span { opacity: .72; }
.logro.on {
  border-color: rgba(190,224,0,.42);
  background: linear-gradient(180deg, rgba(188,224,0,.16), rgba(21,194,176,.08)), var(--surface-3);
}
.logro.on::before { opacity: 1; }
.logro.on::after {
  opacity: 1;
  animation: logro-sheen 5.8s ease-in-out infinite;
  animation-delay: calc(.8s + var(--i, 0) * 150ms);
}
.logro.on i {
  background: linear-gradient(135deg, rgba(188,224,0,.18), rgba(21,194,176,.16));
  border-color: rgba(188,224,0,.28);
  filter: drop-shadow(0 10px 18px rgba(188,224,0,.14));
  animation: logro-float 3.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.logro.on u {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad-primary); color: var(--on-accent); display: grid; place-items: center;
  font-size: .72rem; font-weight: 900; text-decoration: none;
  box-shadow: 0 0 0 4px rgba(188,224,0,.10), 0 10px 22px -12px rgba(21,194,176,.9);
  animation: logro-check 2.6s ease-in-out infinite;
}
.logro.on u .fc-icon { width: 14px; height: 14px; stroke-width: 2.7; }
.logros-cont {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
  margin-top: 4px;
  color: var(--text-dim);
}
.logros-cont::before {
  content: "";
  width: min(380px, 100%);
  height: 7px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(90deg, var(--accent), var(--accent-2)) left / var(--logros-pct, 0%) 100% no-repeat,
    rgba(255,255,255,.08);
  box-shadow: 0 0 22px rgba(21,194,176,.16);
}
@keyframes logro-in {
  to { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0) scale(1); }
}
@keyframes logro-sheen {
  0%, 52% { transform: translateX(-34%) rotate(10deg); opacity: 0; }
  62% { opacity: .72; }
  82%, 100% { transform: translateX(34%) rotate(10deg); opacity: 0; }
}
@keyframes logro-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes logro-check {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(188,224,0,.10), 0 10px 22px -12px rgba(21,194,176,.9); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 7px rgba(188,224,0,.04), 0 14px 28px -12px rgba(21,194,176,1); }
}
@keyframes logros-panel-drift {
  to { background-position: center, center, 52% center; }
}
@media (prefers-reduced-motion: reduce) {
  .logros-grid::before,
  .logro,
  .logro.on::after,
  .logro.on i,
  .logro.on u {
    animation: none;
  }
  .logro {
    opacity: 1;
    transform: none;
  }
  .logro:hover { transform: none; }
}

/* ===================================================================
   RIR · plantillas de rutina · cronómetro de descanso
   =================================================================== */
.ej-serie i { font-style: normal; opacity: .7; font-size: .9em; }
.rir-nota { margin-top: 8px; padding: 9px 12px; border-radius: var(--radius-s); font-size: var(--fs-micro); color: var(--text-dim); border: 1px solid var(--stroke); background: var(--surface-3); }
.rir-nota b { color: var(--text); }
.rir-nota.rir-optimo { border-color: rgba(52,227,160,.35); } .rir-nota.rir-optimo b { color: var(--good); }
.rir-nota.rir-fallo  { border-color: rgba(251,113,133,.35); } .rir-nota.rir-fallo b { color: var(--bad); }
.rir-nota.rir-suave  { border-color: rgba(251,191,36,.35); } .rir-nota.rir-suave b { color: var(--warn); }

/* Plantillas */
.ej-plantillas { margin-top: 12px; }
.pl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pl-lbl { font-size: var(--fs-micro); color: var(--text-dim); margin-right: 2px; }
.pl-chip { font-size: var(--fs-micro); font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--stroke-2); color: var(--text); cursor: pointer; }
.pl-chip .fc-icon { width: 1em; height: 1em; margin-right: 4px; color: var(--accent); vertical-align: -0.18em; }
.pl-chip:hover { border-color: var(--accent); }
.pl-chip.sel { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pl-ejs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pl-ej { font-size: var(--fs-micro); padding: 5px 10px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--stroke); color: var(--text); cursor: pointer; }
.pl-ej:hover { border-color: var(--accent); }

/* Cronómetro de descanso: barra compacta anclada abajo (no tapa el formulario) */
.rest-timer { position: fixed; left: 50%; bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: var(--z-toast);
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 999px;
  background: var(--surface-1); border: 1px solid var(--stroke-2); box-shadow: var(--shadow); max-width: calc(100vw - 24px); }
.rest-timer.done { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(190,224,0,.25), var(--shadow); }
.rest-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  background: rgba(188,224,0,.10); border: 1px solid rgba(188,224,0,.18); }
.rest-ico .fc-icon { width: 14px; height: 14px; color: var(--accent); }
.rest-label { font-size: var(--fs-micro); color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.rest-time { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); min-width: 50px; text-align: center; }
.rest-btn { font-size: var(--fs-micro); font-weight: 700; padding: 6px 10px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--stroke-2); color: var(--text); cursor: pointer; }
.rest-btn:hover { border-color: var(--accent); }
.rest-btn.rest-done { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.rest-x { background: none; border: none; color: var(--text-dim); font-size: .9rem; cursor: pointer; padding: 4px 6px; }
@media (max-width: 480px) { .rest-label { display: none; } }
@media (min-width: 900px) { .rest-timer { left: auto; right: var(--sp-5); transform: none; } }
/* En móvil (con barra inferior visible) el cronómetro flota por encima de ella.
   Va DESPUÉS de la regla base para ganar el orden de cascada. */
@media (max-width: 720px) { .rest-timer { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } }

/* Recordatorios (toggles) */
.rem-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: var(--fs-sm); cursor: pointer; }
.rem-row input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
.rem-row span { color: var(--text); }

/* ===================================================================
   BASE DE CONOCIMIENTO DEL USUARIO (lo que el agente aprende)
   =================================================================== */
.conoc-sub { font-size: var(--fs-sm); font-weight: 700; margin: 14px 0 8px; color: var(--text-dim); display: flex; align-items: center; gap: 7px; }
.conoc-sub .fc-icon { width: 15px; height: 15px; color: var(--accent); }
.conoc-sub:first-child { margin-top: 4px; }
.conoc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.conoc-card { position: relative; padding: 12px 14px; border-radius: var(--radius-s); background: var(--surface-3); border: 1px solid var(--stroke); }
.conoc-card b { display: block; font-size: var(--fs-sm); padding-right: 20px; }
.conoc-card span { font-size: var(--fs-micro); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.conoc-card span i { font-style: normal; opacity: .75; }
.conoc-del { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(255,255,255,.06); color: var(--text-dim); cursor: pointer; font-size: .75rem; line-height: 1; }
.conoc-del:hover { background: var(--bad); color: #fff; }

/* Base de conocimiento: añadir preferencias, chips y rutinas propias */
.conoc-add { display: flex; gap: 8px; margin: 8px 0 10px; }
.conoc-add input { flex: 1; min-width: 0; }
.pref-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.pref-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 6px 12px; border-radius: 999px; font-size: var(--fs-sm); background: rgba(251,113,133,.10); border: 1px solid rgba(251,113,133,.35); color: var(--text); }
.pref-chip .conoc-del { position: static; width: 18px; height: 18px; background: rgba(255,255,255,.08); }
.pl-chip.pl-mia { border-color: rgba(190,224,0,.45); }
.pl-chip.pl-mia.sel { background: var(--accent); color: var(--on-accent); }

/* Edición inline de la base de conocimiento */
.conoc-card .conoc-edit { position: absolute; top: 6px; right: 30px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(255,255,255,.06); color: var(--text-dim); cursor: pointer; font-size: .7rem; line-height: 1; }
.conoc-card .conoc-edit .fc-icon, .pref-chip .conoc-edit .fc-icon { width: 12px; height: 12px; }
.conoc-card .conoc-edit:hover { background: var(--accent); color: var(--on-accent); }
.conoc-card b { padding-right: 44px; }
.conoc-card.editing { display: flex; flex-direction: column; gap: 6px; }
.ce-f { width: 100%; }
.ce-macros { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ce-macros .ce-f { width: 100%; min-width: 0; padding: 8px 6px; text-align: center; }
.ce-actions { display: flex; gap: 6px; margin-top: 4px; }
.ce-actions .btn { flex: 1; }
.pref-chip .pref-edit { position: static; width: 18px; height: 18px; background: rgba(255,255,255,.08); margin-right: 2px; }
.pref-chip.editing { gap: 6px; padding: 6px 8px; }
.pref-chip.editing .ce-f { width: 180px; max-width: 50vw; }

/* ===================================================================
   PLAN DE HOY (rutina como objetivo del día) · progresión sugerida
   =================================================================== */
#plan-hoy-wrap { border-color: rgba(190,224,0,.35); }
.ph-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ph-eyebrow { font-size: var(--fs-micro); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.ph-eyebrow .fc-icon { width: 14px; height: 14px; }
.ph-title { font-size: var(--fs-h3); margin-top: 2px; }
.ph-x { background: none; border: none; color: var(--text-dim); font-size: 1rem; cursor: pointer; padding: 4px; }
.ph-bar { height: 8px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--stroke); overflow: hidden; margin: 10px 0 4px; }
.ph-bar i { display: block; height: 100%; background: var(--grad-primary); border-radius: 999px; transition: width .35s var(--ease, ease); }
.ph-count { font-size: var(--fs-micro); color: var(--text-dim); font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.ph-ej { padding: 12px 0; border-top: 1px solid var(--stroke); }
.ph-ej-top b { font-size: var(--fs-sm); }
.ph-prog { font-size: var(--fs-micro); color: var(--text-dim); margin: 4px 0 8px; line-height: 1.4; }
.ph-prog .fc-icon, .ph-deload .fc-icon { width: 1em; height: 1em; color: var(--accent); vertical-align: -0.18em; }
.ph-prog b { color: var(--accent); font-variant-numeric: tabular-nums; }
.ph-prog span { opacity: .8; }
.ph-sets { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-set { font-size: var(--fs-sm); font-weight: 600; padding: 9px 14px; border-radius: var(--radius-s); background: var(--surface-3); border: 1px solid var(--stroke-2); color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; min-height: 44px; }
.ph-set .fc-icon { width: 1em; height: 1em; vertical-align: -0.18em; }
.ph-set:hover { border-color: var(--accent); }
.ph-set.done { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.conoc-hoy { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-micro); font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); border: 1px solid rgba(190,224,0,.4); color: var(--text); cursor: pointer; }
.conoc-hoy .fc-icon { width: 13px; height: 13px; }
.conoc-hoy:hover { background: var(--accent); color: var(--on-accent); }

/* Plan de hoy: descarga, edición de series, historial de PR */
.ph-deload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-s); background: rgba(56,189,248,.10); border: 1px solid rgba(56,189,248,.35); font-size: var(--fs-micro); color: var(--text-dim); margin: 10px 0; }
.ph-deload b { color: var(--text); }
.ph-deload.on { background: rgba(56,189,248,.08); }
.ph-ej-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ph-edit-btn { background: none; border: none; color: var(--text-dim); font-size: var(--fs-micro); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.ph-edit-btn .fc-icon { width: 13px; height: 13px; }
.ph-edit-btn:hover { color: var(--accent); }
.ph-edit { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ph-erow { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.ph-erow .ph-ef { width: 70px; text-align: center; }
.ph-erow span { color: var(--text-dim); }
.pr-card { cursor: pointer; }
.pr-toggle { font-size: .7rem; color: var(--text-dim); }
.pr-hist { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--stroke); }
.pr-spark { width: 100%; height: 40px; display: block; margin-bottom: 8px; }
.pr-h-rows { display: flex; flex-direction: column; gap: 4px; }
.pr-h-row { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-micro); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pr-h-row b { color: var(--text); } .pr-h-row i { font-style: normal; opacity: .7; }

/* Evaluación de físico: selector multi-foto + seguimiento del coach */
.eval-slots { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.eval-slot { position: relative; width: 84px; height: 110px; border-radius: var(--radius-s); overflow: hidden; border: 1px solid var(--stroke-2); background: var(--surface-3); }
.eval-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eval-slot-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: .7rem; line-height: 1; }
.eval-slot-x:hover { background: var(--bad); }
.seg-card { padding: 14px 16px; border-radius: var(--radius-s); border: 1px solid var(--stroke); background: var(--surface-3); margin-bottom: 10px; }
.seg-card.activo { border-color: rgba(190,224,0,.45); background: var(--accent-soft); }
.seg-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.seg-top b { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.seg-del { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: .85rem; }
.seg-del:hover { color: var(--bad); }
.seg-nivel { font-size: var(--fs-micro); color: var(--accent); font-weight: 700; margin-top: 2px; }
.seg-plan { font-size: var(--fs-sm); color: var(--text-dim); line-height: 1.5; margin: 8px 0; text-wrap: pretty; }
.seg-weeks { font-size: var(--fs-micro); color: var(--text-dim); margin-bottom: 10px; display: inline-flex; align-items: center; gap: 5px; }
.seg-weeks .fc-icon { width: 14px; height: 14px; color: var(--accent); }
.seg-use { width: 100%; }

/* ===================================================================
   REGISTRO RÁPIDO en el aterrizaje (comida / entreno / cardio)
   =================================================================== */
.qr { margin-top: 14px; }
.qr-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--stroke); margin-bottom: 10px; }
.qr-tab { border: none; background: none; color: var(--text-dim); font-size: var(--fs-sm); font-weight: 700; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.qr-tab.is-active { background: var(--grad-primary); color: var(--on-accent); }
.qr-form { display: flex; gap: 8px; }
#qr-form-comida { flex-wrap: nowrap; }
#qr-form-comida input { flex: 1; min-width: 0; }
.qr-form .qr-row { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.qr-form[data-qrform="entreno"] { flex-direction: column; }
.qr-row #qr-ej, .qr-row #qr-c-tipo { flex: 1 1 140px; min-width: 0; }
.qr-row #qr-reps, .qr-row #qr-kg, .qr-row #qr-rir { width: 64px; }
.qr-row #qr-c-min { width: 90px; }
#qr-draft:empty { display: none; }
#qr-draft { margin: 8px 0; }
@media (max-width: 540px) {
  .pr-head { align-items: flex-start; flex-direction: column; }
  .pr-actions { width: 100%; justify-content: stretch; }
  .pr-actions .btn { flex: 1 1 100%; }
  .qr-seg { display: flex; width: 100%; }
  .qr-tab { flex: 1; padding: 8px 6px; }
  .qr-row #qr-ej, .qr-row #qr-c-tipo { flex-basis: 100%; }
}