/* ============================================================
   SuperFitApp · Design System
   Light default + Dark. Identidad: táctico / AAA / fintech.
   ============================================================ */

/* ---------- Tokens ---------- */
[data-theme="light"] {
  --bg-primary:#FFFFFF; --bg-secondary:#F4F5F7; --bg-tertiary:#EAECF0;
  --text-primary:#0D0D0D; --text-secondary:#4A4A5A; --text-muted:#8A8A9A;
  --border:#D0D3DA; --accent:#1B3FE4; --accent-hover:#1430B8; --accent-text:#FFFFFF;
  --danger:#C0392B; --success:#1A7A4A; --warning:#B8650A;
  --surface:#FFFFFF; --shadow:rgba(0,0,0,.08); --grid:rgba(13,13,13,.045);
  --accent-soft:rgba(27,63,228,.08);
}
[data-theme="dark"] {
  --bg-primary:#0E0F13; --bg-secondary:#16181F; --bg-tertiary:#1E2028;
  --text-primary:#F0F0F5; --text-secondary:#A0A3B1; --text-muted:#606270;
  --border:#2A2D3A; --accent:#4B6EF5; --accent-hover:#3A5AE0; --accent-text:#FFFFFF;
  --danger:#E05252; --success:#3DBE7A; --warning:#E8900A;
  --surface:#16181F; --shadow:rgba(0,0,0,.4); --grid:rgba(255,255,255,.035);
  --accent-soft:rgba(75,110,245,.14);
}

/* ---------- Reset ---------- */
*,*::before,*::after{
  box-sizing:border-box; margin:0; padding:0;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
input,textarea,select,[contenteditable="true"]{
  -webkit-user-select:text; -moz-user-select:text; user-select:text;
}
html,body{height:100%;}
body{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.6;
  background:var(--bg-secondary); color:var(--text-primary);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--accent); text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
img{max-width:100%; display:block;}
h1,h2,h3,h4{font-weight:600; line-height:1.2;}
h1{font-size:28px;} h2{font-size:22px;} h3{font-size:18px;} h4{font-size:15px;}
.mono{font-family:"SF Mono",ui-monospace,"Roboto Mono",Menlo,monospace;}
.label{
  font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-muted); font-weight:600;
}
.muted{color:var(--text-muted);} .sec{color:var(--text-secondary);}
.num{font-variant-numeric:tabular-nums;}

/* ---------- App shell ---------- */
#app{min-height:100vh; display:flex; flex-direction:column;}
.app-header{
  position:sticky; top:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem 1.25rem;
  background:color-mix(in srgb,var(--bg-primary) 88%,transparent);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(140%) blur(10px);
}
.brand{display:flex; align-items:center; gap:.6rem; cursor:pointer;}
.brand-mark{
  width:34px; height:34px; border-radius:9px;
  background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:17px;
  box-shadow:0 4px 14px var(--accent-soft); flex:0 0 auto;
  clip-path:polygon(0 0,100% 0,100% 78%,82% 100%,0 100%);
}
.brand-name{font-weight:700; letter-spacing:-.01em; font-size:17px;}
.brand-name b{color:var(--accent);}
.header-right{display:flex; align-items:center; gap:.5rem;}
.icon-btn{
  width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center; color:var(--text-secondary);
  border:1px solid transparent;
}
.icon-btn:hover{background:var(--bg-tertiary); color:var(--text-primary);}
.icon-btn svg{width:20px; height:20px;}

.user-chip{
  display:flex; align-items:center; gap:.55rem; padding:.3rem .3rem .3rem .7rem;
  border:1px solid var(--border); border-radius:999px; background:var(--surface);
}
.user-chip .avatar{
  width:30px; height:30px; border-radius:50%; background:var(--accent);
  color:#fff; display:grid; place-items:center; font-size:13px; font-weight:700; overflow:hidden;
}
.user-chip .avatar img{width:100%;height:100%;object-fit:cover;}
.user-chip .u-meta{display:flex; flex-direction:column; line-height:1.1;}
.user-chip .u-name{font-size:13px; font-weight:600;}
.user-chip .u-rol{font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted);}

.main-content{flex:1; width:100%; max-width:1180px; margin:0 auto; padding:1.5rem 1.25rem 2.5rem;}

