/* Los tokens de color y tipografía viven en css/tokens.css. Acá no se
     declara ningún color literal: si hace falta uno nuevo, se agrega allá
     con su valor oscuro y su valor claro. */
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--bg);}
  body{
    font-family:var(--font-body);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:transparent;
    font-size:14px;
    line-height:1.45;
  }
  a{color:var(--primary-ink); text-decoration:none; font-weight:600;}
  button{font-family:inherit; color:inherit;}
  #app{
    max-width:480px;
    margin:0 auto;
    min-height:100vh;
    position:relative;
    /* La altura real de la barra de abajo la mide 04-nav.js y la publica
       en --navbar-h. El 84px es el respaldo para antes de que corra. */
    padding-bottom:calc(var(--navbar-h, 84px) + 24px + env(safe-area-inset-bottom));
    background:var(--bg);
  }
  .eyebrow{
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--text-muted);
  }

  /* ---------- Encabezado ---------- */
  .topbar{
    position:sticky; top:0; z-index:20;
    background:var(--barra-blur);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);
    backdrop-filter:saturate(1.4) blur(14px);
    padding:calc(14px + env(safe-area-inset-top)) 16px 10px;
    border-bottom:1px solid transparent;
  }
  .topbar-row{display:flex; align-items:center; gap:10px; min-height:40px;}
  .top-txt{flex:1; min-width:0;}
  .top-txt .eyebrow{text-transform:none; letter-spacing:0; font-size:13px; font-weight:500;}
  .top-txt .eyebrow:first-letter{text-transform:uppercase;}
  .topbar h1{
    font-family:var(--font-display);
    font-weight:700;
    font-size:24px;
    letter-spacing:-.02em;
    line-height:1.15;
    margin:0;
    color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .topbar.es-hoy h1{font-size:27px;}
  .top-atras{
    width:38px; height:38px; margin-left:-8px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; border-radius:12px; cursor:pointer;
    color:var(--text);
  }
  .top-atras:active{background:var(--surface-2);}
  .brand-mark{
    width:40px; height:40px; flex-shrink:0;
    border-radius:13px;
    background:var(--primary);
    color:var(--on-primary);
    border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--glow);
  }
  .brand-mark:active{transform:scale(.95);}

  /* Pestañas de la sección, debajo del título */
  .subnav{
    display:flex; gap:6px;
    margin:12px -16px 0; padding:0 16px 2px;
    overflow-x:auto; scrollbar-width:none;
  }
  .subnav::-webkit-scrollbar{display:none;}
  .subnav[hidden]{display:none;}
  .subtab{
    flex-shrink:0;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text-muted);
    font-size:13px; font-weight:600;
    cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .subtab.on{background:var(--text); color:var(--bg); border-color:var(--text);}

  /* ---------- Vistas ---------- */
  .view{display:none; padding:8px 16px 8px; animation:fadeIn .22s ease;}
  @keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
  .view.active{display:block;}

  /* ---------- Títulos de sección ---------- */
  .section-title{
    font-family:var(--font-display);
    font-weight:600;
    font-size:17px;
    letter-spacing:-.01em;
    color:var(--text);
    margin:26px 2px 12px;
  }
  .section-title:first-child{margin-top:8px;}

  /* ---------- Tarjeta base ---------- */
  .ticket{
    position:relative;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    padding:16px;
    margin-bottom:12px;
  }
  .ticket h3{
    font-family:var(--font-display);
    font-size:17px;
    margin:0 0 4px;
  }
  .ticket p{margin:2px 0; font-size:13.5px; color:var(--ink-soft); line-height:1.5;}

  .stat-row{display:flex; gap:10px;}
  .stat{flex:1; text-align:center; padding:8px 4px;}
  .stat .num{
    font-family:var(--font-num);
    font-weight:700;
    font-size:24px;
    letter-spacing:-.02em;
    color:var(--text);
    font-variant-numeric:tabular-nums;
  }
  .stat .lbl{
    font-size:11.5px;
    color:var(--ink-soft);
    margin-top:2px;
    text-transform:none; letter-spacing:0;
  }
  .divider-v{width:1px; background:var(--line);}

  .badge{
    display:inline-block;
    font-size:11.5px;
    font-weight:600;
    padding:4px 10px;
    border-radius:999px;
    background:var(--accent-soft);
    color:var(--on-accent-soft);
  }
  .badge.pine{background:var(--primary-soft); color:var(--on-primary-soft);}
  .badge.danger{background:var(--danger-soft); color:var(--on-danger-soft);}

  /* ---------- Botones ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    font-family:var(--font-body);
    font-weight:700;
    font-size:14.5px;
    padding:14px 18px;
    border-radius:14px;
    border:1px solid transparent;
    background:var(--primary);
    color:var(--on-primary);
    cursor:pointer;
    width:100%;
    transition:transform .08s ease, filter .12s ease;
  }
  .btn:active{transform:scale(.98); filter:brightness(.95);}
  .btn.ghost{
    background:transparent; color:var(--text);
    border:1px solid var(--border-strong) !important;
  }
  .btn.small{width:auto; padding:9px 14px; font-size:13px; border-radius:11px;}
  .btn-row{display:flex; gap:8px; margin-top:12px;}

  /* ---------- Inicio: héroe del objetivo ---------- */
  .hero{
    display:flex; align-items:center; gap:18px;
    padding:18px;
    border-radius:var(--r-lg);
    background:var(--hero-grad);
    border:1px solid var(--line);
    margin:6px 0 12px;
    cursor:pointer;
  }
  .hero:active{transform:scale(.99);}
  .hero-anillo{position:relative; flex-shrink:0; width:112px; height:112px;}
  .hero-anillo-txt{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  .hero-anillo-txt strong{
    font-family:var(--font-num); font-size:28px; font-weight:700; letter-spacing:-.03em;
    color:var(--text); line-height:1;
  }
  .hero-anillo-txt span{font-size:11px; color:var(--text-muted); margin-top:4px;}
  .anillo circle:last-child{transition:stroke-dasharray .6s ease;}
  .hero-txt{flex:1; min-width:0;}
  .hero-txt h2{
    font-family:var(--font-display); font-size:22px; font-weight:700;
    letter-spacing:-.02em; margin:2px 0 6px; color:var(--text);
  }
  .hero-valor{
    margin:0; font-family:var(--font-num); font-weight:600; font-size:16px; color:var(--text);
  }
  .hero-valor span{color:var(--text-muted); font-weight:500;}
  .hero-detalle{margin:2px 0 8px; font-size:12.5px; color:var(--text-muted);}
  .hero-link{font-size:12.5px; font-weight:700; color:var(--primary-ink);}

  /* ---------- Inicio: la sesión de hoy ---------- */
  .sesion-card{
    display:flex; align-items:center; gap:14px;
    padding:18px;
    border-radius:var(--r-lg);
    background:var(--primary);
    color:var(--on-primary);
    cursor:pointer;
    margin-bottom:4px;
    box-shadow:var(--glow);
  }
  .sesion-card:active{transform:scale(.99);}
  .sesion-card .eyebrow{color:var(--on-primary); opacity:.7;}
  .sesion-txt{flex:1; min-width:0;}
  .sesion-txt h3{
    font-family:var(--font-display); font-size:21px; font-weight:700;
    letter-spacing:-.02em; margin:2px 0 2px;
  }
  .sesion-txt p{margin:0; font-size:13px; opacity:.8;}
  .sesion-meta{display:flex; gap:6px; margin-top:10px;}
  .sesion-meta span{
    font-size:11.5px; font-weight:700;
    padding:4px 9px; border-radius:999px;
    background:rgba(0,0,0,.12);
  }
  .sesion-play{
    width:52px; height:52px; flex-shrink:0;
    border-radius:50%;
    background:var(--on-primary); color:var(--primary);
    display:flex; align-items:center; justify-content:center;
  }
  .sesion-card.hecha{
    background:var(--surface); color:var(--text);
    border:1px solid var(--line); box-shadow:none;
  }
  .sesion-card.hecha .eyebrow{color:var(--text-muted); opacity:1;}
  .sesion-ico{
    width:46px; height:46px; flex-shrink:0; border-radius:50%;
    background:var(--primary); color:var(--on-primary);
    display:flex; align-items:center; justify-content:center;
  }

  /* ---------- Inicio: indicadores del día ---------- */
  .tiles{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .tile{
    display:flex; flex-direction:column; align-items:flex-start; gap:2px;
    text-align:left;
    padding:14px 14px 12px;
    border-radius:var(--r-md);
    background:var(--surface);
    border:1px solid var(--line);
    cursor:pointer;
    color:var(--text);
  }
  .tile:active{transform:scale(.98);}
  .tile-lbl{font-size:12.5px; font-weight:600; color:var(--text-muted);}
  .tile-ok{font-style:normal; color:var(--primary-ink); font-weight:800;}
  .tile-val{
    font-family:var(--font-num); font-size:24px; font-weight:700;
    letter-spacing:-.02em; margin-top:4px; line-height:1.1;
    font-variant-numeric:tabular-nums;
  }
  .tile-meta{font-size:11.5px; color:var(--text-faint);}
  .tile-barra{
    display:block; width:100%; height:5px; margin-top:10px;
    border-radius:99px; background:var(--surface-2); overflow:hidden;
  }
  .tile-barra > span{display:block; height:100%; border-radius:99px; transition:width .5s ease;}
  .tile.mal .tile-val{color:var(--danger-ink);}

  /* ---------- Inicio: semana y bloque ---------- */
  .semana-card{margin-top:12px;}
  .semana-head strong{
    display:block; font-family:var(--font-display); font-size:17px; margin-top:2px;
  }
  .semana-dias{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:14px 0 4px;}
  .dia{display:flex; flex-direction:column; align-items:center; gap:6px;}
  .dia span{font-size:11px; font-weight:600; color:var(--text-faint);}
  .dia i{
    width:100%; max-width:34px; aspect-ratio:1; border-radius:10px;
    background:var(--surface-2); border:1px solid var(--line);
  }
  .dia.hecho i{background:var(--primary); border-color:var(--primary);}
  .dia.hecho span{color:var(--text);}
  .dia.hoy i{border:2px solid var(--text-muted); background:transparent;}
  .dia.hoy span{color:var(--text);}
  .dia.futuro i{opacity:.5;}
  .bloque-linea{margin-top:14px; padding-top:14px; border-top:1px solid var(--line); cursor:pointer;}
  .bloque-txt{display:flex; justify-content:space-between; font-size:13px;}
  .bloque-txt span:first-child{font-weight:600;}
  .bloque-txt span:last-child{color:var(--text-muted);}
  .bloque-linea .tile-barra{margin-top:8px;}

  /* ---------- Inicio: atajos ---------- */
  .atajos{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
  .atajo{
    display:flex; flex-direction:column; align-items:center; gap:7px;
    padding:14px 4px 12px;
    border-radius:var(--r-md);
    background:var(--surface); border:1px solid var(--line);
    font-size:12px; font-weight:600; color:var(--text);
    cursor:pointer;
  }
  .atajo svg{width:22px; height:22px; color:var(--primary-ink);}
  .atajo:active{transform:scale(.96);}

  /* ---------- Más ---------- */
  .menu-lista{
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-md); overflow:hidden; margin-top:6px;
  }
  .menu-item{
    display:flex; align-items:center; gap:14px; width:100%;
    padding:14px 16px;
    background:none; border:none; border-top:1px solid var(--line);
    text-align:left; cursor:pointer; color:var(--text);
  }
  .menu-item:first-child{border-top:none;}
  .menu-item:active{background:var(--surface-2);}
  .menu-ico{
    width:40px; height:40px; flex-shrink:0; border-radius:12px;
    background:var(--surface-2); color:var(--text);
    display:flex; align-items:center; justify-content:center;
  }
  .menu-ico svg{width:21px; height:21px;}
  .menu-item.destacado .menu-ico{background:var(--primary); color:var(--on-primary);}
  .menu-txt{flex:1; min-width:0; display:flex; flex-direction:column;}
  .menu-txt strong{font-size:15px;}
  .menu-txt span{font-size:12.5px; color:var(--text-muted);}
  .menu-chev{font-size:22px; color:var(--text-faint); line-height:1;}

  /* ---------- Mi objetivo ---------- */
  .obj-hero{
    display:flex; gap:14px; align-items:flex-start;
    padding:18px; border-radius:var(--r-lg);
    background:var(--hero-grad); border:1px solid var(--line);
    margin-top:6px;
  }
  .obj-hero-ico{
    width:48px; height:48px; flex-shrink:0; border-radius:15px;
    background:var(--primary); color:var(--on-primary);
    display:flex; align-items:center; justify-content:center;
  }
  .obj-hero h2{
    font-family:var(--font-display); font-size:24px; font-weight:700;
    letter-spacing:-.02em; margin:2px 0 6px;
  }
  .obj-hero p{margin:0; font-size:13.5px; color:var(--text-muted); line-height:1.5;}
  .obj-resumen{
    margin-top:10px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-md); padding:4px 16px;
  }
  .obj-fila{
    display:flex; justify-content:space-between; gap:12px;
    padding:11px 0; border-top:1px solid var(--line); font-size:13.5px;
  }
  .obj-fila:first-child{border-top:none;}
  .obj-fila span{color:var(--text-muted);}
  .obj-fila strong{text-align:right; font-weight:600;}

  .obj-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .obj-card{
    position:relative;
    display:flex; flex-direction:column; align-items:flex-start; gap:4px;
    text-align:left;
    padding:14px;
    border-radius:var(--r-md);
    background:var(--surface);
    border:1.5px solid var(--line);
    cursor:pointer; color:var(--text);
    transition:border-color .15s ease, background .15s ease;
  }
  .obj-card:active{transform:scale(.98);}
  .obj-card-ico{
    width:36px; height:36px; border-radius:11px; margin-bottom:6px;
    background:var(--surface-2); color:var(--text);
    display:flex; align-items:center; justify-content:center;
  }
  .obj-card-nombre{font-family:var(--font-display); font-weight:700; font-size:15.5px;}
  .obj-card-lema{font-size:12px; color:var(--text-muted); line-height:1.35;}
  .obj-card-tag{
    position:absolute; top:12px; right:12px;
    font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
    padding:3px 8px; border-radius:99px;
    background:var(--primary); color:var(--on-primary);
  }
  .obj-card.actual{border-color:var(--primary); background:var(--primary-soft);}
  .obj-card.actual .obj-card-ico{background:var(--primary); color:var(--on-primary);}
  .obj-card.elegida{border-color:var(--accent); background:var(--accent-soft);}
  .obj-card.elegida .obj-card-ico{background:var(--accent); color:var(--on-accent);}

  .obj-confirma{
    margin-top:12px; padding:18px;
    border-radius:var(--r-lg);
    background:var(--surface); border:1.5px solid var(--accent);
    animation:fadeIn .2s ease;
  }
  .obj-confirma h3{
    font-family:var(--font-display); font-size:22px; font-weight:700;
    letter-spacing:-.02em; margin:2px 0 6px;
  }
  .obj-confirma p{margin:0 0 8px; font-size:13.5px; color:var(--text-muted);}
  .obj-para{color:var(--accent-ink) !important; font-weight:600;}
  .obj-cambios{
    margin:12px 0; padding:4px 14px;
    background:var(--surface-2); border-radius:var(--r-sm);
  }
  .obj-cambio{
    display:flex; justify-content:space-between; gap:10px;
    padding:9px 0; border-top:1px solid var(--line); font-size:13px;
  }
  .obj-cambio:first-child{border-top:none;}
  .obj-cambio > span:first-child{color:var(--text-muted);}
  .obj-cambio s{color:var(--text-faint);}
  .obj-check{
    display:flex; gap:10px; align-items:flex-start;
    font-size:13px; line-height:1.4; margin:10px 0;
    cursor:pointer;
  }
  .obj-check input{width:18px; height:18px; margin:1px 0 0; accent-color:var(--primary); flex-shrink:0;}

  /* Selector de dos opciones (calorías según objetivo / personalizado) */
  .seg{
    display:flex; gap:4px; padding:4px;
    background:var(--surface-2); border-radius:13px;
  }
  .seg button{
    flex:1; padding:10px 8px; border:none; border-radius:10px;
    background:transparent; color:var(--text-muted);
    font-size:12.5px; font-weight:600; cursor:pointer;
  }
  .seg button.on{background:var(--surface); color:var(--text); box-shadow:var(--sombra);}

  /* Número grande de calorías */
  .kcal-grande{display:flex; align-items:baseline; gap:8px; margin:14px 0 4px;}
  .kcal-grande strong{
    font-family:var(--font-num); font-size:40px; font-weight:700; letter-spacing:-.03em;
    color:var(--primary-ink); line-height:1;
  }
  .kcal-grande span{font-size:13px; color:var(--text-muted);}

  /* ---------- Acordeón ---------- */
  .accordion-item{
    border:1px solid var(--line);
    border-radius:var(--r-md);
    margin-bottom:8px;
    overflow:hidden;
    background:var(--card);
  }
  .accordion-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:15px 16px;
    cursor:pointer;
    font-family:var(--font-display);
    font-weight:600;
    font-size:15px;
    color:var(--text);
  }
  .accordion-head .chev{transition:transform .2s ease; font-size:12px; color:var(--text-muted);}
  .accordion-item.open .chev{transform:rotate(180deg);}
  .accordion-body{
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
    padding:0 16px;
  }
  .accordion-item.open .accordion-body{padding:0 16px 14px;}
  .meal-row{display:flex; gap:12px; padding:9px 0; border-top:1px solid var(--line);}
  .meal-row:first-child{border-top:none;}
  .meal-tag{
    font-size:11.5px; font-weight:700;
    color:var(--primary-ink);
    width:86px; flex-shrink:0;
    padding-top:1px;
  }
  .meal-txt{font-size:13.5px; line-height:1.5; color:var(--ink);}

  /* ---------- Pestañas internas (Entreno, Calorías) ---------- */
  .tabbar{
    display:flex; gap:4px; margin-bottom:14px; padding:4px;
    background:var(--surface-2); border-radius:13px;
    overflow-x:auto; scrollbar-width:none;
  }
  .tabbar::-webkit-scrollbar{display:none;}
  .tab{
    flex:1;
    text-align:center;
    padding:9px 10px;
    border-radius:10px;
    background:transparent;
    border:none;
    font-size:13px; font-weight:600;
    color:var(--ink-soft);
    cursor:pointer;
    white-space:nowrap;
  }
  .tab.active{background:var(--surface); color:var(--text); box-shadow:var(--sombra);}
  #accesoTabs .tab.active, .acceso-box .tab.active{background:var(--card);}

  /* ---------- Tarjeta de ejercicio ---------- */
  .ex-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    padding:14px 16px;
    margin-bottom:10px;
  }
  .ex-card .ex-head{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
  .ex-card h4{
    font-family:var(--font-display);
    font-weight:600;
    font-size:15.5px;
    margin:0;
    flex:1;
  }
  .ex-card .ex-group{font-size:12px; color:var(--ink-soft); margin-top:2px;}
  .ex-target{
    font-family:var(--font-num);
    font-size:12.5px; font-weight:700;
    color:var(--on-primary-soft);
    background:var(--pine-tint);
    padding:4px 9px;
    border-radius:99px;
    white-space:nowrap;
  }
  .set-grid{margin-top:12px; display:flex; flex-direction:column; gap:6px;}
  .set-row{
    display:flex; align-items:center; gap:6px;
    background:var(--surface-2); border-radius:11px;
    padding:6px 8px;
  }
  .set-row .set-label{
    font-family:var(--font-num); font-size:12px; font-weight:700;
    color:var(--ink-soft); width:22px; flex-shrink:0;
  }
  .set-row input[type=number]{
    flex:1; min-width:0;
    padding:9px 4px;
    text-align:center;
    border:1px solid var(--line);
    border-radius:9px;
    font-family:var(--font-num);
    font-size:14px; font-weight:600;
    background:var(--surface);
    color:var(--ink);
  }
  .set-row input[type=number]:focus{outline:none; border-color:var(--primary);}
  .set-row input[type=number]:disabled{background:var(--paper-alt); color:var(--ink-soft);}
  .set-row input::placeholder{color:var(--ink-soft); opacity:.6; font-weight:500;}
  .set-row .bw-toggle{
    display:flex; align-items:center; gap:4px; flex-shrink:0;
    font-size:10.5px; color:var(--ink-soft); font-weight:600;
    cursor:pointer; user-select:none;
  }
  .set-row .bw-toggle input{width:15px; height:15px; accent-color:var(--accent); margin:0;}
  .ex-log{display:flex; gap:8px; margin-top:12px; align-items:center;}
  .ex-log input[type=number]{
    width:64px;
    padding:8px;
    border:1px solid var(--line);
    border-radius:9px;
    font-family:var(--font-num);
    font-size:13px;
    background:var(--surface);
    color:var(--ink);
  }
  .ex-log .last{font-size:11.5px; color:var(--ink-soft); flex:1;}
  .ex-log button{
    padding:9px 14px;
    border-radius:10px;
    border:none;
    background:var(--primary);
    color:var(--on-primary);
    font-size:12.5px; font-weight:700;
    cursor:pointer;
  }
  .delta{font-weight:700;}
  .delta.up{color:var(--primary-ink);}
  .delta.down{color:var(--danger-ink);}
  .delta.flat{color:var(--ink-soft);}
  .hist-toggle{
    margin-top:10px; font-size:12px; font-weight:600;
    color:var(--primary-ink); cursor:pointer;
    display:flex; align-items:center; gap:4px;
  }
  .hist-toggle .chev{font-size:10px; transition:transform .2s ease;}
  .hist-toggle.open .chev{transform:rotate(180deg);}
  .hist-panel{max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .hist-row{
    display:flex; justify-content:space-between; gap:8px;
    font-family:var(--font-num); font-size:11.5px;
    color:var(--ink-soft);
    padding:6px 0; border-top:1px dashed var(--line);
  }
  .hist-row:first-child{border-top:1px solid var(--line); margin-top:8px;}
  .hist-row .hw{color:var(--ink); font-weight:600;}

  /* Aviso de antecedentes arriba de la sesión */
  .knee-note{
    background:var(--danger-soft);
    border:1px solid var(--danger);
    border-radius:var(--r-sm);
    padding:12px 14px;
    font-size:12.5px;
    color:var(--on-danger-soft);
    line-height:1.45;
    margin-bottom:14px;
  }
  /* Rutina base: invitación a armar la propia */
  .entreno-cta{
    display:flex; align-items:center; gap:12px;
    padding:14px 16px; margin-bottom:14px;
    border-radius:var(--r-md);
    background:var(--accent-soft); border:1px solid var(--accent);
  }
  .entreno-cta > div{flex:1; display:flex; flex-direction:column; gap:2px;}
  .entreno-cta strong{color:var(--on-accent-soft); font-size:14px;}
  .entreno-cta span{color:var(--on-accent-soft); font-size:12.5px; opacity:.9;}
  .entreno-cta .btn{background:var(--accent); color:var(--on-accent); flex-shrink:0;}

  /* ---------- Formularios ---------- */
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .form-grid label, .lbl{
    font-size:12.5px; font-weight:600; text-transform:none; letter-spacing:0;
    color:var(--ink-soft); display:block; margin-bottom:6px;
  }
  .form-grid input, .form-grid textarea, .form-grid select,
  #miRutinaBody select, .view input[type=date], .view select{
    width:100%;
    padding:12px 12px;
    border:1px solid var(--line);
    border-radius:12px;
    font-family:var(--font-body);
    font-size:15px;
    background:var(--surface-2);
    color:var(--ink);
  }
  .form-grid input:focus, .form-grid select:focus, .view select:focus, .view input[type=date]:focus{
    outline:none; border-color:var(--primary); background:var(--surface);
  }
  .form-grid .full{grid-column:1/3;}

  .log-entry{
    display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding:11px 0; border-top:1px solid var(--line);
    font-size:13.5px;
  }
  .log-entry:first-child{border-top:none;}
  .log-entry .d{font-family:var(--font-num); font-size:12px; color:var(--ink-soft); width:80px;}
  .log-entry .w{font-weight:600;}

  /* ---------- Compras ---------- */
  .shop-cat{
    font-size:12px; font-weight:700; letter-spacing:.04em;
    color:var(--text-muted); background:none;
    padding:0 4px; margin:18px 0 8px;
  }
  .shop-list{border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); overflow:hidden;}
  .shop-row{
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; border-top:1px solid var(--line);
    font-size:14px;
  }
  .shop-row:first-child{border-top:none;}
  .shop-row input{width:19px; height:19px; accent-color:var(--primary);}
  .shop-row .qty{margin-left:auto; font-family:var(--font-num); font-size:12px; color:var(--ink-soft);}
  .shop-row.checked .name{text-decoration:line-through; color:var(--ink-soft);}

  /* ---------- Barra de navegación ---------- */
  .navbar{
    position:fixed; left:50%; transform:translateX(-50%);
    bottom:calc(10px + env(safe-area-inset-bottom));
    width:calc(100% - 24px); max-width:456px;
    background:var(--barra-blur);
    -webkit-backdrop-filter:saturate(1.4) blur(18px);
    backdrop-filter:saturate(1.4) blur(18px);
    border:1px solid var(--line);
    border-radius:24px;
    display:flex;
    padding:6px;
    z-index:30;
    box-shadow:var(--sombra-fuerte);
  }
  .navbtn{
    flex:1;
    min-width:0;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:8px 2px 7px; background:none; border:none; cursor:pointer;
    color:var(--text-faint);
    border-radius:18px;
    transition:color .15s ease, background .15s ease;
  }
  .navbtn.active{color:var(--on-primary); background:var(--primary);}
  .navbtn svg{width:22px; height:22px;}
  .navbtn span{
    font-size:10.5px; font-weight:700;
    white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
  }

  .imc-cat{
    font-family:var(--font-display); font-weight:700; font-size:18px;
  }

  .save-toast{
    position:fixed; left:50%; transform:translateX(-50%) translateY(8px);
    bottom:calc(var(--navbar-h, 84px) + 26px + env(safe-area-inset-bottom));
    background:var(--text); color:var(--bg);
    padding:10px 18px; border-radius:99px;
    font-size:13px; font-weight:600;
    opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
    z-index:40;
    box-shadow:var(--sombra-fuerte);
  }
  .save-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  svg.chart{width:100%; height:150px;}

  /* ---------- Recuperación (cortisol) ---------- */
  .cort-field{margin-top:16px;}
  .cort-label{display:flex; justify-content:space-between; align-items:center; font-size:13.5px; font-weight:600; margin-bottom:8px;}
  .cort-label .cort-val{
    font-family:var(--font-num); font-size:14px; font-weight:700; color:var(--on-primary-soft);
    background:var(--pine-tint); border-radius:8px; padding:2px 10px;
  }
  .cort-range{
    width:100%; -webkit-appearance:none; appearance:none;
    height:6px; border-radius:4px; background:var(--surface-2); outline:none;
  }
  .cort-range::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:24px; height:24px; border-radius:50%;
    background:var(--primary); border:3px solid var(--surface);
    box-shadow:var(--sombra); cursor:pointer;
  }
  .cort-range::-moz-range-thumb{
    width:24px; height:24px; border-radius:50%;
    background:var(--primary); border:3px solid var(--surface); cursor:pointer;
  }
  .cort-scale{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-soft); margin-top:4px;}

  .pat-row{
    display:flex; gap:10px; align-items:flex-start;
    padding:11px 0; border-top:1px solid var(--line); font-size:13px; line-height:1.5;
  }
  .pat-row:first-child{border-top:none;}
  .pat-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-top:5px;}

  /* ---------- Veredicto (Tendencias, Recuperación) ---------- */
  .verdict{
    border-radius:var(--r-lg); padding:18px; margin:6px 0 12px;
    border:1px solid;
  }
  .verdict .v-tag{
    font-size:11.5px; font-weight:700;
    letter-spacing:.04em; text-transform:uppercase; opacity:.85;
  }
  .verdict h3{
    font-family:var(--font-display); font-weight:700; font-size:21px;
    letter-spacing:-.02em; margin:4px 0 6px; line-height:1.2;
  }
  .verdict p{margin:0; font-size:13.5px; line-height:1.5;}
  .verdict.good{background:var(--primary-soft); border-color:var(--primary); color:var(--on-primary-soft);}
  .verdict.warn{background:var(--warn-soft); border-color:var(--warn); color:var(--on-warn-soft);}
  .verdict.bad{background:var(--danger-soft); border-color:var(--danger); color:var(--on-danger-soft);}
  .verdict.neutral{background:var(--surface); border-color:var(--border); color:var(--text);}

  .adh-row{padding:10px 0; border-top:1px solid var(--line);}
  .adh-row:first-child{border-top:none;}
  .adh-head{display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px;}
  .adh-head .adh-val{font-family:var(--font-num); font-weight:700;}
  .adh-bar{height:7px; background:var(--surface-2); border-radius:99px; overflow:hidden;}
  .adh-fill{height:100%; border-radius:99px; transition:width .3s ease;}

  .ritmo-row{display:flex; justify-content:space-between; gap:10px; padding:10px 0; font-size:13.5px; border-top:1px solid var(--line);}
  .ritmo-row:first-child{border-top:none;}
  .ritmo-row .r-val{font-family:var(--font-num); font-weight:700; text-align:right;}

  /* ---------- Fotos ---------- */
  .photo-upload-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;}
  .photo-slot{position:relative;}
  .photo-slot input[type=file]{
    position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;
  }
  .photo-preview{
    aspect-ratio:3/4;
    background:var(--surface-2);
    border:1.5px dashed var(--border-strong);
    border-radius:var(--r-sm);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    font-size:12px; font-weight:600; color:var(--ink-soft);
    text-align:center; padding:4px;
  }
  .photo-preview img{width:100%; height:100%; object-fit:cover;}
  .photo-preview.filled{border-style:solid; border-color:var(--primary);}

  .reminder-banner{
    border-radius:var(--r-md); padding:14px 16px; margin:6px 0 12px;
    display:flex; align-items:center; gap:12px;
  }
  .reminder-banner.due{background:var(--danger-soft); border:1px solid var(--danger);}
  .reminder-banner.ok{background:var(--primary-soft); border:1px solid var(--primary);}
  .reminder-banner .rb-title{font-family:var(--font-display); font-weight:700; font-size:15px;}
  .reminder-banner.due .rb-title{color:var(--on-danger-soft);}
  .reminder-banner.ok .rb-title{color:var(--on-primary-soft);}
  .reminder-banner p{margin:2px 0 0; font-size:12.5px; color:var(--ink-soft);}

  .compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .compare-col img{width:100%; border-radius:var(--r-sm); aspect-ratio:3/4; object-fit:cover; background:var(--surface-2);}
  .compare-col .cc-label{font-size:12px; text-align:center; color:var(--ink-soft); margin-top:6px; font-weight:600;}

  .photo-session-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
    padding:14px; margin-bottom:10px;
  }
  .photo-session-card .ps-head{
    display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;
  }
  .photo-session-thumbs{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;}
  .photo-session-thumbs img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:8px; background:var(--surface-2);}
  .ps-delete{
    font-size:12px; color:var(--danger-ink); background:none; border:none;
    cursor:pointer; font-weight:600; padding:0;
  }

  .check-item{
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 0; border-top:1px solid var(--line);
    font-size:14px;
  }
  .check-item:first-child{border-top:none;}
  .check-item label{display:flex; align-items:center; gap:10px; cursor:pointer;}
  .check-item input[type=checkbox]{width:20px; height:20px; accent-color:var(--primary);}
  .stepper{display:flex; align-items:center; gap:12px;}
  .stepper button{
    width:34px; height:34px; border-radius:50%;
    border:none; background:var(--primary);
    color:var(--on-primary); font-size:18px; font-weight:700;
    cursor:pointer; line-height:1;
  }
  .stepper span{
    font-family:var(--font-num); font-weight:700; font-size:16px;
    min-width:18px; text-align:center;
  }

  .week-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:11px 12px; border-radius:var(--r-sm);
    background:var(--surface-2);
    margin-bottom:6px; font-size:13px;
  }
  .week-row.empty{background:var(--danger-soft); color:var(--on-danger-soft);}
  .week-row .wk-label{font-family:var(--font-num); font-weight:700;}
  .week-row .wk-range{color:var(--text-muted); font-size:11.5px;}
  .week-row.empty .wk-range{color:var(--on-danger-soft);}

  .session-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
    padding:14px 16px; margin-bottom:10px;
  }
  .session-card .s-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
  .session-card .s-date{font-family:var(--font-display); font-weight:600; font-size:15px;}
  .chip-row{display:flex; flex-wrap:wrap; gap:6px;}
  .chip{
    font-size:12px;
    background:var(--surface-2); color:var(--ink);
    padding:5px 10px; border-radius:99px;
  }

  /* ---------- PWA: banner de actualización / instalación ---------- */
  .pwa-banner{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 12px 12px 16px;
    background:var(--accent-soft);
    border-bottom:1px solid var(--accent);
    color:var(--on-accent-soft);
    font-size:13.5px;
    line-height:1.35;
  }
  .pwa-banner > span{flex:1; min-width:0;}
  .pwa-banner-btn{
    flex-shrink:0;
    font-weight:700;
    font-size:13px;
    color:var(--on-accent);
    background:var(--accent);
    border:none;
    border-radius:10px;
    padding:8px 14px;
    cursor:pointer;
  }
  .pwa-banner-btn:active{transform:translateY(1px);}
  .pwa-banner-x{
    flex-shrink:0;
    width:28px; height:28px;
    display:flex; align-items:center; justify-content:center;
    font-size:19px;
    line-height:1;
    color:var(--on-accent-soft);
    background:none;
    border:none;
    border-radius:8px;
    cursor:pointer;
  }

  /* ---------- Pantalla de acceso ---------- */
  /* Se muestra solo cuando 00-sesion.js marca <html data-acceso="pendiente">. */
  .acceso{display:none;}
  html[data-acceso="pendiente"] .acceso{
    display:flex;
    position:fixed; inset:0; z-index:100;
    align-items:center; justify-content:center;
    padding:24px 18px;
    overflow-y:auto;
    background:var(--bg);
  }
  html[data-acceso="pendiente"] body{overflow:hidden;}
  html[data-acceso="pendiente"] #app{display:none;}

  .acceso-box{
    width:100%;
    max-width:380px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    padding:28px 22px 22px;
    box-shadow:var(--sombra-fuerte);
  }
  .acceso-mark{
    width:56px; height:56px;
    margin:0 auto 16px;
    border-radius:17px;
    background:var(--primary);
    color:var(--on-primary);
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--glow);
  }
  .acceso-mark svg{width:30px; height:30px;}
  .acceso-title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:26px;
    letter-spacing:-.02em;
    text-align:center;
    margin:0;
    color:var(--ink);
  }
  .acceso-sub{
    text-align:center;
    font-size:13.5px;
    color:var(--ink-soft);
    margin:6px 0 20px;
    line-height:1.5;
  }
  #accesoTabs{margin-bottom:16px;}
  .acceso-box .field{margin-bottom:12px;}
  .acceso-box .field label{
    display:block;
    margin-bottom:6px;
    font-size:12.5px; font-weight:600;
    color:var(--ink-soft);
  }
  .acceso-box .field input{
    width:100%;
    padding:13px 14px;
    border:1px solid var(--line);
    border-radius:12px;
    font-family:var(--font-body);
    font-size:16px; /* iOS hace zoom al enfocar si baja de 16px */
    background:var(--surface-2);
    color:var(--ink);
  }
  .acceso-box .field input:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px var(--primary-soft);
  }
  .acceso-box .field[hidden]{display:none;}
  .acceso-msg{
    min-height:16px;
    margin:2px 0 10px;
    font-size:12.5px;
    line-height:1.4;
    color:var(--danger-ink);
  }
  .acceso-msg.ok{color:var(--primary-ink);}
  .acceso-link{
    display:block;
    width:100%;
    margin-top:12px;
    padding:6px 0;
    background:none;
    border:none;
    font-size:13px;
    color:var(--ink-soft);
    text-decoration:underline;
    text-underline-offset:3px;
    cursor:pointer;
  }
  .acceso-link.fuerte{
    color:var(--primary-ink);
    font-weight:700;
    font-size:14px;
    text-decoration:none;
  }
  .acceso-sep{
    position:relative;
    text-align:center;
    margin:16px 0 4px;
  }
  .acceso-sep::before{
    content:"";
    position:absolute; left:0; right:0; top:50%;
    border-top:1px solid var(--line);
  }
  .acceso-sep span{
    position:relative;
    background:var(--surface);
    padding:0 10px;
    font-size:12px;
    color:var(--ink-soft);
  }
  .acceso-nota{
    margin:12px 0 0;
    font-size:12px;
    line-height:1.5;
    color:var(--ink-soft);
    text-align:center;
  }

  /* Estado de la cuenta */
  .cuenta-fila{display:flex; align-items:center; gap:10px;}
  .cuenta-punto{
    width:9px; height:9px; border-radius:50%;
    flex-shrink:0;
    background:var(--ink-soft);
  }
  .cuenta-punto.online{background:var(--primary);}
  .cuenta-punto.offline{background:var(--danger);}

  /* ---------- MI RUTINA (generador) ---------- */
  .mr-sub{
    font-size:11.5px; font-weight:700;
    letter-spacing:.04em; text-transform:uppercase;
    color:var(--ink-soft); margin:0 0 6px;
  }
  .mr-chips{display:flex; flex-wrap:wrap; gap:6px;}
  .mr-chip{
    display:inline-flex; align-items:center;
    border:1.5px solid var(--line); border-radius:999px;
    padding:7px 12px; font-size:12.5px; background:var(--surface-2);
    cursor:pointer; user-select:none;
  }
  .mr-chip.on{
    background:var(--pine-tint); border-color:var(--primary);
    color:var(--on-primary-soft); font-weight:600;
  }
  .mr-chip input{display:none;}
  /* El selector de tema usa los mismos chips, pero como botones */
  #temaSelector .mr-chip{color:var(--text);}
  #temaSelector .mr-chip.on{color:var(--on-primary-soft);}

  .mr-ej{border-top:1px solid var(--line);}
  .mr-ej:first-of-type{border-top:0;}
  .mr-ej-head{
    display:flex; align-items:center; gap:10px;
    padding:12px 0; cursor:pointer;
  }
  .mr-n{
    font-family:var(--font-num); font-size:12px; font-weight:700;
    color:var(--ink-soft); width:18px; flex-shrink:0;
  }
  .mr-nombre{flex:1; font-size:14px; font-weight:600; line-height:1.3;}
  .mr-dosis{
    font-family:var(--font-num); font-size:12.5px; font-weight:700;
    color:var(--on-primary-soft); background:var(--pine-tint);
    padding:3px 8px; border-radius:99px;
    white-space:nowrap;
  }
  .mr-ej .chev{
    font-size:11px; color:var(--ink-soft);
    transition:transform .2s; flex-shrink:0;
  }
  .mr-ej.open .chev{transform:rotate(180deg);}
  .mr-detalle{max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .mr-ej.open .mr-detalle{padding-bottom:12px;}
  .mr-clave{
    background:var(--pine-tint); border-left:3px solid var(--primary);
    padding:9px 12px; font-size:12.5px; color:var(--on-primary-soft);
    border-radius:0 8px 8px 0;
  }

  /* ---------- TEMPORIZADOR DE DESCANSO ---------- */
  .ex-log .btn-descanso{
    background:var(--surface-2);
    color:var(--text);
    border:1px solid var(--line);
    font-family:var(--font-num);
    white-space:nowrap;
  }
  .ex-log .btn-descanso:active{background:var(--pine-tint);}

  /* Flota sobre la navegación: mientras dura el descanso es lo más
     importante de la pantalla, y tiene que verse desde cualquier vista.
     Va en el color opuesto al fondo para que salte en los dos temas. */
  .descanso-barra{
    position:fixed;
    left:50%; transform:translateX(-50%) translateY(160%);
    bottom:calc(var(--navbar-h, 84px) + 22px + env(safe-area-inset-bottom));
    width:min(456px, calc(100vw - 24px));
    background:var(--text);
    color:var(--bg);
    border-radius:18px;
    box-shadow:var(--sombra-fuerte);
    overflow:hidden;
    z-index:40;
    transition:transform .25s ease;
  }
  .descanso-barra.visible{transform:translateX(-50%) translateY(0);}
  .descanso-barra.listo{background:var(--primary); color:var(--on-primary);}

  .descanso-progreso{
    position:absolute; inset:0 auto 0 0;
    background:var(--primary);
    opacity:.35;
    transition:width .25s linear;
  }
  .descanso-barra.listo .descanso-progreso{opacity:0;}
  .descanso-fila{
    position:relative;
    display:flex; align-items:center; gap:9px;
    padding:11px 12px;
  }
  .descanso-num{
    font-family:var(--font-num);
    font-size:26px; font-weight:700;
    min-width:56px; line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .descanso-txt{
    flex:1; font-size:11px; line-height:1.3;
    text-transform:uppercase; letter-spacing:.05em; opacity:.75; font-weight:700;
  }
  .descanso-txt span{
    display:block; text-transform:none; letter-spacing:0; font-weight:500;
    font-size:12px; opacity:.9;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    max-width:22ch;
  }
  .descanso-btn{
    background:rgba(127,127,127,.2);
    border:0; color:inherit;
    border-radius:10px;
    padding:8px 9px;
    font-family:var(--font-num);
    font-size:12.5px; font-weight:700;
    cursor:pointer; flex-shrink:0;
    min-width:38px;
  }
  .descanso-btn:active{background:rgba(127,127,127,.35);}
  .descanso-btn.cerrar{font-size:14px; min-width:32px;}

  .lbl{display:block;}
  .hint{margin:6px 0 0; font-size:12px; color:var(--ink-soft); line-height:1.45;}

  /* Pantallas angostas (iPhone SE, Android viejos) */
  @media (max-width: 360px){
    .hero{gap:12px; padding:14px;}
    .hero-anillo{transform:scale(.88); margin:-6px;}
    .navbtn span{font-size:9.5px;}
    .tile-val{font-size:21px;}
    .atajo{font-size:11px;}
  }

  /* ---------- BIENVENIDA (primera vez) ---------- */
  /* La pinta js/28-bienvenida.js. Cubre toda la pantalla y no se puede
     cerrar: sin estos datos, lo demás de la app no tiene con qué calcular. */
  html.con-bienvenida body{overflow:hidden;}
  .bv{
    position:fixed; inset:0; z-index:90;
    background:var(--bg);
    overflow-y:auto;
    display:flex; justify-content:center;
    padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  }
  .bv-caja{
    width:100%; max-width:440px;
    display:flex; flex-direction:column;
    min-height:100%;
    animation:fadeIn .25s ease;
  }
  .bv-centro{justify-content:center; text-align:center;}
  .bv-top{
    display:grid; grid-template-columns:40px 1fr 40px; align-items:center;
    min-height:40px; margin-bottom:12px;
  }
  .bv-atras{
    width:40px; height:40px; margin-left:-8px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; border-radius:12px; cursor:pointer; color:var(--text);
  }
  .bv-atras:active{background:var(--surface-2);}
  .bv-progreso{display:flex; gap:6px; justify-content:center;}
  .bv-progreso i{
    display:block; width:28px; height:5px; border-radius:99px;
    background:var(--surface-2); transition:background .2s ease;
  }
  .bv-progreso i.on{background:var(--primary);}
  .bv-cuerpo{flex:1;}

  .bv-hero{display:flex; justify-content:center; margin:24px 0 20px;}
  .bv-centro .bv-hero{margin-top:0;}
  .bv-logo{
    width:84px; height:84px; border-radius:26px;
    background:var(--primary); color:var(--on-primary);
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--glow);
    margin:0 auto;
  }
  .bv-logo svg{width:44px; height:44px;}
  .bv-titulo{
    font-family:var(--font-display); font-size:32px; font-weight:700;
    letter-spacing:-.03em; line-height:1.1;
    margin:0 0 10px; text-align:center; color:var(--text);
  }
  .bv-h2{
    font-family:var(--font-display); font-size:27px; font-weight:700;
    letter-spacing:-.02em; line-height:1.15; margin:8px 0 6px; color:var(--text);
  }
  .bv-sub{font-size:15px; color:var(--text-muted); line-height:1.5; margin:0 0 22px; text-align:center;}
  .bv-sub.izq{text-align:left;}

  .bv-lista{list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:10px;}
  .bv-lista li{
    display:flex; gap:14px; align-items:flex-start;
    padding:14px 16px; border-radius:var(--r-md);
    background:var(--surface); border:1px solid var(--line);
    font-size:13.5px; color:var(--text-muted); line-height:1.4;
  }
  .bv-lista li span{
    width:28px; height:28px; flex-shrink:0; border-radius:50%;
    background:var(--primary-soft); color:var(--primary-ink);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-num); font-weight:700; font-size:14px;
  }
  .bv-lista strong{display:block; color:var(--text); font-size:15px; margin-bottom:1px;}
  .bv-nota{font-size:12.5px; color:var(--text-faint); text-align:center; margin:0 0 16px;}

  .bv-campo{margin-bottom:16px;}
  .bv-lbl{display:block; font-size:13px; font-weight:600; color:var(--text-muted); margin-bottom:8px;}
  .bv-campo input{
    width:100%; padding:15px 16px;
    border:1.5px solid var(--line); border-radius:14px;
    background:var(--surface); color:var(--text);
    font-family:var(--font-num); font-size:20px; font-weight:600;
  }
  .bv-campo input[type=text]{font-family:var(--font-body); font-size:17px; font-weight:500;}
  .bv-campo input:focus{outline:none; border-color:var(--primary);}
  .bv-campo input::placeholder{color:var(--text-faint); font-weight:500; font-size:16px;}
  .bv-par{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .bv-ayuda{font-size:12.5px; color:var(--text-faint); line-height:1.5; margin:-6px 0 16px;}

  .bv-opciones{display:flex; flex-direction:column; gap:8px; margin-bottom:16px;}
  .bv-opciones.dos{flex-direction:row;}
  .bv-opciones.dos .bv-op{flex:1;}
  .bv-op{
    display:flex; align-items:center; gap:12px;
    width:100%; text-align:left;
    padding:14px 16px; border-radius:14px;
    background:var(--surface); border:1.5px solid var(--line);
    cursor:pointer; color:var(--text);
    transition:border-color .15s ease, background .15s ease;
  }
  .bv-op:active{transform:scale(.99);}
  .bv-op-txt{flex:1; display:flex; flex-direction:column; gap:2px;}
  .bv-op-txt strong{font-size:15px;}
  .bv-op-txt span{font-size:12.5px; color:var(--text-muted);}
  .bv-op-check{
    width:22px; height:22px; flex-shrink:0; border-radius:50%;
    border:2px solid var(--border-strong);
  }
  .bv-op.on{border-color:var(--primary); background:var(--primary-soft);}
  .bv-op.on .bv-op-check{border:6px solid var(--primary);}
  .bv-op-ico{
    width:40px; height:40px; flex-shrink:0; border-radius:12px;
    background:var(--surface-2); color:var(--text);
    display:flex; align-items:center; justify-content:center;
  }
  .bv-op.on .bv-op-ico{background:var(--primary); color:var(--on-primary);}

  .bv-plan-obj{
    display:flex; align-items:center; gap:14px;
    padding:14px 16px; border-radius:var(--r-md);
    background:var(--hero-grad); border:1px solid var(--line);
    margin-bottom:10px;
  }
  .bv-plan-obj .bv-op-ico{background:var(--primary); color:var(--on-primary); width:44px; height:44px;}
  .bv-plan-obj strong{font-family:var(--font-display); font-size:20px;}
  .bv-numeros{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:18px;}
  .bv-num{
    padding:12px 10px; border-radius:var(--r-md);
    background:var(--surface); border:1px solid var(--line);
    display:flex; flex-direction:column; gap:2px;
  }
  .bv-num strong{font-family:var(--font-num); font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.2;}
  .bv-num span{font-size:11.5px; color:var(--text-muted);}

  .bv-error{min-height:18px; margin:4px 0 8px; font-size:13px; color:var(--danger-ink); font-weight:600;}
  .bv-siguiente{position:sticky; bottom:0; margin-top:4px;}
  .bv-logo.listo{background:var(--primary);}
  .bv-final-botones{display:flex; flex-direction:column; gap:10px; margin-top:8px;}

  /* ---------- Registro por tiempo (plancha, plancha lateral...) ---------- */
  .modo-reg{
    display:inline-flex; gap:2px; padding:3px; margin-top:10px;
    background:var(--surface-2); border-radius:10px;
  }
  .modo-reg button{
    border:none; background:transparent; cursor:pointer;
    padding:6px 12px; border-radius:8px;
    font-size:12px; font-weight:700; color:var(--text-muted);
  }
  .modo-reg button.on{background:var(--surface); color:var(--text); box-shadow:var(--sombra);}
  .set-seg-wrap{flex:1; min-width:0; position:relative; display:flex;}
  .set-row .set-seg{
    width:100%; min-width:0;
    padding:9px 18px 9px 4px;
    text-align:center;
    border:1px solid var(--line); border-radius:9px;
    font-family:var(--font-num); font-size:14px; font-weight:600;
    background:var(--surface); color:var(--ink);
  }
  .set-row .set-seg:focus{outline:none; border-color:var(--primary);}
  .set-row .set-seg::placeholder{color:var(--ink-soft); opacity:.6; font-weight:500;}
  .set-seg-wrap i{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    font-style:normal; font-family:var(--font-num); font-weight:700;
    color:var(--text-muted); pointer-events:none;
  }

  /* ---------- Cronómetro de serie ---------- */
  .set-row .set-seg{padding-right:34px;}
  .set-crono{
    position:absolute; right:4px; top:50%; transform:translateY(-50%);
    width:28px; height:28px; border-radius:8px; border:none; cursor:pointer;
    background:var(--primary); color:var(--on-primary);
    display:flex; align-items:center; justify-content:center;
  }
  .set-crono:active{transform:translateY(-50%) scale(.92);}
  .set-row.cronometrando{background:var(--primary-soft); outline:1.5px solid var(--primary);}
  .set-row.cronometrando .set-seg{color:var(--primary-ink); font-size:16px; font-weight:700;}
  .set-row.cronometrando .set-crono{background:var(--danger); color:var(--on-danger);}
  .set-row.preparando .set-seg{color:var(--accent-ink);}
  .set-row.en-meta{background:var(--primary); outline-color:var(--primary);}
  .set-row.en-meta .set-seg{background:var(--on-primary); color:var(--primary); border-color:transparent;}
  .set-row.en-meta .set-label, .set-row.en-meta .bw-toggle{color:var(--on-primary);}

  /* ---------- Notas ---------- */
  .ex-nota{
    display:flex; align-items:center; gap:8px;
    margin-top:8px; padding:0 4px 0 10px;
    border:1px dashed var(--border-strong); border-radius:11px;
    color:var(--text-faint);
  }
  .ex-nota:focus-within{border-style:solid; border-color:var(--primary); color:var(--primary-ink);}
  .set-nota{
    flex:1; min-width:0; border:none; background:transparent;
    padding:10px 0; font-family:var(--font-body); font-size:13.5px; color:var(--text);
  }
  .set-nota:focus{outline:none;}
  .set-nota::placeholder{color:var(--text-faint);}
  .set-nota.heredada{color:var(--text-muted); font-style:italic;}
  .hist-nota{font-size:12px; color:var(--text-muted); font-style:italic; padding:0 0 6px;}
  .sesion-nota{
    margin:10px 0 0 !important; padding:10px 12px; border-radius:10px;
    background:var(--surface-2); font-size:13px !important; color:var(--text) !important;
    white-space:pre-wrap;
  }
  .nota-sesion{
    width:100%; margin-top:2px; padding:11px 12px;
    border:1px solid var(--line); border-radius:12px;
    background:var(--surface-2); color:var(--text);
    font-family:var(--font-body); font-size:14px; line-height:1.45; resize:vertical;
  }
  .nota-sesion:focus{outline:none; border-color:var(--primary); background:var(--surface);}
  .link-nota{
    display:block; margin-top:10px; padding:0; border:none; background:none; cursor:pointer;
    font-size:13px; font-weight:700; color:var(--primary-ink);
  }

  /* La nota del ejercicio pasó de una línea a un cuadro con título: no
     se veía, y sirve para frases enteras ("lo hice con mancuernas de
     12,5 kg cada una"). Estas reglas pisan las de arriba. */
  .ex-nota{
    display:block; margin-top:12px; padding:10px 12px 8px;
    border:1px dashed var(--border-strong); border-radius:12px;
    background:var(--surface-2); color:var(--text-muted); cursor:text;
  }
  .ex-nota:focus-within{border-style:solid; border-color:var(--primary); background:var(--surface);}
  .ex-nota-tit{
    display:flex; align-items:center; gap:6px;
    font-size:12px; font-weight:700; color:var(--text-muted);
  }
  .ex-nota-tit em{font-weight:500; color:var(--text-faint);}
  .ex-nota:focus-within .ex-nota-tit{color:var(--primary-ink);}
  .set-nota{
    display:block; width:100%; margin-top:4px; padding:4px 0;
    border:none; background:transparent; resize:none;
    font-family:var(--font-body); font-size:14px; line-height:1.45; color:var(--text);
  }
  .bv-restaurar{
    display:block; width:100%; margin:0 0 14px; padding:10px;
    border:none; background:none; cursor:pointer;
    font-size:13.5px; font-weight:700; color:var(--primary-ink);
    text-decoration:underline; text-underline-offset:3px;
  }