/* CR Athletic Lab — componentes de plan (menú y rutina). Compartido por onboarding-v2.html y app-cliente.html.
   Usa las variables de color de cada página: --gold --cream --muted --line --surface --surface-2 */
.pl-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
.pl-card{background:var(--surface); border:1px solid var(--line); border-radius:1.1rem; overflow:hidden; animation:plIn .35s ease both; transition:border-color .2s;}
.pl-card:hover{border-color:rgba(255,255,255,.18);}
@keyframes plIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.pl-body{padding:1.1rem 1.15rem 1.15rem;}
.pl-top{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.7rem;}
.pl-slot{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; color:#171204; padding:.3rem .7rem; border-radius:999px; background:linear-gradient(178deg,var(--gold-2,#E7CE7C),var(--gold)); }
.pl-tag{font-size:.62rem; letter-spacing:.07em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(201,162,39,.4); padding:.26rem .6rem; border-radius:999px;}
.pl-kcal{margin-left:auto; font-size:.72rem; color:var(--muted);}
.pl-kcal b{font-family:'Space Grotesk',sans-serif; color:var(--cream); font-size:1.05rem; margin-right:.15rem;}
.pl-head{display:flex; gap:.9rem; align-items:flex-start;}
.pl-ico{width:50px; height:50px; border-radius:1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid var(--line); color:var(--gold); padding:12px; background:var(--surface-2); overflow:hidden;}
.pl-ico svg{width:100%; height:100%;}
.pl-title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.02rem; line-height:1.3; margin:0; color:var(--cream); text-wrap:balance;}
.pl-meta{display:flex; flex-wrap:wrap; gap:.35rem .9rem; margin-top:.4rem; font-size:.72rem; color:var(--muted);}
.pl-meta span{display:inline-flex; align-items:center; gap:.3rem;}
.pl-meta svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.pl-macros{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin:1rem 0 .2rem;}
.pl-macro{background:var(--surface-2); border:1px solid var(--line); border-radius:.8rem; padding:.55rem .65rem;}
.pl-macro b{display:block; font-family:'Space Grotesk',sans-serif; font-size:.98rem; color:var(--cream);}
.pl-macro span{font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.pl-macro i{display:block; height:3px; border-radius:99px; background:var(--gold); margin-top:.4rem;}
.pl-ings{list-style:none; margin:1rem 0 .2rem; padding:0; display:grid; gap:.1rem;}
.pl-ings li{display:flex; align-items:center; gap:.65rem; padding:.5rem 0; border-bottom:1px solid var(--line); font-size:.86rem; color:var(--cream);}
.pl-ings li:last-child{border-bottom:none;}
.pl-dot{width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0;}
.pl-dot.carb{opacity:.65;} .pl-dot.fat{opacity:.4;} .pl-dot.extra{opacity:.25; background:var(--muted);}
.pl-ings small{margin-left:auto; color:var(--muted); font-size:.7rem; padding-left:.6rem; white-space:nowrap;}
.pl-det{border-top:1px solid var(--line); margin-top:.85rem; padding-top:.2rem;}
.pl-det > summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:.7rem 0 .5rem; font-size:.78rem; color:var(--muted); transition:color .2s; -webkit-tap-highlight-color:transparent;}
.pl-det > summary::-webkit-details-marker{display:none;}
.pl-det > summary::after{content:""; width:7px; height:7px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); transition:transform .25s; margin-right:.2rem;}
.pl-det[open] > summary{color:var(--gold);}
.pl-det[open] > summary::after{transform:rotate(-135deg);}
.pl-det > summary:hover{color:var(--gold);}
.pl-steps{margin:.2rem 0 0; padding-left:1.15rem; font-size:.85rem; color:var(--muted); line-height:1.6;}
.pl-steps li{margin:.25rem 0; padding-left:.2rem;}
.pl-steps li::marker{color:var(--gold); font-weight:700;}
.pl-tip{margin:.7rem 0 0; font-size:.8rem; color:var(--muted); line-height:1.55; background:rgba(201,162,39,.07); border:1px solid rgba(201,162,39,.2); border-radius:.75rem; padding:.6rem .8rem;}
.pl-tip b{color:var(--gold);}
.pl-list{margin:.2rem 0 0; padding:0; list-style:none; font-size:.82rem; color:var(--muted); line-height:1.55;}
.pl-list li{padding:.3rem 0; border-bottom:1px dashed var(--line);}
.pl-list li:last-child{border-bottom:none;}
.pl-photo{height:128px; background:var(--surface-2) center/cover no-repeat; border-bottom:1px solid var(--line);}