/* ---------- Desktop top nav ---------- */
.top-nav{display:flex; gap:.25rem; margin-left:1rem;}
.top-nav a{
  padding:.45rem .8rem; border-radius:8px; font-size:13.5px; font-weight:500;
  color:var(--text-secondary); display:flex; align-items:center; gap:.4rem;
}
.top-nav a svg{width:16px;height:16px;}
.top-nav a:hover{background:var(--bg-tertiary); color:var(--text-primary);}
.top-nav a.active{background:var(--accent-soft); color:var(--accent);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1.1rem; border-radius:10px; font-size:14.5px; font-weight:600;
  border:1px solid transparent; transition:.15s transform,.15s background; white-space:nowrap;
  min-height:44px;
}
.btn:active{transform:translateY(1px);}
.btn svg{width:18px;height:18px;}
.btn-primary{background:var(--accent); color:var(--accent-text); box-shadow:0 6px 18px var(--accent-soft);}
.btn-primary:hover{background:var(--accent-hover);}
.btn-ghost{background:var(--surface); color:var(--text-primary); border-color:var(--border);}
.btn-ghost:hover{background:var(--bg-tertiary);}
.btn-danger{background:var(--danger); color:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:.45rem .75rem; min-height:36px; font-size:13px; border-radius:8px;}

/* ---------- Panels / cards ---------- */
.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:1.25rem; position:relative;
}
.panel-h{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem;}
.panel-h h3{display:flex; align-items:center; gap:.55rem;}
.corner-tab{
  position:absolute; top:0; left:24px; width:42px; height:3px;
  background:var(--accent); border-radius:0 0 3px 3px;
}

/* ---------- Stat tiles ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.9rem;}
.stat{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:1rem 1.1rem; position:relative; overflow:hidden;
}
.stat::after{
  content:""; position:absolute; right:-12px; bottom:-12px; width:60px; height:60px;
  background:var(--accent-soft); border-radius:50%;
}
.stat .s-label{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); font-weight:600;}
.stat .s-value{font-size:30px; font-weight:700; margin-top:.25rem; font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.stat .s-sub{font-size:12px; color:var(--text-secondary); margin-top:.15rem;}
.stat.accent{background:var(--accent); color:#fff; border-color:transparent;}
.stat.accent .s-label,.stat.accent .s-sub{color:rgba(255,255,255,.8);}
.stat.accent::after{background:rgba(255,255,255,.12);}

/* ---------- Badges ---------- */
.badge{display:inline-flex; align-items:center; gap:.35rem; padding:.18rem .55rem; border-radius:999px;
  font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;}
.badge-success{background:color-mix(in srgb,var(--success) 16%,transparent); color:var(--success);}
.badge-danger{background:color-mix(in srgb,var(--danger) 16%,transparent); color:var(--danger);}
.badge-warning{background:color-mix(in srgb,var(--warning) 18%,transparent); color:var(--warning);}
.badge-muted{background:var(--bg-tertiary); color:var(--text-secondary);}
.badge-accent{background:var(--accent-soft); color:var(--accent);}

/* ---------- Lists ---------- */
.list{display:flex; flex-direction:column;}
.list-row{display:flex; align-items:center; gap:.85rem; padding:.8rem 0; border-bottom:1px solid var(--border);}
.list-row:last-child{border-bottom:none;}
.list-row .lr-ic{width:38px;height:38px;border-radius:10px;background:var(--bg-tertiary);
  display:grid;place-items:center;color:var(--text-secondary);flex:0 0 auto;}
.list-row .lr-main{flex:1; min-width:0;}
.list-row .lr-title{font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.list-row .lr-sub{font-size:12.5px; color:var(--text-muted);}

/* ---------- Forms ---------- */
.field{display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem;}
.field > label{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:600;}
.field input,.field select,.field textarea{
  width:100%; padding:.7rem .8rem; border-radius:10px; font-size:15px;
  background:var(--bg-primary); color:var(--text-primary); border:1px solid var(--border);
  outline:none; transition:.15s border,.15s box-shadow;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.field textarea{resize:vertical; min-height:84px;}
.field-row{display:flex; gap:.75rem; flex-wrap:wrap;}
.field-row .field{flex:1; min-width:140px;}

/* ---------- Empty / error states ---------- */
.empty-state,.error-state{
  text-align:center; padding:2.5rem 1rem; display:flex; flex-direction:column;
  align-items:center; gap:.5rem;
}
.empty-state .empty-icon{width:64px;height:64px;border-radius:18px;background:var(--bg-tertiary);
  display:grid;place-items:center;color:var(--text-muted);margin-bottom:.35rem;}
.empty-state .empty-icon svg{width:30px;height:30px;}
.empty-state h3{font-size:17px;} .empty-state p{color:var(--text-muted); max-width:340px;}

/* ---------- Toasts ---------- */
#toast-wrap{position:fixed; bottom:84px; left:50%; transform:translateX(-50%);
  z-index:9999; display:flex; flex-direction:column; gap:.5rem; align-items:center; pointer-events:none;}
.toast{padding:.75rem 1.25rem; border-radius:10px; font-size:14px; font-weight:500; color:#fff;
  box-shadow:0 10px 30px var(--shadow); animation:toastIn .25s ease; max-width:90vw;}
.toast-error{background:var(--danger);} .toast-success{background:var(--success);}
.toast-warning{background:var(--warning);} .toast-info{background:var(--accent);}
@keyframes toastIn{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:none;}}

