/* ============================================================================
 * skin-hero.css — Piel "Hero" para My Gym Guide (rediseño 2026-10-31)
 * ----------------------------------------------------------------------------
 * Solo piel: fotos full-bleed de atleta, tarjetas glass oscuras, tipografía
 * blanca grande y acentos naranja/rojo. No toca datos, secciones ni íconos.
 * Foto única: /assets/hero-man.jpg (hombre entrenando, gimnasio oscuro).
 * Se aplica solo en tema oscuro para no romper el modo claro.
 * ========================================================================== */

html[data-theme="dark"]{
  --skin-accent:#ff6a2b;
  --skin-accent-2:#e5382b;
  --skin-accent-rgb:255 106 43;
  --skin-glass:rgba(14,16,22,.42);
  --skin-glass-strong:rgba(16,18,24,.74);
  --skin-line:rgba(255,255,255,.12);
  --skin-shadow:0 18px 44px rgba(0,0,0,.46);
  --primary-500:#ff6a2b;
  --primary-rgb:255 106 43;
  --accent-500:oklch(.82 .16 62);
}

/* ---------- Fondo hero full-bleed ---------- */
html[data-theme="dark"] body{
  background:#07080b;
  color:#fff;
  min-height:100dvh;
}

html[data-theme="dark"] body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:var(--skin-hero,url("/assets/hero-man.jpg"));
  background-size:cover;
  background-position:center 18%;
  background-repeat:no-repeat;
  filter:saturate(1.04) contrast(1.03);
  transform:scale(1.02);
  transition:opacity .35s ease;
}

/* Velo oscuro: legibilidad del texto encima de la foto */
html[data-theme="dark"] body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,7,10,.86) 0%,rgba(6,7,10,.20) 22%,rgba(6,7,10,.06) 44%,rgba(6,7,10,.55) 66%,rgba(6,7,10,.94) 88%,#06070a 100%),
    radial-gradient(120% 55% at 50% 0%,rgba(229,56,43,.26),transparent 66%);
}

/* Foto por pantalla: home -> mujer, entreno -> hombre */
html[data-theme="dark"] body[data-tab="explore"]{--skin-hero:url("/assets/hero-man.jpg")}
/* Una sola foto: la misma imagen de atleta en todas las pantallas */
html[data-theme="dark"] body{--skin-hero:url("/assets/hero-man.jpg")}

/* ---------- Cabecera glass ---------- */
html[data-theme="dark"] header.hd{
  background:linear-gradient(180deg,rgba(8,9,13,.86),rgba(8,9,13,.34));
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
html[data-theme="dark"] header.hd h1{
  font:700 1.16rem/1.1 var(--font-display);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
}
html[data-theme="dark"] header.hd img{border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.5)}

html[data-theme="dark"] .pill{
  background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border:1px solid var(--skin-line);
  color:#fff;
}
html[data-theme="dark"] .pill[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--skin-accent),var(--skin-accent-2));
  border-color:transparent;
  color:#fff;
  box-shadow:0 6px 18px rgba(var(--skin-accent-rgb)/.34);
}

/* ---------- Tipografía blanca grande ---------- */
html[data-theme="dark"] main{position:relative;padding-top:10px}
html[data-theme="dark"] h2{
  font:700 clamp(1.5rem,6.2vw,2rem)/1.15 var(--font-display);
  letter-spacing:-.02em;
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}
html[data-theme="dark"] h3{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
html[data-theme="dark"] .muted{color:rgba(255,255,255,.72)}

/* ---------- Tarjetas glass ---------- */
html[data-theme="dark"] .welcome,
html[data-theme="dark"] .wkblock,
html[data-theme="dark"] .wcard,
html[data-theme="dark"] .ex,
html[data-theme="dark"] .wbig,
html[data-theme="dark"] .qcard,
html[data-theme="dark"] .card,
html[data-theme="dark"] .mgrid .mcard,
html[data-theme="dark"] .sheet>div{
  background:var(--skin-glass);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--skin-line);
  box-shadow:var(--skin-shadow);
}

