/* Operator Console — auth surfaces (tenant login, central login, internal login, password reset, gym picker). Neutral, high-craft stage with a solid card; the gym's brand color (--brand-accent / --secondary, injected per tenant on ) tints the restrained accents and the Kore wave field at the foot (shared signature with the mobile login). The shell follows the tenant's mode: data-theme="dark" on .auth-body flips the surface tokens, mirroring dashboard.css. */ :root { /* Mismo valor que --ease-out de dashboard.css (hoja standalone). */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); color-scheme: light; --surface: #fafafa; --surface-dim: #ededed; --surface-bright: #fafafa; --surface-container-lowest: #ffffff; --surface-container-low: #f6f6f5; --surface-container: #f0f0ef; --surface-container-high: #e7e7e5; --surface-container-highest: #dededb; --on-surface: #15151a; --on-surface-variant: #5f5f68; --inverse-surface: #2a2a2e; --inverse-on-surface: #f1f1f2; --outline: #a3a3a0; --outline-variant: #e6e6e3; --primary: #1a1a1e; --on-primary: #ffffff; --primary-container: #1b1b1f; --on-primary-container: #848388; --secondary: #6b3aa0; --on-secondary: #ffffff; --secondary-container: color-mix(in srgb, var(--secondary) 60%, white); --on-secondary-container: color-mix(in srgb, var(--secondary) 75%, black); /* Accent-as-text on the (light) card, AA-safe; defaults to the accent and is overridden per tenant by BrandTheme#accent_on_surface. */ --accent-on-surface: var(--secondary); --error: #c0392b; --on-error: #ffffff; --error-container: #ffdad6; --on-error-container: #93000a; --success: #1f7a4d; --success-container: #cfead8; --r-sm: 0.25rem; --r-md: 0.5rem; --r-lg: 0.75rem; --r-xl: 0.875rem; --r-2xl: 1rem; --r-full: 9999px; --s-xs: 4px; --s-sm: 12px; --s-md: 24px; --s-lg: 40px; --s-xl: 64px; --s-gutter: 24px; --hairline: rgba(21, 21, 26, 0.08); --shadow-sm: 0 1px 2px rgba(21, 21, 26, 0.04), 0 1px 1px rgba(21, 21, 26, 0.03); --shadow-md: 0 2px 4px rgba(21, 21, 26, 0.04), 0 10px 24px -10px rgba(21, 21, 26, 0.12); --shadow-lg: 0 4px 8px rgba(21, 21, 26, 0.05), 0 24px 48px -16px rgba(21, 21, 26, 0.18); } /* Dark shell mode, resolved server-side by BrandTheme#mode and emitted as data-theme on .auth-body (same contract as the dashboard). Flip only the surface tokens and their foregrounds — same hex values as dashboard.css so login and dashboard read as one family. Semantic tokens (primary, secondary, error/success and their on-* pairs) keep their own contrast. */ .auth-body[data-theme="dark"] { --surface: #101014; --surface-dim: #0e0e12; --surface-bright: #18181d; --surface-container-lowest: #18181d; --surface-container-low: #1e1e24; --surface-container: #24242b; --surface-container-high: #2d2d35; --surface-container-highest: #383841; --on-surface: #f2f2f4; --on-surface-variant: #a6a6b0; --inverse-surface: #f1f1f2; --inverse-on-surface: #2a2a2e; --outline: #6e6e78; --outline-variant: rgba(255, 255, 255, 0.1); --hairline: rgba(255, 255, 255, 0.09); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.35); --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px -10px rgba(0, 0, 0, 0.6); --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.55), 0 30px 60px -20px rgba(0, 0, 0, 0.7); /* Los flashes viven sobre tints oscuros del error/success: sus foregrounds light (#93000a / #155f3b) caen a ~2:1 ahí; estos pares quedan ~9.9:1. */ --on-error-container: #ffb4ab; } .auth-body[data-theme="dark"] .auth-notice { color: #8fd8ad; } /* The dark marker lives on , but color-scheme drives the viewport chrome (scrollbar, native controls) off the root element; mirror it up like the dashboard does. */ html:has(.auth-body[data-theme="dark"]) { color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body.auth-body { font-family: "Plus Jakarta Sans", system-ui, sans-serif; color: var(--on-surface); background: var(--surface-container-low); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5; } .auth-shell { position: relative; min-height: 100vh; overflow: hidden; isolation: isolate; padding: 32px 24px; display: flex; flex-direction: column; /* Controlled neutral stage, robust to any tenant background. The gym color appears only as a faint halo at the top (see ::before). */ background: linear-gradient(180deg, var(--surface-container-lowest) 0%, var(--surface-container-low) 100%); } /* Restrained accent halo at the top, tied to the gym's color but never a flood. On the dark shell it needs a bit more presence to survive the dark surface. */ .auth-shell::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 42% at 50% -8%, color-mix(in srgb, var(--brand-accent, var(--secondary)) 13%, transparent), transparent 72%); z-index: -1; pointer-events: none; } .auth-body[data-theme="dark"] .auth-shell::before { background: radial-gradient(70% 42% at 50% -8%, color-mix(in srgb, var(--brand-accent, var(--secondary)) 18%, transparent), transparent 72%); } /* ===== Campo de olas Kore (shared/_auth_waves) ===== Tres capas al pie del shell, teñidas con el accent del gym. Cada capa mide 200% del ancho y su path repite idéntico cada 50%, así el loop de translateX no tiene costura. Solo se anima transform; la capa media va contra la corriente (igual que el _WavePainter del móvil) para que las crestas se crucen. Decoración pura: detrás de la card (z-index) y sin pointer events. */ .auth-waves { position: absolute; inset: auto 0 0 0; height: 170px; overflow: hidden; pointer-events: none; z-index: -1; } .auth-waves__layer { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; will-change: transform; } .auth-waves__layer--back { animation: auth-waves-flow 26s linear infinite; } .auth-waves__layer--mid { animation: auth-waves-flow-reverse 19s linear infinite; } .auth-waves__layer--front { animation: auth-waves-flow 13s linear infinite; } @keyframes auth-waves-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes auth-waves-flow-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } } .auth-waves__layer--back .auth-waves__fill { fill: color-mix(in srgb, var(--brand-accent, var(--secondary)) 8%, transparent); } .auth-waves__layer--mid .auth-waves__fill { fill: color-mix(in srgb, var(--brand-accent, var(--secondary)) 12%, transparent); } .auth-waves__layer--front .auth-waves__fill { fill: color-mix(in srgb, var(--brand-accent, var(--secondary)) 16%, transparent); } /* Las crestas se trazan en unidades de pantalla (non-scaling-stroke): el SVG se estira con preserveAspectRatio="none" y un trazo normal se deformaría. */ .auth-waves__crest { fill: none; stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; } .auth-waves__crest--glow { stroke-width: 6; filter: blur(6px); } .auth-waves__layer--mid .auth-waves__crest { stroke: color-mix(in srgb, var(--brand-accent, var(--secondary)) 45%, transparent); } .auth-waves__layer--front .auth-waves__crest { stroke: color-mix(in srgb, var(--brand-accent, var(--secondary)) 60%, transparent); } .auth-waves__layer--mid .auth-waves__crest--glow { stroke: color-mix(in srgb, var(--brand-accent, var(--secondary)) 18%, transparent); } .auth-waves__layer--front .auth-waves__crest--glow { stroke: color-mix(in srgb, var(--brand-accent, var(--secondary)) 24%, transparent); } /* En dark las olas viven sobre un fondo profundo: fills un paso más tenues (los alphas del móvil) y crestas un pelo más suaves. */ .auth-body[data-theme="dark"] .auth-waves__layer--back .auth-waves__fill { fill: color-mix(in srgb, var(--brand-accent, var(--secondary)) 6%, transparent); } .auth-body[data-theme="dark"] .auth-waves__layer--mid .auth-waves__fill { fill: color-mix(in srgb, var(--brand-accent, var(--secondary)) 10%, transparent); } .auth-body[data-theme="dark"] .auth-waves__layer--front .auth-waves__fill { fill: color-mix(in srgb, var(--brand-accent, var(--secondary)) 15%, transparent); } .auth-body[data-theme="dark"] .auth-waves__layer--mid .auth-waves__crest { stroke: color-mix(in srgb, var(--brand-accent, var(--secondary)) 38%, transparent); } .auth-body[data-theme="dark"] .auth-waves__layer--front .auth-waves__crest { stroke: color-mix(in srgb, var(--brand-accent, var(--secondary)) 55%, transparent); } .auth-body[data-theme="dark"] .auth-waves__layer--mid .auth-waves__crest--glow { stroke: color-mix(in srgb, var(--brand-accent, var(--secondary)) 15%, transparent); } .auth-body[data-theme="dark"] .auth-waves__layer--front .auth-waves__crest--glow { stroke: color-mix(in srgb, var(--brand-accent, var(--secondary)) 22%, transparent); } .auth-stage { flex: 1; display: grid; place-items: center; padding: 48px 0 80px; } .auth-card { width: 100%; max-width: 420px; padding: 40px 32px 32px; border-radius: var(--r-2xl); background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); box-shadow: var(--shadow-lg); position: relative; animation: auth-rise 500ms var(--ease-out) both; } @keyframes auth-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .auth-card__icon { width: 52px; height: 52px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--brand-accent, var(--secondary)) 12%, var(--surface-container-lowest)); border: 1px solid color-mix(in srgb, var(--brand-accent, var(--secondary)) 30%, var(--outline-variant)); display: grid; place-items: center; margin: 0 auto 18px; position: relative; } /* CSS stroke overrides the partial's inline stroke="#1a0f2e" so the glyph takes the gym accent instead of a fixed purple. */ .auth-card__icon svg { stroke: var(--accent-on-surface, var(--secondary)); } .auth-card__icon--image { overflow: hidden; background: var(--surface-container-lowest); border-color: var(--outline-variant); } .auth-card__icon--image img { width: 100%; height: 100%; object-fit: contain; padding: 8px; } .auth-card__icon-fallback { color: var(--accent-on-surface, var(--secondary)); font-size: 22px; font-weight: 700; } .auth-card__eyebrow { text-align: center; margin: 0 0 8px; color: var(--accent-on-surface, var(--secondary)); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; } .auth-card__title { text-align: center; margin: 0 0 24px; color: var(--on-surface); font-size: 27px; font-weight: 800; line-height: 1.2; letter-spacing: -0.025em; } .auth-card__eyebrow + .auth-card__title { margin-top: 4px; } .auth-alert { margin: 0 0 16px; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--error) 25%, transparent); background: color-mix(in srgb, var(--error) 8%, var(--surface-container-lowest)); color: var(--on-error-container); padding: 12px 14px; font-size: 13px; font-weight: 500; position: relative; z-index: 1; } .auth-notice { margin: 0 0 16px; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--success) 25%, transparent); background: color-mix(in srgb, var(--success) 8%, var(--surface-container-lowest)); color: #155f3b; padding: 12px 14px; font-size: 13px; font-weight: 500; position: relative; z-index: 1; } .auth-lead { margin: -8px 0 20px; text-align: center; color: var(--on-surface-variant); font-size: 14px; position: relative; z-index: 1; } .auth-back { display: block; text-align: center; margin: 16px 0 0; color: var(--on-surface-variant); text-decoration: none; font-size: 13px; font-weight: 600; position: relative; z-index: 1; } .auth-back:hover { color: var(--accent-on-surface, var(--secondary)); } .auth-field { position: relative; margin-bottom: 12px; } .auth-field__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--on-surface-variant); pointer-events: none; } .auth-field__toggle { position: absolute; right: 12px; top: 50%; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; transform: translateY(-50%); background: transparent; border: 0; border-radius: var(--r-md); cursor: pointer; color: var(--on-surface-variant); outline: none; transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease; } .auth-field__toggle:hover { color: var(--on-surface); background: var(--surface-container); } .auth-field__toggle:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent, var(--secondary)) 24%, transparent); } .auth-field__visibility-icon { grid-area: 1 / 1; opacity: 1; transform: scale(1) rotate(0); transition: opacity 150ms ease, transform 250ms var(--ease-out); } .auth-field__visibility-icon--visible { opacity: 0; transform: scale(0.7) rotate(-10deg); } .auth-field__toggle[data-revealed="true"] .auth-field__visibility-icon--masked { opacity: 0; transform: scale(0.7) rotate(10deg); } .auth-field__toggle[data-revealed="true"] .auth-field__visibility-icon--visible { opacity: 1; transform: scale(1) rotate(0); } .auth-input { width: 100%; height: 48px; padding: 0 16px 0 44px; border-radius: var(--r-lg); background: var(--surface-container-low); border: 1px solid var(--outline-variant); color: var(--on-surface); font: 500 14px/1 "Plus Jakarta Sans", sans-serif; outline: none; transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease; } .auth-input::placeholder { color: var(--on-surface-variant); font-weight: 400; } .auth-input:focus { background: var(--surface-container-lowest); border-color: color-mix(in srgb, var(--secondary) 55%, var(--outline-variant)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent, var(--secondary)) 22%, transparent); } .auth-input--password { padding-right: 48px; } .auth-password-setup { margin-bottom: 20px; } .auth-password-guidance { margin: 2px 4px 0; padding-top: 2px; color: var(--on-surface-variant); font-size: 12px; } .auth-password-guidance__title { margin: 0 0 8px; color: var(--on-surface); font-size: 12px; font-weight: 700; } .auth-password-guidance__rules { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } .auth-password-guidance__rules li { display: flex; align-items: center; gap: 8px; transition: color 250ms var(--ease-out); } .auth-password-guidance__indicator { position: relative; width: 17px; height: 17px; flex: 0 0 17px; overflow: hidden; border: 1px solid var(--outline-variant); border-radius: var(--r-sm); background: var(--surface-container); color: var(--on-surface-variant); transition: color 250ms var(--ease-out), border-color 250ms var(--ease-out), background 250ms var(--ease-out); } .auth-password-guidance__glyph { position: absolute; inset: 0; width: 11px; height: 11px; margin: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.55); transform-origin: center; transition: opacity 150ms ease, transform 250ms var(--ease-out); } .auth-password-guidance__glyph--pending { opacity: 1; transform: scale(1); } .auth-password-guidance__glyph--valid path { stroke-dasharray: 18; stroke-dashoffset: 18; transition: stroke-dashoffset 250ms var(--ease-out) 50ms; } .auth-password-guidance__rules li[data-state="valid"] { color: var(--success); } .auth-password-guidance__rules li[data-state="valid"] .auth-password-guidance__indicator { border-color: var(--success); background: var(--success); color: var(--on-primary); animation: auth-password-rule-valid 250ms var(--ease-out); } .auth-password-guidance__rules li[data-state="valid"] .auth-password-guidance__glyph--pending, .auth-password-guidance__rules li[data-state="invalid"] .auth-password-guidance__glyph--pending { opacity: 0; transform: scale(0.55); } .auth-password-guidance__rules li[data-state="valid"] .auth-password-guidance__glyph--valid { opacity: 1; transform: scale(1); } .auth-password-guidance__rules li[data-state="valid"] .auth-password-guidance__glyph--valid path { stroke-dashoffset: 0; } .auth-password-guidance__rules li[data-state="invalid"] { color: var(--error); } .auth-password-guidance__rules li[data-state="invalid"] .auth-password-guidance__indicator { border-color: var(--error); background: color-mix(in srgb, var(--error) 8%, var(--surface-container-lowest)); color: var(--error); animation: auth-password-rule-invalid 250ms var(--ease-out); } .auth-password-guidance__rules li[data-state="invalid"] .auth-password-guidance__glyph--invalid { opacity: 1; transform: scale(1); } @keyframes auth-password-rule-valid { 0% { transform: scale(0.88); } 65% { transform: scale(1.08); } 100% { transform: scale(1); } } @keyframes auth-password-rule-invalid { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(-1.5px); } 75% { transform: translateX(1px); } } .auth-forgot { display: block; text-align: right; margin: 4px 4px 20px; color: var(--on-surface-variant); text-decoration: none; font-size: 13px; font-weight: 600; } .auth-forgot:hover { color: var(--accent-on-surface, var(--secondary)); } .auth-button { width: 100%; height: 52px; border-radius: var(--r-lg); /* The gym owner's primary color (injected) anchors the action. */ background: var(--primary, #1a1a1e); color: var(--on-primary); border: 1px solid transparent; font: 700 15px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: -0.005em; cursor: pointer; box-shadow: var(--shadow-md); transition: transform 120ms ease, box-shadow 150ms ease, filter 150ms ease; } .auth-button:hover { box-shadow: var(--shadow-lg); filter: brightness(1.12); } .auth-button:active { transform: translateY(0); } /* Gym picker (central login, multi-gym users). */ .gym-list { list-style: none; margin: 0 0 4px; padding: 0; position: relative; z-index: 1; } .gym-form { margin: 0 0 10px; } .gym-list li:last-child .gym-form { margin-bottom: 0; } .gym-option { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); color: var(--on-surface); text-align: left; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform 120ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease; } .gym-option:hover { background: var(--surface-container-low); border-color: color-mix(in srgb, var(--secondary) 40%, var(--outline-variant)); box-shadow: var(--shadow-md); } .gym-option:active { transform: translateY(0); } .gym-option:focus-visible { outline: none; border-color: color-mix(in srgb, var(--secondary) 55%, var(--outline-variant)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent, var(--secondary)) 22%, transparent); } .gym-option__avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--r-md); background: color-mix(in srgb, var(--brand-accent, var(--secondary)) 14%, var(--surface-container-lowest)); border: 1px solid color-mix(in srgb, var(--brand-accent, var(--secondary)) 28%, var(--outline-variant)); color: var(--accent-on-surface, var(--secondary)); display: grid; place-items: center; font-weight: 800; font-size: 18px; line-height: 1; } .gym-option__avatar--image { background: var(--surface-container-lowest); overflow: hidden; } .gym-option__avatar--image img { width: 100%; height: 100%; object-fit: contain; padding: 5px; } .gym-option__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .gym-option__name { font-size: 15px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gym-option__role { font-size: 12px; font-weight: 500; color: var(--on-surface-variant); letter-spacing: 0.01em; } .gym-option__chevron { flex: 0 0 auto; color: var(--outline); transition: transform 150ms ease, color 150ms ease; } .gym-option:hover .gym-option__chevron { color: var(--accent-on-surface, var(--secondary)); } /* Lifts de hover solo con puntero real (en touch el :hover queda pegado). */ @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .auth-button:hover { transform: translateY(-1px); } .gym-option:hover { transform: translateY(-1px); } .gym-option:hover .gym-option__chevron { transform: translateX(2px); } } @media (prefers-reduced-motion: reduce) { .auth-button:hover, .gym-option:hover, .gym-option:hover .gym-option__chevron { transform: none; } } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--on-surface-variant); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--outline-variant); } .auth-social-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; } .auth-social { height: 48px; border-radius: var(--r-lg); background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: transform 120ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease; box-shadow: var(--shadow-sm); } .auth-social__label { font: 600 14px/1 "Plus Jakarta Sans", sans-serif; color: var(--on-surface); letter-spacing: -0.005em; } .auth-social:hover:not(:disabled) { transform: translateY(-1px); background: var(--surface-container-low); border-color: var(--outline); box-shadow: var(--shadow-md); } .auth-social:disabled { cursor: not-allowed; opacity: 0.85; } /* button_to (Google OAuth) envuelve el botón en un form; que no rompa la grilla. */ .auth-social-form { display: contents; } a.auth-social { text-decoration: none; color: inherit; } @media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } /* Las olas quedan en su frame de reposo, quietas pero presentes; sin animación tampoco hay razón para retener sus capas de composición. */ .auth-waves__layer { animation: none; will-change: auto; } .auth-button, .gym-option, .auth-social, .gym-option__chevron { transition: none; } .auth-password-guidance__rules li, .auth-password-guidance__indicator, .auth-password-guidance__glyph, .auth-password-guidance__glyph--valid path { transition: none; } .auth-password-guidance__rules li[data-state] .auth-password-guidance__indicator { animation: none; } .auth-field__visibility-icon { transition: none; } }