/* Nuestra Meta — cristal azul marino sobre un atardecer de montañas */
:root {
  --bg: #0E1830; --bg2: #16244A; --ink: #F3F5FB; --ink2: #B9C3DA; --ink3: #7F8BA8;
  --glass: rgba(24, 38, 74, .58); --glass2: rgba(34, 52, 96, .55); --line: rgba(255, 255, 255, .09); --line2: rgba(255, 255, 255, .16);
  --accent: #FFA56E; --accent2: color-mix(in oklab, var(--accent), #FF6FA8 45%);
  --teal: #3EE6C1; --blue: #5B9BFF; --violet: #A37BFF; --pink: #FF6FA8; --gold: #FFC24B; --bad: #FF7E8A; --good: #3EE6A8;
  --ring-dim: rgba(255, 255, 255, .08);
  --r: 22px; --r-sm: 14px; --shadow: 0 18px 40px -18px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .06);
  --display: 'Sora', 'Avenir Next', system-ui, sans-serif; --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sky1: #1B2A55; --sky2: #3B3566; --sky3: #B8627A; --sky4: #F39A6B; --m1: #202D52; --m2: #16203F; --m3: #0D1530;
  --tabh: 74px; color-scheme: dark;
}
:root[data-theme=light] {
  --bg: #E9EEF8; --bg2: #DDE5F4; --ink: #172039; --ink2: #4A5673; --ink3: #7A849C;
  --glass: rgba(255, 255, 255, .68); --glass2: rgba(255, 255, 255, .82); --line: rgba(20, 30, 60, .08); --line2: rgba(20, 30, 60, .16);
  --ring-dim: rgba(20, 30, 60, .08); --shadow: 0 16px 34px -20px rgba(30, 40, 80, .35), inset 0 1px 0 rgba(255, 255, 255, .8);
  --sky1: #9FB7E6; --sky2: #C7B5E0; --sky3: #F2B7A8; --sky4: #FFD2A6; --m1: #8FA3CF; --m2: #7488B8; --m3: #5D6FA0; color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
body { margin: 0; min-height: 100dvh; font: 400 15px/1.45 var(--body); color: var(--ink); background: transparent; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; letter-spacing: -.01em; }
h2 { font-size: 17px; font-weight: 600; } h3 { font-size: 16px; font-weight: 600; } h4 { font-size: 14px; margin: 14px 0 6px; color: var(--ink2); }
p { margin: 6px 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.muted { color: var(--ink2); } .fine { font-size: 12px; color: var(--ink3); line-height: 1.4; } .center-t { text-align: center; } .pad { padding: 12px 4px; }
.bad-t { color: var(--bad); } .ok-line { color: var(--good); font-weight: 600; }
code, .code { font: 12px/1.5 ui-monospace, Menlo, monospace; } .code { background: rgba(0, 0, 0, .25); padding: 10px; border-radius: 12px; overflow-x: auto; white-space: pre; }

/* Escenario: atardecer y montañas (inspirado en Yecapixtla / Popocatépetl) */
.scenery { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.scenery svg { width: 100%; height: 100%; }
.scenery::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--bg) 70%, transparent) 62%, var(--bg) 92%); }
[data-tab=today] .scenery::after { background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--bg) 60%, transparent) 70%, var(--bg) 96%); }

