/* Mi Pulso — portal de socios (se carga después de pulso.css) */
body.app-body{background:var(--negro)}

/* ---------- ingreso ---------- */
.ingreso{min-height:100svh;display:grid;grid-template-columns:1.1fr .9fr}
.ingreso .lado-foto{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:40px}
.ingreso .lado-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ingreso .lado-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,13,.5),rgba(12,12,13,.85))}
.ingreso .lado-foto>*{position:relative;z-index:1}
.ingreso .lado-foto h2{font-size:clamp(56px,7vw,110px);max-width:8ch}
.ingreso .lado-foto h2 span{color:var(--rojo)}
.ingreso .caja{display:grid;place-items:center;padding:40px 24px}
.ingreso form{width:100%;max-width:380px}
.ingreso h1{font-size:64px}
.ingreso p.sub{color:var(--gris-2);margin:8px 0 34px}
.ingreso .volver{display:inline-block;color:var(--gris);margin-bottom:48px;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.1em}
.ingreso .volver:hover{color:var(--rojo)}
.campo-m{display:grid;gap:8px;margin-bottom:22px}
.campo-m>span{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gris-2)}
.tel-in{display:flex;border:1px solid var(--linea);background:var(--negro-2)}
.tel-in b{padding:15px 14px;border-right:1px solid var(--linea);color:var(--gris-2);font-weight:600}
.tel-in input{flex:1;background:none;border:0;padding:15px;font-size:18px;font-weight:600;letter-spacing:.06em;min-width:0}
.tel-in input:focus{outline:none}
.tel-in:focus-within{border-color:var(--rojo)}
.pin{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pin input{width:100%;aspect-ratio:1/1.1;background:var(--negro-2);border:1px solid var(--linea);text-align:center;font-family:var(--display);font-size:42px;font-weight:900;caret-color:var(--rojo)}
.pin input:focus{outline:none;border-color:var(--rojo);background:var(--negro-3)}
.pin.error input{border-color:var(--rojo);animation:sacude .4s}
@keyframes sacude{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.ingreso .btn{width:100%;margin-top:6px}
.ingreso .ayuda{display:flex;justify-content:space-between;margin-top:22px;font-size:14px;color:var(--gris)}
.ingreso .ayuda a{color:var(--hueso);font-weight:600}
.demo-nota{margin-top:30px;border:1px dashed rgba(255,46,77,.5);padding:14px;font-size:14px;color:var(--gris-2)}
.demo-nota b{color:var(--hueso)}
.cargando-barra{height:3px;background:var(--negro-3);margin-top:16px;overflow:hidden;opacity:0;transition:opacity .2s}
.cargando-barra.on{opacity:1}
.cargando-barra i{display:block;height:100%;width:40%;background:var(--rojo);animation:carga 1s ease-in-out infinite}
@keyframes carga{from{transform:translateX(-100%)}to{transform:translateX(260%)}}

/* ---------- app ---------- */
.app{display:grid;grid-template-columns:96px 1fr;min-height:100svh}
.riel{background:#070708;border-right:1px solid var(--linea);display:flex;flex-direction:column;align-items:center;padding:22px 0;gap:6px;position:sticky;top:0;height:100svh}
.riel .logo-r{margin-bottom:26px}
.riel .logo-r svg{width:44px;height:22px;color:var(--rojo)}
.riel button,.riel a.r{width:72px;padding:12px 0;display:grid;justify-items:center;gap:6px;background:none;border:0;color:var(--gris);cursor:pointer;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;position:relative;transition:color .2s}
.riel button svg,.riel a.r svg{width:23px;height:23px}
.riel button:hover{color:var(--hueso)}
.riel button[aria-current="true"]{color:var(--hueso)}
.riel button[aria-current="true"]::before{content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:4px;background:var(--rojo)}
.riel .abajo{margin-top:auto}
.contenido{min-width:0;padding:34px 40px 60px;max-width:1240px}
.top-app{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;gap:20px}
.top-app small{color:var(--gris);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:12.5px}
.top-app h1{font-size:clamp(44px,5vw,72px)}
.top-app .avatar{display:flex;align-items:center;gap:12px}
.top-app .avatar i{width:48px;height:48px;background:var(--rojo);display:grid;place-items:center;font-style:normal;font-family:var(--display);font-weight:900;font-size:22px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.top-app .avatar b{display:block}
.top-app .avatar span{font-size:13px;color:var(--gris)}
.pant{display:none;animation:entra .4s var(--ease)}
.pant.on{display:block}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.grid-a{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.bloque{background:var(--negro-2);border:1px solid var(--linea);padding:26px}
.bloque h2{font-size:30px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.bloque h2 button{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--rojo);background:none;border:0;cursor:pointer;text-transform:uppercase}

.meta{display:flex;gap:28px;align-items:center}
.meta svg.anillo{width:170px;height:170px;flex:none}
.meta svg.anillo circle.prog{transition:stroke-dashoffset 1.2s var(--ease)}
.meta .txt b{font-family:var(--display);font-size:52px;font-weight:900;display:block;line-height:.95}
.meta .txt p{color:var(--gris-2);margin-top:8px;max-width:30ch}
.semana-mini{display:flex;gap:6px;margin-top:18px}
.semana-mini span{width:34px;text-align:center;font-size:11px;font-weight:700;color:var(--gris)}
.semana-mini span i{display:block;height:34px;background:var(--negro-3);margin-bottom:5px;clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.semana-mini span.si i{background:var(--rojo)}
.semana-mini span.prog i{background:repeating-linear-gradient(45deg,var(--negro-3) 0 4px,rgba(255,46,77,.45) 4px 8px)}

.racha{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.racha div{background:var(--negro-3);padding:18px}
.racha b{font-family:var(--display);font-size:44px;font-weight:900;line-height:1;display:block}
.racha b.rojo{color:var(--rojo)}
.racha span{font-size:13px;color:var(--gris)}

.mis-clases{display:grid;gap:10px}
.mi-clase{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:var(--negro-3);padding:14px 16px;border-left:4px solid var(--c,var(--rojo))}
.mi-clase .cuando{font-family:var(--display);font-weight:900;font-size:26px;line-height:1;min-width:76px}
.mi-clase .cuando small{display:block;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--gris);text-transform:uppercase}
.mi-clase b{font-family:var(--display);font-size:22px;text-transform:uppercase;font-weight:800;display:block;line-height:1}
.mi-clase span{font-size:13.5px;color:var(--gris)}
.mi-clase button{background:none;border:1px solid var(--linea);color:var(--gris-2);padding:8px 12px;font-size:12.5px;font-weight:700;text-transform:uppercase;cursor:pointer;letter-spacing:.06em}
.mi-clase button:hover{border-color:var(--rojo);color:var(--rojo)}
.sin-clases{color:var(--gris);padding:20px;border:1px dashed var(--linea);text-align:center}

.carnet{background:linear-gradient(135deg,#ff2e4d,#b3122e);padding:24px;position:relative;overflow:hidden;color:#fff}
.carnet::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border:28px solid rgba(255,255,255,.12);border-radius:50%}
.carnet small{font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.85;font-size:12px}
.carnet h3{font-size:44px;margin:6px 0 16px}
.carnet .barra-v{height:6px;background:rgba(255,255,255,.25);margin:14px 0 8px}
.carnet .barra-v i{display:block;height:100%;background:#fff}
.carnet .fila{display:flex;justify-content:space-between;font-size:14px;position:relative;z-index:1}
.carnet .btn{margin-top:18px;background:#fff;color:var(--negro);width:100%}

/* reservar */
.dias-app{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:18px;scrollbar-width:thin}
.dias-app button{flex:none;width:76px;background:var(--negro-2);border:1px solid var(--linea);padding:12px 0;cursor:pointer;text-align:center}
.dias-app button small{display:block;font-size:11.5px;color:var(--gris);font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.dias-app button b{font-family:var(--display);font-size:32px;font-weight:900;line-height:1}
.dias-app button[aria-pressed="true"]{background:var(--rojo);border-color:var(--rojo)}
.dias-app button[aria-pressed="true"] small{color:#fff}
.cards-res{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.card-res{background:var(--negro-2);border:1px solid var(--linea);border-top:4px solid var(--c);padding:20px;display:flex;flex-direction:column;gap:12px;animation:entra .4s var(--ease) both}
.card-res .t{display:flex;justify-content:space-between;align-items:flex-start}
.card-res .t b{font-family:var(--display);font-size:38px;font-weight:900;line-height:.9}
.card-res .t span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);text-align:right}
.card-res h3{font-size:26px}
.card-res p{font-size:14px;color:var(--gris)}
.card-res .lugares{display:flex;gap:3px;flex-wrap:wrap}
.card-res .lugares i{width:9px;height:9px;background:var(--negro-3)}
.card-res .lugares i.ocu{background:var(--gris)}
.card-res .lugares i.mio{background:var(--rojo)}
.card-res .btn{clip-path:none;padding:12px;font-size:13px}
.card-res .btn.hecho{background:var(--verde);color:var(--negro)}
.card-res .btn:disabled{background:var(--negro-3);color:var(--gris);cursor:not-allowed}

/* progreso */
.grafico{position:relative}
.grafico svg{width:100%;height:auto;display:block;overflow:visible}
.grafico .tip{position:absolute;pointer-events:none;background:var(--hueso);color:var(--negro);padding:8px 12px;font-size:13px;font-weight:600;transform:translate(-50%,-120%);opacity:0;transition:opacity .15s;white-space:nowrap}
.grafico .tip.on{opacity:1}
.grafico .tip b{font-family:var(--display);font-size:20px;display:block;line-height:1}
.leyenda-g{display:flex;gap:24px;margin-top:14px;flex-wrap:wrap}
.leyenda-g div b{font-family:var(--display);font-size:36px;font-weight:900;display:block;line-height:1}
.leyenda-g div span{font-size:13px;color:var(--gris)}
.leyenda-g .baja b{color:var(--verde)}
.form-peso{display:flex;gap:8px;margin-top:20px}
.form-peso input{flex:1;background:var(--negro-3);border:1px solid var(--linea);padding:12px 14px;font-size:16px;min-width:0}
.form-peso input:focus{outline:none;border-color:var(--rojo)}
.form-peso .btn{clip-path:none;padding:12px 18px;font-size:13px}
.marcas-p{width:100%;border-collapse:collapse}
.marcas-p td{padding:14px 0;border-bottom:1px solid var(--linea)}
.marcas-p td:nth-child(2){font-family:var(--display);font-size:28px;font-weight:900;text-align:right}
.marcas-p td:nth-child(3){text-align:right;width:90px;font-weight:700;color:var(--verde);font-size:14px}

/* membresía */
.opciones-ren{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.opciones-ren label{cursor:pointer;position:relative}
.opciones-ren input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0}
.opciones-ren span{display:block;border:1px solid var(--linea);background:var(--negro-3);padding:16px;height:100%}
.opciones-ren span b{font-family:var(--display);font-size:30px;font-weight:900;display:block;line-height:1;margin:4px 0}
.opciones-ren span small{color:var(--gris);font-size:12.5px}
.opciones-ren span em{font-style:normal;color:var(--verde);font-size:12.5px;font-weight:700}
.opciones-ren input:checked+span{border-color:var(--rojo);box-shadow:inset 0 0 0 1px var(--rojo)}
.opciones-ren input:focus-visible+span{outline:2px solid var(--rojo);outline-offset:2px}
.congelar{display:flex;align-items:center;gap:16px;margin-top:10px}
.congelar input[type=range]{flex:1;accent-color:var(--rojo)}
.congelar output{font-family:var(--display);font-size:32px;font-weight:900;min-width:90px;text-align:right}
.pagos{width:100%;border-collapse:collapse;font-size:14.5px}
.pagos td{padding:13px 0;border-bottom:1px solid var(--linea)}
.pagos td:last-child{text-align:right}
.pagos .ok{color:var(--verde);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em}

/* modal QR */
.modal-qr{position:fixed;inset:0;z-index:120;background:rgba(7,7,8,.88);display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(6px)}
.modal-qr.on{opacity:1;pointer-events:auto}
.modal-qr .caja-qr{background:var(--hueso);color:var(--negro);padding:30px;width:min(360px,100%);text-align:center;position:relative;transform:scale(.94);transition:transform .35s var(--ease)}
.modal-qr.on .caja-qr{transform:none}
.modal-qr h3{font-size:38px}
.modal-qr .qr-g{width:220px;height:220px;margin:18px auto;padding:10px;background:#fff}
.modal-qr .qr-g svg{width:100%;height:100%}
.modal-qr .cuenta{height:5px;background:#e3e0da;margin:4px 0 10px}
.modal-qr .cuenta i{display:block;height:100%;background:var(--rojo);transform-origin:left}
.modal-qr p{font-size:14px;color:#5b5955}
.modal-qr .cerrar{position:absolute;top:12px;right:12px;width:38px;height:38px;background:var(--negro);color:#fff;border:0;cursor:pointer;display:grid;place-items:center}
.modal-qr .cerrar svg{width:16px;height:16px}

.muestra-app{position:fixed;left:96px;right:0;bottom:0;background:#000;color:var(--gris);font-size:11.5px;text-align:center;padding:6px;z-index:40}
.muestra-app a{color:var(--hueso);font-weight:600}

@media (max-width:1000px){
  .grid-a{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ingreso{grid-template-columns:1fr}
  .ingreso .lado-foto{min-height:240px;padding:28px 22px}
  .ingreso .lado-foto h2{font-size:56px}
  .ingreso .volver{margin-bottom:28px}
  .app{grid-template-columns:1fr}
  .riel{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;flex-direction:row;justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    border-right:0;border-top:1px solid var(--linea);z-index:80}
  .riel .logo-r,.riel .abajo{display:none}
  .riel button{width:auto;flex:1;padding:8px 0;font-size:10.5px}
  .riel button[aria-current="true"]::before{left:20%;right:20%;top:-7px;bottom:auto;width:auto;height:3px}
  .contenido{padding:22px 16px 120px}
  .top-app .avatar div{display:none}
  .meta{flex-direction:column;align-items:flex-start;gap:16px}
  .meta svg.anillo{width:140px;height:140px}
  .racha{grid-template-columns:1fr 1fr 1fr}
  .racha b{font-size:32px}
  .racha div{padding:14px}
  .opciones-ren{grid-template-columns:1fr}
  .muestra-app{left:0;bottom:64px}
  .bloque{padding:20px 16px}
}