/* Hero de bienvenida: la foto respira a través del cristal */
html[data-theme="dark"] .welcome{
  background:linear-gradient(150deg,rgba(var(--skin-accent-rgb)/.28),rgba(16,18,24,.34) 58%,rgba(16,18,24,.52));
  border-radius:24px;
  padding:22px 18px 18px;
}
html[data-theme="dark"] .welcome__hi{
  font:800 clamp(1.9rem,8.4vw,2.6rem)/1.02 var(--font-display);
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:0 0 6px;
}
html[data-theme="dark"] .welcome__sub{
  font-size:1rem;
  line-height:1.45;
  color:rgba(255,255,255,.86);
  max-width:34ch;
}
html[data-theme="dark"] .qcard{
  border-radius:18px;
  min-height:96px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:none;
}
html[data-theme="dark"] .qcard svg{color:var(--skin-accent)}
html[data-theme="dark"] .qcard:active{transform:scale(.975);background:rgba(255,255,255,.13)}

html[data-theme="dark"] .wbig{
  border-radius:18px;
  background:rgba(20,22,28,.58);
}
html[data-theme="dark"] .wbig svg{color:var(--skin-accent)}
html[data-theme="dark"] .wbig--ready{
  background:linear-gradient(135deg,rgba(var(--skin-accent-rgb)/.34),rgba(16,18,24,.56) 70%);
  border-color:rgba(var(--skin-accent-rgb)/.42);
}
html[data-theme="dark"] .wbig small{color:rgba(255,255,255,.68)}