/* Estructura */
#app { max-width: 560px; margin: 0 auto; padding: 0 16px calc(var(--tabh) + 26px + env(safe-area-inset-bottom)); }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 2px 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, transparent) 60%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.greet { flex: 1; min-width: 0; } .greet b { display: block; font: 600 16px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .greet small { display: block; color: var(--ink2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-pills { display: flex; gap: 6px; } .sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink3); flex: none; }
.sync-dot.st-synced { background: var(--good); } .sync-dot.st-syncing { background: var(--blue); animation: pulse 1s infinite; } .sync-dot.st-error { background: var(--bad); } .sync-dot.st-offline, .sync-dot.st-signed-out { background: var(--gold); }
.bell { position: relative; } .badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; border-radius: 9px; background: var(--accent); color: #1a1a2e; font: 700 10px/16px var(--body); text-align: center; font-style: normal; }
.avatar { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: 22px; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 55%, #fff) 0, var(--accent) 45%, color-mix(in srgb, var(--accent) 50%, #000) 100%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent), 0 8px 18px -6px var(--accent); }
.avatar.lg { width: 64px; height: 64px; font-size: 32px; } .avatar.xl { width: 58px; height: 58px; font-size: 30px; flex: none; }
.avatar.switching { animation: spin .5s ease; }
#main { min-height: 60vh; }
#main.anim { animation: fadeUp .32s cubic-bezier(.2, .8, .2, 1); }
#main.anim[data-tr=push] { animation-name: slideIn; } #main.anim[data-tr=back] { animation-name: slideBack; } #main.anim[data-tr=next] { animation-name: slideIn; } #main.anim[data-tr=prev] { animation-name: slideBack; } #main.anim[data-tr=profile] { animation: profileIn .5s ease; }

/* Barra inferior */
.tabbar { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); width: min(540px, calc(100% - 20px)); height: var(--tabh); display: grid; grid-template-columns: repeat(3, 1fr) 66px repeat(3, 1fr); align-items: center; padding: 0 4px; border-radius: 28px; background: var(--glass2); border: 1px solid var(--line2); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .6); }
.tab { display: grid; justify-items: center; gap: 3px; min-width: 0; color: var(--ink3); font-size: 9px; letter-spacing: -.02em; padding: 8px 0; border-radius: 16px; transition: color .2s; }
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab.on { color: var(--accent); } .tab.on .ic { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 60%, transparent)); }
.fab { width: 62px; height: 62px; margin: -30px auto 0; border-radius: 50%; display: grid; place-items: center; color: #22162a; background: linear-gradient(145deg, #FFD0A8, var(--accent) 45%, var(--accent2)); box-shadow: 0 14px 26px -8px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 0 6px var(--bg); transition: transform .2s; }
.fab:active { transform: scale(.92) rotate(45deg); }
body.in-session .tabbar, body.in-onboarding .tabbar, body.in-session .top, body.in-onboarding .top { visibility: hidden; }

/* Tarjetas y cristal */
.card { display: block; width: 100%; text-align: left; background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin: 12px 0; box-shadow: var(--shadow); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
.card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .card-h h2 { flex: 1; } .head-right { display: flex; gap: 4px; margin-left: auto; }
.card3d { transform-style: preserve-3d; }
.sub { font: 600 13px var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--ink3); margin: 20px 4px 4px; }
.stack { display: grid; gap: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.empty { text-align: center; padding: 26px 16px; color: var(--ink2); background: var(--glass); border: 1px dashed var(--line2); border-radius: var(--r); margin: 12px 0; } .empty .btn { margin-top: 8px; }
.notice { display: flex; gap: 10px; align-items: flex-start; border-color: color-mix(in srgb, var(--gold) 40%, transparent); } .notice .btn { margin-left: auto; flex: none; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); white-space: nowrap; }
.pill.ok { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); } .pill.streak { color: var(--gold); }
.bar { height: 7px; border-radius: 9px; background: var(--ring-dim); overflow: hidden; } .bar.lg { height: 11px; margin: 10px 0 6px; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--blue), var(--violet)); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.scroll-x { overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; } .scroll-x::-webkit-scrollbar { display: none; }
.scroll-x .seg { width: max-content; min-width: 100%; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 18px; border-radius: 15px; font-weight: 600; transition: transform .15s, filter .2s, background .2s; white-space: nowrap; }
.btn:active { transform: scale(.97); } .btn[disabled] { opacity: .45; pointer-events: none; }
.btn-primary { color: #25172b; background: linear-gradient(135deg, #FFCFA3, var(--accent) 50%, var(--accent2)); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-ghost { background: rgba(255, 255, 255, .07); border: 1px solid var(--line2); } .btn-ghost.on { border-color: var(--accent); color: var(--accent); }
.btn-danger-ghost { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); }
.btn.sm { min-height: 38px; padding: 0 13px; font-size: 13.5px; border-radius: 12px; } .btn.xs { min-height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 10px; } .btn.block { display: flex; width: 100%; margin-top: 8px; }
.icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid var(--line); flex: none; }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 10px; } .icon-btn.fav.on, .ic.filled { color: var(--gold); fill: var(--gold); }
.sparkle { animation: pop .5s ease; }
.link { color: var(--accent); font-weight: 600; font-size: 13.5px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; } .row-actions.wrap { flex-wrap: wrap; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; } .form-actions .btn-primary { flex: 1; }
.round-btn { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); border: 1px solid var(--line2); }
.round-btn.big { width: 88px; height: 88px; color: #25172b; background: linear-gradient(145deg, #FFD0A8, var(--accent) 50%, var(--accent2)); box-shadow: 0 16px 34px -12px var(--accent), inset 0 2px 0 rgba(255, 255, 255, .5); }
.round-btn.stop { background: color-mix(in srgb, var(--bad) 22%, transparent); color: var(--bad); }

/* Formularios */
.form { display: grid; gap: 12px; }
.field { display: grid; gap: 6px; margin: 0; border: 0; padding: 0; min-width: 0; } .field > span, .field > legend { font-size: 12.5px; font-weight: 600; color: var(--ink2); padding: 0; }
.field small { color: var(--ink3); font-size: 12px; }
.field-in { display: flex; align-items: center; background: rgba(255, 255, 255, .06); border: 1px solid var(--line2); border-radius: 13px; padding: 0 12px; transition: border-color .2s; }
.field-in:focus-within { border-color: var(--accent); }
.field-in input, .field-in select { flex: 1; min-width: 0; height: 46px; border: 0; background: none; outline: none; }
.field-in select option { background: var(--bg2); color: var(--ink); } .field-in em { font-style: normal; color: var(--ink3); font-size: 13px; margin-left: 6px; }
textarea, .ob-in, .inline-form input, .search-in input, .rt { width: 100%; background: rgba(255, 255, 255, .06); border: 1px solid var(--line2); border-radius: 13px; padding: 11px 12px; outline: none; resize: vertical; }
textarea:focus, .inline-form input:focus, .rt:focus { border-color: var(--accent); }
.inline-form { display: flex; gap: 8px; align-items: center; } .inline-form input { height: 46px; flex: 1; min-width: 0; } .inline-form .qty { flex: 0 0 34%; }
.search-in { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line2); border-radius: 14px; padding: 0 12px; margin: 10px 0; color: var(--ink3); }
.search-in input { border: 0; background: none; height: 44px; padding: 0; } .search-in.big input { height: 52px; font-size: 16px; }
.big-input { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 10px 0; }
.big-input input { width: 190px; text-align: center; font: 700 52px/1 var(--display); background: none; border: 0; border-bottom: 2px solid var(--line2); outline: none; } .big-input input:focus { border-color: var(--accent); } .big-input span { color: var(--ink2); font-weight: 600; }
.scale-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; } .scale-row label { position: relative; }
.scale-row input, .chip input, .swatch input, .ob-avatars input, .ob-choices input { position: absolute; opacity: 0; pointer-events: none; }
.scale-row span { display: grid; place-items: center; height: 40px; border-radius: 11px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); font-weight: 600; font-size: 14px; transition: all .15s; cursor: pointer; }
.scale-row.dense span { height: 34px; font-size: 12.5px; }
.scale-row input:checked + span { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #25172b; border-color: transparent; transform: translateY(-1px); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; } .chips.scroll { flex-wrap: nowrap; overflow-x: auto; margin: 8px -16px; padding: 2px 16px; scrollbar-width: none; } .chips.scroll::-webkit-scrollbar { display: none; }
.chip { position: relative; } .chip span, .chip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line2); font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.chip input:checked + span, .chip-btn.on { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); color: var(--ink); }
.chip-btn i { width: 8px; height: 8px; border-radius: 50%; }
.swatch { position: relative; } .swatch span { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--sw, transparent); border: 2px solid var(--line2); cursor: pointer; }
.swatch input[value=""] + span { background: repeating-linear-gradient(45deg, transparent 0 5px, var(--line2) 5px 7px); }
.swatch input:checked + span { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--sw, var(--ink)); }
.toggle { display: flex; align-items: center; gap: 12px; padding: 6px 0; cursor: pointer; } .toggle > span { flex: 1; } .toggle b { display: block; font-weight: 600; } .toggle small { color: var(--ink3); font-size: 12px; }
.toggle input, .switch input, .check input { position: absolute; opacity: 0; }
.toggle i, .switch i { position: relative; width: 48px; height: 28px; border-radius: 16px; background: rgba(255, 255, 255, .14); flex: none; transition: background .2s; }
.toggle i::after, .switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); box-shadow: 0 2px 5px rgba(0, 0, 0, .3); }
.toggle input:checked + i, .switch input:checked + i { background: var(--accent); } .toggle input:checked + i::after, .switch input:checked + i::after { transform: translateX(20px); }
.toggle.mini { padding: 2px 0; } .switch { position: relative; display: inline-flex; cursor: pointer; }
.toggle input:focus-visible + i, .switch input:focus-visible + i, .scale-row input:focus-visible + span, .chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-field input { font-size: 13px; } .thumb-prev { width: 90px; height: 90px; object-fit: cover; border-radius: 12px; }
.rt-bar { display: flex; gap: 4px; } .rt-bar button { width: 36px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .07); display: grid; place-items: center; }
.rt { min-height: 110px; line-height: 1.5; }
details.adjust summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13.5px; padding: 6px 0; } details.adjust[open] summary { margin-bottom: 8px; }
input[type=range] { accent-color: var(--accent); } input[type=range].wide { width: 100%; margin: 10px 0; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator { filter: invert(.8); }
:root[data-theme=light] input[type=date]::-webkit-calendar-picker-indicator { filter: none; }

/* Segmentos */
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); margin: 10px 0; }
.seg button { flex: 1; min-height: 36px; padding: 0 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink2); white-space: nowrap; transition: all .2s; }
.seg button.on { color: var(--ink); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent2) 24%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }

/* Listas */
.list { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); } .row:last-child { border-bottom: 0; }
.row-btn { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: left; padding: 2px 0; }
.row-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); flex: none; font-size: 17px; }
.row-main { flex: 1; min-width: 0; } .row-main b { display: block; font-weight: 600; } .row-main small { display: block; color: var(--ink2); font-size: 12.5px; }
.row-meta { color: var(--ink2); font-size: 12.5px; text-align: right; flex: none; } .row-acts { display: flex; gap: 4px; align-items: center; }
.st { color: var(--gold); }
.stat-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin: 10px 0; }
.stat-strip > div { text-align: center; padding: 12px 6px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); } .stat-strip b { display: block; font: 700 21px var(--display); } .stat-strip small { color: var(--ink2); font-size: 11.5px; }

