/* ============================================================
   fitness.css  —  Seguimiento (dieta / gym / progreso)
   Tema: BLANCO + DORADO + ROJO  ·  elegante y deportivo
   Mobile-first (uso principal: teléfono). Tipografía fluida con clamp().
   Retemar = cambiar variables :root.
   ============================================================ */

:root{
  /* --- Paleta nueva --- */
  --bg:#FBFAF7;
  --bg-2:#F4F1EA;
  --surface:#FFFFFF;
  --surface-2:#FAF8F2;
  --surface-3:#F1ECE0;
  --line:#E7E1D4;
  --line-soft:#EFEADF;

  --gold:#C8A24B;
  --gold-deep:#A9842F;
  --gold-soft:rgba(200,162,75,.14);
  --gold-glow:rgba(200,162,75,.40);

  --red:#D31C2C;
  --red-deep:#A8121F;
  --red-soft:rgba(211,28,44,.09);
  --red-glow:rgba(211,28,44,.40);

  --txt:#1C1A17;
  --txt-2:#5C564B;
  --txt-3:#938B7C;

  /* --- Alias de compatibilidad (SVG/JS existentes) --- */
  --ember:var(--gold);
  --ember-deep:var(--gold-deep);
  --ember-soft:var(--gold-soft);
  --ember-glow:var(--gold-glow);
  --good:var(--gold);
  --bad:var(--red);
  --info:var(--gold-deep);

  --radius:16px;
  --radius-sm:12px;
  --radius-lg:24px;
  --shadow:0 22px 50px -24px rgba(70,55,25,.30);
  --shadow-sm:0 12px 26px -18px rgba(70,55,25,.22);
  --shadow-gold:0 14px 30px -14px var(--gold-glow);
  --shadow-red:0 14px 30px -14px var(--red-glow);

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --disp:'Oswald',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  color:var(--txt);
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(1100px 560px at 88% -8%, rgba(200,162,75,.13), transparent 60%),
    radial-gradient(900px 520px at -8% 108%, rgba(211,28,44,.07), transparent 55%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit}
::selection{background:var(--gold-soft);color:var(--gold-deep)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--txt-2)}
.dim{color:var(--txt-3)}

/* ---------- Layout ---------- */
.shell{max-width:1180px;margin:0 auto;padding:clamp(16px,4vw,28px) clamp(14px,4vw,24px) 96px}

.eyebrow{
  font-family:var(--disp);font-weight:500;text-transform:uppercase;
  letter-spacing:.26em;font-size:clamp(.66rem,2.4vw,.74rem);color:var(--gold-deep);
}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:clamp(14px,3.5vw,22px);margin-bottom:clamp(18px,4vw,26px);
  border-bottom:1px solid var(--line);
  animation:fadeDown .5s ease backwards;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{
  width:clamp(42px,11vw,48px);height:clamp(42px,11vw,48px);flex:0 0 auto;border-radius:14px;
  display:grid;place-items:center;font-size:clamp(1.2rem,4.6vw,1.45rem);color:#fff;
  background:linear-gradient(140deg,var(--gold),var(--gold-deep));
  box-shadow:var(--shadow-gold);position:relative;overflow:hidden;
}
.brand-mark::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:shimmer 4.5s ease-in-out infinite}
.brand-txt h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.15rem,4.6vw,1.4rem);line-height:1;letter-spacing:-.01em}
.brand-txt span{font-size:clamp(.7rem,2.6vw,.78rem);color:var(--txt-3);font-family:var(--mono)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}

.back-link{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--disp);text-transform:uppercase;letter-spacing:.07em;
  font-size:clamp(.74rem,2.6vw,.8rem);color:var(--txt-2);padding:10px 15px;border-radius:11px;
  border:1.5px solid var(--line);background:var(--surface);transition:.16s;
}
.back-link:hover{color:var(--gold-deep);border-color:var(--gold);transform:translateX(-2px)}
.back-link:active{transform:scale(.96)}