/* resumen del día */
.pl-day{display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-bottom:1rem;}
.pl-day > div{background:var(--surface); border:1px solid var(--line); border-radius:.9rem; padding:.75rem .8rem;}
.pl-day b{display:block; font-family:'Space Grotesk',sans-serif; font-size:1.15rem; color:var(--cream);}
.pl-day small{display:block; font-size:.6rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-top:.1rem;}
.pl-day em{display:block; font-style:normal; font-size:.66rem; color:var(--muted); margin-top:.35rem;}
.pl-day .bar{height:3px; border-radius:99px; background:var(--line); margin-top:.45rem; overflow:hidden;}
.pl-day .bar i{display:block; height:100%; background:var(--gold); border-radius:99px;}

/* entrenamiento */
.pl-rx{display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin:.9rem 0 .2rem;}
.pl-rx div{border:1px solid var(--line); border-radius:.8rem; padding:.55rem .3rem; text-align:center; background:rgba(255,255,255,.015);}
.pl-rx b{display:block; font-family:'Space Grotesk',sans-serif; color:var(--gold); font-size:.88rem; line-height:1.15;}
.pl-rx span{display:block; font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:.2rem;}
.pl-goal{margin:.7rem 0 0; font-size:.78rem; color:var(--gold); line-height:1.5;}
.pl-cue{margin:.55rem 0 0; font-size:.84rem; color:var(--muted); line-height:1.55;}
.pl-cue b{color:var(--cream); font-weight:600;}
.pl-warn b{color:#f0a37a;}
.pl-chip{font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:.22rem .55rem; border-radius:999px;}
.pl-chip.gold{color:var(--gold); border-color:rgba(201,162,39,.4);}
.pl-session{background:var(--surface); border:1px solid var(--line); border-radius:1.1rem; padding:1.15rem 1.2rem; margin-bottom:.9rem;}
.pl-session h3{font-family:'Space Grotesk',sans-serif; font-size:1.15rem; margin:.15rem 0 .35rem; color:var(--cream);}
.pl-session p{margin:0; font-size:.8rem; color:var(--muted); line-height:1.55;}
.pl-weekbox{margin-top:.8rem; padding:.65rem .8rem; border-radius:.8rem; background:rgba(201,162,39,.08); border:1px solid rgba(201,162,39,.25); font-size:.78rem; color:var(--cream); line-height:1.5;}
.pl-weekbox b{color:var(--gold);}
.pl-alert{border:1px solid rgba(240,163,122,.35); background:rgba(240,163,122,.06); border-radius:1rem; padding:.9rem 1rem; margin-bottom:1rem; font-size:.8rem; color:var(--cream); line-height:1.55;}
.pl-alert strong{display:block; color:#f0a37a; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.35rem;}
.pl-alert ul{margin:.35rem 0 0; padding-left:1.1rem; color:var(--muted);}
.pl-rest{text-align:center; padding:2rem 1.2rem;}
.pl-rest h3{font-family:'Space Grotesk',sans-serif; margin:.5rem 0 .6rem; color:var(--cream);}
.pl-rest ul{list-style:none; padding:0; margin:0 auto; max-width:30rem; font-size:.85rem; color:var(--muted); line-height:1.6;}
.pl-rest li{padding:.3rem 0;}
.pl-log{margin-top:.85rem; padding-top:.8rem; border-top:1px solid var(--line);}
.pl-log p{margin:0 0 .5rem; font-size:.75rem; color:var(--muted);}
.pl-log p b{color:var(--gold);}
.pl-log form{display:flex; gap:.45rem;}
.pl-log input{flex:1; min-width:0; background:var(--surface-2); border:1px solid var(--line); border-radius:.7rem; padding:.55rem .7rem; color:var(--cream); font-size:.85rem; font-family:inherit;}
.pl-log input:focus{outline:none; border-color:var(--gold);}
.pl-log button{border:none; border-radius:.7rem; padding:.55rem .9rem; font-weight:700; font-size:.78rem; background:var(--gold); color:#141416; cursor:pointer;}
.pl-shop h4{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 .6rem; font-weight:600;}
.pl-shop-row{display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.86rem;}
.pl-shop-row:last-child{border-bottom:none;}
.pl-shop-row small{display:block; color:var(--muted); font-size:.68rem; margin-top:.15rem;}
.pl-shop-row .q{font-family:'Space Grotesk',sans-serif; color:var(--gold); font-weight:700; text-align:right; flex-shrink:0; font-size:.82rem;}
@media (max-width:520px){ .pl-day{grid-template-columns:repeat(2,1fr);} .pl-rx{grid-template-columns:repeat(2,1fr);} }
@media (prefers-reduced-motion:reduce){ .pl-card{animation:none;} }
.pl-pill{border:1px solid var(--line); border-radius:999px; padding:.45rem .9rem; font-size:.75rem; color:var(--muted); background:transparent; white-space:nowrap; cursor:pointer; font-family:inherit; transition:all .15s;}
.pl-pill.on{border-color:var(--gold); color:var(--gold); background:rgba(201,162,39,.1);}