/* Hoja inferior */
#sheet-root { position: fixed; inset: 0; z-index: 60; display: none; } #sheet-root.open { display: block; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(4, 8, 20, .55); opacity: 0; transition: opacity .22s; backdrop-filter: blur(2px); }
.sheet { position: absolute; left: 50%; bottom: 0; width: min(560px, 100%); max-height: 92dvh; display: flex; flex-direction: column; transform: translate(-50%, 100%); transition: transform .3s cubic-bezier(.2, .9, .2, 1); background: color-mix(in srgb, var(--bg2) 94%, transparent); border: 1px solid var(--line2); border-bottom: 0; border-radius: 28px 28px 0 0; box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .7); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
#sheet-root.in .sheet-backdrop { opacity: 1; } #sheet-root.in .sheet { transform: translate(-50%, 0); }
.sheet-grab { width: 42px; height: 5px; border-radius: 3px; background: var(--line2); margin: 9px auto 0; flex: none; }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 8px 18px 4px; flex: none; } .sheet-head h2 { flex: 1; font-size: 19px; }
.sheet-body { overflow-y: auto; padding: 8px 18px calc(22px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.sheet.center .sheet-body { padding-top: 18px; }

/* Avisos y confeti */
#toast-root { position: fixed; z-index: 80; left: 50%; transform: translateX(-50%); top: calc(12px + env(safe-area-inset-top)); width: min(460px, calc(100% - 24px)); display: grid; gap: 8px; pointer-events: none; }
.toast { padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--bg2) 94%, transparent); border: 1px solid var(--line2); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6); font-weight: 500; opacity: 0; transform: translateY(-12px) scale(.97); transition: all .3s cubic-bezier(.2, .9, .3, 1.2); backdrop-filter: blur(16px); }
.toast.in { opacity: 1; transform: none; } .toast.ok { border-left: 4px solid var(--good); } .toast.bad { border-left: 4px solid var(--bad); } .toast.info { border-left: 4px solid var(--gold); }
#confetti { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: none; width: 100%; height: 100%; }

/* ====== HOY ====== */
.hero-row { display: grid; grid-template-columns: 1.02fr 1fr; gap: 12px; align-items: stretch; margin-top: 8px; }
.orb-wrap { position: relative; display: grid; place-items: center; perspective: 700px; padding: 6px 0 18px; }
.orb { position: relative; width: min(46vw, 200px); aspect-ratio: 1; border-radius: 50%; transform: rotateX(14deg); transform-style: preserve-3d; animation: orbFloat 6s ease-in-out infinite; }
.orb-ring { position: absolute; inset: 0; border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 60%, #000 61.5%); mask: radial-gradient(circle, transparent 60%, #000 61.5%); filter: drop-shadow(0 0 12px rgba(91, 155, 255, .45)); animation: ringIn 1.1s cubic-bezier(.2, .8, .2, 1); }
.orb-core { position: absolute; inset: 17%; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .28), rgba(255, 255, 255, .04) 38%, rgba(8, 14, 34, .5) 72%), radial-gradient(circle at 60% 80%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 60%); box-shadow: inset 0 -12px 26px rgba(0, 0, 0, .45), inset 0 8px 18px rgba(255, 255, 255, .12), 0 10px 30px -10px rgba(0, 0, 0, .8); transform: translateZ(26px); }
.orb-core strong { font: 700 44px/1 var(--display); letter-spacing: -.03em; } .orb-core strong small { font-size: 20px; opacity: .8; } .orb-core span { font-size: 12px; color: var(--ink2); }
.orb-shadow { position: absolute; bottom: 4px; width: 55%; height: 14px; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, .55), transparent 70%); filter: blur(3px); animation: shadowPulse 6s ease-in-out infinite; }
.countdown { display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--ev) 26%, var(--glass)), var(--glass) 60%); }
.cd-top { display: flex; gap: 8px; align-items: center; } .cd-emoji { font-size: 26px; } .cd-top b { display: block; font: 600 14px/1.2 var(--display); } .cd-top small { color: var(--ink2); font-size: 11.5px; }
.cd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; margin-top: 10px; }
.cd-grid div { padding: 7px 0; border-radius: 11px; background: rgba(0, 0, 0, .18); } .cd-grid strong { display: block; font: 700 20px/1.1 var(--display); font-variant-numeric: tabular-nums; } .cd-grid span { font-size: 10px; color: var(--ink2); }
.empty-cd { align-items: center; justify-content: center; text-align: center; gap: 8px; color: var(--ink2); border-style: dashed; }
.suggest { display: flex; align-items: center; gap: 10px; } .suggest p { flex: 1; margin: 0; font-size: 13.5px; } .sg-ic { color: var(--accent); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { position: relative; padding: 13px; border-radius: 20px; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); cursor: pointer; transition: transform .2s; text-align: left; }
.tile:active { transform: scale(.98); }
.tile-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.t-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--ic); background: color-mix(in srgb, var(--ic) 16%, transparent); }
.plus { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); }
.t-val { font: 700 25px/1.1 var(--display); margin: 8px 0 3px; letter-spacing: -.02em; } .t-val small { font: 500 13px var(--body); color: var(--ink2); margin-left: 3px; }
.t-sub { font-size: 12px; color: var(--ink2); } .t-sub .down { color: var(--good); } .t-sub .up { color: var(--gold); }
.t-train { font-weight: 600; margin: 10px 0; font-size: 14px; } .t-actions { display: flex; gap: 6px; margin-top: 8px; }
.water-tile .bar i { background: linear-gradient(90deg, #7FB8FF, var(--blue)); } .water-tile .bar { margin-top: 6px; }
.qbtn { min-height: 44px; border-radius: 13px; background: color-mix(in srgb, var(--blue) 18%, transparent); border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent); font-weight: 700; color: #BFD8FF; }
:root[data-theme=light] .qbtn { color: #2156b8; }
.qbtn.sm { min-height: 32px; flex: 1; font-size: 12.5px; border-radius: 10px; }
.readiness { display: flex; align-items: center; gap: 12px; } .rd-emoji { font-size: 30px; } .rd-main { flex: 1; } .rd-main b { display: block; font-family: var(--display); } .rd-main small { color: var(--ink2); }
.habit-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 2px 4px; }
.habit { flex: none; display: grid; justify-items: center; gap: 4px; width: 82px; padding: 10px 4px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); font-size: 11.5px; text-align: center; line-height: 1.2; transition: all .25s; }
.habit span { font-size: 22px; filter: grayscale(.8) opacity(.6); transition: filter .25s; } .habit.done { background: color-mix(in srgb, var(--good) 14%, transparent); border-color: color-mix(in srgb, var(--good) 45%, transparent); } .habit.done span { filter: none; animation: pop .4s ease; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; } .timeline::before { content: ''; position: absolute; left: 52px; top: 6px; bottom: 6px; width: 2px; background: var(--line2); }
.timeline li { display: flex; align-items: center; gap: 12px; padding: 7px 0; } .timeline time { width: 40px; font-size: 12px; color: var(--ink3); text-align: right; font-variant-numeric: tabular-nums; }
.tl-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--bg2), 0 0 10px var(--c); z-index: 1; flex: none; } .tl-body small { color: var(--ink2); margin-left: 4px; }
.night { background: linear-gradient(150deg, rgba(64, 56, 130, .45), var(--glass)); }
.seg-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .seg-list li { display: grid; grid-template-columns: 12px 1fr 1.3fr 42px; gap: 10px; align-items: center; } .seg-list .dot { width: 10px; height: 10px; border-radius: 50%; } .seg-list em { font-style: normal; text-align: right; color: var(--ink2); }
.xp-box { margin: 18px 0 6px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); } .xp-box .bar { margin: 8px 0; } .xp-box small { color: var(--ink2); }
.water-head { display: grid; justify-items: center; gap: 6px; margin-bottom: 10px; }
.water-glass { position: relative; width: 104px; height: 128px; border-radius: 16px 16px 30px 30px; border: 2px solid rgba(160, 200, 255, .45); overflow: hidden; display: grid; place-items: center; background: rgba(91, 155, 255, .06); }
.water-glass .wave { position: absolute; left: -50%; width: 200%; bottom: 0; height: calc(var(--p) * 100%); background: linear-gradient(180deg, rgba(120, 180, 255, .85), rgba(60, 120, 230, .9)); transition: height .8s cubic-bezier(.2, .8, .2, 1); }
.water-glass .wave::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 16px; background: radial-gradient(ellipse at 25% 100%, rgba(120, 180, 255, .85) 50%, transparent 52%) 0 0/50% 100% repeat-x; animation: wave 2.4s linear infinite; }
.water-glass span { position: relative; font: 700 19px var(--display); text-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.quick-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0; } .quick-grid .qbtn { font-size: 12.5px; padding: 0 2px; }
.fab-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 6px; }
.fab-item { display: grid; justify-items: center; gap: 6px; padding: 14px 2px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; transition: transform .15s; animation: popIn .35s backwards; }
.fab-item:nth-child(n) { animation-delay: calc(var(--d, 0) * 1ms); } .fab-item span { font-size: 26px; } .fab-item:active { transform: scale(.94); }
.profile-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.profile-pick { display: grid; justify-items: center; gap: 6px; padding: 18px 8px; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); --accent: var(--pa); } .profile-pick.on { border-color: var(--pa); box-shadow: 0 0 0 1px var(--pa) inset; } .profile-pick small { color: var(--ink2); }
.pin-input { text-align: center; font: 700 30px var(--display); letter-spacing: .5em; height: 60px; width: 100%; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line2); outline: none; }

