@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  /* tema oscuro (default) — identidad Workout: charcoal + lime + sage */
  --bg:#111827; --surface:#1a2233; --surface-2:#222b3d; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --text:#f7f8f5; --muted:#9aa0ab; --accent:#c7f464; --on-accent:#111827; --accent-2:#6b7f5b; --red:#e5786e; --green:#6fcf97;
  --header-bg:rgba(17,24,39,.92);
  --radius:16px; --radius-sm:10px;
  --font-title:"Inter",system-ui,sans-serif; --font-display:"Sora",var(--font-title);
}
:root[data-theme="light"]{
  --bg:#f7f8f5; --surface:#ffffff; --surface-2:#d9ddcf; --line:rgba(17,24,39,.08); --line-strong:rgba(17,24,39,.16);
  --text:#111827; --muted:#6b6f76; --accent:#c7f464; --on-accent:#111827; --accent-2:#6b7f5b; --red:#c9453d; --green:#3f9d6c;
  --header-bg:rgba(247,248,245,.9);
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font-title); line-height:1.5;}
a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding-inline:20px;}
h1,h2,h3{font-family:var(--font-display); font-weight:400; letter-spacing:.01em; text-transform:uppercase; margin:0;}

/* auth screens — foto de fondo a pantalla completa (100vw x 100vh), tarjeta vidriada
   flotando a la derecha. La foto queda siempre visible, también en mobile. */
.auth-page{min-height:100vh; margin:0; position:relative; display:flex; background:var(--bg); overflow:hidden;}
.auth-photo-side{position:absolute; inset:0; background-color:var(--bg); background-image:url('img/auth-hero.webp'); background-size:contain; background-repeat:no-repeat; background-position:center;}
.auth-photo-side::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(17,24,39,.1) 0%, rgba(17,24,39,.6) 100%);}
.auth-form-side{position:relative; z-index:1; flex:1 1 100%; min-width:0; display:flex; align-items:center; justify-content:flex-end; padding:24px 7vw;}
@media (max-width:640px){
  .auth-form-side{justify-content:center; padding:24px;}
}
.auth-card{position:relative; z-index:1; width:100%; max-width:400px; background:color-mix(in srgb, var(--surface) 38%, transparent);
  backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid color-mix(in srgb, var(--line-strong) 55%, transparent); border-radius:var(--radius); padding:32px 28px;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.5);}
.auth-logo{display:flex; align-items:center; gap:10px; margin-bottom:22px; text-decoration:none; color:var(--text);}
.auth-logo svg{width:34px; height:34px; flex:none;}
.auth-logo b{font-family:var(--font-display); font-size:22px;}
.wm-me{color:var(--muted); margin-left:6px;}
.auth-card h1{font-size:20px; margin-bottom:6px;}
.auth-card p.sub{color:var(--muted); font-size:13.5px; margin:0 0 22px;}
label{display:block; font-size:12px; font-weight:700; color:var(--muted); margin:14px 0 6px; text-transform:uppercase; letter-spacing:.04em;}
input, select, textarea{width:100%; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:11px 13px; color:var(--text); font-family:var(--font-title); font-size:14.5px;}
input:focus, select:focus, textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}
.phone-input-group{display:flex; gap:0;}
.phone-input-group select{flex:0 0 auto; width:auto; max-width:132px; border-top-right-radius:0; border-bottom-right-radius:0; border-right:none; font-size:13px;}
.phone-input-group input{flex:1 1 auto; border-top-left-radius:0; border-bottom-left-radius:0;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--accent); color:var(--on-accent);
  font-weight:800; font-size:14px; padding:12px 20px; border-radius:999px; border:none; cursor:pointer; text-decoration:none; width:100%; margin-top:20px;}
.btn.ghost{background:transparent; color:var(--text); border:1.5px solid var(--line-strong);}
.btn.sm{width:auto; padding:9px 16px; font-size:12.5px; margin-top:0;}
.foot-link{margin-top:18px; text-align:center; font-size:13px; color:var(--muted);}
.foot-link a{color:var(--accent); font-weight:700; text-decoration:none;}
.error-box{background:rgba(229,120,110,.14); border:1px solid rgba(229,120,110,.4); color:var(--red); border-radius:var(--radius-sm);
  padding:11px 14px; font-size:13px; margin-bottom:16px;}