html[data-theme="dark"] .wcard{border-radius:18px;background:rgba(18,20,26,.60)}
html[data-theme="dark"] .wline{border-bottom-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .wline .rest{color:rgba(255,255,255,.62)}
html[data-theme="dark"] .ex{border-radius:16px;background:rgba(20,22,28,.55)}
html[data-theme="dark"] .ex small{color:rgba(255,255,255,.66)}
html[data-theme="dark"] .sxr{
  background:linear-gradient(135deg,rgba(var(--skin-accent-rgb)/.26),rgba(229,56,43,.20));
  color:#ffd9c6;
  border:1px solid rgba(var(--skin-accent-rgb)/.30);
}

/* Mapa del cuerpo y fichas de músculo */
html[data-theme="dark"] .avatar-box{border:1px solid var(--skin-line);box-shadow:var(--skin-shadow)}
html[data-theme="dark"] .mcard{background:rgba(20,22,28,.55);border-color:rgba(255,255,255,.12);color:#fff}
html[data-theme="dark"] .mcard[aria-pressed="true"]{
  border-color:var(--skin-accent);
  box-shadow:0 0 0 3px rgba(var(--skin-accent-rgb)/.32);
}
html[data-theme="dark"] .chips .pill{font-weight:600}

/* Formularios */
html[data-theme="dark"] .input,
html[data-theme="dark"] select.input,
html[data-theme="dark"] textarea{
  background:rgba(255,255,255,.08);
  border:1px solid var(--skin-line);
  color:#fff;
  border-radius:14px;
}
html[data-theme="dark"] .input::placeholder{color:rgba(255,255,255,.5)}

/* Botones primarios */
html[data-theme="dark"] .btn--primary,
html[data-theme="dark"] .btn.btn--primary{
  background:linear-gradient(135deg,var(--skin-accent),var(--skin-accent-2));
  border:0;
  color:#fff;
  box-shadow:0 12px 28px rgba(var(--skin-accent-rgb)/.34);
}

/* ---------- Barra inferior glass ---------- */
html[data-theme="dark"] nav.tabsbar{
  background:rgba(10,11,15,.72);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border-top:1px solid rgba(255,255,255,.10);
  box-shadow:0 -14px 34px rgba(0,0,0,.5);
}
html[data-theme="dark"] nav.tabsbar button{color:rgba(255,255,255,.60)}
html[data-theme="dark"] nav.tabsbar button[aria-current="page"]{color:var(--skin-accent)}
html[data-theme="dark"] nav.tabsbar button[aria-current="page"] svg{filter:drop-shadow(0 0 10px rgba(var(--skin-accent-rgb)/.55))}

/* FAB de "Mi entreno" */
html[data-theme="dark"] .mwfab{
  background:linear-gradient(135deg,var(--skin-accent),var(--skin-accent-2));
  box-shadow:0 10px 26px rgba(var(--skin-accent-rgb)/.42);
}

/* Hojas y modales */
html[data-theme="dark"] .sheet{background:rgba(3,4,6,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html[data-theme="dark"] .sheet>div{background:rgba(16,18,24,.92);border-radius:24px 24px 0 0}
html[data-theme="dark"] .moresheet .morebtn{background:rgba(255,255,255,.06);border:1px solid var(--skin-line);color:#fff;border-radius:16px}

/* Temporizador y progreso mantienen contraste sobre la foto */
html[data-theme="dark"] .ring .fg{stroke:var(--skin-accent)}
html[data-theme="dark"] .ring.rest .fg{stroke:#ff9350}
html[data-theme="dark"] .timer__digits{color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.6)}
html[data-theme="dark"] .stat b{color:#fff}

@media (prefers-reduced-motion:reduce){
  html[data-theme="dark"] body::before{transition:none}
}

/* ============================================================================
 * HERO de la home: banda full-bleed con la foto real del atleta, velo oscuro,
 * texto blanco grande arriba y las 4 tarjetas glass abajo. Nada se quita:
 * las mismas tarjetas (workout, build, progress, power) siguen ahí.
 * ========================================================================== */
html[data-theme="dark"] .welcome.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
  min-height:min(78vh,640px);
  margin:0 -14px 18px;
  padding:16px 16px 18px;
  border-radius:0 0 28px 28px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:var(--skin-glass-strong);
  overflow:hidden;
  isolation:isolate;
}
html[data-theme="dark"] .welcome.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:url("/assets/hero-man.jpg");
  background-size:cover;
  background-position:center 16%;
  background-repeat:no-repeat;
  transform:scale(1.03);
}
html[data-theme="dark"] .welcome.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(6,7,10,.72) 0%,rgba(6,7,10,.10) 30%,rgba(6,7,10,.34) 58%,rgba(6,7,10,.90) 92%),
    radial-gradient(90% 50% at 85% 8%,rgba(255,106,43,.30),transparent 62%);
}
html[data-theme="dark"] .hero__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font:700 .68rem/1 var(--font-body);
  letter-spacing:.20em;
  text-transform:uppercase;
}
html[data-theme="dark"] .hero__brand{color:#fff;opacity:.92}
html[data-theme="dark"] .hero__tag{
  color:#ffd9c6;
  background:rgba(255,106,43,.16);
  border:1px solid rgba(255,106,43,.34);
  border-radius:999px;
  padding:6px 10px;
  letter-spacing:.14em;
}
html[data-theme="dark"] .hero__txt{margin-top:auto;padding-bottom:2px}
html[data-theme="dark"] .hero__title{
  font:800 clamp(2.1rem,10.5vw,3.1rem)/0.96 var(--font-display);
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin:0 0 8px;
  text-shadow:0 6px 30px rgba(0,0,0,.72);
}
html[data-theme="dark"] .hero__sub{
  margin:0;
  max-width:30ch;
  font-size:1rem;
  line-height:1.4;
  color:rgba(255,255,255,.90);
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}
html[data-theme="dark"] .hero__grid{gap:8px}
html[data-theme="dark"] .hero__grid .qcard{
  min-height:78px;
  padding:12px;
  font-size:.95rem;
  background:rgba(18,20,26,.46);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 30px rgba(0,0,0,.38);
}
html[data-theme="dark"] .hero__grid .qcard svg{width:26px;height:26px}

/* En pantallas altas el hero no se estira de más */
@media (min-height:900px){
  html[data-theme="dark"] .welcome.hero{min-height:min(70vh,700px)}
}