/* Medalla 3D */
.celebrate { text-align: center; padding: 6px 0; } .celebrate h2 { font-size: 23px; margin-top: 14px; } .celebrate .row-actions { justify-content: center; margin-top: 16px; }
.medal3d { position: relative; width: 132px; height: 160px; margin: 0 auto; perspective: 600px; } .medal3d.sm { width: 64px; height: 64px; }
.medal-ribbon { position: absolute; left: 50%; top: 0; width: 56px; height: 64px; transform: translateX(-50%); background: linear-gradient(90deg, #FF6FA8 0 33%, #fff 33% 66%, #5B9BFF 66%); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.medal-face { position: absolute; left: 50%; bottom: 0; width: 112px; height: 112px; margin-left: -56px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #FFF3C4, #F2C14E 40%, #C78A1C 75%, #8C5A08); box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .3), inset 0 6px 10px rgba(255, 255, 255, .6), 0 18px 30px -12px rgba(242, 193, 78, .7); animation: medalSpin 1.6s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; }
.medal3d.sm .medal-face { width: 60px; height: 60px; margin-left: -30px; animation: none; } .medal-face span { font-size: 50px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); } .medal3d.sm .medal-face span { font-size: 26px; }
.medal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.medal-card { display: grid; justify-items: center; gap: 4px; padding: 14px 8px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); text-align: center; } .medal-card b { font-size: 13.5px; line-height: 1.25; } .medal-card small { font-size: 12px; }

/* ====== CALENDARIO ====== */
.cal-nav { display: flex; align-items: center; gap: 6px; margin: 4px 0; } .cal-nav h2 { flex: 1; text-align: center; font-size: 18px; }
.jump { position: relative; overflow: hidden; } .jump input { position: absolute; inset: 0; opacity: 0; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11.5px; color: var(--ink3); margin-bottom: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; touch-action: pan-y; }
.cal-cell { position: relative; aspect-ratio: 1/1.08; border-radius: 12px; display: grid; justify-items: center; align-content: start; padding-top: 5px; background: rgba(255, 255, 255, .03); border: 1px solid transparent; font-size: 13px; transition: all .15s; }
.cal-cell[style*="--dc"] { background: color-mix(in srgb, var(--dc) 22%, transparent); }
.cal-cell.out { opacity: .35; } .cal-cell.dim { opacity: .25; } .cal-cell.today .n { background: var(--accent); color: #25172b; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; font-weight: 700; }
.cal-cell.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .cal-cell.imp { box-shadow: inset 0 -3px 0 var(--gold); }
.cal-cell .emo { font-size: 11px; line-height: 1; margin-top: 2px; } .dots { display: flex; gap: 2px; position: absolute; bottom: 5px; } .dots i { width: 5px; height: 5px; border-radius: 50%; }
.week-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 4px; border-bottom: 1px solid var(--line); text-align: left; } .week-row:last-child { border: 0; } .week-row.sel { color: var(--accent); }
.wd { display: grid; width: 38px; text-align: center; font-size: 17px; font-weight: 700; } .wd b { font-size: 11px; color: var(--ink3); font-weight: 600; } .week-row.today .wd { color: var(--accent); } .wmain { flex: 1; font-size: 13.5px; color: var(--ink2); } .week-row .dots { position: static; }
.year-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mini-month { margin: 0; padding: 10px; } .mini-month b { font-size: 12.5px; }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 6px; } .mini-grid i { aspect-ratio: 1; border-radius: 2px; background: rgba(255, 255, 255, .06); } .mini-grid i.on { background: var(--teal); } .mini-grid i.s { background: var(--gold); } .mini-grid i.t { outline: 1px solid var(--accent); }
.agenda-list { list-style: none; margin: 0; padding: 0; } .agenda-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 0; text-align: left; border-bottom: 1px solid var(--line); } .agenda-list li:last-child button { border: 0; }
.agenda-list time { width: 40px; font-size: 12px; color: var(--ink3); } .ag-ic { font-size: 18px; } .ag-main { flex: 1; min-width: 0; } .ag-main b { display: block; font-weight: 600; } .ag-main small { color: var(--ink2); font-size: 12px; }
.day-label { font-weight: 600; color: var(--accent); } .sum-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; } .sum-chips span { padding: 5px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); font-size: 12.5px; }
.mini-stat { display: grid; gap: 2px; padding: 12px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); text-align: left; } .mini-stat span { font-size: 20px; } .mini-stat small { color: var(--ink2); font-size: 12px; } .mini-stat b { font-family: var(--display); }
.day-stats { margin-top: 10px; }