.ok-box{background:rgba(111,207,151,.14); border:1px solid rgba(111,207,151,.4); color:var(--green); border-radius:var(--radius-sm);
  padding:11px 14px; font-size:13px; margin-bottom:16px;}

/* app shell */
.app-header{position:sticky; top:0; z-index:5; background:var(--header-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.app-header .wrap{display:flex; align-items:center; justify-content:space-between; height:60px; gap:16px;}
.app-logo{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--text); flex:none;}
.app-logo svg{width:26px; height:26px;}
.app-logo b{font-family:var(--font-display); font-size:15px;}
.app-nav{display:flex; align-items:center; gap:18px; font-size:13.5px; color:var(--muted); margin-left:12px;}
.app-nav a{text-decoration:none; font-weight:600;}
.app-nav a.active{color:var(--text);}
.app-user{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); flex:none;}
@media (max-width:640px){
  .app-header .wrap{flex-wrap:wrap; height:auto; padding:10px 0;}
  .app-nav{order:3; width:100%; justify-content:center; margin:8px 0 0;}
}
.app-user .av{width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:11px; color:var(--on-accent);}
.theme-toggle{background:var(--surface-2); border:1px solid var(--line-strong); color:var(--text); width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; line-height:1;}
.client-theme-toggle{position:fixed; top:14px; right:14px; z-index:20; width:34px; height:34px;}
main.wrap{padding-block:28px 60px;}

.page-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:22px;}
.page-head h1{font-size:22px;}
.page-head p{color:var(--muted); font-size:13.5px; margin-top:4px;}

.kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;}
@media (max-width:760px){ .kpi-row{grid-template-columns:1fr 1fr;} }
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px;}
.kpi .lbl{font-size:11.5px; color:var(--muted); font-weight:600;}
.kpi .val{font-family:var(--font-display); font-size:26px; margin-top:4px;}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px;}
.card + .card{margin-top:16px;}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.card-head h2{font-size:15px;}

table.tbl{width:100%; border-collapse:collapse; font-size:13.5px;}
table.tbl th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; padding:0 10px 8px;}
table.tbl td{padding:11px 10px; border-top:1px solid var(--line); vertical-align:middle;}
table.tbl tr:hover td{background:var(--surface-2);}
table.tbl a.row-link{text-decoration:none; color:var(--text); font-weight:700;}
.badge{font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--muted); border:1px solid var(--line);}
.badge.online{color:var(--accent-2); border-color:rgba(242,140,40,.4); background:rgba(242,140,40,.1);}
.badge.presencial{color:var(--text);}
.empty{text-align:center; padding:44px 20px; color:var(--muted);}
.empty svg{width:40px; height:40px; margin-bottom:10px; opacity:.5;}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
@media (max-width:600px){ .form-grid{grid-template-columns:1fr;} }
.form-actions{display:flex; gap:10px; margin-top:22px;}
.form-actions .btn{width:auto;}

/* pestañas de la ficha del cliente */
.tabs{display:flex; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px; width:max-content; margin-bottom:18px; overflow-x:auto; max-width:100%;}
.tabs a{font-size:12.5px; font-weight:700; color:var(--muted); padding:8px 15px; border-radius:999px; text-decoration:none; white-space:nowrap;}
.tabs a.active{background:var(--accent); color:var(--on-accent);}

.metric-row{display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; border-top:1px solid var(--line); font-size:13px; color:var(--muted);}
.metric-row:first-of-type{border-top:none;}
.metric-row b{color:var(--text); font-family:var(--font-display); font-size:16px; font-weight:400;}

.chip-row{display:flex; gap:8px; flex-wrap:wrap;}
.chip{font-size:11.5px; font-weight:700; padding:6px 12px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--muted);}

.set-row{display:grid; grid-template-columns:2fr repeat(3,1fr) auto; gap:8px; align-items:center; margin-bottom:8px;}
@media (max-width:600px){ .set-row{grid-template-columns:1fr 1fr; grid-template-areas:"ex ex" "w r" "rpe del";} }
.set-row .icon-btn{background:transparent; border:1px solid var(--line-strong); color:var(--red); border-radius:8px; width:36px; height:36px; cursor:pointer; font-weight:800;}

