/* Tracker de recuperación de 60 días | Body O'Clock
   Grafito #161616 (nunca negro puro). Color solo en los tres datos que se registran:
   dolor (coral), sueño (azul) y energía (ámbar). El verde marca el avance. */

:root {
  --bg: #161616;
  --surface: #1F1F1F;
  --surface2: #272727;
  --line: #2F2F2F;
  --text: #EDEBE6;
  --muted: #A3A19B;
  --faint: #5E5C57;
  --dolor: #E8574A;
  --sueno: #6FA8E8;
  --energia: #F2B84B;
  --nervio: #B79CE6;
  --pierna: #55C2C9;
  --ok: #5BBF8A;
  --radius: 1.375rem;
  --nav-h: 4.125rem;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #EFEDE8;
  --surface: #F8F6F2;
  --surface2: #E9E6E0;
  --line: #DAD6CC;
  --text: #1E1E1E;
  --muted: #66645E;
  --faint: #B4B0A6;
  --dolor: #D94738;
  --sueno: #3F82CC;
  --energia: #D99A1F;
  --ok: #2E9C68;
  --nervio: #8A63CF;
  --pierna: #1F9AA3;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #EFEDE8;
    --surface: #F8F6F2;
    --surface2: #E9E6E0;
    --line: #DAD6CC;
    --text: #1E1E1E;
    --muted: #66645E;
    --faint: #B4B0A6;
    --dolor: #D94738;
    --sueno: #3F82CC;
    --energia: #D99A1F;
    --ok: #2E9C68;
    --nervio: #8A63CF;
    --pierna: #1F9AA3;
    color-scheme: light;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); font-size: calc(16px * var(--escala, 1)); }
body {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.5;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- marco general ---------- */
.shell { min-height: 100dvh; }
main { padding: calc(env(safe-area-inset-top) + 1.125rem) 1.125rem calc(var(--nav-h) + env(safe-area-inset-bottom) + 1.75rem); max-width: 35rem; margin: 0 auto; }
.logo { display: block; height: 0.625rem; width: 6rem; background: var(--text); -webkit-mask: url(logo.svg) no-repeat left center / contain; mask: url(logo.svg) no-repeat left center / contain; }
.bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.bar .chipday { font-size: 0.75rem; color: var(--muted); }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(0.875rem); -webkit-backdrop-filter: blur(0.875rem);
  border-top: 1px solid var(--line);
}
.nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1875rem; font-size: 0.6562rem; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.nav button svg { width: 1.375rem; height: 1.375rem; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav button[aria-current="page"] { color: var(--text); }
.nav button[aria-current="page"] svg { stroke: var(--ok); }

h1, h2, h3 { font-weight: 300; letter-spacing: -.02em; line-height: 1.12; }
h1 { font-size: 1.875rem; }
h1 b, h2 b { font-weight: 700; }
h2 { font-size: 1.375rem; margin-bottom: 0.25rem; }
h3 { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0; }
.sub { color: var(--muted); font-size: 0.8438rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.125rem; }
.card + .card { margin-top: 0.875rem; }
.lbl { font-size: 0.7188rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; }

/* ---------- Hoy ---------- */
.hero { text-align: center; padding: 0.375rem 0 0.125rem; position: relative; }
.hero svg { width: min(78vw, 18.75rem); height: auto; display: block; margin: 0 auto; }
.hero .mid { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-52%); pointer-events: none; }
.hero .mid small { display: block; font-size: 0.75rem; color: var(--muted); letter-spacing: .06em; }
.hero .mid b { display: block; font-size: 4rem; font-weight: 200; line-height: 1; letter-spacing: -.04em; }
.hero .mid span { display: block; font-size: 0.7812rem; color: var(--muted); }
.daynav { display: flex; align-items: center; justify-content: center; gap: 0.625rem; margin: 0.5rem 0 1.125rem; font-size: 0.8125rem; color: var(--muted); }
.daynav button { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; }
.daynav button:disabled { opacity: .3; cursor: default; }
.daynav svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.daynav span { min-width: 9.375rem; text-align: center; color: var(--text); font-weight: 600; text-transform: none; }

.trend { display: grid; gap: 0.625rem; }
.trend .row { display: grid; grid-template-columns: 4rem 1fr 1.375rem; align-items: center; gap: 0.625rem; font-size: 0.8125rem; }
.trend .row span { color: var(--muted); font-weight: 600; }
.trend .row b { text-align: right; font-weight: 700; }
.trend svg { width: 100%; height: 1.125rem; display: block; }