/* ====== COMIDA ====== */
.date-nav { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin: 6px 0; } .date-nav b { font-family: var(--display); }
.date-lbl { position: relative; flex: 1; text-align: center; } .date-lbl input { position: absolute; inset: 0; opacity: 0; }
.macro-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.macro-ring { position: relative; display: grid; place-items: center; } .ring-center { position: absolute; text-align: center; display: grid; } .ring-center strong { font: 700 28px/1 var(--display); } .ring-center span { font-size: 12px; color: var(--ink2); } .ring-center small { font-size: 11px; color: var(--ink3); }
.ring-bg { fill: none; stroke: var(--ring-dim); } .ring-fg { fill: none; transition: stroke-dashoffset 1.2s cubic-bezier(.2, .8, .2, 1); }
.macros { display: grid; gap: 10px; } .macro-h { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; } .macro-h span { color: var(--ink2); } .macro-h small { color: var(--ink3); font-weight: 400; }
.meal-items { list-style: none; margin: 0 0 8px; padding: 0; } .meal-items li { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); } .meal-items li:last-child { border: 0; }
.mi { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 10px 0; text-align: left; } .mi-time { font-size: 12px; color: var(--ink3); }
.rc-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); font-size: 19px; flex: none; }
.rc-main { flex: 1; min-width: 0; } .rc-main b { display: block; font-weight: 600; line-height: 1.25; } .rc-main small { color: var(--ink2); font-size: 12px; }
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.qa { display: grid; justify-items: center; gap: 5px; padding: 12px 2px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--ink2); } .qa .ic { color: var(--accent); }
.link-cards .link-card, .link-card { display: flex; align-items: center; gap: 12px; } .link-card > .ic:first-child { color: var(--accent); } .link-card span { flex: 1; } .link-card b { display: block; font-family: var(--display); font-weight: 600; } .link-card small { color: var(--ink2); font-size: 12.5px; }
.rc-list { list-style: none; margin: 0; padding: 0; } .rc-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; text-align: left; border-bottom: 1px solid var(--line); } .rc-list li:last-child .rc-row { border: 0; }
.picker .rc-list { max-height: 46dvh; overflow-y: auto; }
.rc-hero { display: flex; gap: 12px; align-items: center; } .rc-hero > div { flex: 1; } .rc-big { font-size: 38px; width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); }
.macro-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .macro-pills span { padding: 7px 11px; border-radius: 12px; background: rgba(255, 255, 255, .06); font-size: 12.5px; } .macro-pills b { font-family: var(--display); }
.ing { list-style: none; padding: 0; margin: 0; } .ing li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14px; } .ing em { font-style: normal; color: var(--ink2); text-align: right; font-size: 12.5px; }
.steps { padding-left: 20px; margin: 0; } .steps li { padding: 4px 0; }
.pl-grid { display: grid; gap: 6px; } .pl-row { display: grid; grid-template-columns: 84px 1fr; gap: 8px; align-items: center; } .pl-lbl { font-size: 12px; color: var(--ink3); }
.pl-cell { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .pl-item { padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--teal) 14%, transparent); font-size: 12.5px; text-align: left; } .pl-add { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; border: 1px dashed var(--line2); color: var(--ink3); }
.plan-day.today { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.shop { list-style: none; padding: 0; margin: 0; } .shop li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); } .shop li:last-child { border: 0; } .shop em { font-style: normal; font-size: 12.5px; color: var(--ink2); }
.shop li.done span { text-decoration: line-through; opacity: .5; }
.check { position: relative; display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; } .check i { width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--line2); flex: none; display: grid; place-items: center; transition: all .2s; }
.check input:checked + i { background: var(--good); border-color: var(--good); } .check input:checked + i::after { content: '✓'; color: #0E1830; font-weight: 800; font-size: 14px; }

/* ====== ENTRENAR ====== */
.train-hero { position: relative; overflow: hidden; padding: 20px; } .train-hero h2 { font-size: 22px; margin: 4px 0 6px; } .train-hero small { color: var(--accent); font-weight: 600; } .train-hero .btn { margin-top: 10px; }
.th-bg { position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%); pointer-events: none; }
.quick-start { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qs { display: grid; justify-items: center; gap: 6px; padding: 12px 2px; border-radius: 16px; background: color-mix(in srgb, var(--qc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--qc) 30%, transparent); font-size: 12px; font-weight: 600; } .qs span { color: var(--qc); }
.plan-progress small { color: var(--ink2); }
.plan-days { list-style: none; margin: 0; padding: 0; } .pd { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 0; text-align: left; border-bottom: 1px solid var(--line); } .plan-days li:last-child .pd { border: 0; }
.pd-date { display: grid; width: 34px; text-align: center; font-weight: 700; } .pd-date b { font-size: 10.5px; color: var(--ink3); } .pd-ic { font-size: 18px; } .pd-main { flex: 1; font-size: 14px; } .pd-st { color: var(--good); font-size: 12px; font-weight: 700; }
.pd.done .pd-main { color: var(--ink2); } .pd.today { color: var(--accent); } .pd.today .pd-st { color: var(--accent); } .pd.missed .pd-main { opacity: .55; }
.tpl-row { display: grid; grid-template-columns: 36px 1fr 1.2fr; gap: 8px; align-items: center; } .tpl-row input { height: 46px; border-radius: 13px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line2); padding: 0 10px; min-width: 0; }
.iv-track { position: relative; display: flex; height: 10px; border-radius: 6px; overflow: hidden; gap: 2px; margin: 12px 0 4px; } .iv-track i { display: block; } .iv-track i.run { background: var(--blue); } .iv-track i.walk { background: var(--teal); }
.iv-track #lv-cursor { position: absolute; top: -3px; bottom: -3px; width: 3px; background: #fff; border-radius: 2px; box-shadow: 0 0 8px #fff; left: 0; }
.live { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; gap: 14px; padding: calc(16px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; background: radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%), linear-gradient(180deg, #121E3E, #0A1128); color: #F3F5FB; animation: fadeUp .3s ease; }
.live-top { display: flex; align-items: center; gap: 12px; } .live-top > div { flex: 1; } .live-top b { display: block; font: 600 17px var(--display); } .live-top small { color: #B9C3DA; } .live-emoji { font-size: 32px; }
.live-seg { text-align: center; } .seg-pill { display: inline-block; padding: 6px 16px; border-radius: 999px; font: 700 15px var(--display); text-transform: uppercase; letter-spacing: .06em; background: rgba(255, 255, 255, .1); }
.seg-pill[data-t=run] { background: var(--blue); color: #fff; box-shadow: 0 0 24px rgba(91, 155, 255, .6); } .seg-pill[data-t=walk] { background: var(--teal); color: #0A1128; }
.live-seg strong { display: block; font: 700 64px/1.05 var(--display); font-variant-numeric: tabular-nums; margin-top: 8px; } .live-seg small { color: #B9C3DA; }
.live-time { text-align: center; } .live-time strong { display: block; font: 600 38px var(--display); font-variant-numeric: tabular-nums; } .live-time small { color: #B9C3DA; font-size: 12px; }
.live:not(.has-iv) .live-time strong { font-size: 76px; margin-top: 30px; }
.live-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; } .live-stats div { text-align: center; padding: 12px 4px; border-radius: 16px; background: rgba(255, 255, 255, .07); } .live-stats b { display: block; font: 700 20px var(--display); font-variant-numeric: tabular-nums; } .live-stats small { color: #B9C3DA; font-size: 11px; }
.mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mode-toggle button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border-radius: 18px; background: rgba(255, 255, 255, .07); font-weight: 700; border: 2px solid transparent; }
.mode-toggle button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.live-ctrl { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: auto; padding-top: 10px; }
.live-opts { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .opt { padding: 9px 14px; border-radius: 12px; background: rgba(255, 255, 255, .08); font-size: 13px; font-weight: 600; } .opt.on { background: var(--accent); color: #25172b; }
.warn-link { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: #FFB8C0; }
.paused-tag { position: fixed; top: calc(70px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: var(--gold); color: #1a1a2e; font-weight: 700; animation: pulse 1.4s infinite; }
.lock-layer { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; text-align: center; background: rgba(5, 9, 22, .82); color: #fff; touch-action: none; user-select: none; -webkit-user-select: none; }
.lock-layer .hold { width: 160px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); margin: 16px auto 0; overflow: hidden; } .lock-layer .hold i { display: block; height: 100%; width: 0; background: var(--accent); }
.lock-layer.holding .hold i { width: 100%; transition: width 1.1s linear; }
.strength .st-list .card { background: rgba(255, 255, 255, .06); } .ex-card.grouped { border-left: 3px solid var(--violet); }
.sets { display: grid; gap: 6px; margin: 8px 0; } .set-h, .set { display: grid; grid-template-columns: 34px 1fr 1fr 44px; gap: 8px; align-items: center; } .set-h { font-size: 11px; color: #B9C3DA; }
.set input { height: 44px; width: 100%; text-align: center; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-weight: 700; font-size: 16px; }
.set span { text-align: center; font-weight: 700; color: #B9C3DA; } .set.done input { border-color: var(--good); }
.check-btn { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #7F8BA8; } .check-btn.on { background: var(--good); color: #0A1128; }
.rest-bar { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--blue) 30%, #0A1128); } .rest-bar b { font: 700 22px var(--display); } .rest-bar .bar { grid-column: 1 / -1; } .rest-bar .bar i { transition: width .25s linear; }
.post-hero { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent), transparent); } .post-hero > span { font-size: 38px; } .post-hero b { display: block; font: 600 18px var(--display); } .post-hero small { color: var(--ink2); }
.wo-detail blockquote, .event-detail blockquote { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: rgba(255, 255, 255, .04); border-radius: 0 12px 12px 0; }
.warn-box ul { padding-left: 20px; } .warn-box li { padding: 3px 0; font-weight: 600; }

/* ====== PROGRESO ====== */
.journey { position: relative; overflow: hidden; margin: 12px 0; padding: 18px; border-radius: 26px; background: linear-gradient(155deg, color-mix(in srgb, var(--accent) 22%, var(--glass)), var(--glass) 45%, color-mix(in srgb, var(--violet) 18%, var(--glass))); border: 1px solid var(--line2); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: perspective(900px) rotateX(3deg); }
.j-glow { position: absolute; inset: -40% -20% auto auto; width: 70%; height: 120%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent), transparent 65%); pointer-events: none; animation: glow 7s ease-in-out infinite alternate; }
.j-head small { font: 700 12px var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); } .j-head b { display: block; font: 600 16px var(--display); margin-top: 2px; }
.j-weight { display: grid; grid-template-columns: 1fr auto 1fr 1fr; align-items: end; gap: 6px; margin: 16px 0; } .j-weight small { display: block; font-size: 11.5px; color: var(--ink2); } .j-weight strong { font: 700 30px/1 var(--display); letter-spacing: -.03em; } .j-weight em { font: 500 13px var(--body); color: var(--ink2); font-style: normal; margin-left: 2px; }
.j-arrow { color: var(--accent); padding-bottom: 4px; } .j-delta strong { color: var(--accent); }
.j-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .j-stats div { text-align: center; padding: 10px 2px; border-radius: 14px; background: rgba(0, 0, 0, .16); } .j-stats b { display: block; font: 700 19px var(--display); } .j-stats small { font-size: 10.5px; color: var(--ink2); line-height: 1.2; display: block; }
.j-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 14px; font-size: 12.5px; color: var(--ink2); } .j-sec span { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding-bottom: 4px; } .j-sec b { color: var(--ink); }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-box { padding: 12px 10px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); display: grid; gap: 2px; } .sb-ic { font-size: 18px; } .stat-box small { color: var(--ink2); font-size: 11.5px; } .stat-box b { font: 700 17px var(--display); } .stat-box em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ink3); } .stat-box em.good { color: var(--good); } .stat-box em.meh { color: var(--gold); }
.chart { position: relative; } .chart svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.chart .grid { stroke: var(--line); stroke-dasharray: 3 4; } .chart .axis { fill: var(--ink3); font-size: 10px; font-family: var(--body); } .chart .goal { stroke: var(--gold); stroke-dasharray: 6 5; opacity: .7; }
.chart .line { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.3s cubic-bezier(.3, .7, .2, 1) forwards; }
.chart .trend { fill: none; stroke: #fff; stroke-width: 1.6; opacity: .45; stroke-dasharray: 4 4; } :root[data-theme=light] .chart .trend { stroke: #172039; }
.chart .dot { fill: var(--c); } .chart .cursor-line { stroke: var(--ink2); stroke-width: 1; } .chart .cursor-dot { fill: var(--c); stroke: var(--bg); stroke-width: 2.5; }
.chart .tip { position: absolute; top: -6px; transform: translateX(-50%); padding: 5px 9px; border-radius: 9px; background: var(--bg2); border: 1px solid var(--line2); font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.chart.bars .bar { transform-origin: bottom; transform-box: fill-box; animation: grow .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.legend { display: flex; gap: 12px; justify-content: center; font-size: 12px; color: var(--ink2); margin-top: 4px; } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.empty-chart { display: grid; place-items: center; min-height: 110px; color: var(--ink3); font-size: 13px; text-align: center; border: 1px dashed var(--line2); border-radius: 14px; }
.chip-line { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink2); margin-bottom: 8px; } .chip-line span { padding: 5px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); } .chip-line b { color: var(--ink); }
.milestones { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; } .ms { display: grid; justify-items: center; gap: 3px; padding: 10px 4px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--ink3); } .ms.on { color: var(--ink); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); } .ms span { font-size: 20px; }
.patterns { margin: 0; padding-left: 18px; } .patterns li { padding: 4px 0; }
.photo-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.ph { position: relative; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; border: 2px solid transparent; animation: popIn .4s backwards; animation-delay: calc(var(--i) * 40ms); } .ph img { width: 100%; height: 100%; object-fit: cover; } .ph span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; font-size: 11px; font-weight: 600; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); color: #fff; }
.ph.picked { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.tips ul { margin: 6px 0; padding-left: 18px; } .photo-detail img, .review { width: 100%; max-height: 60dvh; object-fit: contain; border-radius: 16px; background: #000; }
.cam { position: relative; aspect-ratio: 3/4; border-radius: 24px; overflow: hidden; background: #05070f; margin: 10px 0; }
.cam video, .cam .ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mirror { transform: scaleX(-1); } .cam .ghost { pointer-events: none; mix-blend-mode: screen; }
.guide { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .g-center { stroke: rgba(255, 255, 255, .5); stroke-dasharray: 6 6; } .g-line { stroke: rgba(255, 255, 255, .18); } .g-mark { stroke: var(--accent); stroke-width: 2; } .g-t { fill: var(--accent); font-size: 10px; } .g-body { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.6; stroke-dasharray: 4 4; }
.cam-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; text-align: center; color: #B9C3DA; } .cam-count { position: absolute; inset: 0; display: grid; place-items: center; font: 800 120px var(--display); color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .6); }
.cam.flash::after { content: ''; position: absolute; inset: 0; background: #fff; animation: flash .3s ease forwards; }
.cam-ctrl { display: flex; align-items: center; justify-content: center; gap: 30px; margin: 6px 0 10px; } .shutter span { width: 62px; height: 62px; border-radius: 50%; border: 4px solid rgba(37, 23, 43, .6); }
.cmp-slider { position: relative; aspect-ratio: 3/4; border-radius: 22px; overflow: hidden; background: #000; margin-top: 10px; } .cmp-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp-top { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--p)); } .cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--p); width: 3px; background: #fff; transform: translateX(-50%); } .cmp-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #0E1830; display: grid; place-items: center; }
.cmp-l, .cmp-r { position: absolute; bottom: 10px; padding: 4px 9px; border-radius: 9px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11.5px; } .cmp-l { left: 10px; } .cmp-r { right: 10px; }
.cmp-side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .cmp-side figure { margin: 0; } .cmp-side img { aspect-ratio: 3/4; object-fit: cover; border-radius: 16px; width: 100%; } .cmp-side figcaption { text-align: center; font-size: 12px; color: var(--ink2); margin-top: 4px; }
.cmp-ghost { position: relative; aspect-ratio: 3/4; border-radius: 22px; overflow: hidden; margin-top: 10px; background: #000; } .cmp-ghost img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heat { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 3px; margin-top: 10px; }
.hc { aspect-ratio: 1; border-radius: 4px; background: rgba(255, 255, 255, .06); } .hc.on { background: var(--good); box-shadow: 0 0 6px color-mix(in srgb, var(--good) 50%, transparent); } .hc.off { opacity: .3; } .hc.fut { opacity: .12; } .hc.t { outline: 1.5px solid var(--accent); }
.habit-card .card-h { margin-bottom: 2px; }

/* ====== MÁS ====== */
.profile-card { display: flex; align-items: center; gap: 14px; } .profile-card > span:nth-child(2) { flex: 1; } .profile-card b { font: 600 18px var(--display); display: block; } .profile-card small { color: var(--ink2); display: block; margin-bottom: 6px; }
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.menu-item { display: grid; justify-items: center; gap: 8px; padding: 16px 4px; border-radius: 20px; background: var(--glass); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; text-align: center; box-shadow: var(--shadow); transition: transform .2s; }
.menu-item span { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--mc); background: color-mix(in srgb, var(--mc) 16%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); } .menu-item:active { transform: scale(.96); }
.screen-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; } .screen-head h1 { flex: 1; font-size: 22px; font-weight: 700; }
.story-hero { padding: 16px; border-radius: 26px; margin: 12px 0; background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 20%, var(--glass)), var(--glass)); border: 1px solid var(--line2); box-shadow: var(--shadow); }
.sh-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sh-photos figure { margin: 0; position: relative; } .sh-photos img { aspect-ratio: 3/4; object-fit: cover; border-radius: 16px; width: 100%; } .sh-photos figcaption { position: absolute; bottom: 6px; left: 6px; padding: 3px 8px; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; }
.sh-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 6px; padding: 30px; color: var(--ink3); border: 1px dashed var(--line2); border-radius: 16px; }
.sh-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0; text-align: center; } .sh-row small { display: block; font-size: 11.5px; color: var(--ink2); } .sh-row b { font: 700 19px var(--display); }
.sh-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .sh-grid span { display: grid; text-align: center; font-size: 10px; color: var(--ink2); line-height: 1.2; padding: 8px 2px; border-radius: 12px; background: rgba(0, 0, 0, .16); } .sh-grid b { font: 700 16px var(--display); color: var(--ink); }
.cine-tl { list-style: none; margin: 10px 0; padding: 0 0 0 64px; position: relative; } .cine-tl::before { content: ''; position: absolute; left: 50px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--accent), var(--violet), transparent); }
.cine-tl li { position: relative; padding: 8px 0; animation: fadeUp .5s backwards; } .cine-tl time { position: absolute; left: -64px; top: 16px; width: 40px; text-align: right; font-size: 11px; color: var(--ink3); }
.cine-dot { position: absolute; left: -26px; top: 10px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; display: grid; place-items: center; background: var(--bg2); border: 2px solid var(--accent); font-size: 13px; }
.cine-card { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); } .cine-card img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; margin-bottom: 8px; }
.cine-tl li.big .cine-card { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 20%, var(--glass)), var(--glass)); border-color: color-mix(in srgb, var(--gold) 40%, transparent); } .cine-tl li.big .cine-card b { font-family: var(--display); font-size: 16px; }
.story-quote { font: italic 500 18px var(--display); color: var(--accent); margin: 24px 0; }
.insight-card { background: linear-gradient(150deg, color-mix(in srgb, var(--blue) 18%, var(--glass)), var(--glass)); }
.ev-card { display: flex; align-items: center; gap: 12px; border-left: 4px solid var(--ev); } .ev-emoji { font-size: 28px; } .ev-main { flex: 1; min-width: 0; } .ev-main b { display: block; font-family: var(--display); font-weight: 600; } .ev-main small { display: block; color: var(--ink2); font-size: 12px; }
.ev-count { text-align: center; } .ev-count b { display: block; font: 700 24px/1 var(--display); color: var(--ev); } .ev-count small { font-size: 11px; color: var(--ink2); }
.ev-card.featured { background: linear-gradient(135deg, color-mix(in srgb, var(--ev) 22%, var(--glass)), var(--glass)); transform: perspective(700px) rotateX(4deg); }
.ev-hero { display: flex; gap: 12px; align-items: center; } .ev-hero .ev-emoji { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--ev) 25%, transparent); } .ev-hero p { color: var(--ink2); margin: 2px 0 0; }
.ev-photo { border-radius: 16px; margin: 10px 0; max-height: 320px; object-fit: cover; width: 100%; }
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0; }
.badge3d { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 6px 2px; animation: popIn .5s backwards; animation-delay: calc(var(--i) * 45ms); } .badge3d b { font-size: 12.5px; line-height: 1.2; } .badge3d small { font-size: 11px; color: var(--ink3); } .badge3d em { font-style: normal; font-size: 13px; }
.hex { width: 78px; height: 86px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, #FFE7A3, #F2C14E 40%, #B77A12); position: relative; transform: perspective(300px) rotateY(-12deg); transition: transform .4s; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .35)); }
.hex::before { content: ''; position: absolute; inset: 5px; clip-path: inherit; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .6), transparent 45%), linear-gradient(160deg, #2B3A6B, #16224A); } .hex span { position: relative; font-size: 34px; }
.badge3d:hover .hex, .badge3d:active .hex { transform: perspective(300px) rotateY(18deg) scale(1.05); }
.react-row { display: flex; gap: 6px; justify-content: center; margin-top: 12px; } .react-row.sm { margin: 0; gap: 2px; } .react { width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .07); font-size: 21px; transition: transform .2s; } .react-row.sm .react { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; } .react.on { background: color-mix(in srgb, var(--accent) 25%, transparent); } .react.pop { animation: pop .4s ease; }
.reacts { font-size: 18px; } .reacts small { font-size: 11px; color: var(--ink2); margin-right: 8px; }
.note-card { text-align: left; } .nc-h { display: flex; align-items: center; gap: 8px; } .nc-h b { flex: 1; font-family: var(--display); font-weight: 600; } .nc-h small { color: var(--ink3); } .note-card p { color: var(--ink2); font-size: 13.5px; } .note-card img { border-radius: 12px; max-height: 160px; object-fit: cover; width: 100%; margin: 6px 0; }
.couple-grid { display: grid; grid-template-columns: 1.3fr repeat(var(--n), 1fr); gap: 10px 8px; align-items: center; } .couple-grid > b { display: grid; justify-items: center; gap: 4px; font-size: 13px; --accent: var(--pa); } .cl { font-size: 13px; color: var(--ink2); } .cv { text-align: center; font: 700 18px var(--display); }
.challenge { padding: 10px 0; border-bottom: 1px solid var(--line); } .challenge:last-child { border: 0; } .ch-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .ch-h b { flex: 1; } .ch-h small { width: 100%; order: 3; color: var(--ink2); font-size: 12px; }
.ch-row { display: grid; grid-template-columns: 26px 1fr 52px; gap: 8px; align-items: center; margin-top: 6px; } .ch-row em { font-style: normal; font-size: 12.5px; text-align: right; }
.set-sec { padding: 0; } .set-sec summary { display: flex; align-items: center; gap: 10px; padding: 16px; cursor: pointer; list-style: none; } .set-sec summary::-webkit-details-marker { display: none; } .set-sec summary b { flex: 1; font-family: var(--display); font-weight: 600; } .set-sec summary .ic:first-child { color: var(--accent); }
.set-sec[open] summary .ic:last-child { transform: rotate(180deg); } .set-body { padding: 0 16px 16px; }
.sync-state { display: flex; align-items: center; gap: 8px; } .sync-state i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink3); } .sync-state.st-synced i { background: var(--good); } .sync-state.st-error i { background: var(--bad); } .sync-state.st-syncing i { background: var(--blue); }
.prev-list { max-height: 40dvh; overflow-y: auto; } .prev-list .st-invalid .row-main b { color: var(--bad); } .prev-list .st-dup .row-ic { color: var(--gold); } .prev-list .st-new .row-ic { color: var(--good); }