.grid-photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px;}
.photo-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;}
.photo-card img{width:100%; height:160px; object-fit:cover; display:block;}
.photo-card .meta{padding:8px 10px; font-size:11px; color:var(--muted);}
.compare-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px;}
@media (max-width:560px){ .compare-row{grid-template-columns:1fr;} }
.compare-row .photo-card img{height:260px;}

.sparkline{width:100%; height:auto; display:block;}

/* móvil del cliente */
body.client-app{background:var(--bg);}
.client-shell{max-width:480px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column;}
.client-top{display:flex; align-items:center; justify-content:space-between; padding:18px 18px 10px;}
.client-top .greet{font-family:var(--font-display); font-size:19px; text-transform:uppercase;}
.client-top .sub{color:var(--muted); font-size:12px;}
.client-main{padding:0 18px 90px; flex:1;}
.hero-card{border-radius:16px; padding:16px; background:linear-gradient(150deg,var(--accent),var(--accent-2) 100%); color:var(--on-accent); margin-bottom:16px;}
.hero-card .l{font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.65;}
.hero-card h4{font-family:var(--font-display); font-size:18px; margin:4px 0 0; text-transform:uppercase;}
.hero-card p{font-size:12px; margin:4px 0 0; opacity:.75;}
.client-nav{position:fixed; left:0; right:0; bottom:0; max-width:480px; margin:0 auto; display:flex; justify-content:space-around;
  background:var(--header-bg); backdrop-filter:blur(10px); border-top:1px solid var(--line); padding:10px 6px calc(10px + env(safe-area-inset-bottom));}
.client-nav a{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; color:var(--muted); text-decoration:none; font-weight:700;}
.client-nav a.active{color:var(--accent);}
.scale-row{display:flex; gap:6px; margin-top:6px;}
.scale-row label{flex:1; text-align:center; margin:0; text-transform:none; font-size:12px; color:var(--muted); font-weight:700;
  background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:8px 0; cursor:pointer;}
.scale-row input{position:absolute; opacity:0; pointer-events:none;}
.scale-row input:checked + label{background:var(--accent); color:var(--on-accent); border-color:var(--accent);}

/* cuestionario de onboarding */
.quiz-progress{height:4px; background:var(--surface-2); border-radius:999px; overflow:hidden; margin-bottom:22px;}
.quiz-progress .fill{height:100%; background:var(--accent); transition:width .2s ease;}
.quiz-step h2{font-size:19px; margin-bottom:18px;}
.option-list{display:flex; flex-direction:column; gap:8px;}
.option-item{display:block; background:var(--surface); border:1.5px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:14px 16px; font-size:14px; font-weight:600; cursor:pointer; position:relative;}
.option-item input{position:absolute; opacity:0; pointer-events:none;}
.option-item input:checked + span{color:var(--on-accent);}
.option-item:has(input:checked){background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.quiz-nav{display:flex; gap:10px; margin-top:22px;}
.quiz-nav .btn.ghost{flex:none;}
.quiz-nav .btn:not(.ghost){flex:1;}

/* gauge de IMC en el resultado del cuestionario */
.gauge-track{position:relative; height:10px; border-radius:999px; margin:14px 0 8px;
  background:linear-gradient(90deg, #3ddc84 0%, #3ddc84 30%, #ffd60a 55%, #f28c28 75%, #ff5a4f 100%);}
.gauge-marker{position:absolute; top:-6px; width:2px; height:22px; background:var(--text);}
.gauge-labels{display:flex; justify-content:space-between; font-size:10px; color:var(--muted); text-transform:uppercase; font-weight:700;}

/* biblioteca de ejercicios */
.exercise-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;}
.exercise-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; text-decoration:none; color:var(--text);}
.exercise-card img{width:100%; height:120px; object-fit:cover; display:block; background:var(--surface-2);}
.exercise-card .meta{padding:9px 10px;}
.exercise-card .meta .name{font-size:12.5px; font-weight:700;}
.exercise-card .meta .zone{font-size:10.5px; color:var(--muted); text-transform:uppercase;}

/* shake feedback para validación del formulario de onboarding */
@keyframes bc-shake{10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(2px);}30%,50%,70%{transform:translateX(-4px);}40%,60%{transform:translateX(4px);}}
.shake{animation:bc-shake .3s;}