/* ---------- Modal ---------- */
.modal-wrapper{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:1rem; animation:fade .2s;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.modal{background:var(--bg-primary); border:1px solid var(--border); border-radius:16px;
  width:100%; max-width:560px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden;}
.modal-head{padding:1.1rem 1.4rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.modal-head h3{font-size:18px;}
.modal-body{flex:1; overflow-y:auto; padding:1.4rem;}
.modal-footer{padding:1rem 1.4rem; border-top:1px solid var(--border);
  display:flex; gap:.75rem; justify-content:flex-end; background:var(--bg-primary);}

/* ---------- Splash ---------- */
#splash{position:fixed; inset:0; z-index:9998; background:#0B0C10;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity .5s; overflow:hidden;}
#splash .sp-bg{position:absolute; inset:0; object-fit:cover; width:100%; height:100%;
  opacity:.32; filter:saturate(120%);}
#splash .sp-grid{position:absolute; inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px; opacity:.5;}
#splash .sp-inner{position:relative; text-align:center; color:#fff; padding:1rem;}
#splash .sp-mark{width:74px;height:74px;border-radius:18px;background:#1B3FE4;color:#fff;
  display:grid;place-items:center;font-size:34px;font-weight:800;margin:0 auto 1.1rem;
  box-shadow:0 10px 40px rgba(27,63,228,.5); clip-path:polygon(0 0,100% 0,100% 78%,82% 100%,0 100%);}
#splash h1{font-size:34px; letter-spacing:-.02em;}
#splash h1 b{color:#6E8BFF;}
#splash .sp-tag{color:#A0A3B1; font-size:13px; text-transform:uppercase; letter-spacing:.22em; margin:.4rem 0 1.8rem;}
#splash .sp-bar{width:220px; height:4px; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden; margin:0 auto;}
#splash .sp-bar > div{height:100%; width:0; background:linear-gradient(90deg,#1B3FE4,#6E8BFF); transition:width .1s linear;}
#splash .sp-status{margin-top:.9rem; font-size:11px; letter-spacing:.18em; color:#4d5160; text-transform:uppercase;}

/* ---------- Hero (home) ---------- */
.hero{position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--border);
  background:var(--bg-primary); padding:clamp(1.6rem,4vw,3.2rem); margin-bottom:1.5rem;}
.hero-grid{position:absolute; inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:34px 34px; pointer-events:none;}
.hero-glow{position:absolute; top:-30%; right:-10%; width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle,var(--accent-soft),transparent 70%); pointer-events:none;}
.hero-inner{position:relative; max-width:680px;}
.hero .kicker{display:inline-flex; align-items:center; gap:.5rem; padding:.3rem .7rem; border-radius:999px;
  background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.1rem;}
.hero h1{font-size:clamp(30px,6vw,52px); line-height:1.02; letter-spacing:-.03em;}
.hero h1 .hl{color:var(--accent);}
.hero p.lead{font-size:clamp(15px,2.2vw,18px); color:var(--text-secondary); margin:1rem 0 1.6rem; max-width:540px;}
.hero-cta{display:flex; gap:.75rem; flex-wrap:wrap;}
.hero-metrics{display:flex; gap:2rem; margin-top:2rem; flex-wrap:wrap;}
.hero-metrics .hm .v{font-size:26px; font-weight:700; letter-spacing:-.02em;}
.hero-metrics .hm .k{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted);}