/* ====== BIENVENIDA ====== */
.onboarding { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; padding: calc(18px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom)); overflow-y: auto; }
.ob-bg { position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 55%), linear-gradient(180deg, var(--sky2), var(--bg) 60%); }
.ob-progress { height: 5px; border-radius: 3px; background: var(--line2); overflow: hidden; flex: none; } .ob-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.ob-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 480px; width: 100%; margin: 0 auto; }
.ob-stage.fwd > * { animation: obIn .45s cubic-bezier(.2, .8, .2, 1); } .ob-stage.bwd > * { animation: obBack .45s cubic-bezier(.2, .8, .2, 1); }
.ob-hero { text-align: center; } .ob-hero h1 { font-size: 32px; margin: 18px 0 8px; } .ob-hero p { color: var(--ink2); font-size: 16px; }
.ob-orb { width: 130px; height: 130px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 62px; background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .5), color-mix(in srgb, var(--accent) 70%, transparent) 45%, color-mix(in srgb, var(--accent) 40%, #000)); box-shadow: 0 26px 50px -18px var(--accent), inset 0 -10px 24px rgba(0, 0, 0, .3); animation: orbFloat 5s ease-in-out infinite; }
.ob-orb.done { font: 700 64px var(--display); color: #25172b; }
.ob-card { display: grid; gap: 16px; } .ob-card h2 { font-size: 26px; font-weight: 700; } .ob-step { color: var(--accent); font-weight: 700; font-size: 13px; }
.ob-in { font-size: 18px; min-height: 56px; }
.ob-avatars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .ob-avatars label { position: relative; } .ob-avatars span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 22px; font-size: 34px; background: rgba(255, 255, 255, .06); border: 2px solid var(--line); cursor: pointer; transition: all .2s; }
.ob-avatars input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); transform: scale(1.06); }
.ob-choices { display: grid; gap: 8px; } .ob-choices label { position: relative; } .ob-choices span { display: block; padding: 15px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 2px solid var(--line); font-weight: 600; cursor: pointer; transition: all .2s; }
.ob-choices input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); } .ob-choices input:focus-visible + span, .ob-avatars input:focus-visible + span { outline: 2px solid var(--accent); }
.ob-actions { display: grid; gap: 8px; margin-top: 24px; } .ob-actions.row { display: flex; } .ob-actions.row .btn-primary { flex: 1; }