.today-chip{
  font-family:var(--mono);font-size:clamp(.72rem,2.6vw,.8rem);color:var(--txt-2);
  padding:10px 14px;border-radius:11px;border:1.5px solid var(--line);background:var(--surface);
}

/* ---------- Hero ---------- */
.hero{margin-bottom:clamp(20px,5vw,30px);animation:fadeUp .55s ease backwards}
.hero h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2rem,8vw,3.1rem);line-height:1.04;margin:10px 0 8px;letter-spacing:-.015em;
}
.hero h2 em{
  font-style:italic;
  background:linear-gradient(120deg,var(--gold),var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero p{color:var(--txt-2);max-width:54ch;font-size:clamp(.95rem,2.8vw,1.05rem)}

/* ---------- Barra HOY ---------- */
.today-bar{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;margin:clamp(18px,4vw,26px) 0 clamp(20px,5vw,30px)}
@media(max-width:760px){.today-bar{grid-template-columns:1fr}}
.today-card{
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(18px,4.5vw,24px);box-shadow:var(--shadow-sm);animation:fadeUp .55s ease backwards}
.today-card:nth-child(2){animation-delay:.07s}
.today-card .lbl{font-family:var(--disp);text-transform:uppercase;letter-spacing:.14em;font-size:clamp(.66rem,2.4vw,.72rem);color:var(--txt-3)}
.today-routine{display:flex;align-items:center;gap:14px;margin-top:12px}
.routine-glyph{
  width:clamp(50px,13vw,56px);height:clamp(50px,13vw,56px);flex:0 0 auto;border-radius:15px;display:grid;place-items:center;
  font-size:clamp(1.4rem,5.5vw,1.6rem);background:var(--gold-soft);color:var(--gold-deep);border:1.5px solid var(--gold-soft)}
.today-routine b{font-family:var(--disp);text-transform:uppercase;font-weight:600;font-size:clamp(1.4rem,5.5vw,1.6rem);letter-spacing:.02em;display:block;line-height:1}
.today-routine small{color:var(--txt-3);font-size:.82rem}

.weight-quick{display:flex;gap:10px;margin-top:14px;align-items:flex-end;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:.72rem;color:var(--txt-3);font-family:var(--mono)}
.input{
  background:var(--surface);border:1.5px solid var(--line);color:var(--txt);
  border-radius:12px;padding:12px 14px;font-family:var(--mono);font-size:16px;width:140px;transition:.16s}
.input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;font-weight:500;
  font-size:clamp(.78rem,2.8vw,.84rem);padding:12px 19px;border-radius:12px;transition:.16s;white-space:nowrap}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(135deg,var(--red),var(--red-deep));color:#fff;box-shadow:var(--shadow-red)}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 18px 34px -14px var(--red-glow)}
.btn-primary:active{transform:scale(.96)}
.btn-ghost{border:1.5px solid var(--line);background:var(--surface);color:var(--txt-2)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-deep)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff;box-shadow:var(--shadow-gold)}
.btn-gold:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn-sm{padding:9px 14px;font-size:.76rem}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* ---------- Tarjetas de navegación ---------- */
.nav-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:980px){.nav-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.nav-cards{grid-template-columns:1fr}}
.nav-card{
  position:relative;overflow:hidden;background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,5vw,26px) clamp(20px,5vw,24px);min-height:180px;display:flex;flex-direction:column;
  transition:.2s;box-shadow:var(--shadow-sm);animation:fadeUp .55s ease backwards}
.nav-card:nth-child(2){animation-delay:.07s}.nav-card:nth-child(3){animation-delay:.14s}.nav-card:nth-child(4){animation-delay:.21s}
.nav-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--gold),var(--red));opacity:0;transition:.25s}
.nav-card::after{content:"";position:absolute;inset:0;background:radial-gradient(440px 200px at 110% -20%, var(--gold-soft), transparent 60%);opacity:0;transition:.25s;pointer-events:none}
.nav-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:var(--shadow)}
.nav-card:hover::before{opacity:1}.nav-card:hover::after{opacity:1}
.nav-card:active{transform:scale(.99)}
.nav-card .nc-icon{
  width:clamp(48px,12vw,52px);height:clamp(48px,12vw,52px);border-radius:14px;display:grid;place-items:center;font-size:clamp(1.4rem,5vw,1.5rem);
  background:var(--gold-soft);color:var(--gold-deep);border:1.5px solid var(--gold-soft);margin-bottom:16px}