.metric { padding: 1rem 1.125rem 0.875rem; }
.metric + .metric { margin-top: 0.75rem; }
.metric .head { display: flex; justify-content: space-between; align-items: baseline; }
.metric .head h3 { display: flex; align-items: center; gap: 0.5rem; }
.metric .head h3 i { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--c); display: block; }
.metric .head output { font-size: 0.8125rem; color: var(--muted); }
.metric .hint { font-size: 0.75rem; color: var(--faint); margin-top: 1px; }
.dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin-top: 0.75rem; }
.dots button { aspect-ratio: 1 / 1; max-height: 3.625rem; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; display: grid; place-items: center; font-size: 0.9375rem; font-weight: 600; color: var(--muted); transition: transform .12s, background .12s, border-color .12s; }
.dots button:active { transform: scale(.94); }
.dots button.on { background: var(--c); border-color: var(--c); color: var(--bg); }
.dots button.lit { border-color: var(--c); color: var(--text); background: color-mix(in srgb, var(--c) 22%, transparent); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.chips button { padding: 0.5rem 0.875rem; border-radius: 6.1875rem; border: 1.5px solid var(--line); font-size: 0.8438rem; font-weight: 600; color: var(--muted); }
.chips button[aria-pressed="true"] { border-color: var(--ok); color: var(--text); background: color-mix(in srgb, var(--ok) 18%, transparent); }
.chips.z button[aria-pressed="true"] { border-color: var(--dolor); background: color-mix(in srgb, var(--dolor) 16%, transparent); }
textarea { width: 100%; min-height: 5.75rem; resize: vertical; margin-top: 0.75rem; padding: 0.8125rem 0.875rem; border-radius: 1rem; border: 1.5px solid var(--line); background: var(--bg); line-height: 1.5; }
textarea:focus, input:focus, select:focus { outline: 0.125rem solid var(--ok); outline-offset: 1px; }
.saved { position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 0.875rem); transform: translate(-50%, 1.25rem); opacity: 0; background: var(--text); color: var(--bg); padding: 0.5625rem 1.125rem; border-radius: 6.1875rem; font-size: 0.8125rem; font-weight: 600; transition: all .25s; z-index: 30; pointer-events: none; }
.saved.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Registro ---------- */
.week { margin-top: 1.125rem; }
.week .wh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; }
.week .wh h3 { font-weight: 700; }
.week .wh span { font-size: 0.75rem; color: var(--muted); }
.wgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4375rem; }
.cell { min-width: 0; aspect-ratio: 1 / 1.08; border-radius: 0.875rem; background: var(--surface); border: 1px solid var(--line); padding: 0.375rem 0.3125rem 0.3125rem; display: flex; flex-direction: column; justify-content: space-between; align-items: center; font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.cell.hoy { border-color: var(--text); color: var(--text); }
.cell.fut { opacity: .35; cursor: default; }
.cell.sel { background: var(--surface2); }
.cell .tri { display: flex; gap: 0.125rem; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.cell .tri i { width: 0.3438rem; height: 0.3438rem; border-radius: 50%; background: var(--c); opacity: calc(.14 + var(--v) * .17); }
.cell .tri i.vacio { background: var(--faint); opacity: .22; }
.legend { display: flex; gap: 0.875rem; flex-wrap: wrap; margin-top: 0.375rem; font-size: 0.75rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.legend i { width: 0.5rem; height: 0.5rem; border-radius: 50%; display: block; }

/* ---------- Progreso ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; }
.stats div { background: var(--surface); border: 1px solid var(--line); border-radius: 1.125rem; padding: 0.75rem 0.75rem 0.625rem; text-align: center; }
.stats b { display: block; font-size: 1.625rem; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.stats span { font-size: 0.7188rem; color: var(--muted); }
.chart h3 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; }
.chart h3 i { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--c); display: block; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .key { font-size: 0.7188rem; color: var(--muted); margin-top: 0.125rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.8438rem; }
th { text-align: left; font-size: 0.7188rem; color: var(--muted); font-weight: 600; padding: 0 0 0.5rem; letter-spacing: .03em; }
td { padding: 0.5625rem 0; border-top: 1px solid var(--line); }
th:not(:first-child), td:not(:first-child) { text-align: right; }
td small { color: var(--ok); margin-left: 0.25rem; font-size: 0.6875rem; font-weight: 700; }
.zbars { display: grid; gap: 0.5625rem; margin-top: 0.625rem; }
.zbars div { display: grid; grid-template-columns: 4.625rem 1fr 1.5rem; gap: 0.625rem; align-items: center; font-size: 0.8125rem; }
.zbars em { display: block; height: 0.5rem; border-radius: 6.1875rem; background: var(--surface2); overflow: hidden; }
.zbars em i { display: block; height: 100%; background: var(--dolor); border-radius: 6.1875rem; }
.note { font-size: 0.8438rem; color: var(--muted); }
.note b { color: var(--text); }

/* ---------- Ajustes ---------- */
.field { margin-top: 0.875rem; }
.field label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--muted); margin-bottom: 0.375rem; letter-spacing: .03em; }
.field input, .field select { width: 100%; padding: 0.75rem 0.875rem; border-radius: 0.875rem; border: 1.5px solid var(--line); background: var(--bg); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.375rem; }
.seg button { padding: 0.625rem 0; border-radius: 0.75rem; border: 1.5px solid var(--line); font-size: 0.8438rem; font-weight: 600; color: var(--muted); }
.seg button[aria-pressed="true"] { border-color: var(--ok); color: var(--text); background: color-mix(in srgb, var(--ok) 16%, transparent); }
.btn { display: block; width: 100%; padding: 0.875rem 1.125rem; border-radius: 1rem; background: var(--text); color: var(--bg); font-weight: 700; text-align: center; margin-top: 0.875rem; }
.btn.sec { background: transparent; color: var(--text); border: 1.5px solid var(--line); }
.btn.dng { background: transparent; color: var(--dolor); border: 1.5px solid color-mix(in srgb, var(--dolor) 50%, transparent); }
.btns { display: grid; gap: 0.625rem; margin-top: 0.75rem; }
.btns .btn { margin-top: 0; }
.fine { font-size: 0.75rem; color: var(--faint); margin-top: 0.75rem; line-height: 1.5; }

/* ---------- Bienvenida ---------- */
.welcome { min-height: 100dvh; padding: calc(env(safe-area-inset-top) + 1.75rem) 1.375rem 2.5rem; max-width: 32.5rem; margin: 0 auto; display: flex; flex-direction: column; }
.welcome .wring { width: min(56vw, 13.125rem); margin: 0.875rem auto 0.5rem; }
.welcome h1 { font-size: 2.125rem; margin-top: 0.25rem; }
.welcome .sub { margin-top: 0.625rem; }
.welcome .card { margin-top: 1.25rem; }
.welcome .btn { margin-top: 1.125rem; }

/* ---------- Pantallas anchas ---------- */
@media (min-width: 900px) {
  .shell { display: grid; grid-template-columns: 15rem 1fr; }
  .nav { position: sticky; top: 0; left: auto; bottom: auto; height: 100dvh; grid-template-columns: 1fr; grid-auto-rows: 3.25rem; align-content: start; gap: 0.25rem; padding: 5.625rem 0.875rem 0; border-top: 0; border-right: 1px solid var(--line); background: var(--surface); backdrop-filter: none; }
  .nav button { flex-direction: row; justify-content: flex-start; gap: 0.75rem; padding: 0 1rem; border-radius: 0.875rem; font-size: 0.875rem; }
  .nav button[aria-current="page"] { background: var(--surface2); }
  main { max-width: 61.25rem; padding: 2.125rem 2.5rem 3.75rem; }
  .hoy { display: grid; grid-template-columns: 21.25rem 1fr; gap: 2.125rem; align-items: start; }
  .hoy .left { position: sticky; top: 2.125rem; }
  .hero svg { width: 18.75rem; }
  .saved { bottom: 1.75rem; }
  .wgrid { gap: 0.625rem; }
  .cell { font-size: 0.8125rem; }
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
  .grid2 .card + .card { margin-top: 0; }
}

/* ---------- Impresión (reporte para el médico) ---------- */
.reporte { display: none; }
@media print {
  html, body { background: #fff; color: #222; }
  .shell, .saved { display: none !important; }
  .reporte { display: block; padding: 8mm; font-size: 0.6875rem; color: #222; }
  .reporte h1 { font-size: 1.25rem; font-weight: 700; }
  .reporte p { margin: 0.25rem 0 0.625rem; color: #555; }
  .reporte table { font-size: 0.6562rem; }
  .reporte th, .reporte td { padding: 0.25rem 0.375rem; border: 1px solid #ccc; text-align: left; vertical-align: top; }
  .reporte th { background: #eee; color: #222; }
}

/* ---------- perfiles y alertas ---------- */
.opts { display: grid; gap: 0.625rem; margin-top: 1.125rem; }
.opt { display: flex; gap: 0.875rem; align-items: flex-start; text-align: left; width: 100%; padding: 0.9375rem 1rem; border-radius: 1.125rem; border: 1.5px solid var(--line); background: var(--surface); }
.opt i { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1.5px solid var(--faint); margin-top: 0.125rem; position: relative; }
.opt span { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }
.opt b { display: block; font-size: 0.9375rem; color: var(--text); margin-bottom: 1px; }
.opt[aria-pressed="true"] { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.opt[aria-pressed="true"] i { border-color: var(--ok); }
.opt[aria-pressed="true"] i::after { content: ""; position: absolute; inset: 0.1875rem; border-radius: 50%; background: var(--ok); }
.btn:disabled { opacity: .35; cursor: default; }
.alerta { border-radius: 1.125rem; padding: 0.875rem 1rem; margin-bottom: 0.75rem; border: 1.5px solid var(--dolor); background: color-mix(in srgb, var(--dolor) 12%, var(--surface)); font-size: 0.8438rem; line-height: 1.5; }
.alerta b { display: block; color: var(--dolor); font-size: 0.9062rem; margin-bottom: 0.125rem; }
.card-alerta { border-color: color-mix(in srgb, var(--dolor) 35%, var(--line)); }
.chips.al button[aria-pressed="true"] { border-color: var(--dolor); background: color-mix(in srgb, var(--dolor) 22%, transparent); color: var(--text); }
.cell.cal { position: relative; border-color: color-mix(in srgb, var(--dolor) 55%, var(--line)); }
.cell.cal::after { content: ""; position: absolute; top: 0.3125rem; right: 0.3125rem; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--dolor); box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--dolor) 30%, transparent); }
th, td { font-size: 0.7812rem; }
td small { margin-left: 0.1875rem; }

/* ---------- todo lo tocable se ve como botón ---------- */
.pill { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.625rem; max-width: 100%; margin-top: 0.625rem; padding: 0.5625rem 0.75rem 0.5625rem 0.9375rem; border-radius: 6.1875rem; border: 1.5px solid var(--line); background: var(--surface); color: var(--text); font-size: 0.8125rem; text-align: left; line-height: 1.3; transition: background .12s, border-color .12s, transform .12s; }
.pill b { font-weight: 700; }
.pill:hover { border-color: var(--muted); background: var(--surface2); }
.pill:active { transform: scale(.98); }
.pill .chev { flex: none; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 700; color: var(--ok); }
.pill svg { width: 0.9375rem; height: 0.9375rem; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pill.back { margin-top: 1.25rem; padding: 0.5rem 0.875rem 0.5rem 0.625rem; }
.pill.ico { margin: 0; width: 2.375rem; height: 2.375rem; padding: 0; justify-content: center; border-radius: 50%; flex: none; }
.pill.ico svg { width: 1.125rem; height: 1.125rem; }
button:focus-visible { outline: 0.125rem solid var(--ok); outline-offset: 0.125rem; }
.opt:hover { border-color: var(--muted); }

/* ---------- hoja para cambiar el perfil ---------- */
body.sin-scroll { overflow: hidden; }
.sheet-bg { position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(0.375rem); -webkit-backdrop-filter: blur(0.375rem); display: flex; align-items: flex-end; justify-content: center; animation: bg-in .2s ease; }
.sheet { width: 100%; max-width: 35rem; max-height: 88dvh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: 1.625rem 1.625rem 0 0; padding: 1.125rem 1.125rem calc(1.375rem + env(safe-area-inset-bottom)); animation: sheet-in .25s ease; }
.sheet-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
.sheet-h h3 { font-size: 1.125rem; font-weight: 600; }
@keyframes sheet-in { from { transform: translateY(2.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bg-in { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 900px) {
  .sheet-bg { align-items: center; }
  .sheet { border-radius: 1.625rem; border-bottom: 1px solid var(--line); }
}

/* ---------- más aire en Hoy ---------- */
.hoy .right { margin-top: 2.125rem; }
.hoy .right > .bar { margin-bottom: 1.375rem !important; }
.hoy .right > .bar h2 { font-size: 1.625rem; margin-bottom: 0.375rem; }
.hoy .right > .bar .sub { margin-top: 0; }
.hoy .right > .bar .pill { margin-top: 0.875rem; }
.trend { gap: 0.875rem; padding: 1.25rem 1.25rem 1.125rem; }
.trend .fine { margin-top: 0.375rem !important; line-height: 1.55; }
.daynav { margin: 0.75rem 0 1.375rem; }
.metric { padding: 1.125rem 1.25rem 1.125rem; }
.metric .hint { margin-top: 0.25rem; }
.metric .dots { margin-top: 1rem; }
.hoy .right > section.card { margin-top: 1rem !important; padding: 1.25rem; }
.hoy .right > section.card h3 + .sub { margin-top: 0.1875rem; }
.hoy .right > section.card .chips { margin-top: 0.875rem; }
@media (min-width: 900px) {
  .hoy .right { margin-top: 0; }
}
.metric .head { align-items: flex-start; gap: 0.75rem; }
.metric .head output { white-space: nowrap; padding-top: 1px; }
.metric .head h3 { line-height: 1.25; }