/* Marselius · sistema visual «Cristal profundo» (tanda 3): azul noche, cristal, un color por área.
   Diseño de un solo tema (oscuro) a propósito: es la identidad de la app. */
:root {
  color-scheme: dark;
  --bg: #050b1c; --bg-deep: #020610; --sheet: #0e1a36; --line: rgba(255,255,255,.13); --glass: rgba(255,255,255,.06);
  --fg: #f1f4fb; --mu: #a4b1ca; --dim: #6f7d98; --ink: #06101f; --silver: #c3ccd9;
  --ok: #3fd28f; --blue: #4f8dff; --blue-soft: #9fc0ff; --violet: #8b7cff; --amber: #ffb547; --rose: #ff6b7d; --gold: #e2b45a;
  --f-body: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-head: Sora, Manrope, system-ui, sans-serif;
  --f-num: "Space Grotesk", Manrope, system-ui, sans-serif;
  --gut-l: max(16px, env(safe-area-inset-left, 0px)); --gut-r: max(16px, env(safe-area-inset-right, 0px));
}
html, body { height: 100%; }
body { margin: 0; background: var(--bg-deep); color: var(--fg); font: 500 15px/1.45 var(--f-body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
* { box-sizing: border-box; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; text-align: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 2px; }
a { color: var(--blue-soft); }
h1, h2, h3, p { margin: 0; }
img, svg { display: block; max-width: 100%; }

/* ---------- lienzo de la app (móvil primero; en escritorio se centra como un teléfono) ---------- */
#app { min-height: 100%; max-width: 480px; margin: 0 auto; position: relative; background: radial-gradient(520px 420px at 12% -6%, #16306a 0%, rgba(5,11,28,0) 65%), var(--bg); display: flex; flex-direction: column; }
.screen { flex: 1; padding-left: var(--gut-l); padding-right: var(--gut-r); padding-block: 14px 110px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.screen.full { padding-block-end: 28px; }
.wm { position: fixed; right: -70px; bottom: 60px; width: 320px; opacity: .07; pointer-events: none; z-index: 0; }
.screen > * { position: relative; z-index: 1; }
.screen > .wm { position: fixed; z-index: 0; }

.t1 { font: 700 26px/1.1 var(--f-head); letter-spacing: -.03em; text-wrap: balance; }
.t2 { font: 700 20px/1.15 var(--f-head); letter-spacing: -.02em; text-wrap: balance; }
.t3 { font: 800 15px/1.25 var(--f-body); }
.mu { color: var(--mu); } .sm { font-size: 13px; } .xs { font-size: 11.5px; }
.num { font-family: var(--f-num); font-weight: 700; font-variant-numeric: tabular-nums; }
.up { color: var(--ok); font-weight: 800; }
.ey { font: 700 11px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--blue-soft); }
.row { display: flex; align-items: center; gap: 10px; min-width: 0; } .row > .grow { flex: 1; min-width: 0; }
.col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.between { justify-content: space-between; } .center { text-align: center; } .wrap { flex-wrap: wrap; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.gl { background: var(--glass); border: 1px solid var(--line); border-radius: 22px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pad { padding: 16px; } .pad-s { padding: 12px 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.09); font-weight: 700; font-size: 13px; white-space: nowrap; }
.chip.ok { background: rgba(63,210,143,.16); color: var(--ok); } .chip.gold { background: rgba(226,180,90,.18); color: var(--gold); }
.chip.on { background: var(--fg); color: var(--ink); }

.btn { min-height: 54px; padding: 0 22px; border-radius: 999px; font: 800 16px var(--f-body); color: var(--ink); background: linear-gradient(180deg, #fff, var(--silver)); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; width: 100%; transition: transform .12s; }
.btn:active { transform: scale(.98); }
.btn.ghost { background: var(--glass); color: var(--fg); border: 1px solid var(--line); }
.btn.sm { min-height: 44px; font-size: 14px; padding: 0 16px; width: auto; }
.btn[disabled] { opacity: .45; }
.ib { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: var(--glass); border: 1px solid var(--line); flex: none; }
.link { color: var(--blue-soft); font-weight: 700; font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- barra inferior ---------- */
.nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; z-index: 20; display: flex; padding: 8px max(8px, env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-right, 0px)); background: rgba(5,11,28,.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--line); }
.nav button { flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 700 10.5px var(--f-body); color: var(--dim); border-radius: 14px; }
.nav button span { font-size: 21px; filter: grayscale(1) opacity(.6); }
.nav button.on { color: var(--fg); } .nav button.on span { filter: none; }

/* ---------- portada: sim + cuerpo vivo + batería ---------- */
.hero { position: relative; height: 304px; }
.hero .sim { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 212px; height: 256px; }
.hero .halo { position: absolute; left: 50%; top: 20px; width: 260px; height: 260px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(159,192,255,.22), rgba(5,11,28,0) 68%); }
.lab { position: absolute; display: flex; align-items: center; gap: 6px; padding: 7px 10px; max-width: calc(50% - 50px); border-radius: 16px; background: rgba(8,16,38,.86); border: 1px solid var(--line); font-size: 11.5px; white-space: nowrap; text-align: left; z-index: 3; }
.lab b { display: block; font: 700 15px/1.1 var(--f-num); } .lab i { font-style: normal; font-size: 19px; } .lab .mu { font-size: 10.5px; }
.batt { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(8,16,38,.9); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.batt .cell { position: relative; width: 74px; height: 30px; border-radius: 9px; border: 2px solid var(--dim); overflow: hidden; }
.batt .cell::after { content: ""; position: absolute; right: -6px; top: 8px; width: 4px; height: 10px; background: var(--dim); border-radius: 0 3px 3px 0; }
.batt .fill { position: absolute; left: 2px; top: 2px; bottom: 2px; border-radius: 6px; background: linear-gradient(90deg, var(--ok), #ffd27a); box-shadow: 0 0 18px rgba(255,181,71,.5); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.batt .zap { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; }
.bubble { padding: 13px 16px; font-size: 14.5px; line-height: 1.45; border-color: rgba(200,208,220,.35); display: flex; gap: 12px; align-items: center; }
.bubble img { width: 38px; flex: none; }

/* ---------- plan de hoy ---------- */
.task { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 18px; width: 100%; min-height: 54px; }
.task .b { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #3a4a6c; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 14px; transition: all .2s; }
.task.done .b { background: var(--ok); border-color: var(--ok); color: #04210f; }
.task .e { font-size: 22px; flex: none; } .task .tx { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; line-height: 1.25; }
.task.done .tx { color: var(--mu); }
.task .pl { font: 700 13px var(--f-num); color: var(--amber); flex: none; } .task.done .pl { color: var(--ok); }

/* ---------- tarjetas de color ---------- */
.cc { position: relative; border-radius: 24px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; min-height: 92px; width: 100%; color: #fff; overflow: hidden; transition: transform .12s; background: linear-gradient(120deg, var(--c1), var(--c2)); }
.cc:active { transform: scale(.985); }
.cc .e { font-size: 42px; line-height: 1; flex: none; } .cc .nm { font-weight: 800; font-size: 17px; } .cc .sb { font-size: 12.5px; opacity: .88; }
.cc .n { margin-left: auto; text-align: right; min-width: 0; } .cc .n b { display: block; font: 700 27px/1 var(--f-num); } .cc .n small { font-size: 12px; font-weight: 700; opacity: .92; }
.area-top { margin: -14px calc(-1 * var(--gut-r)) 0 calc(-1 * var(--gut-l)); padding: 14px var(--gut-r) 26px var(--gut-l); background: linear-gradient(180deg, var(--c1) 0%, rgba(5,11,28,0) 100%); display: flex; flex-direction: column; gap: 12px; }
.big { font: 700 64px/1 var(--f-num); letter-spacing: -.02em; }

/* ---------- datos rápidos: pasos, deslizadores, escalas ---------- */
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.1); font: 700 22px var(--f-num); display: grid; place-items: center; flex: none; }
.stepper button:active { background: rgba(255,255,255,.22); }
.stepper .v { flex: 1; text-align: center; font: 700 24px var(--f-num); min-width: 64px; } .stepper .v small { font: 600 12px var(--f-body); color: var(--mu); }
.scale { display: grid; gap: 5px; } .scale button { height: 44px; border-radius: 12px; background: rgba(255,255,255,.08); font: 700 15px var(--f-num); }
.scale button.on { background: var(--fg); color: var(--ink); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 12px; border-radius: 12px; background: rgba(255,255,255,.14); }
input[type=range]::-moz-range-track { height: 12px; border-radius: 12px; background: rgba(255,255,255,.14); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; margin-top: -10px; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
input[type=range]::-moz-range-thumb { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #fff; }
.field { width: 100%; min-height: 52px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid var(--line); font-size: 16px; }
textarea.field { min-height: 96px; resize: vertical; line-height: 1.4; }
.field::placeholder { color: var(--dim); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; } .opts button { min-height: 46px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.opts button.on { background: var(--fg); color: var(--ink); border-color: var(--fg); }

/* ---------- gráficos ---------- */
.bar { height: 12px; border-radius: 12px; background: rgba(255,255,255,.1); overflow: hidden; } .bar > i { display: block; height: 100%; border-radius: 12px; background: linear-gradient(90deg, var(--c1, #1f5fd6), var(--c2, #4f8dff)); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 130px; } .bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; font-size: 11.5px; color: var(--mu); min-width: 0; }
.bars span { width: 100%; border-radius: 10px; background: rgba(255,255,255,.2); min-height: 4px; } .bars .hi span { background: var(--c2, #fff); } .bars .now { color: var(--fg); font-weight: 800; }
.minib { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--mu); }
.minib .cell { width: 26px; height: 62px; border-radius: 7px; border: 2px solid #3a4a6c; position: relative; overflow: hidden; margin-top: 6px; }
.minib .cell::before { content: ""; position: absolute; left: 7px; top: -6px; width: 8px; height: 4px; background: #3a4a6c; border-radius: 2px; }
.minib .cell span { position: absolute; left: 0; right: 0; bottom: 0; } .minib.now { color: var(--fg); font-weight: 800; } .minib.now .cell { border-color: var(--blue-soft); }
.stat { padding: 14px 10px; text-align: center; } .stat b { display: block; font: 700 26px/1.1 var(--f-num); } .stat span { font-size: 12px; color: var(--mu); }
.ring { --p: 0; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c2, #4f8dff) calc(var(--p) * 1%), rgba(255,255,255,.1) 0); flex: none; }
.ring > span { width: 58px; height: 58px; border-radius: 50%; background: #071029; display: grid; place-items: center; font-size: 22px; }

/* ---------- entreno ---------- */
.exrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; width: 100%; border-radius: 20px; }
.exrow .th { width: 62px; height: 62px; border-radius: 16px; background: rgba(79,141,255,.14); flex: none; overflow: hidden; }
.exrow.done { border-color: rgba(63,210,143,.5); }
.stage { border-radius: 24px; background: radial-gradient(260px 200px at 50% 80%, rgba(79,141,255,.28), rgba(5,11,28,0) 70%), rgba(255,255,255,.04); border: 1px solid var(--line); overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; }
.setrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 50px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.setrow:last-child { border-bottom: 0; }
.setrow .mini { display: flex; align-items: center; justify-content: space-between; gap: 2px; background: rgba(255,255,255,.07); border-radius: 14px; padding: 3px; }
.setrow .mini button { width: 36px; height: 40px; border-radius: 11px; font: 700 20px var(--f-num); background: rgba(255,255,255,.08); flex: none; display: grid; place-items: center; }
.setrow .mini b { font: 700 17px var(--f-num); text-align: center; flex: 1; min-width: 0; } .setrow .mini b small { font: 600 10px var(--f-body); color: var(--mu); display: block; line-height: 1; }
.setrow .ok { width: 50px; height: 46px; border-radius: 14px; border: 2px solid #3a4a6c; font-size: 18px; font-weight: 800; display: grid; place-items: center; }
.setrow.done .ok { background: var(--ok); border-color: var(--ok); color: #04210f; } .setrow.done .mini { opacity: .75; }
.yt { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; width: 100%; display: block; }
.yt img, .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.yt .play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, rgba(5,11,28,.1), rgba(5,11,28,.55)); }
.yt .play span { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--ink); display: grid; place-items: center; font-size: 24px; padding-left: 4px; }

/* ---------- comida ---------- */
.meal { display: flex; gap: 12px; align-items: center; padding: 10px; width: 100%; border-radius: 22px; }
.meal .pl8 { width: 84px; height: 84px; flex: none; } .meal.done { border-color: rgba(63,210,143,.5); }
.macro { display: flex; gap: 8px; } .macro > div { flex: 1; border-radius: 16px; padding: 10px 6px; text-align: center; background: rgba(255,255,255,.07); min-width: 0; }
.macro b { display: block; font: 700 19px/1.1 var(--f-num); } .macro span { font-size: 11px; color: var(--mu); }
.seg { display: flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.08); gap: 2px; } .seg button { flex: 1; min-height: 40px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--mu); padding: 0 6px; }
.seg button.on { background: var(--fg); color: var(--ink); }
.ing { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); } .ing:last-child { border: 0; }
.ing i { width: 14px; height: 14px; border-radius: 50%; flex: none; } .ing .q { margin-left: auto; font: 700 15px var(--f-num); text-align: right; }
.days7 { display: flex; gap: 6px; } .days7 button { flex: 1; min-height: 50px; border-radius: 14px; background: rgba(255,255,255,.06); font: 700 12px var(--f-body); color: var(--mu); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.days7 button b { font: 700 15px var(--f-num); color: var(--fg); } .days7 button.on { background: var(--fg); color: var(--ink); } .days7 button.on b { color: var(--ink); }

/* ---------- hábitos, insignias, camino ---------- */
.hab { border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(140deg, rgba(255,181,71,.2), rgba(255,255,255,.04)); border: 1px solid rgba(255,181,71,.3); }
.hab .e { font-size: 30px; } .hab.on { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(255,181,71,.25); }
.badge { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 12px 6px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.badge .e { font-size: 30px; } .badge.off { opacity: .32; filter: grayscale(1); } .badge.on { border-color: rgba(226,180,90,.6); background: rgba(226,180,90,.1); }
.tier { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; font-size: 12px; font-weight: 800; }
.tier .h { width: 100%; max-width: 74px; aspect-ratio: 3 / 4; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.05); border: 1px solid var(--line); } .tier .h img { width: 78%; }
.tier.off { opacity: .5; } .tier.now .h { box-shadow: 0 0 0 3px rgba(223,229,238,.25); border-color: #dfe5ee; }
.path { display: flex; gap: 5px; flex-wrap: wrap; } .path i { width: calc((100% - 95px) / 20); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.1); } .path i.d { background: linear-gradient(180deg, #5c95ff, #2f63d0); } .path i.n { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.2); } .path i.g { background: rgba(226,180,90,.45); } .path i.g.d { background: var(--gold); }

/* ---------- hojas, avisos y celebraciones ---------- */
.sheet-bg { position: fixed; inset: 0; z-index: 40; background: rgba(2,6,16,.72); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
.sheet { width: 100%; max-width: 480px; max-height: 92%; overflow-y: auto; background: var(--sheet); border-top: 1px solid var(--line); border-radius: 30px 30px 0 0; padding: 12px var(--gut-r) calc(24px + env(safe-area-inset-bottom, 0px)) var(--gut-l); display: flex; flex-direction: column; gap: 14px; animation: rise .28s cubic-bezier(.2,.8,.2,1); }
.sheet .grab { width: 44px; height: 5px; border-radius: 5px; background: rgba(255,255,255,.25); margin: 0 auto 2px; flex: none; }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; padding: 12px 18px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 800; font-size: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.5); animation: pop .35s cubic-bezier(.2,1.4,.4,1); max-width: calc(100% - 32px); text-align: center; }
.party { position: fixed; inset: 0; z-index: 70; background: rgba(2,6,16,.86); display: grid; place-items: center; padding: 24px; animation: fade .2s; }
.party .box { width: 100%; max-width: 380px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: pop .45s cubic-bezier(.2,1.4,.4,1); }
.party .sim { width: 230px; height: 276px; }
.confetti { position: fixed; inset: 0; z-index: 71; pointer-events: none; overflow: hidden; } .confetti i { position: absolute; top: -20px; width: 9px; height: 15px; border-radius: 3px; animation: fall linear forwards; }
.progress { height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; } .progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--gold)); border-radius: 6px; transition: width .4s; }
.loading { flex: 1; display: grid; place-items: center; min-height: 70vh; } .loading img { width: 90px; animation: breathe 1.6s ease-in-out infinite; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; } .swatches button { width: 42px; height: 42px; border-radius: 50%; border: 3px solid transparent; } .swatches button.on { border-color: #fff; }
.photo-slot { aspect-ratio: 3 / 4; border-radius: 18px; border: 1.5px dashed rgba(255,255,255,.3); display: grid; place-items: center; text-align: center; font-size: 12px; font-weight: 700; color: var(--mu); overflow: hidden; position: relative; background: rgba(255,255,255,.04); }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .photo-slot input, .filebtn input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.filebtn { position: relative; overflow: hidden; }

@keyframes fade { from { opacity: 0; } } @keyframes rise { from { transform: translateY(40px); opacity: 0; } }
@keyframes pop { from { transform: translateX(var(--tx, 0)) scale(.8); opacity: 0; } } .toast { --tx: -50%; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
@keyframes breathe { 50% { transform: scale(1.06); opacity: .8; } }
.in { animation: in .35s cubic-bezier(.2,.8,.2,1) both; } @keyframes in { from { transform: translateY(10px); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

.simprev { position: sticky; top: 0; z-index: 5; display: grid; place-items: center; margin: 0 calc(-1 * var(--gut-r)) 0 calc(-1 * var(--gut-l)); padding-top: 6px; background: linear-gradient(180deg, var(--bg) 82%, rgba(5,11,28,0)); }

/* botones redondos del día (comidas y hábitos) */
.dock { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px 6px; }
.dk { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; line-height: 1.15; text-align: center; color: var(--mu); min-width: 0; }
.dk .em, .dk .pl8 { position: relative; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 25px; border: 2px solid #3a4a6c; background: rgba(255,255,255,.04); transition: all .2s; }
.dk .pl8 svg { width: 46px; height: 46px; }
.dk.ok { color: var(--fg); } .dk.ok .em, .dk.ok .pl8 { border-color: var(--ok); background: rgba(63,210,143,.16); }
.dk.ok .em::after, .dk.ok .pl8::after { content: "✓"; position: absolute; right: -4px; top: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: #04210f; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.seg button, .days7 button, .scale button { text-align: center; }

/* ===== Foto de perfil (sustituye al sim) y portada simple ===== */
.vh { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.pf { --s: 160px; position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; color: rgba(159,192,255,.38); background: radial-gradient(circle at 50% 30%, rgba(79,141,255,.32), rgba(10,20,48,.95) 72%); box-shadow: 0 0 0 3px rgba(8,16,38,1), 0 0 0 5px rgba(159,192,255,.55), 0 18px 46px rgba(31,95,214,.38); }
.pf img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf svg { width: 76%; height: 76%; margin-top: 10%; }
.photo-wrap { display: grid; place-items: center; padding: 10px 0 6px; }
.photo-pick { position: relative; display: inline-grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.photo-cam { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px; background: var(--blue, #1f5fd6); color: #fff; font: 700 14px/1 var(--f-body, inherit); white-space: nowrap; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.hero2 { position: relative; display: grid; place-items: center; height: 236px; border-radius: 28px; border: 1px solid var(--line); overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); padding: 0; cursor: pointer; }
.hero2 .spot { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 62% at 50% 38%, rgba(120,170,255,.34), rgba(79,141,255,.10) 52%, rgba(5,11,28,0) 76%); }
.hero2 .floor { position: absolute; left: 8%; right: 8%; bottom: 14px; height: 36px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(159,192,255,.30), rgba(5,11,28,0) 70%); }
.hero2 .pf { z-index: 2; }
.hero2-hint { position: absolute; z-index: 3; bottom: 16px; padding: 7px 14px; border-radius: 999px; background: rgba(8,16,38,.86); border: 1px solid rgba(159,192,255,.45); font: 700 13px/1 var(--f-body, inherit); color: #dfe9ff; }
.plan { padding: 0; overflow: hidden; }
.plan-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; text-align: left; background: none; border: 0; color: inherit; }
.plan-head .chev { font-size: 22px; color: var(--dim); width: 28px; text-align: center; }
.ring { --p: 0; flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ok) calc(var(--p) * 1%), rgba(255,255,255,.10) 0); position: relative; }
.ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #0b1530; }
.ring b { position: relative; font-size: 15px; } .ring small { font-size: 10px; opacity: .7; }
.plan-sum { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 14px; }
.pchip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--dim); }
.pchip i { font-style: normal; font-size: 14px; } .pchip.ok { color: #c9f5de; background: rgba(63,210,143,.14); border-color: rgba(63,210,143,.45); }
.plan-body { padding: 2px 12px 14px; }
.party .sim { width: auto; height: auto; display: grid; place-items: center; margin-bottom: 8px; }
.stage .figcv { width: 100%; height: 100%; display: block; }
.exrow .th canvas { width: 100%; height: 100%; display: block; }

/* ===== Platos con fotos reales ===== */
.plt { --s: 84px; position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 50%; isolation: isolate; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #ffffff 0 56%, #eef1f6 57% 63%, #f9fafc 64% 86%, #dfe5ee 87% 100%); box-shadow: 0 10px 24px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.7); }
.plt img { position: absolute; mix-blend-mode: multiply; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.ing i.fph { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: #fff; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.ing i.fph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== Avatar 3D y batería del día ===== */
/* ---------- avatar: personaje de cintura para arriba, con respiración y parpadeo ---------- */
.fig { position: relative; display: block; height: 100%; aspect-ratio: 784 / 1172; transform-origin: 50% 100%; animation: fig-breathe 5.2s ease-in-out infinite; will-change: transform; }
.fig .fig-b, .fig .fig-k, .fig .fig-m { position: absolute; max-width: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; pointer-events: none; object-fit: fill; }
.fig .fig-b { left: 0; top: 0; width: 100%; height: 100%; }
.fig .fig-k { left: 39.031%; top: 15.358%; width: 21.939%; height: auto; opacity: 0; animation: fig-blink 7.4s linear infinite; }
@keyframes fig-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-.45%) scale(1.012); } }
@keyframes fig-blink { 0%, 44% { opacity: 0; } 45%, 46.4% { opacity: 1; } 47.6%, 84% { opacity: 0; } 85%, 86.2% { opacity: 1; } 87.4%, 89.4% { opacity: 0; } 90.4%, 91.6% { opacity: 1; } 92.8%, 100% { opacity: 0; } }
@keyframes halo-breathe { 0%, 100% { opacity: .72; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
.pf-av { background: radial-gradient(circle at 50% 30%, #1d3a7c, #0a1634 78%); border: 1px solid rgba(159,192,255,.35); }
.pf-av .fig { position: absolute; left: -66%; top: -4%; width: 230.6%; height: auto; animation: none; }

/* portada: el avatar ocupa la mitad de arriba de la pantalla; la batería del día flota a su derecha */
.hero4 { --hx: 37%; position: relative; height: clamp(360px, 52vh, 480px); height: clamp(360px, 52svh, 480px); border-radius: 30px; overflow: hidden; isolation: isolate; border: 1px solid rgba(159,192,255,.22);
  background: radial-gradient(120% 85% at 30% 0%, #1a3676 0%, #0d1c42 45%, #070f26 100%); box-shadow: 0 26px 60px -34px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12); }
.h4-halo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; transform-origin: var(--hx, 50%) 38%; animation: halo-breathe 5.2s ease-in-out infinite;
  background: radial-gradient(40% 33% at var(--hx, 50%) 42%, color-mix(in srgb, var(--bc, #4f8dff) 62%, transparent), transparent 100%), radial-gradient(76% 60% at var(--hx, 50%) 24%, rgba(96,150,255,.34), transparent 78%); }
/* aura: la silueta del avatar desenfocada, del color de la batería (el desenfoque va en el padre y la máscara en el hijo; juntos en el mismo elemento el navegador recorta el desenfoque) */
.aura { position: absolute; inset: 0; filter: blur(15px); opacity: .5; pointer-events: none; }
.aura i { position: absolute; inset: 0; background: var(--bc, #4f8dff); -webkit-mask: var(--av) center / 100% 100% no-repeat; mask: var(--av) center / 100% 100% no-repeat; }
.h4-fig { position: absolute; left: var(--hx); bottom: -19%; height: 117%; aspect-ratio: 784 / 1172; transform: translateX(-50%); padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.h4-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; pointer-events: none; background: linear-gradient(to top, rgba(6,13,33,.92), rgba(6,13,33,0)); }
.batt3 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.hero4 .batt3 { position: absolute; z-index: 2; right: 12px; top: 50%; transform: translateY(-50%); width: 106px; padding: 14px 8px 13px; border-radius: 26px; background: linear-gradient(180deg, rgba(16,30,66,.80), rgba(7,14,34,.86)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 16px 34px -14px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.10); }
.blab { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); line-height: 1.25; }
.bcell { position: relative; width: 58px; height: 104px; margin-top: 8px; border-radius: 15px; border: 3px solid rgba(255,255,255,.6); padding: 4px; background: rgba(8,16,38,.75); display: flex; align-items: flex-end; box-shadow: 0 0 26px color-mix(in srgb, var(--bc) 45%, transparent); }
.bcell::before { content: ""; position: absolute; left: 50%; top: -10px; width: 20px; height: 7px; transform: translateX(-50%); border-radius: 4px 4px 0 0; background: rgba(255,255,255,.6); }
.bfill { display: block; width: 100%; border-radius: 9px; background: linear-gradient(180deg, color-mix(in srgb, var(--bc) 72%, #fff), var(--bc)); transition: height .9s cubic-bezier(.2,.8,.2,1), background .6s; }
.bbolt { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.bpct { font-size: 32px; font-weight: 800; line-height: 1; color: var(--bc); } .bpct small { font-size: 15px; opacity: .8; }
.bmsg { font-size: 11.5px; font-weight: 600; color: var(--mu); max-width: 92px; line-height: 1.25; }
/* el mismo avatar en Perfil y en el alta */
.avbox { --hx: 50%; position: relative; width: min(100%, 360px); height: 400px; margin: 6px auto 4px; border-radius: 30px; overflow: hidden; isolation: isolate; border: 1px solid rgba(159,192,255,.22); background: radial-gradient(120% 85% at 50% 0%, #1a3676 0%, #0d1c42 45%, #070f26 100%); }
.avfig { position: absolute; left: 50%; bottom: -16%; height: 114%; aspect-ratio: 784 / 1172; transform: translateX(-50%); }
.avtag { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; white-space: nowrap; background: rgba(8,16,38,.86); border: 1px solid color-mix(in srgb, var(--bc) 60%, transparent); font-size: 13px; font-weight: 700; color: #dfe9ff; }
.avtag b { color: var(--bc); font-size: 15px; margin-right: 6px; }

/* ---------- Dentro del recuadro del personaje: nivel y caballo semanal arriba, tira de mejoras abajo ---------- */
.hero4 { --top: 78px; height: clamp(436px, 61vh, 560px); height: clamp(436px, 61svh, 560px); }
.hero4 .h4-fig { height: calc((100% - var(--top)) * 1.17); bottom: calc((100% - var(--top)) * -.19); }
.hero4 .batt3 { top: calc(50% + 22px); }
.h4-top { position: absolute; z-index: 3; left: 16px; right: 16px; top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; color: var(--fg); text-align: left; }
.h4-top small { display: block; font: 700 10px/1.1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: #b9c6e2; }
.h4-lv { display: flex; align-items: baseline; gap: 9px; }
.h4-lv small { align-self: center; }
.h4-lv b { font: 700 54px/.9 var(--f-num); letter-spacing: -.04em; text-shadow: 0 4px 22px rgba(0,0,0,.45); }
.h4-hz { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 999px; background: linear-gradient(180deg, rgba(16,30,66,.78), rgba(7,14,34,.84)); border: 1px solid color-mix(in srgb, var(--h1) 55%, transparent); box-shadow: 0 8px 22px -10px rgba(0,0,0,.7); }
.h4-hz small { font-size: 8.5px; letter-spacing: .14em; margin-bottom: 3px; }
.h4-hz b { display: block; font: 700 19px/1 var(--f-head); color: var(--h1); letter-spacing: -.01em; }
.h4-tk { position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 10px; height: 36px; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, rgba(14,26,58,.82), rgba(6,12,30,.9)); border: 1px solid rgba(159,192,255,.2); box-shadow: 0 8px 20px -10px rgba(0,0,0,.8); }
.h4-tk span { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 14px; transform: translateY(100%); opacity: 0; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .45s; }
.h4-tk span.on { transform: none; opacity: 1; } .h4-tk span.out { transform: translateY(-100%); opacity: 0; }
.h4-tk i { font-style: normal; font-size: 15px; flex: none; }
.h4-tk em { font-style: normal; font: 700 12.5px/1 var(--f-body); color: #e6ecfa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .h4-tk span { transition: opacity .3s; transform: none; } }
.medal { --s: 30px; width: var(--s); height: var(--s); flex: none; border-radius: 50%; display: inline-grid; place-items: center; position: relative;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.5), transparent 46%), linear-gradient(145deg, var(--h1), var(--h2)); box-shadow: 0 0 0 1.5px rgba(255,255,255,.22), 0 3px 10px rgba(0,0,0,.4), 0 0 14px color-mix(in srgb, var(--h1) 45%, transparent); }
.medal::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: #0a1228; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--h1) 70%, transparent); }
.medal img { position: relative; width: 62%; height: 62%; object-fit: contain; }
.bubble .medal { margin-right: 2px; }

/* ---------- Plan de hoy: tarjeta premium ---------- */
.plan.lux { position: relative; border-radius: 26px; isolation: isolate; overflow: hidden; border: 1px solid rgba(226,180,90,.55);
  background: radial-gradient(130% 90% at 0% 0%, rgba(226,180,90,.16), transparent 52%), linear-gradient(155deg, #17203d 0%, #0b1226 52%, #060a16 100%);
  box-shadow: inset 0 1px 0 rgba(255,236,190,.28), inset 0 0 0 1px rgba(226,180,90,.10), 0 18px 38px -14px rgba(0,0,0,.7), 0 0 26px -10px rgba(226,180,90,.45); }
.plan.lux::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #f4d896 30%, #fff3d2 50%, #f4d896 70%, transparent); opacity: .9; }
.plan.lux .lux-wm { position: absolute; right: -26px; top: -18px; width: 150px; opacity: .07; pointer-events: none; z-index: -1; filter: sepia(1) saturate(3) brightness(1.05); }
.plan.lux .plan-head { padding: 18px 16px 14px; }
.plan.lux .lux-ey { display: block; font: 800 10px/1 var(--f-body); letter-spacing: .26em; text-transform: uppercase; background: linear-gradient(90deg, #f4d896, #c99a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan.lux .lux-t { display: block; font: 700 25px/1.1 var(--f-head); letter-spacing: -.03em; margin: 6px 0 4px; color: #fff; }
.plan.lux .lux-s { display: block; font-size: 12.5px; font-weight: 600; color: #b9c2d6; }
.plan.lux .ring { width: 62px; height: 62px; background: conic-gradient(#f0cf85 calc(var(--p) * 1%), rgba(255,255,255,.10) 0); box-shadow: 0 0 18px -4px rgba(226,180,90,.6); }
.plan.lux .ring::before { background: #0a1124; inset: 5px; }
.plan.lux .ring b { font-size: 17px; color: #fff3d2; }
.plan.lux .chev { color: #e2b45a; }
.plan.lux .plan-sum { padding: 0 16px 16px; }
.plan.lux .pchip { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); color: #c7cfdf; }
.plan.lux .pchip.ok { color: #1a1204; background: linear-gradient(180deg, #f6dc9c, #dcae52); border-color: transparent; font-weight: 800; }
.plan.lux .pchip.ok::after { content: "✓"; font-size: 11px; margin-left: 1px; }
.plan.lux .plan-body { border-top: 1px solid rgba(226,180,90,.18); padding-top: 12px; }