/* feature grid asimétrico */
.feature-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:1rem;}
.feature{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.3rem; position:relative; overflow:hidden;}
.feature .f-ic{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;margin-bottom:.9rem;}
.feature .f-ic svg{width:22px;height:22px;}
.feature h4{font-size:16px; margin-bottom:.3rem;}
.feature p{font-size:13.5px; color:var(--text-muted);}
.feature.span-7{grid-column:span 7;} .feature.span-5{grid-column:span 5;}
.feature.span-4{grid-column:span 4;} .feature.span-6{grid-column:span 6;}
.feature.span-8{grid-column:span 8;}
.feature.dark{background:var(--accent); color:#fff;}
.feature.dark .f-ic{background:rgba(255,255,255,.15); color:#fff;}
.feature.dark p{color:rgba(255,255,255,.85);}

/* ---------- Section heading ---------- */
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin:1.75rem 0 1rem;}
.sec-head .t{display:flex; flex-direction:column;}
.sec-head .t small{font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); font-weight:700;}
.sec-head h2{font-size:22px;}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;}

/* ---------- Login ---------- */
.login-wrap{min-height:calc(100vh - 120px); display:grid; grid-template-columns:1.1fr .9fr; gap:0;
  border:1px solid var(--border); border-radius:20px; overflow:hidden; background:var(--bg-primary);}
.login-aside{position:relative; padding:2.5rem; background:#0B0C10; color:#fff; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;}
.login-aside .la-grid{position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:36px 36px;}
.login-aside .la-glow{position:absolute; bottom:-20%; left:-10%; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(27,63,228,.4),transparent 70%);}
.login-aside .la-top,.login-aside .la-bottom{position:relative;}
.login-aside h2{font-size:30px; line-height:1.05; letter-spacing:-.02em;}
.login-aside h2 b{color:#6E8BFF;}
.login-aside p{color:#A0A3B1; margin-top:.7rem; font-size:14px;}
.login-form{padding:2.5rem; display:flex; flex-direction:column; justify-content:center;}
.login-form h3{font-size:24px;} .login-form .sub{color:var(--text-muted); margin:.3rem 0 1.6rem;}

/* ---------- Mobile footer nav ---------- */
.app-footer-nav{display:none;}
@media (max-width:768px){
  .top-nav{display:none;}
  .main-content{padding-bottom:84px;}
  .login-wrap{grid-template-columns:1fr;}
  .login-aside{display:none;}
  .feature-grid > .feature{grid-column:1 / -1 !important;}
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .app-footer-nav{
    position:fixed; bottom:0; left:0; right:0; height:64px; z-index:999;
    background:color-mix(in srgb,var(--bg-primary) 94%,transparent);
    border-top:1px solid var(--border); display:flex;
    padding-bottom:env(safe-area-inset-bottom); backdrop-filter:blur(10px);
  }
  .app-footer-nav a{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; font-size:10px; color:var(--text-muted); font-weight:600;}
  .app-footer-nav a svg{width:21px;height:21px;}
  .app-footer-nav a.active{color:var(--accent);}
  .user-chip .u-meta{display:none;}
  .modal{max-width:none; border-radius:16px 16px 0 0; max-height:92vh; margin-top:auto;}
  .modal-wrapper{align-items:flex-end; padding:0;}
}
@media (max-width:480px){
  .hero-metrics{gap:1.25rem;}
  .app-header{padding:.6rem .9rem;}
  .main-content{padding-left:.9rem; padding-right:.9rem;}
}

/* install modal */
.install-sheet{position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,.5);
  display:none; align-items:flex-end; justify-content:center;}
.install-sheet.show{display:flex;}
.install-card{background:var(--bg-primary); width:100%; max-width:480px; border-radius:18px 18px 0 0;
  padding:1.5rem; border:1px solid var(--border);}

/* ============ Fase 3: ejercicios / rutinas / nutrición ============ */
.toolbar{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin:1rem 0 1.25rem;}
.toolbar .search{flex:1; min-width:180px; position:relative;}
.toolbar .search input{width:100%; padding:.6rem .8rem .6rem 2.2rem; border-radius:10px; border:1px solid var(--border);
  background:var(--bg-primary); color:var(--text-primary); font-size:14px;}
.toolbar .search svg{position:absolute; left:.7rem; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--text-muted);}
.chips{display:flex; gap:.4rem; flex-wrap:wrap;}
.chip{padding:.4rem .75rem; border-radius:999px; border:1px solid var(--border); background:var(--surface);
  font-size:12.5px; font-weight:600; color:var(--text-secondary); cursor:pointer; white-space:nowrap;}