.nav-card h3{font-family:var(--disp);text-transform:uppercase;font-weight:600;font-size:clamp(1.45rem,5.5vw,1.6rem);letter-spacing:.02em;line-height:1}
.nav-card p{color:var(--txt-3);font-size:.86rem;margin-top:5px;flex:1}
.nc-stat{margin-top:14px;display:flex;align-items:baseline;gap:8px}
.nc-stat b{font-family:var(--mono);font-size:clamp(1.4rem,5vw,1.6rem);color:var(--txt);font-weight:700}
.nc-stat span{font-size:.74rem;color:var(--txt-3);font-family:var(--mono)}
.nc-go{position:absolute;top:22px;right:22px;color:var(--gold);font-size:1.2rem;transition:.2s}
.nav-card:hover .nc-go{transform:translate(3px,-3px)}

/* ---------- Encabezado de sección ---------- */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:clamp(14px,3.5vw,20px);animation:fadeUp .5s ease backwards}
.section-head h2{font-family:var(--disp);text-transform:uppercase;font-weight:600;font-size:clamp(1.6rem,6vw,2.2rem);letter-spacing:.02em;line-height:1;position:relative;padding-bottom:8px}
.section-head h2::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--red))}
.section-head p{color:var(--txt-3);font-size:.86rem;margin-top:10px}
.legend{display:flex;gap:13px;flex-wrap:wrap;font-size:clamp(.72rem,2.6vw,.78rem);color:var(--txt-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.dot{width:12px;height:12px;border-radius:4px;flex:0 0 auto}
.dot.good,.dot.ember{background:linear-gradient(180deg,var(--gold),var(--gold-deep))}
.dot.bad{background:var(--red)}
.dot.idle{background:#EAE5D9;border:1px solid var(--line)}

/* ---------- Calendario ---------- */
.cal-card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-lg);padding:clamp(12px,3.5vw,20px);box-shadow:var(--shadow-sm);animation:fadeUp .55s ease backwards}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
.cal-month{font-family:var(--disp);text-transform:uppercase;font-weight:600;font-size:clamp(1.15rem,4.6vw,1.4rem);letter-spacing:.04em}
.cal-nav-btn{
  width:clamp(40px,11vw,44px);height:clamp(40px,11vw,44px);border-radius:12px;border:1.5px solid var(--line);background:var(--surface);
  color:var(--txt-2);display:grid;place-items:center;font-size:1.05rem;transition:.16s}
.cal-nav-btn:hover{border-color:var(--gold);color:var(--gold-deep)}
.cal-nav-btn:active{transform:scale(.92)}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(4px,1.4vw,8px)}
.cal-dow{
  font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;font-size:clamp(.66rem,2.4vw,.74rem);
  font-weight:500;color:var(--txt-3);text-align:center;padding:2px 0 8px}

.cal-cell{
  position:relative;aspect-ratio:1/1.12;display:flex;flex-direction:column;gap:4px;
  background:var(--surface);border:1.5px solid var(--line-soft);border-radius:clamp(11px,3vw,16px);
  padding:clamp(6px,2vw,10px);cursor:pointer;overflow:hidden;
  transition:transform .14s,border-color .14s,box-shadow .2s;
  animation:cellIn .42s ease backwards;animation-delay:calc(var(--i,0) * 9ms)}