/* Splash */
#splash { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--bg); transition: opacity .5s; } #splash.out { opacity: 0; pointer-events: none; }
#splash div { text-align: center; } #splash b { display: block; font: 700 26px var(--display); margin-top: 14px; } #splash small { color: var(--ink2); }
#splash .logo { width: 78px; height: 78px; border-radius: 24px; margin: 0 auto; background: linear-gradient(145deg, #FFD0A8, var(--accent) 50%, #FF6FA8); display: grid; place-items: center; font-size: 38px; animation: orbFloat 2.5s ease-in-out infinite; box-shadow: 0 18px 40px -14px var(--accent); }

/* Animaciones */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(26px); } }
@keyframes slideBack { from { opacity: 0; transform: translateX(-26px); } }
@keyframes profileIn { 0% { opacity: 0; transform: scale(.97); filter: blur(4px); } }
@keyframes popIn { from { opacity: 0; transform: scale(.85) translateY(8px); } }
@keyframes pop { 50% { transform: scale(1.25); } }
@keyframes spin { to { transform: rotateY(360deg); } }
@keyframes orbFloat { 50% { transform: rotateX(14deg) translateY(-6px); } }
@keyframes shadowPulse { 50% { transform: scale(.85); opacity: .7; } }
@keyframes ringIn { from { transform: rotate(-120deg) scale(.8); opacity: 0; } }
@keyframes medalSpin { from { transform: rotateY(-540deg) scale(.4); } 70% { transform: rotateY(20deg) scale(1.05); } }
@keyframes wave { to { background-position-x: 100%; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes pulse { 50% { opacity: .5; } }
@keyframes glow { to { transform: translate(-20%, 20%) scale(1.2); } }
@keyframes flash { to { opacity: 0; } }
@keyframes obIn { from { opacity: 0; transform: translateX(40px) rotateY(-8deg); } }
@keyframes obBack { from { opacity: 0; transform: translateX(-40px) rotateY(8deg); } }
@keyframes cloud { to { transform: translateX(40px); } }
.cloud { animation: cloud 40s ease-in-out infinite alternate; }

/* Preferencias de movimiento */
[data-fx=flat] .orb, [data-fx=flat] .journey, [data-fx=flat] .ev-card.featured, [data-fx=flat] .hex { transform: none !important; }
[data-fx=flat] .orb-core { box-shadow: none; }
[data-anim=off] *, [data-motion=reduce] * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }

/* Pantallas pequeñas */
@media (max-width: 370px) {
  .hero-row { grid-template-columns: 1fr; } .orb { width: 180px; } .quick-actions, .quick-start { grid-template-columns: repeat(3, 1fr); }
  .menu-grid { grid-template-columns: repeat(2, 1fr); } .sh-grid { grid-template-columns: repeat(3, 1fr); } .tab span { font-size: 9px; } .top-pills .lvl { display: none; }
}
@media (min-width: 700px) { #app { padding-top: 10px; } }

/* Impresión (reportes) */
@media print {
  .scenery, .top, .tabbar, .row-actions, .seg, .screen-head .icon-btn, #sheet-root, #toast-root { display: none !important; }
  body { background: #fff; color: #111; } #app { max-width: none; padding: 0; }
  .card { background: #fff !important; border: 1px solid #ddd; box-shadow: none; backdrop-filter: none; break-inside: avoid; color: #111; }
  .muted, .fine, .row-main small, .row-meta { color: #555 !important; } .chart .axis { fill: #555; } .chart .line { stroke-dashoffset: 0; animation: none; }
}
@media (max-width: 420px) { .top-pills .lvl { display: none; } }