/* Renacer — esperanza: azul de cielo abierto y verde de crecimiento. */
:root{
  --bg:#EEF4F5; --surface:#FFFFFF; --surface-2:#F3F8F8; --ink:#13232B; --muted:#557079; --line:#D3E2E5;
  --sun:#1C6FD1; --sun-ink:#FFFFFF; --sun-soft:#DCEBFB; --ok:#12936B; --ok-soft:#D7F2E7; --alert:#B3402F; --alert-soft:#F7E1DC;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,sans-serif;
  --tabbar:64px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0B1A20; --surface:#11252D; --surface-2:#0E2027; --ink:#E6F2F3; --muted:#8FAAB2; --line:#21404A;
  --sun:#4FA3F7; --sun-ink:#06182A; --sun-soft:#12324A; --ok:#3FD49B; --ok-soft:#10372B; --alert:#F08A78; --alert-soft:#3A1F1A;
  color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-tap-highlight-color:transparent}
main{max-width:600px;margin:0 auto;padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(var(--tabbar) + 28px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:24px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
h1{font-size:2.1rem;font-weight:800;letter-spacing:-.02em;line-height:1.05}
h2{font-size:1.2rem;font-weight:700}
h3{font-size:1rem;font-weight:700}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.eyebrow{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}
section{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.card.sun{background:var(--sun-soft);border-color:transparent}
.card.ok{background:var(--ok-soft);border-color:transparent}
button,.btn{font:inherit;cursor:pointer;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:10px 14px;min-height:44px}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.primary{background:var(--sun);color:var(--sun-ink);border-color:var(--sun);font-weight:700}
.ghost{background:transparent;border-color:transparent;color:var(--muted);padding:6px 10px;min-height:36px}
.danger{color:var(--alert)}
.block{width:100%}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:100%;min-width:0}
textarea{resize:vertical;min-height:72px}
label.f{display:flex;flex-direction:column;gap:4px;font-size:.88rem;color:var(--muted);font-weight:700}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
[hidden]{display:none!important}

/* Encabezado */
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.daybadge{font-family:var(--display);font-weight:800;color:var(--sun)}
.msg{font-size:1.08rem;line-height:1.45}

/* Ánimo */
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.scale button{display:flex;flex-direction:column;align-items:center;gap:0;padding:8px 2px;font-size:.72rem;color:var(--muted)}
.scale button b{font-family:var(--display);font-size:1.3rem;color:var(--ink)}
.scale button[aria-pressed="true"]{background:var(--sun-soft);border-color:var(--sun)}

/* Tareas */
.task{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.task:first-child{border-top:0;padding-top:0}
.task input[type=checkbox]{width:24px;height:24px;margin-top:2px;accent-color:var(--ok);padding:0}
.task.done .t{text-decoration:line-through;color:var(--muted)}
.dots{display:flex;gap:6px}.dots i{width:11px;height:11px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--ok)}

/* Agenda */
.week{display:grid;grid-template-columns:auto repeat(7,1fr) auto;gap:4px;align-items:stretch}
.week button{padding:6px 0;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:60px;font-size:.72rem;color:var(--muted)}
.week button b{font-family:var(--display);font-size:1.1rem;color:var(--ink);font-variant-numeric:tabular-nums}
.week button[aria-current="date"]{border-color:var(--sun);background:var(--sun-soft)}
.week button.today b{color:var(--sun)}
.week .nav{border-color:transparent;background:transparent;min-width:28px;font-size:1.1rem}
.mini{width:20px;height:3px;border-radius:2px;background:var(--line)}
.mini.some{background:var(--sun)}.mini.all{background:var(--ok)}
.ev{display:grid;grid-template-columns:52px 4px 1fr auto;gap:10px;align-items:stretch;padding:10px 0;border-top:1px solid var(--line)}
.ev:first-child{border-top:0}
.ev time{font-variant-numeric:tabular-nums;font-weight:700;padding-top:2px}
.ev .stripe{border-radius:2px}
.ev .body{min-width:0;display:flex;flex-direction:column;gap:2px;cursor:pointer}
.ev.now{background:var(--sun-soft);margin:0 -16px;padding:10px 16px;border-radius:10px}
.ev.done .ttl{text-decoration:line-through;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}
.chip i{width:8px;height:8px;border-radius:50%}
.check{min-height:40px;padding:6px 12px;font-size:.9rem}
.check.on{background:var(--ok-soft);color:var(--ok);border-color:transparent;font-weight:700}
.days{display:flex;gap:6px;flex-wrap:wrap}
.days button{min-height:38px;min-width:42px;padding:6px 8px;font-size:.85rem}
.days button[aria-pressed="true"]{background:var(--sun);color:var(--sun-ink);border-color:var(--sun)}

/* Gym */
.setrow{display:grid;grid-template-columns:52px 1fr 1fr;gap:10px;align-items:end;padding:8px;border-radius:12px;background:var(--surface-2)}
.setrow.on{background:var(--ok-soft)}
.setchk{width:52px;height:52px;border-radius:50%;padding:0;font-family:var(--display);font-weight:800;font-size:1.2rem}
.setchk[aria-pressed="true"]{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.f.sm{font-size:.74rem}
.f.sm input{padding:8px 10px;font-size:1.05rem;font-variant-numeric:tabular-nums}

/* Progreso */
.bar{height:10px;background:var(--line);border-radius:5px;overflow:hidden}
.bar span{display:block;height:100%;border-radius:5px;transition:width .4s}
.arearow{display:flex;flex-direction:column;gap:6px}
.nums{font-variant-numeric:tabular-nums;font-size:.88rem;color:var(--muted)}
.big{font-family:var(--display);font-size:2.6rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stat{background:var(--surface-2);border-radius:10px;padding:10px 12px}
.stat b{display:block;font-family:var(--display);font-size:1.4rem;font-variant-numeric:tabular-nums}
.chart{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font-size:10px;font-family:var(--body)}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.list li{display:flex;gap:10px;align-items:baseline}
.list time{font-size:.78rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* Coach */
.chat{display:flex;flex-direction:column;gap:10px}
.bubble{max-width:86%;padding:10px 14px;border-radius:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.bubble.user{align-self:flex-end;background:var(--sun);color:var(--sun-ink);border-bottom-right-radius:4px}
.bubble.assistant{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px}
.composer{position:sticky;bottom:calc(var(--tabbar) + env(safe-area-inset-bottom,0px) + 8px);display:flex;gap:8px;background:var(--bg);padding-top:8px}

/* Barra de pestañas */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--surface);border-top:1px solid var(--line);
  padding:0 max(8px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(8px,env(safe-area-inset-left,0px))}
nav.tabs .in{max-width:600px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);height:var(--tabbar)}
nav.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--muted);font-size:.72rem;font-weight:700}
nav.tabs a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
nav.tabs a[aria-current="page"]{color:var(--sun)}

/* Hoja inferior y avisos */
.sheet-bg{position:fixed;inset:0;background:rgba(10,14,20,.45);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);width:100%;max-width:600px;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;
  padding:20px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:14px}
.toast{position:fixed;left:50%;transform:translateX(-50%);top:calc(12px + env(safe-area-inset-top,0px));z-index:30;max-width:min(560px,calc(100% - 24px));
  background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:2px}
.toast b{font-family:var(--display)}
.sos{background:var(--alert-soft);color:var(--alert);border-color:transparent;font-weight:700}
.overlay{position:fixed;inset:0;background:var(--bg);z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;
  padding:calc(24px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.circle{width:160px;height:160px;border-radius:50%;background:var(--sun-soft);border:3px solid var(--sun);transform:scale(.6);transition:transform 4s ease-in-out}
.phase{font-family:var(--display);font-size:1.6rem;font-weight:700}
.sel{user-select:all;font-weight:700;color:var(--ink)}

/* Login */
.login{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.login form{width:100%;max-width:320px;display:flex;flex-direction:column;gap:14px;text-align:center}
.login input{text-align:center;font-size:1.6rem;letter-spacing:.4em}
@media (prefers-reduced-motion: reduce){.circle,.bar span{transition:none}}