.cal-cell:hover{border-color:var(--gold);box-shadow:var(--shadow-gold);transform:translateY(-2px)}
.cal-cell:active{transform:scale(.96)}
.cal-cell.empty{background:transparent;border:none;cursor:default;animation:none}
.cal-cell.locked{opacity:.42;pointer-events:none}
.cal-cell.locked .cc-day{color:var(--txt-3)}
.cal-cell.is-today{border-color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold),var(--shadow-gold)}
.cal-cell.is-sunday{background:linear-gradient(180deg,#fff,var(--red-soft))}

.cc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:4px}
.cc-day{font-family:var(--disp);font-weight:600;font-size:clamp(1.05rem,4vw,1.5rem);line-height:1;color:var(--txt)}
.cal-cell.is-today .cc-day{color:var(--gold-deep)}

/* badge de estado (esquina) */
.cc-badge{width:clamp(19px,5vw,23px);height:clamp(19px,5vw,23px);border-radius:50%;display:grid;place-items:center;font-size:clamp(.7rem,2.6vw,.86rem);flex:0 0 auto}
.cc-badge.done{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff;box-shadow:0 3px 8px -3px var(--gold-glow);animation:popIn .32s ease}
.cc-badge.miss{background:var(--red-soft);color:var(--red);border:1.5px solid var(--red)}

/* marcadores de comidas (5 casillas con palomita) */
.cc-meals{margin-top:auto;display:flex;gap:clamp(3px,1.2vw,5px);justify-content:center;align-items:center}
.cc-meals .m{flex:1;max-width:clamp(15px,5.2vw,22px);aspect-ratio:1;border-radius:5px;background:var(--surface);border:1.5px solid var(--line);display:grid;place-items:center;color:#fff;font-size:clamp(.58rem,2.6vw,.82rem);overflow:hidden;transition:background .22s,border-color .22s}
.cc-meals .m.on{background:linear-gradient(135deg,var(--gold),var(--gold-deep));border-color:var(--gold-deep);box-shadow:0 2px 6px -2px var(--gold-glow);animation:popIn .3s ease}

.cc-foot{display:flex;align-items:center}
.cc-count{font-family:var(--mono);font-weight:700;font-size:clamp(.68rem,2.4vw,.82rem);color:var(--txt-2)}
.cc-count.full{color:var(--gold-deep)}
.cc-count.miss{color:var(--red)}

/* etiqueta de rutina (gym) */
.cc-tag{
  margin-top:auto;align-self:flex-start;font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;font-weight:600;
  font-size:clamp(.64rem,2.4vw,.82rem);padding:clamp(3px,1vw,5px) clamp(7px,2.2vw,11px);border-radius:9px;border:1.5px solid;line-height:1}
.cc-tag.push{color:var(--red);border-color:var(--red);background:var(--red-soft)}
.cc-tag.pull{color:var(--gold-deep);border-color:var(--gold);background:var(--gold-soft)}
.cc-tag.legs{color:#4A443B;border-color:#D2CBBB;background:#F2EEE3}
.cc-tag.rest{color:var(--txt-3);border-color:var(--line);background:transparent}
.cc-tag.done{color:#fff;border-color:var(--gold-deep);background:linear-gradient(135deg,var(--gold),var(--gold-deep))}

.cc-check{font-size:.9rem;color:var(--gold-deep)}
.cc-cross{font-size:.85rem;color:var(--red)}

/* ---------- Modal ---------- */
.modal{display:none;position:fixed;inset:0;z-index:1000;background:rgba(40,32,16,.45);backdrop-filter:blur(6px);padding:24px;overflow-y:auto}
.modal.open{display:flex;align-items:flex-start;justify-content:center}
.modal-box{
  width:100%;max-width:560px;margin:auto;background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  animation:pop .26s cubic-bezier(.2,.9,.3,1.25);overflow:hidden}
.modal-box.wide{max-width:780px}
.modal-head{
  display:flex;align-items:center;gap:14px;padding:clamp(16px,4.5vw,22px);
  border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.modal-head .mh-date{font-family:var(--disp);text-transform:uppercase;font-weight:600;font-size:clamp(1.2rem,5vw,1.4rem);letter-spacing:.02em;line-height:1.05}
.modal-head .mh-sub{font-family:var(--mono);font-size:.78rem;color:var(--txt-3)}
.modal-tag{margin-left:auto;font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;font-size:clamp(.72rem,2.6vw,.78rem);padding:7px 13px;border-radius:10px;border:1.5px solid}
.modal-tag.push{color:var(--red);background:var(--red-soft);border-color:var(--red)}
.modal-tag.pull{color:var(--gold-deep);background:var(--gold-soft);border-color:var(--gold)}
.modal-tag.legs{color:#4A443B;background:#F2EEE3;border-color:#D2CBBB}
.modal-tag.rest{color:var(--txt-3);border-color:var(--line)}
.modal-close{margin-left:6px;width:38px;height:38px;flex:0 0 auto;border-radius:11px;border:1.5px solid var(--line);color:var(--txt-2);font-size:1.1rem;display:grid;place-items:center;transition:.16s}
.modal-close:hover{border-color:var(--red);color:var(--red)}
.modal-close:active{transform:scale(.9)}
.modal-body{padding:clamp(16px,4.5vw,22px);max-height:66vh;overflow-y:auto}
.modal-foot{padding:clamp(14px,4vw,18px) clamp(16px,4.5vw,22px);border-top:1px solid var(--line-soft);display:flex;gap:10px;justify-content:flex-end;background:var(--surface-2)}

/* ---------- Timeline de comidas ---------- */
.timeline{display:flex;flex-direction:column;gap:10px}
.tl-item{
  display:flex;align-items:center;gap:13px;padding:clamp(11px,3vw,14px) clamp(12px,3.5vw,16px);
  border:1.5px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--surface);transition:.18s}
.tl-time{font-family:var(--mono);font-size:clamp(.78rem,2.8vw,.85rem);color:var(--txt-3);min-width:50px;font-weight:600}
.tl-main{flex:1;min-width:0}
.tl-main b{font-size:clamp(.95rem,3vw,1.02rem);display:block;font-weight:600}
.tl-main small{color:var(--txt-3);font-size:clamp(.8rem,2.6vw,.85rem)}
.tl-item.ctx{opacity:.92;background:var(--surface-2);border-style:dashed}
.tl-ctx-ic{width:36px;height:36px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;background:var(--surface-3);color:var(--txt-2);font-size:1.05rem}
.ctx-train .tl-ctx-ic{color:var(--gold-deep);background:var(--gold-soft)}
.ctx-clean .tl-ctx-ic{color:var(--red);background:var(--red-soft)}

/* recuadro de palomita / tache (grande) */
.toggle{
  width:clamp(48px,13.5vw,56px);height:clamp(48px,13.5vw,56px);flex:0 0 auto;border-radius:16px;
  border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;
  font-size:clamp(1.25rem,5.5vw,1.55rem);color:var(--red);transition:.18s}
.toggle:hover{border-color:var(--gold)}
.toggle:active{transform:scale(.88)}
.toggle .bi-x-lg{opacity:.4}
.tl-item.done{border-color:var(--gold);background:linear-gradient(100deg,var(--gold-soft),#fff)}
.tl-item.done .toggle{background:linear-gradient(135deg,var(--gold),var(--gold-deep));border-color:var(--gold-deep);color:#fff;animation:checkPop .38s ease}
.tl-item.done .tl-main b{color:var(--gold-deep)}

/* ---------- Rutina (modal gym) ---------- */
.routine-meta{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.routine-meta .glyph{width:clamp(46px,12vw,50px);height:clamp(46px,12vw,50px);flex:0 0 auto;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;background:var(--gold-soft);color:var(--gold-deep);border:1.5px solid var(--gold-soft)}
.routine-meta b{font-family:var(--disp);text-transform:uppercase;font-weight:600;font-size:clamp(1.3rem,5vw,1.45rem);letter-spacing:.02em;line-height:1;display:block}
.routine-meta small{color:var(--txt-3);font-size:.82rem}

.ex-card{border:1.5px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--surface);margin-bottom:12px;overflow:hidden}
.ex-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--surface-2);flex-wrap:wrap}
.ex-head .ex-name{font-weight:700;font-size:clamp(.92rem,3vw,1rem);line-height:1.15}
.ex-id{flex:1;min-width:130px;display:flex;flex-direction:column;gap:2px}
.ex-nota{font-size:.72rem;color:var(--txt-3);font-weight:400;line-height:1.3}
.ex-head .ex-obj{font-family:var(--mono);font-size:.7rem;color:var(--txt-2);padding:3px 8px;border:1.5px solid var(--line);border-radius:8px;background:var(--surface)}
.ex-prev{font-family:var(--mono);font-size:.72rem;color:var(--gold-deep);display:flex;align-items:center;gap:5px;font-weight:600}
.ex-prog-btn{width:32px;height:32px;flex:0 0 auto;border-radius:9px;border:1.5px solid var(--line);color:var(--txt-3);display:grid;place-items:center;font-size:.85rem;transition:.16s;background:var(--surface)}
.ex-prog-btn:hover{border-color:var(--gold);color:var(--gold-deep)}
.ex-prog-btn:active{transform:scale(.9)}

.sets-wrap{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.set-row{display:grid;grid-template-columns:34px 1fr 1fr;gap:8px;align-items:center}
.set-row .set-n{font-family:var(--mono);font-size:.8rem;color:var(--txt-3);text-align:center;font-weight:700}
.set-in{position:relative}
.set-in input{
  width:100%;background:var(--surface-2);border:1.5px solid var(--line);color:var(--txt);
  border-radius:10px;padding:11px 36px 11px 12px;font-family:var(--mono);font-size:16px;text-align:right}
.set-in input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);background:#fff}
.set-in .unit{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:.72rem;color:var(--txt-3);pointer-events:none}
.sets-head{display:grid;grid-template-columns:34px 1fr 1fr;gap:8px;font-family:var(--mono);font-size:.66rem;color:var(--txt-3);text-transform:uppercase;letter-spacing:.05em}
.sets-head span:not(:first-child){text-align:right;padding-right:12px}
.set-add{align-self:flex-start;font-family:var(--mono);font-size:.75rem;color:var(--txt-3);display:inline-flex;gap:6px;align-items:center;padding:8px 12px;border:1.5px dashed var(--line);border-radius:9px;transition:.16s}
.set-add:hover{border-color:var(--gold);color:var(--gold-deep)}
.set-add:active{transform:scale(.95)}

.unit-switch{display:flex;border:1.5px solid var(--line);border-radius:11px;overflow:hidden;background:var(--surface)}
.unit-switch button{padding:9px 16px;font-family:var(--mono);font-size:.82rem;color:var(--txt-3);font-weight:600}
.unit-switch button.active{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff}

.ex-chart{padding:0 14px 14px;display:none}
.ex-chart.show{display:block}
.ex-chart svg{width:100%;height:130px}

/* ---------- Dashboard ---------- */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:clamp(18px,4vw,24px)}
@media(max-width:900px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);padding:clamp(15px,4vw,19px);position:relative;overflow:hidden;box-shadow:var(--shadow-sm);animation:fadeUp .5s ease backwards}
.kpi:nth-child(2){animation-delay:.05s}.kpi:nth-child(3){animation-delay:.1s}.kpi:nth-child(4){animation-delay:.15s}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.kpi.accent::before{background:var(--red)}
.kpi .k-lbl{font-family:var(--disp);text-transform:uppercase;letter-spacing:.1em;font-size:clamp(.64rem,2.4vw,.7rem);color:var(--txt-3)}
.kpi .k-val{font-family:var(--mono);font-size:clamp(1.7rem,7vw,2.1rem);font-weight:700;line-height:1.1;margin-top:8px}
.kpi .k-val small{font-size:.95rem;color:var(--txt-3);font-weight:400}
.kpi .k-sub{font-family:var(--mono);font-size:clamp(.7rem,2.6vw,.74rem);color:var(--txt-2);margin-top:4px}
.kpi.accent .k-val{color:var(--red)}

.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:820px){.dash-grid{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);padding:clamp(16px,4vw,20px);box-shadow:var(--shadow-sm);animation:fadeUp .5s ease backwards}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.panel-head h3{font-family:var(--disp);text-transform:uppercase;font-weight:600;font-size:clamp(1rem,3.6vw,1.1rem);letter-spacing:.03em}
.panel-head .ph-meta{font-family:var(--mono);font-size:.74rem;color:var(--gold-deep);font-weight:600}
.chart-box svg{width:100%;display:block;overflow:visible}

.chart-legend{display:flex;gap:16px;margin-top:10px;font-family:var(--mono);font-size:.72rem;color:var(--txt-2);flex-wrap:wrap}
.chart-legend span{display:inline-flex;align-items:center;gap:7px}
.ln{width:18px;height:0;border-top:2px solid var(--gold)}
.ln.goal{border-top:2px dashed var(--txt-3)}

.bars{display:flex;align-items:flex-end;gap:clamp(6px,2vw,10px);height:160px;padding-top:10px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.bar-track{width:100%;display:flex;align-items:flex-end;height:100%;background:var(--surface-2);border-radius:9px 9px 0 0;overflow:hidden;border:1.5px solid var(--line-soft);border-bottom:none}
.bar-fill{width:100%;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--gold),var(--gold-deep));transition:height .5s cubic-bezier(.2,.8,.3,1);min-height:3px}
.bar-fill.lowpct{background:linear-gradient(180deg,var(--red),var(--red-deep))}
.bar-pct{font-family:var(--mono);font-size:clamp(.72rem,2.6vw,.8rem);font-weight:700}
.bar-lbl{font-family:var(--mono);font-size:clamp(.62rem,2.2vw,.68rem);color:var(--txt-3)}

.metric-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.empty-note{text-align:center;color:var(--txt-3);font-family:var(--mono);font-size:clamp(.78rem,2.8vw,.86rem);padding:34px 12px;line-height:1.6}
.empty-note i{display:block;font-size:1.7rem;margin-bottom:8px;color:var(--line)}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2000;display:flex;flex-direction:column;gap:10px;width:min(420px,92vw)}
.toast{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:13px;
  background:var(--surface);border:1.5px solid var(--line);box-shadow:var(--shadow);
  font-size:.92rem;border-left:4px solid var(--txt-3)}
.toast.ok{border-left-color:var(--gold)}.toast.ok i{color:var(--gold-deep)}
.toast.err{border-left-color:var(--red)}.toast.err i{color:var(--red)}
.toast.info{border-left-color:var(--gold-deep)}.toast.info i{color:var(--gold-deep)}
.toast i{font-size:1.3rem}
.animate__faster{--animate-duration:.4s}

/* spinner */
.spin{display:inline-block;width:20px;height:20px;border:2.5px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.loading-row{text-align:center;color:var(--txt-3);padding:32px;font-family:var(--mono);font-size:.84rem}

/* ---------- Keyframes ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes cellIn{from{opacity:0;transform:translateY(7px) scale(.95)}to{opacity:1;transform:none}}
@keyframes popIn{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes checkPop{0%{transform:scale(.85)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes shimmer{0%,100%{transform:translateX(-120%)}55%,75%{transform:translateX(120%)}}

/* ---------- Accesibilidad ---------- */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.05ms!important}}

