/* FitMujer — base compartida (landing, app de la socia y panel). Tema oscuro con rosa neón: la identidad de Woman Fit Gym. */
:root {
  --pink: #ff2db4;
  --pink-d: #d4149a;
  --pink-l: #ff7fd3;
  --pink-50: rgba(255, 45, 180, .12);
  --pink-100: rgba(255, 45, 180, .24);
  --violet: #8b5cf6;
  --bg: #09070c;
  --bg2: #100c15;
  --card: #171220;
  --card2: #1f1829;
  --line: #2b2136;
  --ink: #f7eff9;
  --muted: #b9a8c6;
  --faint: #7f6f8d;
  --ok: #2ad38b;
  --ok-50: rgba(42, 211, 139, .14);
  --warn: #ffb020;
  --warn-50: rgba(255, 176, 32, .14);
  --bad: #ff5a6e;
  --bad-50: rgba(255, 90, 110, .14);
  --r: 18px;
  --r-sm: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --glow: 0 0 22px rgba(255, 45, 180, .45);
  --hh: 58px;
  --fh: 32px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-d: 'Montserrat', 'Inter', system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--font-d); color: #fff; margin: 0; line-height: 1.12; letter-spacing: -.01em; font-weight: 800; }
p { margin: 0; }
a { color: var(--pink-l); text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--pink-l); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--pink); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #3a2c48; border-radius: 9px; } ::-webkit-scrollbar-track { background: transparent; }

.i { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.2em; }
.i.sm { width: 1em; height: 1em; } .i.lg { width: 1.5em; height: 1.5em; }

/* botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1.5px solid transparent; border-radius: 999px; font-weight: 700; font-size: 14.5px; line-height: 1; white-space: nowrap; transition: transform .15s var(--ease), box-shadow .2s, background .2s, border-color .2s; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(135deg, var(--pink), var(--pink-d)); color: #fff; box-shadow: 0 6px 22px rgba(255, 45, 180, .4); }
.btn-primary:hover { box-shadow: 0 8px 28px rgba(255, 45, 180, .6); filter: brightness(1.08); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.btn-ghost:hover { border-color: var(--pink); background: var(--pink-50); }
.btn-soft { background: var(--pink-50); color: var(--pink-l); border-color: transparent; }
.btn-soft:hover { background: var(--pink-100); }
.btn-wa { background: #25d366; color: #05391b; }
.btn-wa:hover { background: #3ee07e; }
.btn-danger { background: var(--bad-50); color: var(--bad); }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 0; background: transparent; color: inherit; transition: background .15s; }
.icon-btn:hover { background: rgba(255, 255, 255, .08); }

/* formularios */
.field { display: grid; gap: 6px; }
.field > label, .lbl { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.inp { width: 100%; min-height: 44px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #0e0a13; color: var(--ink); transition: border-color .15s, box-shadow .15s; font-size: 15px; }
.inp::placeholder { color: var(--faint); }
.inp:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 4px var(--pink-50); }
textarea.inp { min-height: 84px; resize: vertical; }
select.inp { appearance: none; background: #0e0a13 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23b9a8c6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 36px; }
select.inp option { background: #171220; color: var(--ink); }
input[type=date].inp, input[type=time].inp { color-scheme: dark; }
.hint { font-size: 12px; color: var(--faint); }
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 99px; background: #3a2c48; transition: background .2s; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .2s var(--ease); }
.switch input:checked + i { background: var(--pink); }
.switch input:checked + i::after { transform: translateX(18px); }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: var(--pink-50); color: var(--pink-l); white-space: nowrap; }
.badge.ok { background: var(--ok-50); color: var(--ok); }
.badge.warn { background: var(--warn-50); color: var(--warn); }
.badge.bad { background: var(--bad-50); color: var(--bad); }
.badge.mut { background: rgba(255, 255, 255, .07); color: var(--muted); }
.badge.vio { background: rgba(139, 92, 246, .18); color: #b9a1ff; }

/* toast */
.toasts { position: fixed; left: 50%; bottom: calc(var(--fh) + 74px); transform: translateX(-50%); z-index: 500; display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #2a2035; color: #fff; border: 1px solid var(--line); font-size: 14px; box-shadow: var(--shadow); animation: toastIn .3s var(--ease); pointer-events: auto; }
.toast.err { background: #4a1822; border-color: #7a2436; }
.toast.ok { background: #0f3b2b; border-color: #1b6a4b; }
.toast button { margin-left: auto; background: rgba(255, 255, 255, .16); border: 0; color: #fff; border-radius: 8px; padding: 4px 10px; font-weight: 600; font-size: 12.5px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }

.scrim { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, #1a1423 25%, #241b30 50%, #1a1423 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 10px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Pixo (mascota) — igual que en Pixobra */
.pixo-mascot { display: block; width: 100%; height: 100%; border-radius: 18px; overflow: visible; }
.pixo-mascot .p-face, .pixo-mascot .p-eye { transform-box: fill-box; transform-origin: center; }
.pixo-mascot .p-face { animation: pxBreath 4s ease-in-out infinite; }
.pixo-mascot .p-eye { animation: pxBlink 4.6s infinite; }
.pixo-mascot .p-eyes { transform-box: fill-box; transform-origin: center; animation: pxSleepEye 18s infinite; }
.pixo-mascot .p-mouth { transform-box: fill-box; transform-origin: center; animation: pxMouth 18s infinite; }
.pixo-mascot .p-z text { opacity: 0; animation: pxZ 18s infinite; }
.pixo-mascot .p-z .z2 { animation-delay: .5s; } .pixo-mascot .p-z .z3 { animation-delay: 1s; }
.pixo-fab:hover .p-eyes, .pixo-fab:focus-visible .p-eyes, .pixo-fab.awake .p-eyes { animation: none; transform: none; }
.pixo-fab:hover .p-eye { animation: pxBlink 2.4s infinite; }
.pixo-fab:hover .p-z text, .pixo-fab.awake .p-z text { animation: none; opacity: 0; }
.pixo-fab:hover .p-mouth, .pixo-fab.awake .p-mouth { animation: none; transform: none; }
@keyframes pxBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes pxBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes pxSleepEye { 0%, 52% { transform: scaleY(1); } 58%, 90% { transform: scaleY(.07); } 95%, 100% { transform: scaleY(1); } }
@keyframes pxMouth { 0%, 52% { transform: scale(1); } 58%, 90% { transform: scale(.55, 1.5) translateY(.5px); } 95%, 100% { transform: scale(1); } }
@keyframes pxZ { 0%, 58% { opacity: 0; transform: translate(-3px, 4px); } 66% { opacity: 1; } 84% { opacity: .9; transform: translate(2px, -3px); } 90%, 100% { opacity: 0; transform: translate(3px, -5px); } }
.pixo-fab { position: fixed; z-index: 105; width: 58px; height: 58px; border-radius: 18px; border: 0; padding: 0; background: #0a0a0a; box-shadow: 0 4px 16px rgba(0, 0, 0, .5), 0 0 14px rgba(255, 45, 180, .16); transition: transform .2s var(--ease); }
.pixo-fab:hover { transform: translateY(-3px) scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}