.chip.active{background:var(--accent); color:#fff; border-color:transparent;}

.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem;}
.ej-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column;}
.ej-card .thumb{height:130px; background:var(--bg-tertiary); display:grid; place-items:center; position:relative; overflow:hidden;}
.ej-card .thumb img{width:100%; height:100%; object-fit:cover;}
.ej-card .thumb .ph{color:var(--text-muted);} .ej-card .thumb .ph svg{width:38px;height:38px;}
.ej-card .thumb .yt{position:absolute; top:.5rem; right:.5rem; background:rgba(0,0,0,.7); color:#fff;
  border-radius:6px; padding:.15rem .4rem; font-size:10px; font-weight:700;}
.ej-card .body{padding:.85rem .95rem; flex:1; display:flex; flex-direction:column; gap:.4rem;}
.ej-card .body h4{font-size:15px;}
.ej-card .acts{display:flex; gap:.4rem; margin-top:auto; padding-top:.4rem;}
.ej-card .acts button{flex:1;}

.entity-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.15rem; position:relative;}
.entity-card .ec-top{display:flex; justify-content:space-between; gap:.75rem; align-items:flex-start;}
.entity-card h3{font-size:17px;}
.entity-card .ec-meta{display:flex; gap:1.1rem; margin:.7rem 0; flex-wrap:wrap;}
.entity-card .ec-meta .m .v{font-size:20px; font-weight:700; font-variant-numeric:tabular-nums;}
.entity-card .ec-meta .m .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted);}
.entity-card .ec-acts{display:flex; gap:.5rem; flex-wrap:wrap;}

/* builder rows */
.builder-row{border:1px solid var(--border); border-radius:12px; padding:.8rem; margin-bottom:.7rem; background:var(--bg-secondary);}
.builder-row .br-head{display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem;}
.builder-row .br-head .br-title{font-weight:600; font-size:14px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.builder-row .br-head .ord{display:flex; gap:.2rem;}
.mini-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem;}
.mini-grid .field{margin-bottom:0;} .mini-grid .field input,.mini-grid .field select{padding:.45rem .5rem; font-size:13px;}
.mini-grid .field label{font-size:10.5px;}
.macro-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem;}
.macro-grid .field{margin-bottom:0;}
.macro-pill{display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .55rem; border-radius:8px;
  font-size:11.5px; font-weight:700; background:var(--bg-tertiary); color:var(--text-secondary);}
.macro-pill.kcal{background:var(--accent-soft); color:var(--accent);}

/* día / momento groups */
.group-block{margin-bottom:1.2rem;}
.group-title{display:flex; align-items:center; gap:.5rem; font-size:12px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--accent); font-weight:700; margin-bottom:.6rem;}
.group-title::after{content:""; flex:1; height:1px; background:var(--border);}
.ex-line{display:flex; align-items:center; gap:.8rem; padding:.7rem; border:1px solid var(--border); border-radius:12px; margin-bottom:.55rem; background:var(--surface);}
.ex-line .xl-thumb{width:48px; height:48px; border-radius:10px; background:var(--bg-tertiary); overflow:hidden; flex:0 0 auto; display:grid; place-items:center; color:var(--text-muted);}
.ex-line .xl-thumb img{width:100%;height:100%;object-fit:cover;}
.ex-line .xl-main{flex:1; min-width:0;}
.ex-line .xl-main .t{font-weight:600; font-size:14.5px;}
.ex-line .xl-spec{display:flex; gap:.8rem; font-size:12.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; margin-top:.15rem; flex-wrap:wrap;}
.ex-line .xl-spec b{color:var(--text-secondary);}

.yt-embed{position:relative; width:100%; padding-top:56.25%; border-radius:12px; overflow:hidden; background:#000; margin-top:.5rem;}
.yt-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.img-uploader{display:flex; gap:.8rem; align-items:center;}
.img-uploader .prev{width:90px; height:90px; border-radius:12px; border:1px dashed var(--border); background:var(--bg-tertiary);
  display:grid; place-items:center; overflow:hidden; color:var(--text-muted); flex:0 0 auto;}
.img-uploader .prev img{width:100%;height:100%;object-fit:cover;}
@media (max-width:560px){ .mini-grid,.macro-grid{grid-template-columns:repeat(2,1fr);} }