/* ---------- Responsive fino (teléfono) ---------- */
.dow-full{display:inline}.dow-short{display:none}
@media(max-width:560px){
  .dow-full{display:none}.dow-short{display:inline}
  .brand-txt span{display:none}
  .cc-foot{display:none}                /* en pantallas muy chicas, los recuadros bastan */
  .modal{padding:0}
  .modal-box{max-width:100%;min-height:100vh;border-radius:0;border:none;margin:0}
  .modal-body{max-height:none}
  .set-row{grid-template-columns:28px 1fr 1fr;gap:6px}
  .ex-head .ex-id{min-width:100%}
}
@media(max-width:380px){
  .cal-grid{gap:4px}
  .cc-meals .m{height:8px}
}

/* ============================================================
   Itinerario (timeline diario)
   ============================================================ */
.day-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.day-chip{font-family:var(--disp);text-transform:uppercase;letter-spacing:.05em;font-size:clamp(.74rem,2.8vw,.84rem);font-weight:600;padding:9px 13px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--txt-2);transition:.16s;text-align:center;line-height:1.15}
.day-chip:hover{border-color:var(--gold);color:var(--gold-deep)}
.day-chip:active{transform:scale(.95)}
.day-chip.active{background:linear-gradient(135deg,var(--gold),var(--gold-deep));border-color:var(--gold-deep);color:#fff;box-shadow:var(--shadow-gold)}
.day-chip.active.rest{background:linear-gradient(135deg,#6B6456,#4A443B);border-color:#4A443B;box-shadow:none}
.day-chip .dc-sub{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:0;text-transform:none;opacity:.85;margin-top:2px;font-weight:500}

.itin{position:relative}
.it-item{display:grid;grid-template-columns:clamp(46px,13vw,58px) clamp(36px,9vw,42px) 1fr;gap:clamp(8px,2.5vw,14px);align-items:start}
.it-time{font-family:var(--mono);font-weight:700;font-size:clamp(.7rem,2.6vw,.8rem);color:var(--txt-2);text-align:right;padding-top:13px;white-space:nowrap}
.it-rail{position:relative;height:100%;display:flex;justify-content:center}
.it-rail::before{content:"";position:absolute;top:10px;bottom:-6px;width:2px;background:var(--line)}
.it-item:last-child .it-rail::before{display:none}
.it-node{position:relative;z-index:1;width:clamp(36px,9vw,42px);height:clamp(36px,9vw,42px);margin-top:6px;border-radius:13px;display:grid;place-items:center;font-size:clamp(1rem,4vw,1.2rem);background:var(--surface);border:1.5px solid var(--line);color:var(--txt-2);flex:0 0 auto;transition:.2s}
.it-card{background:var(--surface);border:1.5px solid var(--line-soft);border-radius:var(--radius-sm);padding:clamp(11px,3vw,15px);margin-bottom:12px;box-shadow:var(--shadow-sm)}
.it-card h4{font-family:var(--disp);text-transform:uppercase;letter-spacing:.03em;font-weight:600;font-size:clamp(.92rem,3.4vw,1.05rem);line-height:1.1}
.it-card p{color:var(--txt-2);font-size:clamp(.82rem,2.8vw,.9rem);margin-top:3px;line-height:1.45}
.it-dur{font-family:var(--mono);font-size:.68rem;color:var(--txt-3);margin-top:6px;display:inline-block;padding:2px 8px;border:1px solid var(--line);border-radius:7px}

.it-meal .it-node{color:var(--gold-deep);border-color:var(--gold);background:var(--gold-soft)}
.it-gym .it-node{color:#fff;border-color:var(--red-deep);background:linear-gradient(135deg,var(--red),var(--red-deep))}
.it-gym .it-card{border-color:var(--red);background:linear-gradient(100deg,var(--red-soft),#fff)}
.it-commute .it-node{color:var(--txt-2)}
.it-work .it-node{color:#fff;border-color:#4A443B;background:#4A443B}
.it-work .it-card{border-color:#D2CBBB}
.it-sleep .it-node{color:var(--gold-deep);border-color:var(--line);background:var(--surface-2)}
.it-rest .it-node{color:#fff;border-color:#4A443B;background:linear-gradient(135deg,#6B6456,#4A443B)}
.it-rest .it-card{border-color:#CFC8B8;background:#F6F3EC}