/* ============================================================
   FISIO SCHOOL · estilos de la app del paciente
   Misma marca que la landing: Poppins, tinta, naranja, bento
   ============================================================ */
:root{
  --bg:#EEF0EC; --card:#FFFFFF; --ink:#1E2A38; --ink2:#56606B; --muted:#7D848C;
  --nar:#F39A55; --nar-d:#C4602E; --mel:#F7E2D3; --sal:#DDE8DF; --sal-d:#3F6B52;
  --n1:#F7DCD8; --n1-t:#8A2A20; --n2:#F8EBD3; --n2-t:#7A4A12; --n3:#DDE8DF; --n3-t:#3F6B52;
  --rojo:#B42318; --line:rgba(30,42,56,.1); --r:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Poppins',-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
button{font-family:inherit}
a{color:inherit}
[hidden]{display:none !important}
.contenedor{max-width:560px;margin:0 auto;padding:16px 16px 48px}

/* cabecera */
.cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0 18px}
.logo{display:flex;align-items:baseline;gap:0;text-decoration:none;color:var(--ink);font-weight:800;font-size:22px;letter-spacing:-.6px}
.logo i{font-style:normal;width:36px;height:36px;border-radius:11px;background:var(--ink);color:var(--nar);font-size:12.5px;display:flex;align-items:center;justify-content:center}
.chip-btn{background:#fff;border:none;border-radius:99px;padding:9px 16px;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px}

/* tarjetas */
.card{background:var(--card);border-radius:var(--r);padding:22px}
.card + .card,.pila > * + *{margin-top:12px}
.lbl{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--nar-d)}
.lbl-gris{color:var(--muted)}
h1{font-size:30px;font-weight:800;letter-spacing:-1.2px;line-height:1.08}
h2{font-size:21px;font-weight:700;letter-spacing:-.5px;line-height:1.2}
.txt{color:var(--ink2);font-size:15px}
.oscura{background:var(--ink);color:#F4F2ED}
.oscura .txt{color:#B9C3CF}
.oscura .lbl{color:var(--nar)}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:16px;padding:16px 26px;border-radius:99px;border:2px solid transparent;cursor:pointer;text-decoration:none;text-align:center;transition:transform .12s ease, background .15s}
.btn:active{transform:scale(.98)}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--nar-d);outline-offset:3px}
.btn-ink{background:var(--ink);color:#fff}
.btn-nar{background:var(--nar);color:var(--ink)}
.btn-borde{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn-borde:hover{background:var(--bg)}
.btn-bloque{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.enlace{background:none;border:none;color:var(--muted);text-decoration:underline;font-size:14.5px;cursor:pointer;padding:6px}

/* formularios */
.campo{display:block;width:100%;font-family:inherit;font-size:16px;padding:15px 18px;border-radius:16px;border:2px solid var(--line);background:#fff;color:var(--ink)}
.campo:focus{border-color:var(--ink);outline:none}
label.etq{display:block;font-size:14px;font-weight:600;margin-bottom:8px}

/* aviso urgencias */
.urg{background:#F7DCD8;color:#5C1A14;border-radius:var(--r);padding:20px 22px}
.urg b{color:#7A1A12}

/* cargando */
.cargando{display:flex;align-items:center;justify-content:center;min-height:60vh;color:var(--muted);font-size:15px;gap:10px}
.spin{width:20px;height:20px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--nar-d);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

.banner-demo{background:var(--ink);color:#fff;text-align:center;font-size:13px;padding:8px 12px}
.banner-demo b{color:var(--nar)}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* guía para instalar la app */
.guia-fondo{position:fixed;inset:0;background:rgba(30,42,56,.55);z-index:100;display:flex;align-items:flex-end;justify-content:center;animation:gf .2s ease}
@keyframes gf{from{opacity:0}}
@keyframes gs{from{transform:translateY(40px)}}
.guia{position:relative;background:#fff;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;border-radius:28px 28px 0 0;padding:26px 22px calc(22px + env(safe-area-inset-bottom));animation:gs .25s ease}
@media (min-width:600px){.guia-fondo{align-items:center}.guia{border-radius:28px}}
.guia-x{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;border:none;background:var(--bg);font-size:24px;line-height:1;color:var(--ink);cursor:pointer}
.guia-ico{width:58px;height:58px;border-radius:16px;background:var(--ink);color:var(--nar);font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center}
.guia-ya{margin-top:12px;background:var(--sal);color:var(--sal-d);border-radius:14px;padding:12px 14px;font-size:14.5px;font-weight:600}
.guia-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--bg);border-radius:99px;padding:5px;margin-top:16px}
.guia-tabs button{font-family:inherit;font-size:14.5px;font-weight:600;border:none;background:none;border-radius:99px;padding:10px;color:var(--muted);cursor:pointer}
.guia-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.g-o{text-align:center;font-size:13.5px;color:var(--muted);margin-top:10px}
.guia-pasos{list-style:none;padding:0;margin:14px 0 0}
.guia-pasos li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)}
.guia-pasos li:first-child{border-top:none}
.g-ico{position:relative;flex:none;width:46px;height:46px;border-radius:14px;background:var(--mel);color:var(--nar-d);display:flex;align-items:center;justify-content:center}
.g-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.g-ico span{position:absolute;top:-6px;left:-6px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.g-t{font-size:15.5px;font-weight:500;line-height:1.35;padding-top:2px}
.g-t b{font-weight:700}
.g-d{font-size:13.5px;color:var(--ink2);line-height:1.45;margin-top:3px}
.g-mini{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:var(--ink);color:var(--nar);font-size:8.5px;font-weight:700;vertical-align:-5px}

/* logo atlas. */
.punto{color:var(--nar)}
.logo-sub{font-weight:600;color:var(--muted);margin-left:10px;font-size:15px;letter-spacing:0}

/* ---------- barra de pestañas (Hoy · Mi plan · Curso · Ayuda) ---------- */
body.con-tabs .contenedor{padding-bottom:110px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.tabbar nav{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 4px;text-decoration:none;color:var(--muted);font-size:11px;font-weight:600;border-radius:14px}
.tabbar a svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabbar a.on{color:var(--ink)}
.tabbar a.on svg{stroke:var(--nar-d)}
.tabbar a .pt{position:absolute;margin-left:18px;margin-top:-2px;width:9px;height:9px;border-radius:50%;background:var(--nar);border:2px solid #fff}

/* ---------- el camino (Empiezas → fases → meta) ---------- */
.camino-v{position:relative;margin-top:12px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#FBF8F3 0%,#F8F1E7 100%)}
.camino-v>svg{position:absolute;inset:0;width:100%;height:100%}
.cm-ruta{filter:drop-shadow(0 4px 8px rgba(160,120,80,.12))}
.cm-n{position:absolute;transform:translate(-50%,-50%);z-index:2}
.cm-n i{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:3px solid #E3DDD3;color:#B3ADA4;box-shadow:0 6px 14px rgba(30,42,56,.10)}
.cm-n svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cm-n.ini i{border-color:#1E2A38}
.cm-n.f1{--c:#C4602E;--b:#FBE3CF}.cm-n.f2{--c:#3F6B52;--b:#DDE8DF}.cm-n.f3{--c:#2F527A;--b:#DCE5F0}.cm-n.ini{--c:#1E2A38;--b:#E7EAEE}.cm-n.meta{--c:#1E2A38;--b:#F39A55}
.cm-n.hecho i{background:var(--c);border-color:var(--c);color:#fff}
.cm-n.hecho svg{stroke-width:3}
.cm-n.actual i{width:66px;height:66px;background:var(--b);border:4px solid var(--c);color:var(--c);animation:cm-late 2.4s ease-in-out infinite}
.cm-n.actual svg{width:28px;height:28px}
.cm-n.bloq.f1 i,.cm-n.bloq.f2 i,.cm-n.bloq.f3 i{color:#B3ADA4}
.cm-n em{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(30,42,56,.15)}
.cm-n em svg{width:12px;height:12px;stroke:#8C9298;stroke-width:2.6}
.cm-n.meta i{width:64px;height:64px;background:#1E2A38;border:4px solid #fff;color:#F39A55;box-shadow:0 8px 20px rgba(30,42,56,.25)}
.cm-n.meta.hecho i{background:#F39A55;color:#1E2A38}
@keyframes cm-late{0%,100%{box-shadow:0 0 0 0 rgba(243,154,85,.45),0 6px 14px rgba(30,42,56,.12)}50%{box-shadow:0 0 0 12px rgba(243,154,85,0),0 6px 14px rgba(30,42,56,.12)}}
.cm-l{position:absolute;transform:translateY(-50%);z-index:3;background:#fff;border-radius:14px;padding:8px 12px 9px;box-shadow:0 4px 14px rgba(30,42,56,.08);line-height:1.25;max-width:calc(100% - 120px)}
.cm-l.izq{text-align:right}
.cm-l.abajo{text-align:center;white-space:nowrap;max-width:none;background:#1E2A38;color:#F4F2ED;padding:9px 16px}
.cm-l.abajo small{color:#C9D2DC}
.cm-l b{display:block;font-size:14.5px;letter-spacing:-.2px}
.cm-l small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.cm-l.bloq{background:rgba(255,255,255,.65);box-shadow:none}
.cm-l.bloq b{color:#8C9298}
.cm-l.actual{box-shadow:0 0 0 2px #F39A55,0 8px 20px rgba(243,154,85,.25)}
.cm-aqui{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:#F39A55;color:#1E2A38;padding:2px 8px;border-radius:99px;margin-bottom:4px}
.cm-pts{display:flex;gap:4px;margin-top:6px}
.cm-l.izq .cm-pts{justify-content:flex-end}
.cm-pts i{width:16px;height:5px;border-radius:99px;background:#E6E1D8}
.cm-pts i.on{background:#F39A55}
@media (prefers-reduced-motion:reduce){.cm-n.actual i{animation:none}}

/* ---------- celebración ---------- */
.celebra{position:fixed;inset:0;z-index:70;background:rgba(30,42,56,.6);display:flex;align-items:center;justify-content:center;padding:20px;animation:cel-in .25s ease}
.celebra-c{background:#fff;border-radius:28px;padding:32px 24px 22px;max-width:420px;width:100%;text-align:center;animation:cel-pop .35s cubic-bezier(.2,1.4,.4,1)}
.celebra-ok{width:96px;height:96px;margin:0 auto}
.celebra-ok svg{width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.celebra-ok circle{fill:var(--sal);stroke:var(--sal-d);stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:cel-dib .5s ease forwards}
.celebra-ok path{stroke:var(--sal-d);stroke-width:4.5;stroke-dasharray:40;stroke-dashoffset:40;animation:cel-dib .35s .4s ease forwards}
.celebra h2{font-size:26px;letter-spacing:-.6px;margin-top:16px}
.celebra .c1{font-size:16px;color:var(--ink);margin-top:8px}
.celebra .c2{font-size:14.5px;color:var(--muted);margin:4px 0 20px}
@keyframes cel-in{from{opacity:0}}@keyframes cel-pop{from{transform:scale(.9);opacity:0}}@keyframes cel-dib{to{stroke-dashoffset:0}}
.ico-med{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:4px}

/* ---------- carga: silueta en vez de «Cargando…» ---------- */
.cargando{display:flex;flex-direction:column;gap:12px;min-height:60vh;padding-top:6px;font-size:0;color:transparent}
.cargando .spin{display:none}
.cargando::before,.cargando::after{content:'';display:block;border-radius:24px;background:linear-gradient(90deg,#E6E8E3 0%,#F1F2EF 40%,#E6E8E3 80%);background-size:300% 100%;animation:brillo 1.3s ease-in-out infinite}
.cargando::before{height:220px}
.cargando::after{height:140px}
@keyframes brillo{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.cargando::before,.cargando::after{animation:none}}
.confianza{display:flex;gap:10px;align-items:center;justify-content:center;margin:18px 8px 0;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.4}
.confianza svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--sal-d);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cm-l.abajo.bloq{background:#1E2A38;box-shadow:0 8px 20px rgba(30,42,56,.2)}
.cm-l.abajo.bloq b{color:#F4F2ED}
.cm-n.meta em{display:none}

/* ---------- la montaña (Hoy y Mi plan): etiquetas escalan con el ancho del dibujo ---------- */
.mtn-esc{position:relative;border-radius:18px;overflow:hidden;container-type:inline-size}
.mtn-esc svg{display:block;width:100%;height:auto}
.mt-et{position:absolute;background:#fff;border-radius:3cqw;padding:1.5cqw 2.2cqw;line-height:1.15;white-space:nowrap;box-shadow:0 2px 8px rgba(30,42,56,.14)}
.mt-et b{display:block;font-size:3.05cqw;letter-spacing:-.1px}
.mt-et small{display:block;font-size:2.7cqw;color:#9AA0A6;margin-top:1px}
.mt-et span{display:block;font-size:2.4cqw;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#C4602E;margin-bottom:1px}
.mt-et.actual{box-shadow:0 0 0 2px #F39A55,0 6px 14px rgba(243,154,85,.35)}
.mt-et.bloq{background:rgba(255,255,255,.9);color:#7D848C}
.mt-et.hecho small{color:#3F6B52}
.mt-pts{display:flex;gap:1.2cqw;margin-top:1.2cqw}
.mt-pts i{flex:none;width:3.9cqw;height:1.2cqw;min-height:3px;border-radius:9px;background:#E6E1D8}
.mt-pts i.on{background:#F39A55}
.mt-meta{position:absolute;right:3cqw;top:3cqw;max-width:35.5cqw;background:#1E2A38;color:#F4F2ED;border-radius:3.6cqw;padding:2.1cqw 3.3cqw;line-height:1.2;box-shadow:0 6px 16px rgba(30,42,56,.25)}
.mt-meta span{display:block;font-size:2.85cqw;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#F39A55}
.mt-meta b{display:block;font-size:3.45cqw;margin-top:1px}
.mt-sig{margin:12px 4px 0;font-size:13.5px;color:var(--ink2);line-height:1.45}
.mt-sig b{color:var(--ink)}