/* Panel Oficial — login + sidebar app */
html {
color-scheme: dark;
--of-fg: #f8fafc;
--of-fg-soft: #e2e8f0;
--of-fg-muted: rgba(186, 198, 214, 0.92);
--of-fg-faint: rgba(148, 163, 184, 0.9);
--of-surface: rgba(3, 14, 28, 0.96);
--of-surface-2: rgba(255, 255, 255, 0.03);
--of-border: rgba(148, 163, 184, 0.16);
--of-accent: #7dd3fc;
--of-page-bg: #020812;
}
html[data-of-theme="light"] {
color-scheme: light;
--of-fg: #0f172a;
--of-fg-soft: #1e293b;
--of-fg-muted: #64748b;
--of-fg-faint: #64748b;
--of-surface: #ffffff;
--of-surface-2: #f1f5f9;
--of-border: rgba(15, 23, 42, 0.1);
--of-accent: #0369a1;
--of-page-bg: #eef3f8;
}
html,
html.oficial-html,
html:has(body.oficial-page) {
touch-action: manipulation;
-ms-touch-action: manipulation;
}
body.oficial-page {
min-height: 100%;
background: var(--of-page-bg) !important;
color: var(--of-fg-soft);
touch-action: manipulation;
overscroll-behavior: none;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
.oficial-page {
min-height: 100dvh;
font-family: Montserrat, system-ui, sans-serif;
background: var(--of-page-bg);
overflow-x: hidden;
touch-action: manipulation;
overscroll-behavior: none;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scrollbar-width: thin;
scrollbar-color: rgba(56, 189, 248, 0.45) rgba(2, 10, 22, 0.55);
}
/* Scrollbar moderna (Chromium / Safari) */
.oficial-page *,
.of-main,
.of-sidebar,
.of-login {
scrollbar-width: thin;
scrollbar-color: rgba(56, 189, 248, 0.45) rgba(2, 10, 22, 0.45);
}
.oficial-page::-webkit-scrollbar,
.of-main::-webkit-scrollbar,
.of-sidebar::-webkit-scrollbar,
.of-login::-webkit-scrollbar {
width: 9px;
height: 9px;
}
.oficial-page::-webkit-scrollbar-track,
.of-main::-webkit-scrollbar-track,
.of-sidebar::-webkit-scrollbar-track,
.of-login::-webkit-scrollbar-track {
background: rgba(2, 10, 22, 0.55);
border-radius: 999px;
margin: 4px;
}
.oficial-page::-webkit-scrollbar-thumb,
.of-main::-webkit-scrollbar-thumb,
.of-sidebar::-webkit-scrollbar-thumb,
.of-login::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(125, 211, 252, 0.55), rgba(6, 142, 209, 0.65));
border-radius: 999px;
border: 2px solid rgba(2, 10, 22, 0.65);
background-clip: padding-box;
box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}
.oficial-page::-webkit-scrollbar-thumb:hover,
.of-main::-webkit-scrollbar-thumb:hover,
.of-sidebar::-webkit-scrollbar-thumb:hover,
.of-login::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(186, 230, 253, 0.75), rgba(14, 165, 233, 0.85));
box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
}
.oficial-page::-webkit-scrollbar-corner,
.of-main::-webkit-scrollbar-corner {
background: transparent;
}
/* ── Login ── */
.of-login {
min-height: 100dvh;
min-height: 100svh;
max-height: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: safe center;
padding:
max(0.85rem, env(safe-area-inset-top, 0px))
max(1rem, env(safe-area-inset-right, 0px))
max(1.35rem, env(safe-area-inset-bottom, 0px))
max(1rem, env(safe-area-inset-left, 0px));
position: relative;
z-index: 2;
overflow-x: clip;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: auto;
touch-action: pan-y;
box-sizing: border-box;
}
.of-login[hidden] {
display: none !important;
}
.of-login-lang {
position: absolute;
top: 0.85rem;
right: 0.85rem;
z-index: 60;
}
.of-login-lang .lang-switcher.is-dropdown {
z-index: 61;
border-color: rgba(125, 211, 252, 0.28);
background:
linear-gradient(145deg, rgba(6, 142, 209, 0.16), rgba(5, 65, 139, 0.22)),
rgba(3, 14, 28, 0.72);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 10px 28px rgba(0, 0, 0, 0.35),
0 0 24px rgba(6, 142, 209, 0.12);
backdrop-filter: blur(12px);
}
.of-login-lang .lang-dd-menu {
right: 0;
left: auto;
min-width: 11.5rem;
}
.of-login-lang .lang-dd-trigger {
min-height: 2rem;
}
.of-login-lang .lang-flag {
width: 1.5rem;
height: 1.5rem;
}
.of-login-card {
position: relative;
z-index: 1;
width: min(100%, 440px);
flex: 0 0 auto;
margin: 0.65rem auto;
padding: 1.85rem 1.75rem 1.45rem;
border-radius: 20px;
border: 1px solid rgba(125, 211, 252, 0.22);
background: rgba(3, 14, 28, 0.9);
backdrop-filter: blur(14px);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.03) inset,
0 24px 60px rgba(0, 0, 0, 0.55),
0 0 80px rgba(6, 142, 209, 0.08);
animation: ofIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
overflow: hidden;
isolation: isolate;
}
.of-login input,
.of-login textarea,
.of-login select {
-webkit-user-select: text;
user-select: text;
touch-action: manipulation;
}
/* Clip del reflejo: no sale de la carta (la carta sigue overflow:visible por Turnstile) */
.of-login-setup[hidden] { display: none !important; }
.of-login-setup-lead {
margin: 0 0 0.85rem;
color: var(--of-fg-muted);
font-size: 0.86rem;
line-height: 1.45;
}
.of-login-card.is-setup { overflow: hidden; }
.of-login-card .phone-unified { position: relative; }
.of-login-card .phone-composite {
display: flex;
align-items: center;
min-height: 48px;
padding: 0 0.35rem 0 0.35rem;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.28);
background: rgba(2, 8, 18, 0.55);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.of-login-card .phone-composite:focus-within,
.of-login-card .phone-composite.is-checking {
border-color: rgba(56, 189, 248, 0.55);
box-shadow: 0 0 0 3px rgba(6, 142, 209, 0.16);
}
.of-login-card .phone-composite.is-ok {
border-color: rgba(110, 231, 183, 0.7);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}
.of-login-card .phone-composite.is-err {
border-color: rgba(248, 113, 113, 0.8);
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.14);
}
.of-login-card .phone-code-trigger {
display: inline-flex;
align-items: center;
gap: 0.22rem;
height: 32px;
padding: 0 0.45rem;
border-radius: 8px;
border: 1px solid rgba(125, 211, 252, 0.28);
background: rgba(6, 142, 209, 0.16);
color: #e2e8f0;
font: inherit;
cursor: pointer;
}
.of-login-card .phone-code-iso { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; color: #7dd3fc; }
.of-login-card .phone-code-dial { font-size: 0.84rem; font-weight: 650; color: #f1f5f9; }
.of-login-card .phone-code-chevron { color: #7dd3fc; transition: transform 0.2s ease; }
.of-login-card .phone-code-trigger[aria-expanded="true"] .phone-code-chevron { transform: rotate(180deg); }
.of-login-card .phone-number-field {
flex: 1;
min-width: 0;
height: 42px;
margin: 0;
padding: 0 2rem 0 0.55rem;
border: 0;
background: transparent;
box-shadow: none;
color: inherit;
font: inherit;
}
.of-login-card .phone-number-field:focus { outline: none; box-shadow: none; }
.of-login-card .phone-composite .of-live-status {
position: absolute;
right: 0.7rem;
font-weight: 800;
}
.of-dial-sheet {
position: fixed;
z-index: 14000;
width: min(340px, calc(100vw - 24px));
margin: 0;
padding: 0.45rem;
border-radius: 18px;
border: 1px solid rgba(125, 211, 252, 0.38);
background:
radial-gradient(120% 80% at 0% 0%, rgba(6, 142, 209, 0.28), transparent 52%),
rgba(2, 10, 22, 0.96);
box-shadow:
0 28px 70px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
backdrop-filter: blur(16px);
transform-origin: 18% 0;
opacity: 0;
transform: translateY(10px) scale(0.94);
filter: blur(8px);
pointer-events: none;
overflow: hidden;
}
.of-dial-sheet.is-up { transform-origin: 18% 100%; }
.of-dial-sheet.is-open {
animation: dialSheetIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
pointer-events: auto;
}
.of-dial-sheet.is-out {
animation: dialSheetOut 0.22s ease forwards;
}
.of-dial-search {
width: 100%;
height: 38px;
margin: 0 0 0.35rem;
padding: 0 0.75rem;
border-radius: 10px;
border: 1px solid rgba(125, 211, 252, 0.22);
background: rgba(255, 255, 255, 0.04);
color: #f8fafc;
font: inherit;
font-size: 0.82rem;
}
.of-dial-search:focus {
outline: none;
border-color: rgba(56, 189, 248, 0.6);
box-shadow: 0 0 0 3px rgba(6, 142, 209, 0.16);
}
.of-dial-sheet .phone-picker-list {
list-style: none;
margin: 0;
padding: 0;
max-height: min(280px, 46vh);
overflow: auto;
}
.of-dial-sheet.is-open .phone-picker-option {
animation: dialRowIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dialSheetIn {
from { opacity: 0; transform: translateY(12px) scale(0.92); filter: blur(8px); }
to { opacity: 1; transform: none; filter: none; }
}
@keyframes dialSheetOut {
to { opacity: 0; transform: translateY(6px) scale(0.96); filter: blur(6px); }
}
@keyframes dialRowIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.of-dial-sheet .phone-picker-option {
width: 100%;
display: grid;
grid-template-columns: 2.35rem minmax(0, 1fr) auto;
gap: 0.5rem;
align-items: center;
padding: 0.45rem 0.5rem;
border: 0;
border-radius: 8px;
background: transparent;
color: #e2e8f0;
font: inherit;
font-size: 0.82rem;
text-align: left;
cursor: pointer;
box-sizing: border-box;
overflow: hidden;
}
.of-dial-sheet .phone-picker-flag { display: none !important; }
.of-dial-sheet .phone-picker-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.of-dial-sheet .phone-picker-dial {
color: #94a3b8;
font-variant-numeric: tabular-nums;
font-weight: 650;
}
.of-dial-sheet .phone-picker-option:hover,
.of-dial-sheet .phone-picker-option.is-selected {
background: rgba(6, 142, 209, 0.2);
box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.28);
}
.of-dial-sheet .phone-picker-badge { font-size: 0.68rem; font-weight: 800; color: #7dd3fc; }
html[data-of-theme="light"] .of-login-card .phone-composite {
background: #fff;
border-color: rgba(15, 23, 42, 0.12);
}
html[data-of-theme="light"] .of-login-card .phone-code-trigger {
background: rgba(2, 132, 199, 0.08);
color: #0f172a;
}
html[data-of-theme="light"] .of-login-card .phone-code-dial { color: #0f172a; }
html[data-of-theme="light"] .of-login-card .phone-number-field { color: #0f172a; }
html[data-of-theme="light"] .of-dial-sheet {
background: #fff;
border-color: rgba(15, 23, 42, 0.1);
}
html[data-of-theme="light"] .of-dial-search {
background: #f8fafc;
color: #0f172a;
border-color: rgba(15, 23, 42, 0.12);
}
html[data-of-theme="light"] .of-dial-sheet .phone-picker-option { color: #0f172a; }
.of-login-pass-step[hidden] { display: none !important; }
.of-login-pass-step.is-in { animation: ofIn 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
.of-login-card-shine {
position: absolute;
inset: 0;
border-radius: inherit;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.of-login-card-shine::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
115deg,
transparent 35%,
rgba(255, 255, 255, 0.06) 48%,
transparent 62%
);
transform: translateX(-120%);
animation: ofShine 4.5s ease-in-out 0.8s infinite;
pointer-events: none;
}
.of-login-card > *:not(.of-login-card-shine):not(.of-login-card-glow) {
position: relative;
z-index: 1;
}
.of-login-card-glow {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.of-login-card-glow::before,
.of-login-card-glow::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(30px);
will-change: transform, opacity;
}
.of-login-card-glow::before {
width: 240px;
height: 240px;
top: -120px;
right: -80px;
background:
radial-gradient(circle at 42% 42%, rgba(125, 211, 252, 0.58), transparent 56%),
radial-gradient(circle at 68% 58%, rgba(6, 142, 209, 0.38), transparent 70%);
animation: ofGlowDrift 7s ease-in-out infinite;
}
.of-login-card-glow::after {
width: 170px;
height: 170px;
top: -36px;
right: 12%;
background: radial-gradient(circle, rgba(56, 189, 248, 0.28), transparent 72%);
animation: ofGlowPulse 5.5s ease-in-out infinite reverse;
}
@keyframes ofIn {
from { opacity: 0; transform: translateY(18px) scale(0.97); }
to { opacity: 1; transform: none; }
}
@keyframes ofShine {
0%, 70%, 100% { transform: translateX(-120%); }
85% { transform: translateX(120%); }
}
@keyframes ofGlowPulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.14); }
}
@keyframes ofGlowDrift {
0%, 100% { opacity: 0.72; transform: translate(0, 0) scale(1); }
40% { opacity: 1; transform: translate(-20px, 16px) scale(1.1); }
70% { opacity: 0.82; transform: translate(-8px, 10px) scale(1.05); }
}
.of-login-logo {
display: block;
height: 72px;
width: auto;
margin: 0 auto 1.05rem;
object-fit: contain;
position: relative;
animation: ofLogoIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}
@keyframes ofLogoIn {
from { opacity: 0; transform: translateY(8px) scale(0.94); }
to { opacity: 1; transform: none; }
}
.of-login-kicker {
display: none !important;
}
.of-login-card h1 {
display: none !important;
}
.of-login-lead {
margin: 0 0 1.25rem;
text-align: center;
font-size: calc(0.92rem + 2px);
line-height: 1.45;
color: rgba(186, 198, 214, 0.9);
position: relative;
animation: ofLogoIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
}
.of-honey {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.of-login-card .field {
margin-bottom: 0.85rem;
position: relative;
animation: ofLogoIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.of-login-card .field:nth-of-type(1) { animation-delay: 0.3s; }
#passField { animation-delay: 0.38s; }
.of-login-card label {
display: block;
margin-bottom: 0.35rem;
font-size: 0.78rem;
font-weight: 650;
color: rgba(203, 213, 225, 0.92);
}
.of-input-wrap,
.of-pass-wrap {
position: relative;
display: flex;
align-items: center;
}
.of-login-card input[type="email"],
.of-login-card input[type="password"],
.of-login-card input[type="text"] {
width: 100%;
min-height: 48px;
padding: 0 2.4rem 0 0.9rem;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.28);
background: rgba(2, 8, 18, 0.85);
color: #f1f5f9;
font: inherit;
font-size: 0.95rem;
outline: none;
transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.of-login-card input:focus {
border-color: rgba(56, 189, 248, 0.55);
box-shadow: 0 0 0 3px rgba(6, 142, 209, 0.16);
}
.of-login-card input:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.of-input-wrap.is-ok input {
border-color: rgba(52, 211, 153, 0.55);
}
.of-input-wrap.is-err input {
border-color: rgba(252, 165, 165, 0.55);
}
.of-input-wrap.is-checking input {
border-color: rgba(125, 211, 252, 0.45);
}
.of-live-status {
position: absolute;
right: 0.7rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.8rem;
font-weight: 750;
pointer-events: none;
}
.of-input-wrap.is-ok .of-live-status { color: #6ee7b7; }
.of-input-wrap.is-err .of-live-status { color: #fca5a5; }
.of-input-wrap.is-checking .of-live-status { color: #7dd3fc; }
.of-live-hint {
display: block;
margin-top: 0.2rem;
min-height: 0.95em;
font-size: 0.68rem;
color: rgba(148, 163, 184, 0.95);
}
.of-input-wrap.is-ok + .of-live-hint { color: #6ee7b7; }
.of-input-wrap.is-err + .of-live-hint { color: #fca5a5; }
.of-pass-wrap .pass-toggle {
position: absolute;
right: 0.3rem;
top: 50%;
transform: translateY(-50%);
}
.of-login-card .of-pass-wrap input[type="password"],
.of-login-card .of-pass-wrap input[type="text"] {
padding-right: 2.55rem;
}
.of-join-form .of-pass-wrap {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.of-join-form .of-pass-wrap input {
width: 100%;
padding-right: 2.55rem;
}
.of-turnstile-wrap {
display: flex;
justify-content: center;
margin: 0.35rem 0 0.65rem;
min-height: 65px;
transform: none;
transform-origin: center top;
}
.of-turnstile-wrap .cf-turnstile {
min-height: 65px;
}
.of-login-card .field-error:not(:empty) {
display: block;
margin: 0.35rem 0 0.65rem;
padding: 0.55rem 0.7rem;
border-radius: 10px;
background: rgba(248, 113, 113, 0.12);
border: 1px solid rgba(248, 113, 113, 0.35);
font-size: 0.78rem;
font-weight: 600;
color: #fecaca;
}
.of-login-btn {
position: relative;
width: 100%;
min-height: 50px;
border: 0;
border-radius: 12px;
cursor: pointer;
font: inherit;
font-weight: 700;
font-size: 0.95rem;
color: #041018;
background: linear-gradient(135deg, #7dd3fc, #068ed1 45%, #05418b);
background-size: 160% 160%;
box-shadow: 0 10px 22px rgba(6, 142, 209, 0.25);
transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease, background-position 0.45s ease;
overflow: hidden;
animation: ofLogoIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.48s both;
animation-fill-mode: backwards;
}
.of-login-btn.of-ready {
animation: none;
opacity: 1;
transform: none;
}
.of-login-btn::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform 0.55s ease;
pointer-events: none;
}
.of-login-btn:hover:not(:disabled)::before {
transform: translateX(120%);
}
.of-login-btn:hover:not(:disabled) {
transform: translateY(-2px);
filter: brightness(1.06);
box-shadow: 0 14px 28px rgba(6, 142, 209, 0.38);
background-position: 100% 50%;
}
.of-login-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
filter: none;
box-shadow: 0 8px 18px rgba(6, 142, 209, 0.12);
}
.of-login-btn.is-incomplete:not(.is-loading):not(:disabled) {
opacity: 0.82;
}
.of-login-btn.is-loading {
opacity: 1 !important;
cursor: wait;
filter: none;
transform: none;
box-shadow: 0 10px 22px rgba(6, 142, 209, 0.25);
}
.of-login-btn:disabled::before {
display: none;
}
.of-login-btn .btn-label,
.of-login-btn .btn-spinner {
position: relative;
z-index: 1;
}
.of-login-btn .btn-spinner {
display: none;
align-items: center;
justify-content: center;
gap: 0.45rem;
}
.of-login-btn .btn-label[hidden],
.of-login-btn .btn-spinner[hidden] {
display: none !important;
}
.of-login-btn.is-loading .btn-label {
display: none !important;
}
.of-login-btn.is-loading .btn-spinner {
display: inline-flex !important;
}
.of-login-btn .btn-spinner-ring {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid rgba(4, 16, 24, 0.25);
border-top-color: #041018;
animation: ofSpin 0.7s linear infinite;
}
@keyframes ofSpin {
to { transform: rotate(360deg); }
}
.of-secure-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin-top: 0.7rem;
font-size: 0.64rem;
font-weight: 600;
color: rgba(148, 163, 184, 0.85);
animation: ofLogoIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}
.of-secure-bar svg {
width: 12px;
height: 12px;
color: #6ee7b7;
flex-shrink: 0;
}
.of-turnstile-wrap,
.of-login-card .field-error {
animation: ofLogoIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both;
}
.of-input-wrap.is-ok {
animation: ofOkPop 0.35s ease;
}
@keyframes ofOkPop {
0% { transform: scale(1); }
50% { transform: scale(1.015); }
100% { transform: scale(1); }
}
body.is-oficial-app .of-login {
display: none !important;
}
body.is-oficial-app #mapBg,
body.is-oficial-app #particles,
body.is-oficial-app .ambient {
opacity: 0.35;
}
@media (max-height: 720px) {
.of-login-card {
padding: 1rem 1.15rem 0.9rem;
}
.of-login-logo {
height: 60px;
margin-bottom: 0.75rem;
}
.of-login-lead {
margin-bottom: 0.85rem;
font-size: calc(0.9rem + 2px);
}
.of-turnstile-wrap {
transform: scale(0.86);
}
.of-secure-bar {
margin-top: 0.5rem;
}
}
/* ── App shell ── */
.of-app {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
min-height: 100dvh;
height: 100dvh;
position: relative;
z-index: 1;
overflow: hidden;
}
.of-app[hidden] {
display: none !important;
}
/* El panel SOLO se ve con sesión validada o al reanudar (refresco) */
html.of-auth-ok #oficialLogin,
html.of-boot-resume #oficialLogin {
display: none !important;
}
html.of-auth-ok #oficialApp,
html.of-boot-resume #oficialApp {
display: grid !important;
}
html:not(.of-auth-ok):not(.of-boot-resume) #oficialApp {
display: none !important;
}
html.of-auth-ok body.oficial-page,
html.of-boot-resume body.oficial-page {
overflow: hidden;
}
body.is-oficial-app {
overflow: hidden;
}
body.is-oficial-app .of-login {
display: none !important;
}
/* Preloader tipo Netflix: el logo se acerca al salir */
.of-boot-overlay {
position: fixed;
inset: 0;
z-index: 20000;
display: none;
place-items: center;
overflow: hidden;
background: transparent;
pointer-events: none;
}
.of-boot-overlay::before {
content: "";
position: absolute;
inset: 0;
background: #000;
z-index: 0;
}
.of-boot-overlay[hidden] {
display: none !important;
pointer-events: none !important;
}
.of-boot-overlay:not([hidden]),
html.of-boot-check .of-boot-overlay:not([hidden]) {
display: grid !important;
pointer-events: auto;
}
.of-boot-overlay.is-out {
pointer-events: none;
}
.of-boot-overlay.is-out::before {
animation: ofBootVeil 1.05s cubic-bezier(0.4, 0, 1, 1) forwards;
}
html.of-boot-check body > .of-nav,
html.of-boot-check .of-nav.is-mobile-dock,
html.of-boot-app body > .of-nav,
html.of-boot-app .of-nav.is-mobile-dock,
html.of-boot-resume body > .of-nav,
html.of-boot-resume .of-nav.is-mobile-dock,
html.of-boot-check .of-dock-more,
html.of-boot-app .of-dock-more,
html.of-boot-resume .of-dock-more {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.of-boot-stage {
position: relative;
z-index: 1;
display: grid;
place-items: center;
}
.of-boot-logo {
width: min(300px, 62vw);
height: auto;
transform-origin: center center;
animation: ofBootHold 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
will-change: transform, opacity, filter;
}
.of-boot-overlay.is-out .of-boot-logo {
animation: ofBootZoom 1.05s cubic-bezier(0.7, 0, 0.84, 0.15) forwards;
}
.of-boot-sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
@keyframes ofBootHold {
from { opacity: 0; transform: scale(0.86); }
to { opacity: 1; transform: scale(1); }
}
@keyframes ofBootZoom {
0% { transform: scale(1); opacity: 1; filter: blur(0); }
62% { opacity: 1; filter: blur(0); }
100% { transform: scale(16); opacity: 0; filter: blur(10px); }
}
@keyframes ofBootVeil {
0%, 58% { opacity: 1; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.of-boot-logo,
.of-boot-overlay.is-out .of-boot-logo,
.of-boot-overlay.is-out::before { animation: none; }
.of-boot-overlay.is-out .of-boot-logo { opacity: 0; }
.of-boot-overlay.is-out::before { opacity: 0; }
}
.of-sidebar {
--sb-ink: #e8eef6;
--sb-muted: rgba(186, 198, 214, 0.72);
--sb-line: rgba(125, 211, 252, 0.14);
--sb-accent: #7dd3fc;
--sb-accent-deep: #068ed1;
position: relative;
height: 100%;
min-height: 100dvh;
display: flex;
flex-direction: column;
padding: 1.75rem 1.15rem 1.25rem;
border-right: 1px solid var(--sb-line);
background:
linear-gradient(180deg, rgba(7, 30, 54, 0.92) 0%, rgba(2, 10, 20, 0.98) 46%, #01070e 100%);
overflow: hidden;
isolation: isolate;
}
.of-sidebar-mesh {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.35;
background-image:
linear-gradient(rgba(125, 211, 252, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(125, 211, 252, 0.05) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%);
}
.of-sidebar-beam {
position: absolute;
top: -10%;
left: 50%;
width: 180%;
height: 42%;
transform: translateX(-50%);
z-index: 0;
pointer-events: none;
background: radial-gradient(ellipse at center, rgba(6, 142, 209, 0.28), transparent 68%);
animation: ofSbBeam 9s ease-in-out infinite;
}
@keyframes ofSbBeam {
0%, 100% { opacity: 0.55; }
50% { opacity: 0.95; }
}
.of-sidebar-head {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0.55rem 0.4rem 0.95rem;
}
.of-brand-logo {
display: block;
width: min(100%, 228px);
height: auto;
max-height: 76px;
object-fit: contain;
filter: drop-shadow(0 14px 28px rgba(6, 142, 209, 0.28));
}
.of-brand-mark,
.of-brand-tag,
.of-sidebar-foot {
display: none !important;
}
.of-sidebar-rule {
position: relative;
z-index: 1;
height: 1px;
margin: 0 0.55rem 1.1rem;
background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.45), transparent);
overflow: visible;
}
.of-sidebar-rule::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
transform: translate(-50%, -50%);
background: var(--sb-accent);
box-shadow: 0 0 12px rgba(125, 211, 252, 0.7);
}
.of-nav {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 0.28rem;
flex: 1 1 auto;
min-height: 0;
overflow: auto;
padding: 0 0.2rem 0.5rem;
}
.of-nav-label {
margin: 0 0 0.55rem 0.65rem;
font-size: 0.62rem;
font-weight: 750;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(148, 163, 184, 0.78);
}
.of-nav-btn.of-nav-more { display: none; }
.of-nav-btn {
--nav-i: 0;
appearance: none;
width: 100%;
border: 0;
background: transparent;
color: rgba(203, 213, 225, 0.78);
text-align: left;
font: inherit;
font-size: 0.9rem;
font-weight: 600;
padding: 0.72rem 0.7rem;
border-radius: 12px;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.8rem;
position: relative;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.25s ease;
animation: ofSbNavIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: calc(0.1s + (var(--nav-i) * 0.05s));
}
.of-nav-btn::before {
content: "";
position: absolute;
left: 0;
top: 20%;
bottom: 20%;
width: 2px;
border-radius: 2px;
background: linear-gradient(180deg, var(--sb-accent), var(--sb-accent-deep));
transform: scaleY(0);
opacity: 0;
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}
.of-nav-ico-wrap {
width: 34px;
height: 34px;
border-radius: 10px;
display: grid;
place-items: center;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(148, 163, 184, 0.12);
transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.of-nav-ico {
width: 17px;
height: 17px;
opacity: 0.8;
transition: opacity 0.2s ease;
}
.of-nav-text {
flex: 1;
min-width: 0;
letter-spacing: -0.01em;
}
.of-nav-badge {
flex: 0 0 auto;
min-width: 1.35rem;
height: 1.35rem;
padding: 0 0.4rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0;
line-height: 1;
color: #041018;
background: linear-gradient(135deg, #7dd3fc, #068ed1);
box-shadow: 0 4px 12px -4px rgba(6, 142, 209, 0.65);
}
.of-nav-badge[hidden] {
display: none !important;
}
.of-nav-btn.is-active .of-nav-badge {
background: #f8fafc;
color: #05418b;
box-shadow: none;
}
.of-nav-btn:hover {
color: #f8fafc;
background: rgba(6, 142, 209, 0.08);
transform: translateX(3px);
}
.of-nav-btn:hover::before {
transform: scaleY(0.7);
opacity: 0.65;
}
.of-nav-btn:hover .of-nav-ico-wrap {
border-color: rgba(125, 211, 252, 0.28);
background: rgba(6, 142, 209, 0.12);
transform: scale(1.04);
}
.of-nav-btn:hover .of-nav-ico {
opacity: 1;
}
.of-nav-btn.is-active {
color: #f8fafc;
background:
linear-gradient(90deg, rgba(6, 142, 209, 0.22), rgba(6, 142, 209, 0.06) 70%, transparent);
box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.16);
transform: none;
}
.of-nav-btn.is-active::before {
transform: scaleY(1);
opacity: 1;
}
.of-nav-btn.is-active .of-nav-ico-wrap {
background: linear-gradient(145deg, rgba(125, 211, 252, 0.35), rgba(6, 142, 209, 0.18));
border-color: rgba(125, 211, 252, 0.4);
box-shadow: 0 8px 18px -10px rgba(6, 142, 209, 0.65);
}
.of-nav-btn.is-active .of-nav-ico {
opacity: 1;
color: #e0f2fe;
}
.of-nav-btn.is-active:hover {
transform: none;
color: #f8fafc;
}
@keyframes ofSbNavIn {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: none; }
}
.of-sidebar-foot {
position: relative;
z-index: 1;
margin-top: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 1.1rem 0.4rem 0.35rem;
font-size: 0.64rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(148, 163, 184, 0.7);
border-top: 1px solid rgba(148, 163, 184, 0.1);
}
.of-sidebar-foot-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #34d399;
box-shadow: 0 0 10px rgba(52, 211, 153, 0.65);
animation: ofSbLive 2.4s ease-in-out infinite;
}
@keyframes ofSbLive {
0%, 100% { opacity: 0.55; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
.of-sidebar-beam,
.of-nav-btn,
.of-sidebar-foot-dot {
animation: none !important;
}
.of-nav-btn:hover {
transform: none;
}
}
.of-main {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
max-width: none;
padding: 0;
overflow: hidden;
background: transparent;
}
.of-main-scroll {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
scroll-behavior: smooth;
scrollbar-gutter: stable;
padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 3vw, 2rem) 2.5rem;
max-width: 1120px;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
/* ── Top bar ── */
.of-topbar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1rem;
padding: 0.65rem clamp(1rem, 3vw, 1.75rem);
border-bottom: 1px solid rgba(125, 211, 252, 0.12);
background:
linear-gradient(180deg, rgba(6, 24, 44, 0.92), rgba(2, 10, 20, 0.88));
backdrop-filter: blur(16px);
position: relative;
z-index: 30;
}
.of-topbar-brand { display: none; }
.of-topbar-right {
display: flex;
align-items: center;
gap: 0.55rem;
flex-shrink: 0;
}
.of-user-menu {
position: relative;
}
.of-user-chip {
appearance: none;
border: 1px solid var(--of-border);
background: var(--of-surface-2);
color: inherit;
border-radius: 999px;
padding: 0.22rem 0.55rem 0.22rem 0.22rem;
display: flex;
align-items: center;
gap: 0.45rem;
cursor: pointer;
font: inherit;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.of-user-chip:hover,
.of-user-menu.is-open .of-user-chip {
border-color: rgba(125, 211, 252, 0.35);
background: rgba(6, 142, 209, 0.1);
box-shadow: 0 8px 22px -12px rgba(6, 142, 209, 0.45);
}
.of-user-menu.is-open .of-user-chip {
transform: translateY(1px);
}
.of-user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.02em;
color: #041018;
background: linear-gradient(145deg, #9ae6ff, #068ed1 55%, #05418b);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
flex-shrink: 0;
}
.of-user-chip-name {
display: flex;
flex-direction: row;
align-items: baseline;
gap: 0.28rem;
min-width: 0;
font-size: 0.82rem;
font-weight: 700;
color: var(--of-fg);
white-space: nowrap;
max-width: 11rem;
overflow: hidden;
}
.of-name-first,
.of-name-last {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.of-name-last:empty { display: none; }
.of-user-caret {
width: 15px;
height: 15px;
color: var(--of-fg-muted);
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-user-menu.is-open .of-user-caret {
transform: rotate(180deg);
}
.of-user-drop {
--drop-glow: rgba(56, 189, 248, 0.32);
position: absolute;
top: calc(100% + 0.55rem);
right: 0;
width: min(304px, calc(100vw - 1.25rem));
padding: 0;
border-radius: 18px;
border: 1px solid rgba(125, 211, 252, 0.2);
background:
linear-gradient(165deg, rgba(8, 28, 48, 0.98), rgba(2, 10, 20, 0.98));
box-shadow:
0 24px 52px rgba(0, 0, 0, 0.48),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
backdrop-filter: blur(20px);
z-index: 50;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-10px) scale(0.94);
transform-origin: top right;
transition:
opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0.26s;
overflow: hidden;
}
html[data-of-theme="light"] .of-user-drop {
background: linear-gradient(165deg, #ffffff, #f8fafc);
--drop-glow: rgba(14, 165, 233, 0.2);
}
.of-user-drop::before {
content: "";
position: absolute;
top: -35%;
right: -25%;
width: 160px;
height: 160px;
border-radius: 50%;
background: radial-gradient(circle, var(--drop-glow), transparent 68%);
pointer-events: none;
opacity: 0.7;
}
.of-user-drop[hidden] {
display: block !important;
}
.of-user-menu.is-open .of-user-drop {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.of-user-menu.is-open .of-user-drop > * {
position: relative;
z-index: 1;
animation: ofDropItemIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.of-user-menu.is-open .of-user-drop > *:nth-child(1) { animation-delay: 0.02s; }
.of-user-menu.is-open .of-user-drop > *:nth-child(2) { animation-delay: 0.06s; }
.of-user-menu.is-open .of-user-drop > *:nth-child(3) { animation-delay: 0.1s; }
.of-user-menu.is-open .of-user-drop > *:nth-child(4) { animation-delay: 0.14s; }
@keyframes ofDropItemIn {
from { opacity: 0; transform: translateY(7px); }
to { opacity: 1; transform: none; }
}
.of-user-drop-head {
display: flex;
align-items: flex-start;
gap: 0.7rem;
padding: 0.9rem 0.9rem 0.75rem;
}
.of-user-avatar-wrap {
position: relative;
flex-shrink: 0;
}
.of-user-avatar-wrap.is-chip {
width: 32px;
height: 32px;
}
.of-user-drop-head .of-user-avatar {
width: 42px;
height: 42px;
font-size: 0.8rem;
}
.of-user-drop-pills {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.35rem;
}
.of-user-rank-pill {
display: inline-flex;
align-items: center;
padding: 0.18rem 0.5rem;
border-radius: 999px;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
border: 1px solid transparent;
}
.of-user-rank-pill.is-bronce {
color: #fde68a;
background: linear-gradient(135deg, rgba(205, 127, 50, 0.35), rgba(120, 53, 15, 0.45));
border-color: rgba(251, 191, 36, 0.45);
box-shadow: 0 0 16px rgba(205, 127, 50, 0.35);
}
.of-user-rank-pill.is-plata {
color: #e2e8f0;
background: linear-gradient(135deg, rgba(148, 163, 184, 0.35), rgba(71, 85, 105, 0.45));
border-color: rgba(226, 232, 240, 0.4);
}
.of-user-rank-pill.is-oro {
color: #fef3c7;
background: linear-gradient(135deg, rgba(234, 179, 8, 0.4), rgba(161, 98, 7, 0.45));
border-color: rgba(250, 204, 21, 0.5);
}
.of-user-rank-pill.is-platino {
color: #e0f2fe;
background: linear-gradient(135deg, rgba(125, 211, 252, 0.35), rgba(14, 116, 144, 0.4));
border-color: rgba(56, 189, 248, 0.45);
}
.of-user-rank-pill.is-diamante {
color: #ecfeff;
background: linear-gradient(135deg, rgba(34, 211, 238, 0.35), rgba(8, 145, 178, 0.45));
border-color: rgba(103, 232, 249, 0.55);
}
.of-user-rank-pill.is-corona {
color: #fdf4ff;
background: linear-gradient(135deg, rgba(232, 121, 249, 0.4), rgba(126, 34, 206, 0.45));
border-color: rgba(240, 171, 252, 0.55);
}
/* Rank badge — metallic / cinematic */
.of-rank-badge {
--rank-a: #f6e2c0;
--rank-b: #cd7f32;
--rank-c: #8a4b16;
--rank-glow: rgba(205, 127, 50, 0.65);
position: absolute;
right: -4px;
bottom: -3px;
width: 16px;
height: 16px;
border-radius: 50%;
z-index: 3;
pointer-events: none;
isolation: isolate;
}
.of-rank-badge.is-lg {
width: 22px;
height: 22px;
right: -5px;
top: -4px;
bottom: auto;
}
.of-rank-badge .of-rank-gem {
position: absolute;
inset: 1px;
border-radius: 50%;
display: grid;
place-items: center;
background:
radial-gradient(circle at 30% 25%, rgba(255, 248, 230, 0.95), transparent 42%),
linear-gradient(145deg, var(--rank-a), var(--rank-b) 48%, var(--rank-c));
box-shadow:
0 0 0 1px rgba(255, 236, 200, 0.55),
0 4px 10px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
overflow: hidden;
z-index: 2;
}
.of-rank-badge .of-rank-gem svg {
width: 72%;
height: 72%;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.of-rank-badge .of-rank-gem::after {
content: "";
position: absolute;
inset: -40%;
background: linear-gradient(
115deg,
transparent 35%,
rgba(255, 255, 255, 0.7) 48%,
transparent 62%
);
transform: translateX(-120%) rotate(18deg);
animation: ofRankShine 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.of-rank-halo {
position: absolute;
inset: -5px;
border-radius: 50%;
background: radial-gradient(circle, var(--rank-glow), transparent 70%);
animation: ofRankGlow 2.2s ease-in-out infinite;
z-index: 0;
}
.of-rank-orbit {
position: absolute;
inset: -3px;
border-radius: 50%;
border: 1px solid transparent;
border-top-color: var(--rank-a);
border-right-color: rgba(255, 255, 255, 0.35);
animation: ofRankSpin 1.8s linear infinite;
z-index: 1;
filter: drop-shadow(0 0 4px var(--rank-glow));
}
.of-rank-spark {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: #fff8e7;
box-shadow: 0 0 6px 2px var(--rank-glow);
z-index: 3;
animation: ofRankSpark 2.4s ease-in-out infinite;
}
.of-rank-spark.a { top: -2px; left: 55%; animation-delay: 0s; }
.of-rank-spark.b { right: -2px; bottom: 40%; animation-delay: 0.45s; }
.of-rank-spark.c { left: 0; bottom: -1px; animation-delay: 0.9s; }
.of-rank-badge.is-lg .of-rank-spark { width: 4px; height: 4px; }
.of-rank-badge.is-bronce {
--rank-a: #ffe7c2;
--rank-b: #cd7f32;
--rank-c: #7a3e12;
--rank-glow: rgba(245, 158, 11, 0.7);
}
.of-rank-badge.is-plata {
--rank-a: #f8fafc;
--rank-b: #94a3b8;
--rank-c: #475569;
--rank-glow: rgba(226, 232, 240, 0.55);
}
.of-rank-badge.is-oro {
--rank-a: #fef9c3;
--rank-b: #eab308;
--rank-c: #a16207;
--rank-glow: rgba(250, 204, 21, 0.7);
}
.of-rank-badge.is-platino {
--rank-a: #e0f2fe;
--rank-b: #38bdf8;
--rank-c: #0369a1;
--rank-glow: rgba(56, 189, 248, 0.65);
}
.of-rank-badge.is-diamante {
--rank-a: #ecfeff;
--rank-b: #22d3ee;
--rank-c: #0e7490;
--rank-glow: rgba(34, 211, 238, 0.7);
}
.of-rank-badge.is-corona {
--rank-a: #fdf4ff;
--rank-b: #e879f9;
--rank-c: #7e22ce;
--rank-glow: rgba(232, 121, 249, 0.7);
}
@keyframes ofRankShine {
0%, 55% { transform: translateX(-130%) rotate(18deg); opacity: 0; }
60% { opacity: 1; }
78% { transform: translateX(130%) rotate(18deg); opacity: 0.85; }
100% { transform: translateX(130%) rotate(18deg); opacity: 0; }
}
@keyframes ofRankGlow {
0%, 100% { opacity: 0.45; transform: scale(0.92); }
50% { opacity: 1; transform: scale(1.12); }
}
@keyframes ofRankSpin {
to { transform: rotate(360deg); }
}
@keyframes ofRankSpark {
0%, 100% { opacity: 0.15; transform: scale(0.6); }
40% { opacity: 1; transform: scale(1.25); }
70% { opacity: 0.35; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
.of-rank-halo,
.of-rank-orbit,
.of-rank-spark,
.of-rank-badge .of-rank-gem::after {
animation: none !important;
}
}
.of-user-live {
position: absolute;
right: 0;
bottom: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: #34d399;
border: 2px solid rgba(2, 10, 20, 0.98);
box-shadow: 0 0 8px rgba(52, 211, 153, 0.55);
}
html[data-of-theme="light"] .of-user-live {
border-color: #fff;
}
.of-user-drop-id {
min-width: 0;
flex: 1;
}
.of-user-drop-id strong {
display: block;
font-size: 0.92rem;
line-height: 1.2;
color: var(--of-fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.of-user-drop-id p {
margin: 0.18rem 0 0.4rem;
font-size: 0.7rem;
color: var(--of-fg-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.of-user-plan-pill {
display: inline-flex;
max-width: 100%;
padding: 0.28rem 0.55rem;
border-radius: 999px;
font-size: 0.62rem;
font-weight: 750;
letter-spacing: 0.02em;
color: #0369a1;
background: rgba(56, 189, 248, 0.14);
border: 1px solid rgba(56, 189, 248, 0.28);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
html:not([data-of-theme="light"]) .of-user-plan-pill {
color: #7dd3fc;
}
.of-user-drop-bal {
margin: 0 0.75rem 0.55rem;
padding: 0.78rem 0.82rem 0.7rem;
border-radius: 14px;
border: 1px solid rgba(125, 211, 252, 0.18);
background:
radial-gradient(120% 90% at 100% 0%, rgba(56, 189, 248, 0.14), transparent 55%),
linear-gradient(155deg, rgba(6, 142, 209, 0.18), rgba(2, 18, 36, 0.28));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 8px 22px rgba(2, 12, 28, 0.18);
}
html[data-of-theme="light"] .of-user-drop-bal {
background:
radial-gradient(120% 90% at 100% 0%, rgba(14, 165, 233, 0.12), transparent 55%),
linear-gradient(155deg, rgba(14, 165, 233, 0.08), #f8fafc);
border-color: rgba(14, 165, 233, 0.2);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 8px 18px rgba(15, 23, 42, 0.05);
}
.of-user-drop-bal-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.45rem;
margin-bottom: 0.5rem;
font-size: 0.68rem;
font-weight: 650;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--of-fg-muted);
}
.of-user-drop-bal-row strong {
font-size: 1.12rem;
color: var(--of-fg);
letter-spacing: -0.03em;
text-transform: none;
}
.of-user-drop-bal-row em {
font-style: normal;
font-variant-numeric: tabular-nums;
}
.of-user-drop-bal-row small {
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--of-accent);
}
.of-user-drop-bal-bar {
height: 7px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.2);
overflow: hidden;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}
.of-user-drop-bal-bar span {
display: block;
height: 100%;
width: 0%;
border-radius: inherit;
background: linear-gradient(90deg, #7dd3fc, #068ed1 48%, #34d399);
box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-user-drop-bal-bar.is-ready span {
background: linear-gradient(90deg, #34d399, #10b981 60%, #a7f3d0);
}
.of-user-drop-bal-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin: 0.48rem 0 0;
font-size: 0.68rem;
font-weight: 700;
color: var(--of-fg-muted);
}
.of-drop-bal-progress {
display: inline-flex;
align-items: baseline;
gap: 0.18rem;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
color: var(--of-fg);
}
.of-drop-bal-progress em {
font-style: normal;
font-size: 0.78rem;
font-weight: 800;
}
.of-drop-bal-progress i {
font-style: normal;
font-weight: 600;
opacity: 0.45;
margin: 0 0.05rem;
}
.of-drop-bal-kind {
flex-shrink: 0;
padding: 0.18rem 0.48rem;
border-radius: 999px;
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #e0f2fe;
background: rgba(6, 142, 209, 0.28);
border: 1px solid rgba(125, 211, 252, 0.28);
}
html[data-of-theme="light"] .of-drop-bal-kind {
color: #0369a1;
background: rgba(14, 165, 233, 0.12);
border-color: rgba(14, 165, 233, 0.22);
}
.of-drop-bal-kind.is-withdraw {
color: #d1fae5;
background: rgba(16, 185, 129, 0.28);
border-color: rgba(52, 211, 153, 0.3);
}
html[data-of-theme="light"] .of-drop-bal-kind.is-withdraw {
color: #047857;
background: rgba(16, 185, 129, 0.12);
border-color: rgba(16, 185, 129, 0.22);
}
.of-user-drop-bal-meta em {
font-style: normal;
}
.of-user-drop-verify {
appearance: none;
width: calc(100% - 1.5rem);
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0 0.75rem 0.55rem;
padding: 0.6rem 0.65rem;
border-radius: 12px;
border: 1px solid rgba(251, 191, 36, 0.35);
background: linear-gradient(120deg, rgba(251, 191, 36, 0.14), rgba(8, 20, 36, 0.12));
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}
html[data-of-theme="light"] .of-user-drop-verify {
background: linear-gradient(120deg, rgba(251, 191, 36, 0.14), #fff);
}
.of-user-drop-verify[hidden] {
display: none !important;
}
.of-user-drop-verify:hover {
transform: translateY(-1px);
filter: brightness(1.05);
border-color: rgba(251, 191, 36, 0.5);
}
.of-drop-verify-ico {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
color: #f59e0b;
background: rgba(251, 191, 36, 0.14);
border: 1px solid rgba(251, 191, 36, 0.28);
flex-shrink: 0;
}
.of-drop-verify-ico svg {
width: 15px;
height: 15px;
}
.of-drop-verify-copy {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.28rem;
}
.of-drop-verify-copy strong {
font-size: 0.78rem;
font-weight: 700;
color: var(--of-fg);
line-height: 1.15;
}
.of-drop-verify-dots {
display: flex;
gap: 0.28rem;
}
.of-drop-verify-dots i {
width: 22px;
height: 3.5px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.28);
font-style: normal;
}
.of-drop-verify-dots i.is-done {
background: linear-gradient(90deg, #34d399, #10b981);
}
.of-drop-verify-dots i.is-current {
background: linear-gradient(90deg, #fbbf24, #f59e0b);
box-shadow: 0 0 8px rgba(251, 191, 36, 0.45);
animation: ofVerifyPulse 1.6s ease-in-out infinite;
}
.of-drop-verify-go {
font-size: 1rem;
font-weight: 700;
color: #f59e0b;
flex-shrink: 0;
}
@keyframes ofVerifyPulse {
0%, 100% { opacity: 0.75; }
50% { opacity: 1; }
}
.of-user-drop-menu {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.35rem 0.55rem 0.65rem;
border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.of-drop-row {
appearance: none;
width: 100%;
display: flex;
align-items: center;
gap: 0.65rem;
border: 0;
background: transparent;
color: var(--of-fg);
font: inherit;
text-align: left;
padding: 0.58rem 0.5rem;
border-radius: 11px;
cursor: pointer;
transition: background 0.18s ease;
}
.of-drop-row:hover {
background: rgba(6, 142, 209, 0.1);
}
.of-drop-row.is-danger {
color: #f87171;
}
.of-drop-row.is-danger:hover {
background: rgba(248, 113, 113, 0.1);
}
html[data-of-theme="light"] .of-drop-row.is-danger {
color: #dc2626;
}
.of-drop-row-ico {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
background: var(--of-surface-2);
border: 1px solid var(--of-border);
color: var(--of-accent);
flex-shrink: 0;
}
.of-drop-row-ico svg {
width: 15px;
height: 15px;
grid-area: 1 / 1;
}
.of-drop-row-ico .is-sun { display: none; }
html[data-of-theme="light"] .of-drop-row-ico .is-sun { display: block; }
html[data-of-theme="light"] .of-drop-row-ico .is-moon { display: none; }
.of-drop-row.is-danger .of-drop-row-ico {
color: inherit;
border-color: rgba(248, 113, 113, 0.28);
background: rgba(248, 113, 113, 0.08);
}
.of-drop-row-copy {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.1rem;
line-height: 1.15;
}
.of-drop-row-copy strong {
font-size: 0.8rem;
font-weight: 700;
}
.of-drop-row-copy em {
font-style: normal;
font-size: 0.64rem;
color: var(--of-fg-faint);
}
.of-drop-row-chev {
font-size: 1.1rem;
color: var(--of-fg-faint);
line-height: 1;
}
.of-drop-switch {
width: 34px;
height: 20px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.28);
border: 1px solid rgba(148, 163, 184, 0.2);
position: relative;
flex-shrink: 0;
transition: background 0.2s ease;
}
.of-drop-switch i {
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #f8fafc;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
font-style: normal;
}
html[data-of-theme="light"] .of-drop-switch {
background: rgba(14, 165, 233, 0.45);
border-color: rgba(14, 165, 233, 0.35);
}
html[data-of-theme="light"] .of-drop-switch i {
transform: translateX(14px);
background: #fff;
}
/* Light topbar / drop surfaces */
html[data-of-theme="light"] .of-topbar {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(241, 245, 249, 0.94));
border-bottom-color: rgba(15, 23, 42, 0.08);
}
html[data-of-theme="light"] .of-name-last { color: #0369a1; }
html[data-of-theme="light"] .of-user-chip:hover,
html[data-of-theme="light"] .of-user-menu.is-open .of-user-chip {
background: #fff;
box-shadow: 0 8px 22px -12px rgba(2, 132, 199, 0.35);
}
html[data-of-theme="light"] .of-user-drop {
box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
border-color: rgba(15, 23, 42, 0.1);
}
/* Legacy verify helpers (unused track kept for safety) */
.of-verify-kicker {
margin: 0;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #f59e0b;
}
.of-verify-track,
.of-verify-steps,
.of-verify-cta {
display: none;
}
/* ── Light mode surfaces ── */
html[data-of-theme="light"] .of-sidebar {
--sb-ink: #0f172a;
--sb-muted: #64748b;
--sb-line: rgba(15, 23, 42, 0.08);
--sb-accent: #0284c7;
background: linear-gradient(180deg, #f8fbff 0%, #e8eef6 100%);
border-right-color: rgba(15, 23, 42, 0.08);
}
html[data-of-theme="light"] .of-sidebar-mesh,
html[data-of-theme="light"] .of-sidebar-beam {
opacity: 0.18;
}
html[data-of-theme="light"] .of-nav-btn {
color: #334155;
}
html[data-of-theme="light"] .of-nav-btn:hover,
html[data-of-theme="light"] .of-nav-btn.is-active {
color: #0f172a;
background: linear-gradient(90deg, rgba(2, 132, 199, 0.14), rgba(2, 132, 199, 0.04) 70%, transparent);
}
html[data-of-theme="light"] .of-nav-label {
color: #64748b;
}
html[data-of-theme="light"] .of-page-head h2,
html[data-of-theme="light"] .of-panel-head h3,
html[data-of-theme="light"] .of-list .of-item-title,
html[data-of-theme="light"] .task-card h4,
html[data-of-theme="light"] .bonus-card h4,
html[data-of-theme="light"] .of-plan-card h3,
html[data-of-theme="light"] .earn-hero-card strong,
html[data-of-theme="light"] .net-stat strong,
html[data-of-theme="light"] .comm-level strong {
color: #0f172a;
}
html[data-of-theme="light"] .of-page-head p,
html[data-of-theme="light"] .of-list .of-item-sub,
html[data-of-theme="light"] .task-card p,
html[data-of-theme="light"] .bonus-card p,
html[data-of-theme="light"] .oficial-note,
html[data-of-theme="light"] .of-panel-head p {
color: #64748b;
}
html[data-of-theme="light"] .of-activate-strip {
background: linear-gradient(100deg, #fff, #f0f9ff 55%, #fff);
border-color: rgba(2, 132, 199, 0.22);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
html[data-of-theme="light"] .of-activate-copy strong { color: #0f172a; }
html[data-of-theme="light"] .of-activate-copy span { color: #475569; }
html[data-of-theme="light"] .of-activate-price { color: #0f172a; }
html[data-of-theme="light"] .of-kpi {
background: linear-gradient(160deg, #fff, #f1f5f9);
border-color: rgba(15, 23, 42, 0.08);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
html[data-of-theme="light"] .of-kpi-label,
html[data-of-theme="light"] .of-kpi-val strong {
color: #0f172a;
}
html[data-of-theme="light"] .of-kpi-eye {
color: #64748b;
}
html[data-of-theme="light"] .of-kpi-eye:hover {
color: #0f172a;
}
html[data-of-theme="light"] .of-panel,
html[data-of-theme="light"] .of-panel-wide,
html[data-of-theme="light"] .earn-hero-card,
html[data-of-theme="light"] .net-link-box,
html[data-of-theme="light"] .task-card,
html[data-of-theme="light"] .bonus-card,
html[data-of-theme="light"] .of-plan-card {
background: #fff;
border-color: rgba(15, 23, 42, 0.08);
color: #0f172a;
}
html[data-of-theme="light"] .of-list li {
border-top-color: rgba(15, 23, 42, 0.08);
}
html[data-of-theme="light"] .map-bg,
html[data-of-theme="light"] .ambient,
html[data-of-theme="light"] #particles {
opacity: 0.2;
}
html[data-of-theme="light"] .of-login .auth-card,
html[data-of-theme="light"] .of-boot-card {
background: rgba(255, 255, 255, 0.94);
color: #0f172a;
border-color: rgba(15, 23, 42, 0.1);
}
html[data-of-theme="light"] .oficial-page {
scrollbar-color: rgba(2, 132, 199, 0.45) rgba(226, 232, 240, 0.9);
}
.of-config-grid,
.of-settings {
display: grid;
grid-template-columns: 1fr;
gap: 0.85rem;
}
.of-settings-card {
padding: 1.05rem 1.05rem 0.95rem;
border-radius: 18px;
border: 1px solid rgba(125, 211, 252, 0.16);
background:
linear-gradient(160deg, rgba(8, 28, 52, 0.72), rgba(2, 10, 22, 0.88));
}
.of-settings-card.is-soon { opacity: 0.72; }
.of-settings-head p {
margin: 0 0 0.2rem;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-settings-head h3 {
margin: 0;
font-size: 1.15rem;
letter-spacing: -0.03em;
}
.of-settings-head span {
display: block;
margin-top: 0.25rem;
color: var(--of-fg-muted);
font-size: 0.82rem;
line-height: 1.45;
}
.of-lang-pick {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.55rem;
margin-top: 0.9rem;
}
.of-lang-opt {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
min-height: 52px;
padding: 0.7rem 0.85rem;
border-radius: 14px;
border: 1px solid rgba(125, 211, 252, 0.18);
background: rgba(2, 10, 22, 0.45);
color: inherit;
font: inherit;
cursor: pointer;
text-align: left;
}
.of-lang-opt strong { font-size: 0.92rem; }
.of-lang-opt em {
font-style: normal;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.12em;
color: #7dd3fc;
}
.of-lang-opt.is-active {
border-color: rgba(125, 211, 252, 0.55);
background: linear-gradient(135deg, rgba(14, 165, 233, 0.28), rgba(2, 10, 22, 0.7));
box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.12);
}
.of-settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
margin-top: 0.85rem;
padding: 0.75rem 0.8rem;
border-radius: 14px;
border: 1px solid rgba(125, 211, 252, 0.14);
background: rgba(2, 10, 22, 0.35);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.of-settings-row.is-static { cursor: default; }
.of-settings-row-copy { display: grid; gap: 0.15rem; min-width: 0; }
.of-settings-row-copy strong { font-size: 0.9rem; }
.of-settings-row-copy em {
font-style: normal;
font-size: 0.76rem;
color: var(--of-fg-muted);
}
.of-settings-go {
flex-shrink: 0;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7dd3fc;
}
html[data-of-theme="light"] .of-settings-card,
html[data-of-theme="light"] .of-lang-opt,
html[data-of-theme="light"] .of-settings-row {
background: #fff;
border-color: rgba(15, 23, 42, 0.08);
}
html[data-of-theme="light"] .of-lang-opt.is-active {
background: #f0f9ff;
border-color: rgba(2, 132, 199, 0.35);
}
@media (max-width: 960px) {
html[data-of-theme="light"] .of-nav {
background: rgba(255, 255, 255, 0.94);
border-color: rgba(15, 23, 42, 0.08);
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}
html[data-of-theme="light"] .of-nav-btn,
html[data-of-theme="light"] .of-nav-more {
color: #334155;
}
html[data-of-theme="light"] .of-nav-btn.is-active,
html[data-of-theme="light"] .of-nav-more.is-active,
html[data-of-theme="light"] .of-nav-more.is-open {
color: #0369a1;
background: linear-gradient(180deg, rgba(2, 132, 199, 0.16), rgba(2, 132, 199, 0.05));
}
}
#ofConfigTheme[aria-pressed="true"] .of-drop-switch {
background: #0284c7;
}
#ofConfigTheme[aria-pressed="true"] .of-drop-switch i { transform: translateX(16px); }
#ofConfigBio[aria-pressed="true"] .of-drop-switch { background: #10b981; }
#ofConfigBio[aria-pressed="true"] .of-drop-switch i { transform: translateX(16px); }
#ofConfigBio:disabled { opacity: 0.55; cursor: not-allowed; }
.of-login-bio {
position: relative;
display: flex;
align-items: center;
gap: 0.85rem;
width: 100%;
margin: 0 0 0.9rem;
padding: 0.85rem 1rem;
border-radius: 14px;
border: 1px solid rgba(125, 211, 252, 0.35);
background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(5, 65, 139, 0.22));
color: #e0f2fe;
font: inherit;
text-align: left;
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
animation: ofLogoIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.of-login-bio[hidden] { display: none !important; }
.of-login-bio:hover { border-color: rgba(125, 211, 252, 0.6); transform: translateY(-1px); }
.of-login-bio:active { transform: scale(0.985); }
.of-login-bio-ico {
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 12px;
display: grid;
place-items: center;
color: #041018;
background: linear-gradient(135deg, #7dd3fc, #068ed1);
box-shadow: 0 0 0 0 rgba(125, 211, 252, 0.5);
animation: ofBioPulse 2.4s ease-out infinite;
}
.of-login-bio-ico svg { width: 26px; height: 26px; }
.of-login-bio-copy { display: grid; gap: 0.1rem; min-width: 0; }
.of-login-bio-copy strong { font-size: 0.95rem; }
.of-login-bio-copy small { font-size: 0.78rem; color: rgba(186, 198, 214, 0.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.of-login-bio-spin { display: none; margin-left: auto; width: 20px; height: 20px; }
.of-login-bio.is-busy { pointer-events: none; opacity: 0.85; }
.of-login-bio.is-busy .of-login-bio-spin { display: inline-block; }
@keyframes ofBioPulse {
0% { box-shadow: 0 0 0 0 rgba(125, 211, 252, 0.45); }
70% { box-shadow: 0 0 0 12px rgba(125, 211, 252, 0); }
100% { box-shadow: 0 0 0 0 rgba(125, 211, 252, 0); }
}
.of-login-or {
display: flex;
align-items: center;
gap: 0.7rem;
margin: 0 0 0.9rem;
font-size: 0.78rem;
color: rgba(186, 198, 214, 0.7);
}
.of-login-or[hidden] { display: none !important; }
.of-login-or::before,
.of-login-or::after { content: ""; flex: 1; height: 1px; background: rgba(148, 163, 184, 0.22); }
html[data-of-theme="light"] .of-login-or { color: #475569; }
/* Acceso con huella configurado: botón principal */
.of-login-bio {
min-height: 70px;
padding: 0.8rem 0.85rem 0.8rem 0.8rem;
border-radius: 18px;
border: 1px solid rgba(186, 230, 253, 0.55);
background:
radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.28), transparent 55%),
linear-gradient(135deg, #38bdf8, #068ed1 50%, #05418b);
color: #fff;
overflow: hidden;
isolation: isolate;
box-shadow: 0 14px 34px rgba(6, 142, 209, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.of-login-bio::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.38) 48%, transparent 66%);
transform: translateX(-120%);
animation: ofBioShine 3.2s ease-in-out 0.8s infinite;
}
.of-login-bio::after {
content: "";
position: absolute;
inset: -2px;
z-index: -2;
border-radius: inherit;
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.55);
animation: ofBioRing 2.6s ease-out infinite;
}
.of-login-bio:hover { border-color: #e0f2fe; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(6, 142, 209, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.of-login-bio .of-login-bio-ico {
width: 50px;
height: 50px;
border-radius: 14px;
color: #05418b;
background: #fff;
box-shadow: 0 6px 16px rgba(2, 32, 70, 0.3);
animation: none;
}
.of-login-bio .of-login-bio-ico svg { width: 30px; height: 30px; }
.of-login-bio-copy strong { font-size: 1.02rem; font-weight: 800; letter-spacing: 0.01em; }
.of-login-bio-copy small { color: rgba(240, 249, 255, 0.88); }
.of-login-bio-go {
flex: 0 0 auto;
margin-left: auto;
width: 38px;
height: 38px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.35);
}
.of-login-bio-go svg { width: 18px; height: 18px; animation: ofBioNudge 1.6s ease-in-out infinite; }
.of-login-bio.is-busy .of-login-bio-go { display: none; }
.of-login-bio-spin { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }
@keyframes ofBioShine {
0%, 55% { transform: translateX(-120%); }
100% { transform: translateX(120%); }
}
@keyframes ofBioRing {
0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.5); }
75%, 100% { box-shadow: 0 0 0 10px rgba(56, 189, 248, 0); }
}
@keyframes ofBioNudge {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
.of-login-bio::before,
.of-login-bio::after,
.of-login-bio-go svg { animation: none; }
}
.of-bio-offer {
position: fixed;
inset: 0;
z-index: 12500;
display: flex;
align-items: flex-end;
justify-content: center;
}
.of-bio-offer[hidden] { display: none !important; }
.of-bio-offer-veil { position: absolute; inset: 0; border: 0; background: rgba(2, 6, 23, 0.6); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.25s ease; }
.of-bio-offer-sheet {
position: relative;
width: min(440px, 100%);
padding: 1.6rem 1.4rem calc(1.3rem + env(safe-area-inset-bottom));
border-radius: 24px 24px 0 0;
background: linear-gradient(165deg, #081a2b, #040c16);
border: 1px solid rgba(125, 211, 252, 0.25);
border-bottom: 0;
text-align: center;
color: #e2e8f0;
transform: translateY(100%);
transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-bio-offer.is-open .of-bio-offer-veil { opacity: 1; }
.of-bio-offer.is-open .of-bio-offer-sheet { transform: none; }
.of-bio-offer-sheet .of-login-bio-ico { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 0.9rem; }
.of-bio-offer-sheet .of-login-bio-ico svg { width: 36px; height: 36px; }
.of-bio-offer-sheet h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.of-bio-offer-sheet p { margin: 0 0 1.2rem; font-size: 0.88rem; line-height: 1.5; color: rgba(203, 213, 225, 0.85); }
.of-bio-offer-handle { display: block; width: 42px; height: 5px; margin: -0.6rem auto 1.1rem; border-radius: 99px; background: rgba(148, 163, 184, 0.35); }
.of-bio-offer-sheet .of-bio-offer-q { margin: -0.4rem 0 1rem; font-size: 0.95rem; font-weight: 700; color: #e0f2fe; }
.of-bio-offer-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 0.6rem; }
.of-bio-offer-actions .of-login-btn { min-height: 52px; animation: none; opacity: 1; transform: none; }
.of-bio-offer-yes { box-shadow: 0 12px 28px rgba(6, 142, 209, 0.38); }
.of-bio-offer-no {
min-height: 52px;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.35);
background: rgba(148, 163, 184, 0.08);
color: #e2e8f0;
font: inherit;
font-weight: 700;
font-size: 0.95rem;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.of-bio-offer-no:active,
.of-bio-offer-yes:active { transform: scale(0.97); }
.of-bio-offer-note { display: block; margin-top: 0.9rem; font-size: 0.76rem; color: rgba(148, 163, 184, 0.9); }
body.of-bio-offer-open { overflow: hidden; }
@media (max-width: 640px) {
.of-bio-offer-sheet {
width: 100%;
max-height: calc(100dvh - 24px);
overflow-y: auto;
padding-bottom: calc(1.4rem + env(safe-area-inset-bottom));
box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.45);
}
}
@media (min-width: 641px) {
.of-bio-offer { align-items: center; }
.of-bio-offer-sheet { border-radius: 24px; border-bottom: 1px solid rgba(125, 211, 252, 0.25); }
.of-bio-offer-handle { display: none; }
}
html[data-of-theme="light"] .of-bio-offer-sheet { background: linear-gradient(165deg, #ffffff, #f0f9ff); color: #0f172a; border-color: #bae6fd; }
html[data-of-theme="light"] .of-bio-offer-sheet p,
html[data-of-theme="light"] .of-bio-offer-note { color: #475569; }
html[data-of-theme="light"] .of-bio-offer-sheet .of-bio-offer-q { color: #0c4a6e; }
html[data-of-theme="light"] .of-bio-offer-no { color: #0f172a; background: #f1f5f9; border-color: #cbd5e1; }
.of-page-head {
margin-bottom: 1.25rem;
}
.of-page-head h2 {
margin: 0 0 0.35rem;
font-size: clamp(1.35rem, 3vw, 1.7rem);
font-weight: 750;
letter-spacing: -0.02em;
color: var(--of-fg);
}
.of-page-head p {
margin: 0;
max-width: 36rem;
font-size: 0.9rem;
line-height: 1.5;
color: var(--of-fg-muted);
}
.oview[hidden] {
display: none !important;
}
.of-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.85rem;
margin-bottom: 1.25rem;
}
.of-kpi {
--kpi-accent: #38bdf8;
position: relative;
isolation: isolate;
overflow: hidden;
padding: 1.05rem 1.1rem 1rem;
border-radius: 18px;
border: 1px solid rgba(148, 163, 184, 0.16);
background:
linear-gradient(160deg, rgba(10, 28, 52, 0.92), rgba(2, 10, 22, 0.96));
box-shadow:
0 10px 28px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
animation: ofRise 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
transition:
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.3s ease,
box-shadow 0.35s ease;
min-width: 0;
}
.of-kpi::before {
content: "";
position: absolute;
inset: -40% -30%;
background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--kpi-accent) 28%, transparent), transparent 55%);
opacity: 0.55;
pointer-events: none;
z-index: 0;
animation: ofKpiAura 6s ease-in-out infinite;
}
.of-kpi::after {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 55%;
height: 100%;
background: linear-gradient(
105deg,
transparent 0%,
rgba(255, 255, 255, 0.02) 35%,
rgba(255, 255, 255, 0.14) 50%,
rgba(255, 255, 255, 0.02) 65%,
transparent 100%
);
transform: skewX(-18deg);
pointer-events: none;
z-index: 1;
animation: ofKpiShine 4.8s ease-in-out infinite;
}
.of-kpi > * {
position: relative;
z-index: 2;
}
.of-kpi:hover {
transform: translateY(-5px) scale(1.015);
border-color: color-mix(in srgb, var(--kpi-accent) 55%, transparent);
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.35),
0 0 0 1px color-mix(in srgb, var(--kpi-accent) 22%, transparent),
0 0 36px color-mix(in srgb, var(--kpi-accent) 18%, transparent);
}
.of-kpi:nth-child(1) { animation-delay: 0.05s; }
.of-kpi:nth-child(2) { animation-delay: 0.1s; }
.of-kpi:nth-child(3) { animation-delay: 0.15s; }
.of-kpi:nth-child(4) { animation-delay: 0.2s; }
.of-kpi:nth-child(5) { animation-delay: 0.25s; }
.of-kpi:nth-child(6) { animation-delay: 0.3s; }
.of-kpi:nth-child(7) { animation-delay: 0.35s; }
.of-kpi:nth-child(8) { animation-delay: 0.4s; }
.of-kpi:nth-child(1)::after { animation-delay: 0.2s; }
.of-kpi:nth-child(2)::after { animation-delay: 0.7s; }
.of-kpi:nth-child(3)::after { animation-delay: 1.2s; }
.of-kpi:nth-child(4)::after { animation-delay: 1.7s; }
.of-kpi:nth-child(5)::after { animation-delay: 0.4s; }
.of-kpi:nth-child(6)::after { animation-delay: 0.9s; }
.of-kpi:nth-child(7)::after { animation-delay: 1.4s; }
.of-kpi:nth-child(8)::after { animation-delay: 1.9s; }
.of-kpi.is-success {
--kpi-accent: #34d399;
border-color: rgba(52, 211, 153, 0.42);
background:
linear-gradient(155deg, rgba(16, 185, 129, 0.18), rgba(4, 20, 16, 0.92) 45%, rgba(2, 12, 10, 0.96));
}
.of-kpi.is-success strong {
color: #6ee7b7;
text-shadow: 0 0 20px rgba(52, 211, 153, 0.45);
}
.of-kpi.is-success em {
color: #a7f3d0;
}
.of-kpi.is-success span {
color: rgba(167, 243, 208, 0.9);
}
.of-kpi.is-success:hover {
box-shadow:
0 18px 42px rgba(0, 0, 0, 0.35),
0 0 42px rgba(52, 211, 153, 0.22);
}
.of-kpi.is-warn {
--kpi-accent: #fb923c;
border-color: rgba(251, 146, 60, 0.42);
background:
linear-gradient(155deg, rgba(251, 146, 60, 0.16), rgba(4, 14, 28, 0.9));
}
.of-kpi.is-warn strong {
color: #fb923c;
text-shadow: 0 0 18px rgba(251, 146, 60, 0.4);
}
.of-kpi.is-warn em {
color: #fdba74;
}
.of-kpi.is-frozen {
--kpi-accent: #7dd3fc;
border-color: rgba(125, 211, 252, 0.48);
background:
linear-gradient(155deg, rgba(56, 189, 248, 0.18), rgba(14, 40, 72, 0.55) 40%, rgba(4, 14, 28, 0.94));
box-shadow:
inset 0 0 28px rgba(125, 211, 252, 0.1),
0 10px 28px rgba(0, 0, 0, 0.22);
}
.of-kpi.is-frozen strong {
color: #bae6fd;
text-shadow: 0 0 22px rgba(125, 211, 252, 0.45);
}
.of-kpi.is-frozen em {
color: #7dd3fc;
}
.of-kpi.is-frozen span {
color: rgba(186, 230, 253, 0.88);
}
.of-kpi.is-danger {
--kpi-accent: #f87171;
border-color: rgba(248, 113, 113, 0.42);
background:
linear-gradient(155deg, rgba(248, 113, 113, 0.16), rgba(28, 8, 12, 0.92) 45%, rgba(12, 4, 8, 0.96));
}
.of-kpi.is-danger strong {
color: #fca5a5;
text-shadow: 0 0 18px rgba(248, 113, 113, 0.4);
}
.of-kpi.is-danger em {
color: #fecaca;
}
.of-kpi.is-danger span {
color: rgba(254, 202, 202, 0.9);
}
.of-kpi.is-danger:hover {
box-shadow:
0 18px 42px rgba(0, 0, 0, 0.35),
0 0 42px rgba(248, 113, 113, 0.2);
}
.of-kpi#kpiMembershipCard strong {
font-size: 1.15rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.of-kpi#kpiMembershipCard.is-danger strong {
color: #ef4444;
text-shadow: 0 0 16px rgba(239, 68, 68, 0.45);
}
.of-kpi#kpiMembershipCard.is-success strong {
color: #22c55e;
text-shadow: 0 0 16px rgba(34, 197, 94, 0.4);
}
@keyframes ofRise {
from { opacity: 0; transform: translateY(18px) scale(0.96); }
to { opacity: 1; transform: none; }
}
@keyframes ofKpiShine {
0%, 55% { left: -120%; opacity: 0; }
60% { opacity: 1; }
78% { left: 140%; opacity: 0.85; }
100% { left: 140%; opacity: 0; }
}
@keyframes ofKpiAura {
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 0.75; transform: scale(1.08); }
}
.of-kpi-label {
margin: 0 0 0.2rem;
font-size: 0.78rem;
font-weight: 750;
letter-spacing: -0.01em;
color: var(--of-fg);
line-height: 1.2;
}
.of-kpi-sub {
margin: 0 0 0.55rem;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: color-mix(in srgb, var(--kpi-accent, #7dd3fc) 85%, #e2e8f0);
line-height: 1.35;
}
.of-kpi-val {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 0.35rem;
min-width: max-content;
max-width: 100%;
white-space: nowrap;
line-height: 1;
overflow: visible;
}
.of-kpi-val strong {
display: inline-block;
flex: 0 0 auto;
min-width: max-content;
font-size: 1.28rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--of-fg);
line-height: 1;
vertical-align: middle;
white-space: nowrap;
}
.of-kpi-val em {
display: inline-block;
flex: 0 0 auto;
font-style: normal;
font-size: 0.72rem;
font-weight: 700;
color: #7dd3fc;
line-height: 1;
vertical-align: middle;
}
.of-kpi-eye {
flex: 0 0 auto;
width: auto;
height: auto;
margin: 0;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 0;
background: transparent;
color: #94a3b8;
cursor: pointer;
transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.of-kpi-eye svg {
width: 16px;
height: 16px;
display: block;
}
.of-kpi-eye:hover {
color: #e2e8f0;
transform: scale(1.08);
background: transparent;
border: 0;
}
.of-kpi-eye .eye-state-show {
display: none;
}
.of-kpi.is-hidden-money .of-kpi-eye .eye-state-hide {
display: none;
}
.of-kpi.is-hidden-money .of-kpi-eye .eye-state-show {
display: block;
}
.of-kpi.is-hidden-money .of-kpi-eye {
color: #7dd3fc;
}
.of-kpi.is-hidden-money .of-kpi-val strong {
display: inline-flex;
align-items: center;
gap: 0.42rem;
flex: 0 0 auto;
min-width: max-content;
min-height: 1.28rem;
letter-spacing: 0;
font-size: 0;
color: transparent;
}
.of-kpi-dot {
width: 0.42rem;
height: 0.42rem;
border-radius: 50%;
display: inline-block;
flex: 0 0 auto;
background: #fff;
box-shadow: none;
animation: none;
transform: none;
filter: none;
opacity: 0.92;
}
.of-kpi span {
display: inline;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-transform: inherit;
color: inherit;
margin: 0;
line-height: inherit;
}
.of-kpi strong {
font-size: 1.28rem;
font-weight: 800;
letter-spacing: -0.02em;
color: #f8fafc;
transition: text-shadow 0.3s ease, color 0.3s ease;
}
.of-kpi em {
font-style: normal;
font-size: 0.7rem;
font-weight: 650;
color: #7dd3fc;
margin-left: 0;
}
@media (prefers-reduced-motion: reduce) {
.of-kpi,
.of-kpi::before,
.of-kpi::after {
animation: ofRise 0.4s ease both !important;
}
.of-kpi:hover {
transform: none;
}
}
.of-activate-strip {
position: relative;
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
min-height: 72px;
margin: 0 0 1.15rem;
padding: 0.7rem 0.85rem 0.7rem 0.95rem;
border-radius: 16px;
border: 1px solid rgba(125, 211, 252, 0.28);
background:
linear-gradient(100deg, rgba(8, 28, 48, 0.96), rgba(3, 12, 24, 0.94) 48%, rgba(6, 32, 54, 0.96));
box-shadow:
0 10px 28px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
overflow: hidden;
}
.of-activate-strip[hidden] { display: none !important; }
.of-activate-strip::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(180deg, #e0f2fe, #38bdf8 55%, #0284c7);
}
.of-activate-strip::after {
content: "";
position: absolute;
inset: -40% -20%;
background: linear-gradient(105deg, transparent 38%, rgba(186, 230, 253, 0.08), transparent 62%);
transform: translateX(-40%);
animation: ofActivateSheen 7.5s ease-in-out infinite;
pointer-events: none;
}
.of-activate-mark {
flex-shrink: 0;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 12px;
color: #e0f2fe;
background: rgba(56, 189, 248, 0.12);
border: 1px solid rgba(125, 211, 252, 0.28);
box-shadow: inset 0 0 16px rgba(56, 189, 248, 0.12);
}
.of-activate-mark svg { width: 18px; height: 18px; }
.of-activate-copy {
position: relative;
z-index: 1;
min-width: 0;
flex: 1;
display: grid;
gap: 0.12rem;
}
.of-activate-copy strong {
font-size: 0.95rem;
letter-spacing: -0.03em;
color: #f8fafc;
line-height: 1.2;
}
.of-activate-copy span {
font-size: 0.78rem;
line-height: 1.35;
color: rgba(186, 230, 253, 0.78);
}
.of-activate-price {
position: relative;
z-index: 1;
flex-shrink: 0;
font-style: normal;
font-weight: 800;
font-size: 1.05rem;
letter-spacing: -0.04em;
color: #f8fafc;
}
.of-activate-price small {
margin-left: 0.15rem;
font-size: 0.62rem;
letter-spacing: 0.14em;
color: #7dd3fc;
}
.of-activate-strip .of-pos-cta {
position: relative;
z-index: 1;
min-height: 40px;
}
@keyframes ofActivateSheen {
0%, 55% { transform: translateX(-55%); }
80%, 100% { transform: translateX(55%); }
}
@media (max-width: 720px) {
.of-activate-strip {
flex-wrap: wrap;
min-height: 0;
padding: 0.75rem 0.8rem;
}
.of-activate-price { margin-left: 2.9rem; }
.of-activate-strip .of-pos-cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.of-activate-strip::after { animation: none; }
}
.of-dash-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.9rem;
}
.of-panel {
padding: 1rem 1.05rem 0.85rem;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(4, 14, 28, 0.68);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.of-panel:hover {
transform: translateY(-2px);
border-color: rgba(56, 189, 248, 0.28);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}
.of-panel-wide {
grid-column: 1 / -1;
}
.of-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.65rem;
}
.of-panel-head h3 {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
color: var(--of-fg);
}
.of-link {
appearance: none;
border: 0;
background: transparent;
color: #7dd3fc;
font: inherit;
font-size: 0.72rem;
font-weight: 650;
cursor: pointer;
padding: 0;
}
.of-link:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.of-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.of-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.15rem;
border-top: 1px solid rgba(148, 163, 184, 0.1);
font-size: 0.84rem;
}
.of-list li:first-child {
border-top: 0;
}
.of-list .of-item-main {
min-width: 0;
flex: 1;
}
.of-list .of-item-title {
display: block;
font-weight: 650;
color: var(--of-fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.of-list .of-item-sub {
display: block;
margin-top: 0.15rem;
font-size: 0.7rem;
color: var(--of-fg-faint);
}
.of-list .of-item-val {
flex-shrink: 0;
font-weight: 750;
color: #6ee7b7;
font-size: 0.86rem;
}
.of-list .of-item-val.is-neg {
color: #fca5a5;
}
.of-badge {
flex-shrink: 0;
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.22rem 0.5rem;
border-radius: 999px;
}
.of-badge.is-open {
color: #fde68a;
background: rgba(251, 191, 36, 0.12);
}
.of-badge.is-active {
color: #6ee7b7;
background: rgba(52, 211, 153, 0.12);
}
.of-badge.is-inactive {
color: rgba(148, 163, 184, 0.95);
background: rgba(148, 163, 184, 0.1);
}
.of-empty {
margin: 0.35rem 0 0.5rem;
font-size: 0.8rem;
color: rgba(148, 163, 184, 0.85);
padding: 0.5rem 0;
}
/* Shared module pieces (kept from v3) */
.osec-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.osec-head h3 {
margin: 0;
font-size: 1rem;
font-weight: 700;
}
.task-grid,
.bonus-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 0.85rem;
align-items: stretch;
}
.task-card,
.bonus-card {
position: relative;
overflow: hidden;
padding: 1rem 1.05rem;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(4, 14, 28, 0.72);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
animation: ofRise 0.55s ease both;
}
.task-card:nth-child(1),
.bonus-card:nth-child(1) { animation-delay: 0.05s; }
.task-card:nth-child(2),
.bonus-card:nth-child(2) { animation-delay: 0.1s; }
.task-card:nth-child(3),
.bonus-card:nth-child(3) { animation-delay: 0.15s; }
.task-card:nth-child(4),
.bonus-card:nth-child(4) { animation-delay: 0.2s; }
.task-card:hover,
.bonus-card:hover {
transform: translateY(-3px);
border-color: rgba(56, 189, 248, 0.4);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}
.task-card.is-done,
.task-card.is-inactive {
border-color: rgba(100, 116, 139, 0.22);
background: linear-gradient(155deg, rgba(15, 23, 42, 0.55), rgba(2, 6, 14, 0.72));
opacity: 0.34;
filter: grayscale(0.72) saturate(0.35) brightness(0.82);
pointer-events: none;
order: 20;
box-shadow: none;
transform: scale(0.985);
}
.task-card.is-done:hover,
.task-card.is-inactive:hover {
transform: scale(0.985);
border-color: rgba(100, 116, 139, 0.22);
box-shadow: none;
}
.task-card.is-done h4,
.task-card.is-inactive h4 {
color: rgba(203, 213, 225, 0.72);
}
.task-card.is-done .task-reward,
.task-card.is-inactive .task-reward {
color: rgba(148, 163, 184, 0.75);
}
.task-card.is-done .task-progress-track i,
.task-card.is-inactive .task-progress-track i {
background: rgba(148, 163, 184, 0.45);
}
.task-card.is-done .task-status.is-done,
.task-card.is-inactive .task-status.is-done {
color: rgba(148, 163, 184, 0.9);
background: rgba(148, 163, 184, 0.1);
}
.task-card.is-done .task-pill.is-done,
.task-card.is-inactive .task-pill.is-done {
color: rgba(148, 163, 184, 0.95);
background: rgba(148, 163, 184, 0.12);
}
.task-card.is-claimable {
border-color: rgba(56, 189, 248, 0.55);
box-shadow: 0 0 28px rgba(6, 142, 209, 0.22);
order: 0;
}
.task-card.is-progress { order: 5; }
.task-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.35rem;
}
.task-progress {
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0 0 0.85rem;
}
.task-progress-track {
flex: 1 1 auto;
height: 7px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.16);
overflow: hidden;
}
.task-progress-track i {
display: block;
height: 100%;
width: 0;
border-radius: inherit;
background: linear-gradient(90deg, #068ed1, #7dd3fc);
box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.task-progress-label {
flex: 0 0 auto;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.04em;
color: #7dd3fc;
}
.task-progress.is-lg {
margin: 0.85rem 0 1rem;
}
.task-progress.is-lg .task-progress-track { height: 10px; }
.task-actions {
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.task-btn {
appearance: none;
border: 1px solid rgba(125, 211, 252, 0.28);
background: rgba(6, 142, 209, 0.12);
color: #e0f2fe;
font: inherit;
font-size: 0.72rem;
font-weight: 750;
letter-spacing: 0.02em;
padding: 0.42rem 0.7rem;
border-radius: 999px;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.task-btn:hover {
transform: translateY(-1px);
border-color: rgba(125, 211, 252, 0.55);
}
.task-btn.is-ghost {
background: transparent;
color: #7dd3fc;
}
.task-btn.is-claim {
background: linear-gradient(135deg, #38bdf8, #068ed1);
border-color: transparent;
color: #041018;
box-shadow: 0 8px 18px rgba(6, 142, 209, 0.35);
}
.task-pill {
display: inline-flex;
align-items: center;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.35rem 0.65rem;
border-radius: 999px;
}
.task-pill.is-done {
color: #6ee7b7;
background: rgba(52, 211, 153, 0.12);
}
.task-status.is-claim { color: #7dd3fc; }
.of-task-win {
position: fixed;
inset: 0;
z-index: 9800;
display: grid;
place-items: center;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s ease, visibility 0.35s ease;
}
.of-task-win[hidden] { display: none !important; }
.of-task-win.is-on {
opacity: 1;
visibility: visible;
}
.of-task-win.is-out {
opacity: 0;
visibility: hidden;
}
.of-task-win-burst {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 45%, rgba(52, 211, 153, 0.22), transparent 42%),
rgba(1, 6, 14, 0.55);
backdrop-filter: blur(8px);
}
.of-task-win-burst::before,
.of-task-win-burst::after {
content: "";
position: absolute;
left: 50%;
top: 42%;
width: 12px;
height: 12px;
border-radius: 50%;
background: #6ee7b7;
box-shadow:
-60px -40px 0 #38bdf8,
70px -30px 0 #fbbf24,
-40px 50px 0 #a78bfa,
55px 45px 0 #34d399,
-90px 10px 0 #7dd3fc,
95px 5px 0 #fde68a,
20px -70px 0 #67e8f9,
-10px 75px 0 #86efac;
animation: taskWinSparks 1.1s ease-out both;
}
.of-task-win-burst::after {
animation-delay: 0.08s;
transform: scale(0.7);
}
@keyframes taskWinSparks {
from { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
40% { opacity: 1; }
to { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}
.of-task-win-card {
position: relative;
z-index: 1;
width: min(320px, calc(100vw - 2rem));
padding: 1.5rem 1.25rem 1.35rem;
border-radius: 24px;
border: 1px solid rgba(110, 231, 183, 0.4);
background:
radial-gradient(120% 90% at 50% 0%, rgba(52, 211, 153, 0.22), transparent 55%),
linear-gradient(180deg, rgba(8, 40, 32, 0.98), rgba(2, 12, 18, 0.98));
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5), 0 0 40px rgba(52, 211, 153, 0.2);
text-align: center;
transform: scale(0.82) translateY(16px);
opacity: 0;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.of-task-win.is-on .of-task-win-card {
transform: none;
opacity: 1;
}
.of-task-win-ring {
position: absolute;
left: 50%;
top: 1.35rem;
width: 72px;
height: 72px;
margin-left: -36px;
border-radius: 50%;
border: 2px solid rgba(110, 231, 183, 0.35);
animation: taskWinRing 1.2s ease-out both;
}
@keyframes taskWinRing {
from { transform: scale(0.6); opacity: 0; }
50% { opacity: 1; }
to { transform: scale(1.55); opacity: 0; }
}
.of-task-win-check {
width: 64px;
height: 64px;
margin: 0 auto 0.85rem;
border-radius: 50%;
display: grid;
place-items: center;
color: #041018;
background: linear-gradient(145deg, #6ee7b7, #10b981);
box-shadow: 0 12px 28px rgba(16, 185, 129, 0.45);
animation: taskWinPop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.of-task-win-check svg { width: 30px; height: 30px; }
@keyframes taskWinPop {
from { transform: scale(0.4) rotate(-12deg); opacity: 0; }
to { transform: none; opacity: 1; }
}
.of-task-win-kicker {
margin: 0 0 0.35rem;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #a7f3d0;
}
.of-task-win-amount {
display: block;
font-size: 1.65rem;
font-weight: 850;
letter-spacing: -0.03em;
color: #ecfdf5;
text-shadow: 0 0 24px rgba(110, 231, 183, 0.45);
}
.of-task-win-sub {
display: block;
margin-top: 0.4rem;
font-size: 0.8rem;
color: rgba(167, 243, 208, 0.85);
}
.of-task-win.is-cpx .of-task-win-burst {
background:
radial-gradient(circle at 50% 45%, rgba(56, 189, 248, 0.28), transparent 42%),
rgba(1, 6, 18, 0.58);
}
.of-task-win.is-cpx .of-task-win-card {
border-color: rgba(125, 211, 252, 0.45);
background:
radial-gradient(120% 90% at 50% 0%, rgba(56, 189, 248, 0.28), transparent 55%),
linear-gradient(180deg, rgba(8, 28, 48, 0.98), rgba(2, 10, 22, 0.98));
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5), 0 0 48px rgba(56, 189, 248, 0.28);
}
.of-task-win.is-cpx .of-task-win-check {
background: linear-gradient(145deg, #7dd3fc, #38bdf8 50%, #a78bfa);
box-shadow: 0 12px 28px rgba(56, 189, 248, 0.5);
}
.of-task-win.is-cpx .of-task-win-kicker { color: #bae6fd; }
.of-task-win.is-cpx .of-task-win-amount {
text-shadow: 0 0 28px rgba(125, 211, 252, 0.55);
}
.of-task-win.is-tw .of-task-win-burst {
background:
radial-gradient(circle at 50% 45%, rgba(251, 191, 36, 0.26), transparent 42%),
rgba(8, 6, 2, 0.58);
}
.of-task-win.is-tw .of-task-win-card {
border-color: rgba(251, 191, 36, 0.45);
background:
radial-gradient(120% 90% at 50% 0%, rgba(251, 191, 36, 0.26), transparent 55%),
linear-gradient(180deg, rgba(40, 28, 8, 0.98), rgba(8, 10, 14, 0.98));
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5), 0 0 48px rgba(251, 191, 36, 0.28);
}
.of-task-win.is-tw .of-task-win-check {
background: linear-gradient(145deg, #fde68a, #fbbf24 45%, #34d399);
box-shadow: 0 12px 28px rgba(251, 191, 36, 0.5);
}
.of-task-win.is-tw .of-task-win-kicker { color: #fde68a; }
.of-task-win.is-tw .of-task-win-amount {
text-shadow: 0 0 28px rgba(251, 191, 36, 0.5);
}
.task-btn.is-busy,
.of-pos-cta.is-busy {
opacity: 0.92;
pointer-events: none;
cursor: wait;
}
.task-btn.is-crediting,
.of-pos-cta.is-crediting {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
min-width: 0;
padding-left: 0.7rem;
padding-right: 0.7rem;
background: linear-gradient(135deg, #0ea5e9, #0369a1);
border-color: transparent;
color: #f0f9ff;
box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.25), 0 10px 22px rgba(6, 142, 209, 0.28);
}
.claim-spin {
width: 0.85rem;
height: 0.85rem;
border-radius: 50%;
border: 2px solid rgba(224, 242, 254, 0.35);
border-top-color: #f0f9ff;
animation: claimSpin 0.7s linear infinite;
flex: 0 0 auto;
}
@keyframes claimSpin {
to { transform: rotate(360deg); }
}
.of-task-modal {
position: fixed;
inset: 0;
z-index: 9550;
display: grid;
place-items: center;
padding: 1rem;
overflow: hidden;
}
.of-task-modal[hidden] { display: none !important; }
.of-task-modal-veil {
position: absolute;
inset: 0;
border: 0;
background:
radial-gradient(ellipse at 50% 20%, rgba(6, 142, 209, 0.28), transparent 55%),
rgba(1, 6, 14, 0.78);
backdrop-filter: blur(14px) saturate(1.2);
cursor: pointer;
opacity: 0;
transition: opacity 0.38s ease;
}
.of-task-modal.is-open .of-task-modal-veil { opacity: 1; }
.of-task-sheet {
position: relative;
z-index: 1;
width: min(560px, calc(100vw - 1.5rem));
max-width: 100%;
max-height: min(88dvh, 760px);
display: flex;
flex-direction: column;
overflow: hidden;
overscroll-behavior: contain;
border-radius: 24px;
border: 1px solid rgba(125, 211, 252, 0.32);
background:
radial-gradient(120% 80% at 0% 0%, rgba(6, 142, 209, 0.28), transparent 52%),
linear-gradient(165deg, rgba(10, 32, 54, 0.99), rgba(2, 8, 18, 0.98));
box-shadow:
0 36px 90px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 0 40px rgba(6, 142, 209, 0.18);
transform: translateY(28px) scale(0.92) rotateX(6deg);
opacity: 0;
transform-origin: 50% 80%;
transition:
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.35s ease;
box-sizing: border-box;
}
.of-task-modal.is-open .of-task-sheet {
transform: none;
opacity: 1;
animation: taskSheetGlow 2.8s ease-in-out infinite;
}
@keyframes taskSheetGlow {
0%, 100% { box-shadow: 0 36px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 0 28px rgba(6, 142, 209, 0.14); }
50% { box-shadow: 0 36px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 0 48px rgba(56, 189, 248, 0.28); }
}
.of-task-sheet-glow {
position: absolute;
top: -35%;
right: -18%;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(56, 189, 248, 0.35), transparent 70%);
pointer-events: none;
animation: taskAura 4s ease-in-out infinite;
}
@keyframes taskAura {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
.of-task-sheet-head {
flex: 0 0 auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding: 1.15rem 1.15rem 0.55rem;
min-width: 0;
}
.of-task-sheet-titles {
min-width: 0;
flex: 1 1 auto;
}
.of-task-sheet-kicker {
margin: 0 0 0.25rem;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-task-sheet-titles h3 {
margin: 0;
font-size: clamp(1.05rem, 4vw, 1.25rem);
font-weight: 800;
letter-spacing: -0.02em;
color: #f8fafc;
overflow-wrap: anywhere;
word-break: break-word;
}
.of-task-sheet-close {
appearance: none;
width: 36px;
height: 36px;
flex: 0 0 auto;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(255, 255, 255, 0.04);
color: #e2e8f0;
display: grid;
place-items: center;
cursor: pointer;
}
.of-task-sheet-close svg { width: 16px; height: 16px; }
.of-task-sheet-body {
flex: 1 1 auto;
min-height: 0;
padding: 0.35rem 1.15rem 0.85rem;
min-width: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
.of-task-sheet-lead {
margin: 0 0 0.85rem;
font-size: 0.9rem;
line-height: 1.5;
color: rgba(186, 198, 214, 0.92);
overflow-wrap: anywhere;
word-break: break-word;
}
.of-task-need-active {
margin: 0.75rem 0 0;
padding: 0.7rem 0.8rem;
border-radius: 12px;
border: 1px solid rgba(251, 191, 36, 0.35);
background: rgba(251, 191, 36, 0.1);
color: #fde68a;
font-size: 0.8rem;
font-weight: 650;
line-height: 1.4;
}
.of-task-sheet-reward {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 0.85rem;
border-radius: 14px;
border: 1px solid rgba(52, 211, 153, 0.28);
background: rgba(16, 185, 129, 0.08);
margin-bottom: 0.35rem;
min-width: 0;
}
.of-task-sheet-reward span {
font-size: 0.72rem;
font-weight: 750;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #a7f3d0;
}
.of-task-sheet-reward strong {
font-size: 1.25rem;
color: #6ee7b7;
white-space: nowrap;
}
.of-task-sheet-reward small {
font-size: 0.7rem;
margin-left: 0.2rem;
}
.of-task-sheet-foot {
flex: 0 0 auto;
display: flex;
justify-content: stretch;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.75rem 1.15rem calc(1.15rem + env(safe-area-inset-bottom, 0px));
min-width: 0;
border-top: 1px solid rgba(125, 211, 252, 0.16);
background:
linear-gradient(180deg, rgba(4, 16, 28, 0.92), rgba(2, 8, 18, 0.98));
box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.28);
z-index: 3;
}
.of-task-sheet-foot .of-pos-cta,
.of-task-sheet-foot .task-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1 1 100%;
width: 100%;
box-sizing: border-box;
}
.of-task-survey {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 0.85rem;
min-width: 0;
}
.of-task-q {
margin: 0;
padding: 0.75rem 0.8rem;
border-radius: 14px;
border: 1px solid rgba(125, 211, 252, 0.16);
background: rgba(255, 255, 255, 0.03);
min-width: 0;
box-sizing: border-box;
}
.of-task-q legend {
padding: 0;
margin-bottom: 0.45rem;
font-size: 0.82rem;
font-weight: 700;
color: #f8fafc;
overflow-wrap: anywhere;
}
.of-task-opts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.4rem;
min-width: 0;
}
.of-task-opt {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.55rem;
border-radius: 10px;
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(2, 10, 20, 0.55);
font-size: 0.74rem;
cursor: pointer;
min-width: 0;
overflow-wrap: anywhere;
}
.of-task-opt:has(input:checked) {
border-color: rgba(56, 189, 248, 0.55);
background: rgba(6, 142, 209, 0.16);
}
.of-task-opt input { accent-color: #38bdf8; flex-shrink: 0; }
.of-task-share {
margin-top: 0.85rem;
padding: 0.85rem;
border-radius: 14px;
border: 1px solid rgba(125, 211, 252, 0.2);
background: rgba(6, 142, 209, 0.08);
min-width: 0;
box-sizing: border-box;
}
.of-task-share p {
margin: 0 0 0.55rem;
font-size: 0.82rem;
color: rgba(186, 230, 253, 0.9);
overflow-wrap: anywhere;
}
.of-task-share-row {
display: flex;
gap: 0.45rem;
min-width: 0;
flex-wrap: wrap;
}
.of-task-share-row input {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
border-radius: 12px;
border: 1px solid rgba(125, 211, 252, 0.22);
background: rgba(2, 8, 18, 0.85);
color: #e2e8f0;
font: inherit;
font-size: 0.78rem;
padding: 0.55rem 0.7rem;
box-sizing: border-box;
}
.of-task-watch {
margin-top: 1rem;
display: grid;
justify-items: center;
gap: 0.65rem;
text-align: center;
}
.of-task-cd {
position: relative;
width: 118px;
height: 118px;
}
.of-task-cd::before {
content: "";
position: absolute;
inset: 10px;
border-radius: 50%;
background: radial-gradient(circle at 40% 35%, rgba(56, 189, 248, 0.16), transparent 62%);
pointer-events: none;
}
.of-task-cd-svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.4));
}
.of-task-cd-track {
fill: none;
stroke: rgba(148, 163, 184, 0.2);
stroke-width: 6.5;
}
.of-task-cd-prog {
fill: none;
stroke-width: 6.5;
stroke-linecap: round;
stroke-dasharray: 100;
stroke-dashoffset: 100;
will-change: stroke-dashoffset;
}
.of-task-cd-core {
position: absolute;
inset: 0;
display: grid;
place-content: center;
place-items: center;
gap: 0;
pointer-events: none;
}
.of-task-cd-core strong {
font-size: 1.7rem;
font-weight: 800;
letter-spacing: -0.04em;
color: #e0f2fe;
line-height: 1;
font-variant-numeric: tabular-nums;
transition: transform 0.18s ease;
}
.of-task-cd-core strong.is-tick {
transform: scale(1.08);
}
.of-task-cd-core span {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(125, 211, 252, 0.75);
margin-top: 0.15rem;
}
.of-task-watch p,
#ofTaskWatchHint {
margin: 0;
max-width: 16rem;
font-size: 0.8rem;
line-height: 1.4;
color: rgba(186, 230, 253, 0.88);
}
.of-pos-cta.is-waiting {
opacity: 0.72;
cursor: not-allowed;
filter: grayscale(0.15);
}
.of-pos-cta.is-finishing {
opacity: 1;
animation: ofClaimPulse 0.9s ease-in-out infinite;
}
@keyframes ofClaimPulse {
50% { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.18); }
}
.of-task-watch-ring { display: none; }
.of-task-media {
margin-top: 0.85rem;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(56, 189, 248, 0.22);
background: #020617;
aspect-ratio: 16 / 9;
position: relative;
}
.of-task-media.is-playing {
box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.12), 0 12px 40px rgba(2, 12, 28, 0.45);
}
.of-task-media-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(0.55);
}
.of-task-play {
position: absolute;
inset: 0;
margin: auto;
width: min(88%, 280px);
height: 3.2rem;
border: 0;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
cursor: pointer;
color: #fff;
font-weight: 750;
font-size: 0.92rem;
background: linear-gradient(135deg, #ef4444, #b91c1c);
box-shadow: 0 10px 30px rgba(185, 28, 28, 0.45);
z-index: 2;
}
.of-task-play:hover { filter: brightness(1.06); }
.of-task-play-icon {
width: 0;
height: 0;
border-style: solid;
border-width: 7px 0 7px 12px;
border-color: transparent transparent transparent #fff;
}
.of-task-media iframe,
.of-task-media video {
width: 100%;
height: 100%;
display: block;
border: 0;
background: #000;
}
.of-task-ext-actions {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: 0.55rem;
}
.of-btn-yt,
.of-btn-wa,
.of-btn-share {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 2.75rem;
padding: 0.65rem 1.1rem;
border-radius: 12px;
border: 0;
font-weight: 750;
font-size: 0.9rem;
text-decoration: none;
cursor: pointer;
color: #fff;
}
.of-btn-yt {
width: 100%;
background: linear-gradient(135deg, #ff0033, #cc0000);
box-shadow: 0 10px 28px rgba(204, 0, 0, 0.35);
}
.of-btn-yt-icon {
width: 1.35rem;
height: 1rem;
border-radius: 4px;
background: #fff;
position: relative;
}
.of-btn-yt-icon::after {
content: "";
position: absolute;
left: 0.48rem;
top: 0.22rem;
border-style: solid;
border-width: 0.28rem 0 0.28rem 0.45rem;
border-color: transparent transparent transparent #ff0033;
}
.of-btn-wa {
background: linear-gradient(135deg, #25d366, #128c7e);
box-shadow: 0 10px 28px rgba(18, 140, 126, 0.32);
}
.of-btn-wa-icon {
width: 1.05rem;
height: 1.05rem;
border-radius: 50%;
background: #fff;
box-shadow: inset 0 0 0 2px #25d366;
}
.of-btn-share {
background: linear-gradient(135deg, #38bdf8, #0284c7);
box-shadow: 0 10px 28px rgba(2, 132, 199, 0.28);
}
.of-task-honest {
margin: 0.35rem 0 0.75rem !important;
font-size: 0.78rem !important;
line-height: 1.45 !important;
color: rgba(253, 230, 138, 0.92) !important;
}
.of-task-gate {
margin-top: 0.9rem;
padding: 0.85rem 0.9rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.18);
background: linear-gradient(180deg, rgba(15, 23, 42, 0.65), rgba(2, 6, 23, 0.4));
}
.of-task-gate-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
margin-bottom: 0.55rem;
}
.of-task-gate-step {
width: 1.55rem;
height: 1.55rem;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 0.72rem;
font-weight: 800;
color: rgba(148, 163, 184, 0.9);
background: rgba(51, 65, 85, 0.55);
border: 1px solid rgba(148, 163, 184, 0.25);
}
.of-task-gate-step.is-on {
color: #0f172a;
background: #7dd3fc;
border-color: #38bdf8;
}
.of-task-gate-step.is-done {
background: #22c55e;
border-color: #16a34a;
color: #052e16;
}
.of-task-gate-line {
width: 1.6rem;
height: 2px;
background: rgba(148, 163, 184, 0.28);
}
.of-task-gate-hint {
margin: 0 !important;
text-align: center;
font-size: 0.78rem !important;
color: rgba(186, 230, 253, 0.9) !important;
}
.of-task-gate-meter {
margin-top: 0.65rem;
display: grid;
gap: 0.35rem;
justify-items: center;
}
.of-task-gate-meter-track {
width: 100%;
height: 6px;
border-radius: 999px;
background: rgba(51, 65, 85, 0.65);
overflow: hidden;
}
.of-task-gate-meter-track i {
display: block;
height: 100%;
background: linear-gradient(90deg, #38bdf8, #22d3ee);
border-radius: inherit;
transition: width 0.2s linear;
}
.of-task-gate-meter span {
font-size: 0.72rem;
font-variant-numeric: tabular-nums;
color: rgba(125, 211, 252, 0.9);
}
.of-pos-cta.is-ready {
opacity: 1;
filter: none;
animation: ofClaimPulse 1.1s ease-in-out infinite;
}
.of-task-offer-frame {
margin-top: 0.75rem;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(56, 189, 248, 0.22);
background: #020617;
min-height: 320px;
height: min(55vh, 420px);
}
.of-task-offer-frame iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.task-card.is-need-active {
border-color: rgba(251, 191, 36, 0.4);
}
.task-status.is-need { color: #fbbf24; }
html[data-of-theme="light"] .of-task-sheet {
background: linear-gradient(180deg, #fff, #f8fafc);
}
html[data-of-theme="light"] .of-task-sheet-titles h3,
html[data-of-theme="light"] .of-task-q legend { color: #0f172a; }
html[data-of-theme="light"] .of-task-sheet-lead { color: #475569; }
@media (max-width: 640px) {
.of-task-opts { grid-template-columns: 1fr; }
.task-actions { width: 100%; }
.task-foot { flex-wrap: wrap; }
.of-task-modal { padding: 0.65rem; }
.of-task-sheet { width: calc(100vw - 1.1rem); border-radius: 20px; }
}
.task-type {
display: inline-block;
font-size: 0.62rem;
font-weight: 750;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #7dd3fc;
margin-bottom: 0.35rem;
}
.task-carry {
display: inline-block;
margin: 0 0 0.45rem;
padding: 0.2rem 0.55rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 700;
color: #92400e;
background: rgba(251, 191, 36, 0.18);
border: 1px solid rgba(251, 191, 36, 0.35);
}
.task-card h4,
.bonus-card h4 {
margin: 0 0 0.3rem;
font-size: 0.95rem;
font-weight: 700;
color: var(--of-fg);
}
.task-card p,
.bonus-card p {
margin: 0 0 0.75rem;
font-size: 0.8rem;
color: var(--of-fg-faint);
line-height: 1.45;
}
.task-foot,
.bonus-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.task-reward,
.bonus-reward {
font-size: 0.86rem;
font-weight: 750;
color: #6ee7b7;
}
.task-status {
font-size: 0.68rem;
font-weight: 700;
padding: 0.25rem 0.55rem;
border-radius: 999px;
}
.task-status.is-done {
color: #6ee7b7;
background: rgba(52, 211, 153, 0.12);
}
.task-status.is-open {
color: #fde68a;
background: rgba(251, 191, 36, 0.1);
}
.bonus-card {
border-color: rgba(251, 191, 36, 0.28);
background: linear-gradient(155deg, rgba(251, 191, 36, 0.1), rgba(4, 14, 28, 0.85));
}
.bonus-card.is-claimed {
opacity: 0.7;
}
.earn-board {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 1rem;
}
.earn-board .of-ledger-panel {
grid-column: 1 / -1;
}
#view-ganancias .btn-activate-cta {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
width: 100%;
min-height: 46px;
margin-top: 1.15rem;
font-size: 0.82rem;
overflow: visible;
isolation: isolate;
}
#view-ganancias .btn-activate-cta.is-blast {
animation: ofWdBtnBlast 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
#view-ganancias .btn-activate-cta.is-blast::before {
content: "";
position: absolute;
inset: -6px;
border-radius: inherit;
background: radial-gradient(circle, rgba(125, 211, 252, 0.55), transparent 68%);
animation: ofWdBtnHalo 0.85s ease-out forwards;
pointer-events: none;
z-index: -1;
}
#view-ganancias .btn-activate-cta.is-blast::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
border-radius: 50%;
border: 2px solid rgba(125, 211, 252, 0.85);
animation: ofWdBtnRing 0.7s ease-out forwards;
pointer-events: none;
}
.of-wd-spark {
position: absolute;
width: 7px;
height: 7px;
margin: -3.5px 0 0 -3.5px;
border-radius: 50%;
background: radial-gradient(circle, #e0f2fe, #38bdf8 55%, #22d3ee);
box-shadow: 0 0 10px rgba(56, 189, 248, 0.85);
pointer-events: none;
z-index: 5;
animation: ofWdSpark 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes ofWdBtnBlast {
0% { transform: scale(1); filter: brightness(1); box-shadow: 0 10px 28px rgba(14, 165, 233, 0.28); }
35% { transform: scale(1.08); filter: brightness(1.25); box-shadow: 0 0 0 10px rgba(56, 189, 248, 0.2), 0 18px 40px rgba(14, 165, 233, 0.55); }
100% { transform: scale(1); filter: brightness(1); box-shadow: 0 10px 28px rgba(14, 165, 233, 0.28); }
}
@keyframes ofWdBtnHalo {
0% { opacity: 0.9; transform: scale(0.7); }
100% { opacity: 0; transform: scale(1.55); }
}
@keyframes ofWdBtnRing {
0% { opacity: 1; transform: scale(0.4); }
100% { opacity: 0; transform: scale(8); }
}
@keyframes ofWdSpark {
0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
100% { opacity: 0; transform: translate3d(var(--sx), var(--sy), 0) scale(0.15); }
}
#view-ganancias .btn-activate-cta .of-btn-lock {
width: 16px;
height: 16px;
}
#view-ganancias .btn-activate-cta:not(.is-locked) .of-btn-lock {
display: none;
}
#view-ganancias .btn-activate-cta:disabled,
#view-ganancias .btn-activate-cta.is-locked {
cursor: not-allowed;
color: rgba(186, 230, 253, 0.72);
background: rgba(15, 23, 42, 0.55);
border: 1px solid rgba(148, 163, 184, 0.28);
box-shadow: none;
filter: none;
transform: none;
}
#view-ganancias .btn-activate-cta:disabled:hover,
#view-ganancias .btn-activate-cta.is-locked:hover {
transform: none;
filter: none;
box-shadow: none;
}
.earn-withdraw-lock {
display: none !important;
}
.of-payout-form label {
display: block;
margin-bottom: 0.4rem;
font-size: 0.72rem;
font-weight: 750;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-payout-row {
display: flex;
gap: 0.55rem;
align-items: center;
}
.of-payout-row input {
flex: 1;
min-width: 0;
min-height: 44px;
padding: 0 0.85rem;
border-radius: 12px;
border: 1px solid rgba(125, 211, 252, 0.22);
background: rgba(2, 12, 24, 0.45);
color: var(--of-fg);
font: inherit;
font-size: 0.88rem;
}
.of-payout-msg {
margin: 0.55rem 0 0;
font-size: 0.78rem;
}
.of-payout-msg.is-ok { color: #6ee7b7; }
.of-payout-msg.is-bad { color: #fda4af; }
.of-config-jump {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
html[data-of-theme="light"] .of-payout-row input {
background: #fff;
border-color: rgba(14, 165, 233, 0.28);
color: #0f172a;
}
html[data-of-theme="light"] #view-ganancias .btn-activate-cta:disabled,
html[data-of-theme="light"] #view-ganancias .btn-activate-cta.is-locked {
color: #64748b;
background: #f1f5f9;
border-color: rgba(148, 163, 184, 0.45);
}
@media (max-width: 820px) {
.of-payout-row {
flex-direction: column;
align-items: stretch;
}
}
.earn-hero-card {
padding: 1.5rem;
border-radius: 18px;
border: 1px solid rgba(52, 211, 153, 0.28);
background: linear-gradient(155deg, rgba(6, 40, 32, 0.5), rgba(2, 10, 22, 0.9));
}
.earn-hero-card > span {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6ee7b7;
}
.earn-hero-card > strong {
display: block;
margin: 0.4rem 0 1rem;
font-size: clamp(1.55rem, 4vw, 2.1rem);
font-weight: 750;
color: var(--of-fg);
}
.earn-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 1.15rem;
}
.earn-meta em {
display: block;
font-style: normal;
font-size: 0.68rem;
color: rgba(148, 163, 184, 0.85);
}
.earn-meta b {
font-size: 1rem;
color: #e2e8f0;
}
.of-goal-stack {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 0.15rem 0 1.05rem;
}
/* Metas modernas: oficial (fija) + personal (editable) */
.of-mg-stack {
display: flex;
flex-direction: column;
gap: 0.7rem;
margin: 0.35rem 0 0.15rem;
}
.of-mg {
position: relative;
overflow: hidden;
border-radius: 18px;
padding: 0.85rem 0.9rem 0.8rem;
border: 1px solid rgba(125, 211, 252, 0.2);
background:
linear-gradient(155deg, rgba(4, 22, 42, 0.92), rgba(2, 12, 27, 0.88));
isolation: isolate;
}
.of-mg-aura {
position: absolute;
inset: -50% -20% auto auto;
width: 160px;
height: 160px;
border-radius: 50%;
background: radial-gradient(circle, rgba(56, 189, 248, 0.22), transparent 70%);
pointer-events: none;
z-index: 0;
animation: ofMgAura 7s ease-in-out infinite;
}
.of-mg.is-personal .of-mg-aura {
background: radial-gradient(circle, rgba(52, 211, 153, 0.2), transparent 70%);
inset: auto auto -45% -15%;
}
@keyframes ofMgAura {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; }
50% { transform: translate3d(-6%, 8%, 0) scale(1.12); opacity: 1; }
}
.of-mg > *:not(.of-mg-aura) { position: relative; z-index: 1; }
.of-mg.is-official {
border-color: rgba(125, 211, 252, 0.28);
}
.of-mg.is-personal {
border-color: rgba(52, 211, 153, 0.28);
}
.of-mg.is-locked { opacity: 0.62; }
.of-mg.is-ready {
border-color: rgba(52, 211, 153, 0.45);
box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.12), 0 12px 28px rgba(6, 78, 59, 0.18);
}
.of-mg-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.55rem;
margin-bottom: 0.55rem;
}
.of-mg-title {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
}
.of-mg-title > div {
display: flex;
flex-direction: column;
gap: 0.05rem;
min-width: 0;
}
.of-mg-title em {
font-style: normal;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-mg.is-personal .of-mg-title em { color: #6ee7b7; }
.of-mg-title strong {
font-size: 0.86rem;
font-weight: 800;
color: var(--of-fg);
line-height: 1.2;
}
.of-mg-lock,
.of-mg-spark {
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 12px;
display: grid;
place-items: center;
color: #7dd3fc;
background: rgba(8, 47, 73, 0.65);
border: 1px solid rgba(125, 211, 252, 0.28);
}
.of-mg-spark {
color: #6ee7b7;
background: rgba(6, 78, 59, 0.4);
border-color: rgba(52, 211, 153, 0.3);
}
.of-mg-lock svg,
.of-mg-spark svg { width: 16px; height: 16px; }
.of-mg-chip {
flex: 0 0 auto;
padding: 0.22rem 0.55rem;
border-radius: 999px;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #bae6fd;
border: 1px solid rgba(125, 211, 252, 0.3);
background: rgba(8, 47, 73, 0.55);
}
.of-mg-edit {
flex: 0 0 auto;
border: 1px solid rgba(52, 211, 153, 0.35);
background: rgba(6, 78, 59, 0.35);
color: #a7f3d0;
font-size: 0.72rem;
font-weight: 800;
padding: 0.35rem 0.7rem;
border-radius: 999px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform 0.18s ease, filter 0.18s ease;
}
.of-mg-edit:active { transform: scale(0.96); }
.of-mg-nums {
display: flex;
align-items: baseline;
gap: 0.28rem;
margin-bottom: 0.55rem;
font-variant-numeric: tabular-nums;
}
.of-mg-nums b {
font-size: 1.35rem;
font-weight: 850;
letter-spacing: -0.02em;
color: var(--of-fg);
line-height: 1;
}
.of-mg-nums span {
color: rgba(148, 163, 184, 0.75);
font-weight: 700;
}
.of-mg-nums em {
font-style: normal;
font-size: 1.05rem;
font-weight: 800;
color: #7dd3fc;
}
.of-mg.is-personal .of-mg-nums em { color: #6ee7b7; }
.of-mg-nums small {
font-size: 0.68rem;
font-weight: 750;
color: rgba(148, 163, 184, 0.9);
margin-left: 0.1rem;
}
.of-mg-track {
position: relative;
height: 12px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(148, 163, 184, 0.14);
overflow: hidden;
}
.of-mg-fill {
display: block;
height: 100%;
width: 0%;
border-radius: inherit;
background: linear-gradient(90deg, #0ea5e9, #38bdf8 45%, #67e8f9);
box-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
will-change: width;
}
.of-mg-fill.is-personal {
background: linear-gradient(90deg, #059669, #34d399 50%, #6ee7b7);
box-shadow: 0 0 16px rgba(52, 211, 153, 0.4);
}
.of-mg-track.is-ready .of-mg-fill {
background: linear-gradient(90deg, #10b981, #34d399 40%, #a7f3d0);
}
.of-mg-glow {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 40%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
transform: translateX(-120%);
pointer-events: none;
}
.of-mg-track.is-ready .of-mg-glow,
.of-mg.is-ready .of-mg-glow {
animation: ofMgShine 2.4s ease-in-out infinite;
}
@keyframes ofMgShine {
0% { transform: translateX(-120%); }
55%, 100% { transform: translateX(280%); }
}
.of-mg-hint {
margin: 0.5rem 0 0;
font-size: 0.72rem;
line-height: 1.35;
color: rgba(148, 163, 184, 0.95);
min-height: 1em;
}
.of-mg-form {
margin-top: 0.7rem;
padding-top: 0.7rem;
border-top: 1px solid rgba(148, 163, 184, 0.14);
animation: ofMgFormIn 0.28s ease;
}
@keyframes ofMgFormIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
.of-mg-form-label {
display: block;
font-size: 0.68rem;
font-weight: 750;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #6ee7b7;
margin-bottom: 0.35rem;
}
.of-mg-form-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.45rem;
}
.of-mg-form-row input {
min-width: 0;
border-radius: 12px;
border: 1px solid rgba(52, 211, 153, 0.35);
background: rgba(2, 12, 27, 0.75);
color: #f8fafc;
font-size: 1rem;
font-weight: 800;
padding: 0.65rem 0.75rem;
outline: none;
}
.of-mg-form-row input:focus {
border-color: rgba(52, 211, 153, 0.7);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.of-mg-save {
border: 0;
border-radius: 12px;
padding: 0.65rem 0.9rem;
font-weight: 800;
color: #042f2e;
background: linear-gradient(135deg, #6ee7b7, #34d399);
cursor: pointer;
white-space: nowrap;
}
.of-mg-clear {
margin-top: 0.45rem;
border: 0;
background: transparent;
color: rgba(148, 163, 184, 0.95);
font-size: 0.74rem;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
padding: 0.2rem 0;
}
@media (max-width: 420px) {
.of-mg { padding: 0.8rem 0.75rem 0.75rem; border-radius: 16px; }
.of-mg-nums b { font-size: 1.2rem; }
.of-mg-form-row { grid-template-columns: 1fr; }
.of-mg-save { width: 100%; }
}
html[data-of-theme="light"] .of-mg {
background: linear-gradient(155deg, #ffffff, #f1f5f9);
border-color: rgba(14, 165, 233, 0.22);
}
html[data-of-theme="light"] .of-mg.is-personal {
border-color: rgba(16, 185, 129, 0.28);
}
html[data-of-theme="light"] .of-mg-nums b { color: #0f172a; }
html[data-of-theme="light"] .of-mg-track {
background: rgba(226, 232, 240, 0.9);
}
.of-goal {
padding: 0.75rem 0.8rem 0.7rem;
border-radius: 14px;
border: 1px solid rgba(125, 211, 252, 0.18);
background: rgba(2, 18, 36, 0.35);
}
.of-goal.is-paid {
border-color: rgba(52, 211, 153, 0.35);
background: rgba(6, 78, 59, 0.22);
}
.of-goal.is-locked {
opacity: 0.55;
}
.of-goal-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.45rem;
font-size: 0.72rem;
font-weight: 750;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-goal-top strong {
font-size: 0.78rem;
letter-spacing: 0;
text-transform: none;
color: var(--of-fg);
}
.of-goal.is-paid .of-goal-top strong {
color: #6ee7b7;
}
.of-goal-cycle {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin: -0.1rem 0 0.5rem;
padding: 0.2rem 0.55rem;
border-radius: 999px;
border: 1px solid rgba(125, 211, 252, 0.22);
background: rgba(8, 47, 73, 0.45);
color: #7dd3fc;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1.25;
max-width: 100%;
}
.of-goal-cycle[hidden] { display: none !important; }
.of-goal-cycle::before {
content: "";
flex: 0 0 auto;
width: 6px;
height: 6px;
border-radius: 50%;
background: #38bdf8;
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
}
.of-goal.is-paid .of-goal-cycle {
border-color: rgba(52, 211, 153, 0.3);
background: rgba(6, 40, 32, 0.45);
color: #6ee7b7;
}
.of-goal.is-paid .of-goal-cycle::before {
background: #34d399;
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.16);
}
.of-goal-remain.is-cycle {
color: rgba(186, 230, 253, 0.95);
}
.of-goal-bar {
height: 10px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.2);
overflow: hidden;
position: relative;
}
.of-goal-bar span {
display: block;
height: 100%;
width: 0%;
border-radius: inherit;
background: linear-gradient(90deg, #38bdf8, #068ed1 55%, #22d3ee);
box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1);
will-change: width;
transform-origin: left center;
}
.of-goal-bar.is-ready span,
.of-goal.is-paid .of-goal-bar span {
background: linear-gradient(90deg, #34d399, #10b981 50%, #6ee7b7);
box-shadow: 0 0 14px rgba(52, 211, 153, 0.45);
}
.of-goal-bar.is-overflow {
box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.35);
}
.of-goal-bar.is-overflow span,
.of-goal-bar span.is-overflow {
background: linear-gradient(90deg, #34d399, #059669 40%, #a7f3d0 70%, #34d399);
background-size: 200% 100%;
animation: ofBarOverflow 2.4s ease-in-out infinite, ofBarGlow 1.8s ease-in-out infinite;
}
.of-goal-bar span.is-pulse {
animation: ofBarPulse 0.7s ease-out;
}
.of-goal.is-ready .of-goal-top strong,
.of-goal.is-overflow .of-goal-top strong {
color: #6ee7b7;
}
.of-goal p {
margin: 0.45rem 0 0;
font-size: 0.75rem;
line-height: 1.35;
color: rgba(186, 230, 253, 0.88);
min-width: 0;
}
.of-goal-remain {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 0.55rem;
width: 100%;
box-sizing: border-box;
margin-top: 0.1rem;
padding: 0.45rem 0.55rem 0.45rem 0.65rem;
border-radius: 12px;
border: 1px solid rgba(56, 189, 248, 0.28);
background:
linear-gradient(120deg, rgba(14, 165, 233, 0.16), rgba(2, 132, 199, 0.08) 55%, rgba(34, 211, 238, 0.14));
box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.06), 0 8px 24px rgba(2, 24, 48, 0.25);
min-width: 0;
}
.of-goal-remain.is-enter {
animation: ofRemainIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-goal-remain-label {
display: flex;
flex-direction: column;
gap: 0.12rem;
min-width: 0;
flex: 1 1 auto;
font-style: normal;
font-size: 0.7rem;
font-weight: 650;
letter-spacing: 0.01em;
color: rgba(186, 230, 253, 0.9);
line-height: 1.25;
}
.of-goal-remain-label em {
font-style: normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.of-goal-remain-label b {
font-size: 0.78rem;
font-weight: 800;
letter-spacing: -0.02em;
color: #7dd3fc;
font-variant-numeric: tabular-nums;
}
.of-goal-remain-label b small {
font-size: 0.62rem;
font-weight: 700;
margin-left: 0.12rem;
opacity: 0.85;
}
.of-goal-remain-days {
flex: 0 0 auto;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 3.35rem;
padding: 0.28rem 0.45rem;
border-radius: 10px;
border: 1px solid rgba(125, 211, 252, 0.35);
background: rgba(2, 18, 36, 0.55);
line-height: 1.05;
text-align: center;
}
.of-goal-remain-days strong {
font-size: clamp(1.05rem, 4.8vw, 1.2rem);
font-weight: 850;
letter-spacing: -0.03em;
color: #f0f9ff;
font-variant-numeric: tabular-nums;
}
.of-goal-remain-days small {
font-size: 0.58rem;
font-weight: 750;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-goal-remain em {
font-style: normal;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.01em;
color: rgba(186, 230, 253, 0.92);
}
.of-goal-remain > b:not(.of-goal-remain-days) {
font-size: 0.86rem;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(90deg, #7dd3fc, #38bdf8 40%, #a5f3fc 75%, #7dd3fc);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: ofRemainShine 2.8s ease-in-out infinite;
}
.of-goal-remain > b:not(.of-goal-remain-days) small {
font-size: 0.68rem;
font-weight: 750;
margin-left: 0.1rem;
opacity: 0.9;
}
.of-goal-remain.is-ready {
border-color: rgba(52, 211, 153, 0.4);
background: linear-gradient(120deg, rgba(16, 185, 129, 0.18), rgba(6, 95, 70, 0.12));
}
.of-goal-remain.is-ready .of-goal-remain-label,
.of-goal-remain.is-ready em { color: #a7f3d0; }
.of-goal-remain.is-ready .of-goal-remain-days {
border-color: rgba(52, 211, 153, 0.4);
background: rgba(6, 40, 32, 0.55);
}
.of-goal-remain.is-ready .of-goal-remain-days strong { color: #ecfdf5; }
.of-goal-remain.is-ready .of-goal-remain-days small { color: #6ee7b7; }
.of-goal-remain.is-ready i {
display: inline-block;
width: 7px;
height: 7px;
margin-right: 0.28rem;
border-radius: 50%;
background: #34d399;
box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
animation: ofRemainPulse 1.6s ease-out infinite;
vertical-align: middle;
}
.of-goal-remain.is-locked {
border-color: rgba(148, 163, 184, 0.28);
background: rgba(15, 23, 42, 0.35);
color: rgba(148, 163, 184, 0.95);
}
.of-goal-remain.is-locked em { color: rgba(148, 163, 184, 0.95); }
.of-goal-remain.is-cycle {
color: rgba(186, 230, 253, 0.95);
}
@media (max-width: 420px) {
.of-goal-remain {
padding: 0.4rem 0.45rem 0.4rem 0.55rem;
gap: 0.45rem;
}
.of-goal-remain-label {
font-size: 0.66rem;
}
.of-goal-remain-days {
min-width: 3.1rem;
padding: 0.24rem 0.38rem;
}
.of-goal-remain-days strong {
font-size: 1.08rem;
}
}
@keyframes ofRemainIn {
from { opacity: 0; transform: translateY(6px) scale(0.98); filter: blur(4px); }
to { opacity: 1; transform: none; filter: none; }
}
@keyframes ofRemainShine {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes ofRemainPulse {
0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
html[data-of-theme="light"] .of-goal-remain {
background: linear-gradient(120deg, #e0f2fe, #f0f9ff);
border-color: rgba(14, 165, 233, 0.28);
}
html[data-of-theme="light"] .of-goal-remain em,
html[data-of-theme="light"] .of-goal-remain-label { color: #0c4a6e; }
html[data-of-theme="light"] .of-goal-remain-label b { color: #0284c7; }
html[data-of-theme="light"] .of-goal-remain-days {
background: #fff;
border-color: rgba(14, 165, 233, 0.3);
}
html[data-of-theme="light"] .of-goal-remain-days strong { color: #0f172a; }
html[data-of-theme="light"] .of-goal-remain-days small { color: #0284c7; }
html[data-of-theme="light"] .of-goal-remain.is-ready {
background: linear-gradient(120deg, #d1fae5, #ecfdf5);
border-color: rgba(16, 185, 129, 0.35);
}
html[data-of-theme="light"] .of-goal-remain.is-ready em,
html[data-of-theme="light"] .of-goal-remain.is-ready .of-goal-remain-label { color: #065f46; }
html[data-of-theme="light"] .of-goal-remain.is-ready .of-goal-remain-days {
border-color: rgba(16, 185, 129, 0.35);
background: #ecfdf5;
}
html[data-of-theme="light"] .of-goal-remain.is-ready .of-goal-remain-days strong { color: #064e3b; }
html[data-of-theme="light"] .of-goal-remain.is-ready .of-goal-remain-days small { color: #047857; }
html[data-of-theme="light"] .of-goal {
background: #f8fafc;
border-color: rgba(14, 165, 233, 0.2);
}
html[data-of-theme="light"] .of-goal.is-paid {
background: #ecfdf5;
border-color: rgba(16, 185, 129, 0.3);
}
html[data-of-theme="light"] .of-goal-top {
color: #0369a1;
}
html[data-of-theme="light"] .of-goal-cycle {
border-color: rgba(14, 165, 233, 0.28);
background: rgba(224, 242, 254, 0.9);
color: #0369a1;
}
html[data-of-theme="light"] .of-goal.is-paid .of-goal-cycle {
border-color: rgba(16, 185, 129, 0.3);
background: rgba(209, 250, 229, 0.85);
color: #047857;
}
html[data-of-theme="light"] .of-goal p {
color: #334155;
}
.net-board {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.net-card {
padding: 1.1rem;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(4, 14, 28, 0.68);
}
.net-card span {
display: block;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(148, 163, 184, 0.85);
margin-bottom: 0.35rem;
}
.net-card strong {
font-size: 1.3rem;
font-weight: 750;
}
.net-card.is-money {
border-color: rgba(52, 211, 153, 0.28);
}
.comm-levels {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0.65rem;
margin-bottom: 1.15rem;
}
.comm-level {
padding: 0.9rem 1rem;
border-radius: 14px;
border: 1px solid rgba(6, 142, 209, 0.25);
background: rgba(6, 142, 209, 0.08);
}
.comm-level strong {
display: block;
font-size: 1.2rem;
color: #7dd3fc;
}
.comm-level span {
font-size: 0.75rem;
color: rgba(186, 198, 214, 0.9);
}
.net-link-box {
margin: 0 0 1.15rem;
padding: 1rem 1.1rem;
border-radius: 16px;
border: 1px solid rgba(6, 142, 209, 0.28);
background:
linear-gradient(160deg, rgba(6, 142, 209, 0.12), rgba(4, 14, 28, 0.75));
}
.net-link-box label {
display: block;
font-size: 0.72rem;
font-weight: 650;
margin-bottom: 0.45rem;
color: rgba(203, 213, 225, 0.9);
}
.net-link-box .affiliate-row {
display: flex;
align-items: stretch;
gap: 0.55rem;
width: 100%;
}
.net-link-box .affiliate-row input {
flex: 1 1 auto;
min-width: 0;
width: 100%;
font-family: inherit;
font-size: 0.8rem;
font-weight: 500;
color: #f1f5f9;
background: rgba(0, 0, 0, 0.45);
border: 1px solid rgba(125, 211, 252, 0.28);
border-radius: 10px;
padding: 0.7rem 0.85rem;
outline: none;
}
.net-link-box .affiliate-row .btn-copy {
flex: 0 0 auto;
}
.oficial-note {
margin: 0.5rem 0;
font-size: 0.8rem;
color: rgba(148, 163, 184, 0.85);
}
/* ── Suscripciones premium ── */
.of-sub-status-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.2rem;
margin-bottom: 1.15rem;
border-radius: 18px;
border: 1px solid rgba(125, 211, 252, 0.2);
background:
linear-gradient(120deg, rgba(6, 142, 209, 0.16), rgba(4, 14, 28, 0.75));
animation: ofRise 0.5s ease both;
}
.of-sub-status-copy strong {
display: block;
margin: 0.35rem 0 0.2rem;
font-size: 1.15rem;
color: #f8fafc;
}
.of-sub-status-copy p {
margin: 0;
font-size: 0.82rem;
color: rgba(186, 198, 214, 0.88);
}
.sub-status {
display: inline-block;
font-size: 0.66rem;
font-weight: 750;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.3rem 0.65rem;
border-radius: 999px;
color: #fde68a;
border: 1px solid rgba(251, 191, 36, 0.35);
background: rgba(251, 191, 36, 0.1);
}
.sub-status.is-active {
color: #6ee7b7;
border-color: rgba(52, 211, 153, 0.4);
background: rgba(52, 211, 153, 0.12);
}
.of-plans {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
width: 100%;
max-width: none;
margin: 0;
}
.of-plan-card {
position: relative;
padding: 1.45rem 1.3rem 1.25rem;
border-radius: 22px;
border: 1px solid rgba(148, 163, 184, 0.18);
background:
linear-gradient(165deg, rgba(8, 28, 52, 0.92), rgba(2, 8, 18, 0.96));
overflow: hidden;
animation: ofPlanIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.of-plan-card:nth-child(1) { animation-delay: 0.08s; }
.of-plan-card:nth-child(2) { animation-delay: 0.18s; }
@keyframes ofPlanIn {
from { opacity: 0; transform: translateY(22px) scale(0.97); }
to { opacity: 1; transform: none; }
}
.of-plan-card:hover {
transform: translateY(-4px);
border-color: rgba(56, 189, 248, 0.4);
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
}
.of-plan-card.is-popular {
border-color: rgba(251, 191, 36, 0.4);
background:
linear-gradient(155deg, rgba(251, 191, 36, 0.14), rgba(4, 14, 28, 0.96) 42%);
}
.of-plan-card.is-popular:hover {
border-color: rgba(251, 191, 36, 0.55);
box-shadow: 0 24px 55px rgba(251, 191, 36, 0.12), 0 18px 40px rgba(0, 0, 0, 0.35);
}
.of-plan-card.is-current {
outline: 1px solid rgba(52, 211, 153, 0.45);
box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.08);
}
.of-plan-glow {
position: absolute;
width: 180px;
height: 180px;
top: -70px;
right: -40px;
border-radius: 50%;
background: radial-gradient(circle, rgba(6, 142, 209, 0.28), transparent 70%);
pointer-events: none;
animation: ofGlowPulse 4.5s ease-in-out infinite;
}
.of-plan-card.is-popular .of-plan-glow {
background: radial-gradient(circle, rgba(251, 191, 36, 0.35), transparent 70%);
}
.of-plan-badge {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 0.62rem;
font-weight: 750;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.28rem 0.55rem;
border-radius: 999px;
color: #041018;
background: linear-gradient(135deg, #fde68a, #fbbf24);
animation: ofPulseSoft 2.4s ease-in-out infinite;
}
@keyframes ofPulseSoft {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
.of-offer-count {
display: inline-flex;
align-items: baseline;
gap: 0.55rem;
margin: 0 0 0.45rem;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-offer-count strong {
font-size: 0.92rem;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
color: #f8fafc;
}
.of-offer-count.is-ended strong { color: #fca5a5; }
.of-plan-tier {
margin: 0 0 0.35rem;
font-size: 0.68rem;
font-weight: 750;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-plan-card.is-popular .of-plan-tier {
color: #fbbf24;
}
.of-plan-card h3 {
margin: 0 0 0.35rem;
font-size: 1.35rem;
font-weight: 750;
color: var(--of-fg);
}
.of-plan-tag {
margin: 0 0 1rem;
font-size: 0.84rem;
line-height: 1.45;
color: var(--of-fg-muted);
}
.of-plan-price {
display: flex;
align-items: baseline;
gap: 0.4rem;
margin-bottom: 1rem;
}
.of-plan-price strong {
font-size: clamp(1.8rem, 4vw, 2.3rem);
font-weight: 800;
letter-spacing: -0.03em;
background: linear-gradient(110deg, #e2e8f0, #7dd3fc 55%, #38bdf8);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.of-plan-card.is-popular .of-plan-price strong {
background: linear-gradient(110deg, #fff7ed, #fde68a 40%, #fbbf24);
-webkit-background-clip: text;
background-clip: text;
}
.of-plan-price span {
font-size: 0.85rem;
font-weight: 700;
color: rgba(148, 163, 184, 0.95);
}
.of-plan-features {
list-style: none;
margin: 0 0 1.2rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.of-plan-features li {
position: relative;
padding-left: 1.15rem;
font-size: 0.84rem;
color: #e2e8f0;
line-height: 1.4;
}
.of-plan-features li::before {
content: "";
position: absolute;
left: 0;
top: 0.45em;
width: 7px;
height: 7px;
border-radius: 50%;
background: #38bdf8;
box-shadow: 0 0 10px rgba(56, 189, 248, 0.55);
}
.of-plan-card.is-popular .of-plan-features li::before {
background: #fbbf24;
box-shadow: 0 0 10px rgba(251, 191, 36, 0.55);
}
.of-plan-btn {
width: 100%;
min-height: 48px;
border: 0;
border-radius: 12px;
cursor: pointer;
font: inherit;
font-weight: 750;
font-size: 0.9rem;
color: #041018;
background: linear-gradient(135deg, #7dd3fc, #068ed1 55%, #05418b);
box-shadow: 0 12px 28px rgba(6, 142, 209, 0.28);
transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.of-plan-btn:hover:not(:disabled) {
transform: translateY(-2px);
filter: brightness(1.06);
}
.of-plan-btn.is-premium {
background: linear-gradient(135deg, #fde68a, #fbbf24 45%, #d97706);
box-shadow: 0 12px 28px rgba(251, 191, 36, 0.28);
}
.of-plan-btn.is-ghost {
background: transparent;
color: #bae6fd;
border: 1px solid rgba(125, 211, 252, 0.3);
box-shadow: none;
}
.of-plan-btn:disabled {
opacity: 0.55;
cursor: default;
transform: none;
}
.of-plan-btn.is-current {
background: rgba(52, 211, 153, 0.16);
color: #6ee7b7;
border: 1px solid rgba(52, 211, 153, 0.35);
box-shadow: none;
}
.of-sub-hero {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.7fr);
gap: 1.4rem;
align-items: center;
width: 100%;
padding: 1.6rem 1.45rem;
border-radius: 24px;
border-color: rgba(125, 211, 252, 0.28);
background:
radial-gradient(ellipse 70% 80% at 100% 0%, rgba(56, 189, 248, 0.16), transparent 55%),
linear-gradient(155deg, rgba(8, 32, 56, 0.96), rgba(2, 8, 18, 0.98));
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.of-sub-hero.is-popular {
border-color: rgba(125, 211, 252, 0.34);
background:
radial-gradient(ellipse 60% 90% at 88% 10%, rgba(125, 211, 252, 0.2), transparent 58%),
linear-gradient(155deg, rgba(8, 32, 56, 0.96), rgba(2, 8, 18, 0.98));
}
.of-sub-hero .of-plan-badge {
position: static;
display: inline-flex;
margin-bottom: 0.85rem;
color: #e0f2fe;
background: rgba(56, 189, 248, 0.14);
border: 1px solid rgba(125, 211, 252, 0.35);
box-shadow: 0 0 18px rgba(56, 189, 248, 0.16);
}
.of-sub-hero h3 {
font-size: clamp(1.7rem, 3vw, 2.35rem);
letter-spacing: -0.045em;
margin-bottom: 0.45rem;
}
.of-sub-hero .of-plan-tag {
max-width: 46ch;
margin-bottom: 1.1rem;
}
.of-sub-hero .of-plan-features {
flex-direction: row;
flex-wrap: wrap;
gap: 0.45rem;
margin: 0;
}
.of-sub-hero .of-plan-features li {
padding: 0.42rem 0.7rem 0.42rem 1.35rem;
border-radius: 999px;
border: 1px solid rgba(125, 211, 252, 0.18);
background: rgba(2, 10, 22, 0.35);
font-size: 0.78rem;
}
.of-sub-hero .of-plan-features li::before {
left: 0.55rem;
top: 50%;
transform: translateY(-50%);
}
.of-sub-hero-side {
position: relative;
z-index: 1;
display: grid;
justify-items: center;
gap: 0.85rem;
padding: 1.15rem 0.9rem 1rem;
border-radius: 20px;
border: 1px solid rgba(125, 211, 252, 0.22);
background: rgba(2, 10, 22, 0.42);
box-shadow: inset 0 0 40px rgba(56, 189, 248, 0.06);
}
.of-sub-hero .of-plan-price {
margin: 0;
}
.of-sub-hero .of-plan-price strong {
font-size: clamp(2.6rem, 5vw, 3.4rem);
}
.of-sub-hero .of-plan-btn {
min-width: min(100%, 220px);
}
.of-sub-hero.is-popular .of-plan-tier { color: #7dd3fc; }
.of-sub-hero.is-popular .of-plan-price strong {
background: linear-gradient(110deg, #f8fafc, #7dd3fc 55%, #38bdf8);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.of-pos-cta[data-goto="suscripcion"]:not(.is-activating),
.of-plan-btn.is-activate:not(:disabled):not(.is-current):not(.is-activating) {
animation: ofCtaBeat 2.2s ease-in-out infinite;
}
.of-pos-cta[data-goto="suscripcion"],
.of-plan-btn.is-activate:not(:disabled):not(.is-current) {
position: relative;
isolation: isolate;
}
.of-pos-cta[data-goto="suscripcion"]::after,
.of-plan-btn.is-activate:not(:disabled):not(.is-current)::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: 0 0 0 0 rgba(125, 211, 252, 0.55);
animation: ofCtaPulse 2.1s ease-out infinite;
}
.of-pos-cta.is-activating,
.of-plan-btn.is-activating {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
pointer-events: none;
filter: brightness(0.96);
}
.of-pos-cta.is-activating::after,
.of-plan-btn.is-activating::after {
animation: none;
opacity: 0;
}
.of-cta-spin {
width: 0.85rem;
height: 0.85rem;
border-radius: 50%;
border: 2px solid rgba(4, 16, 24, 0.22);
border-top-color: #041018;
animation: ofCtaSpin 0.65s linear infinite;
}
@keyframes ofCtaBeat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.035); }
}
@keyframes ofCtaPulse {
0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.5); }
70% { box-shadow: 0 0 0 12px rgba(56, 189, 248, 0); }
100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
}
@keyframes ofCtaSpin {
to { transform: rotate(360deg); }
}
@media (max-width: 820px) {
.of-sub-hero {
grid-template-columns: 1fr;
padding: 1.2rem 1rem 1.1rem;
}
.of-sub-hero-side { width: 100%; }
.of-sub-hero .of-plan-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.of-pos-cta[data-goto="suscripcion"]::after,
.of-plan-btn.is-activate::after,
.of-pos-cta[data-goto="suscripcion"]:not(.is-activating),
.of-plan-btn.is-activate:not(.is-activating),
.of-cta-spin { animation: none; }
}
html[data-of-theme="light"] .of-sub-hero {
background:
radial-gradient(ellipse 70% 80% at 100% 0%, rgba(14, 165, 233, 0.12), transparent 55%),
#fff;
border-color: rgba(2, 132, 199, 0.18);
}
html[data-of-theme="light"] .of-sub-hero-side {
background: #f8fafc;
border-color: rgba(2, 132, 199, 0.16);
}
html[data-of-theme="light"] .of-offer-count strong { color: #0f172a; }
html[data-of-theme="light"] .of-sub-hero .of-plan-features li {
background: #f8fafc;
color: #0f172a;
}
.of-pay-sheet {
position: relative;
margin-top: 1.15rem;
padding: 1.35rem 1.3rem;
border-radius: 20px;
border: 1px solid rgba(125, 211, 252, 0.25);
background: linear-gradient(160deg, rgba(6, 40, 72, 0.55), rgba(2, 10, 22, 0.95));
overflow: hidden;
animation: ofPlanIn 0.45s ease both;
}
.of-pay-sheet[hidden] {
display: none !important;
}
.of-pay-sheet-glow {
position: absolute;
width: 200px;
height: 200px;
top: -80px;
right: -50px;
border-radius: 50%;
background: radial-gradient(circle, rgba(6, 142, 209, 0.35), transparent 70%);
pointer-events: none;
}
.of-pay-kicker {
margin: 0 0 0.35rem;
font-size: 0.66rem;
font-weight: 750;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-pay-sheet h3 {
margin: 0 0 0.55rem;
font-size: 1.2rem;
}
.of-pay-amount {
margin: 0 0 0.65rem;
font-size: 0.9rem;
color: rgba(186, 198, 214, 0.9);
}
.of-pay-amount strong {
font-size: 1.6rem;
color: #6ee7b7;
}
.of-pay-note {
margin: 0 0 1rem;
font-size: 0.84rem;
color: rgba(148, 163, 184, 0.95);
line-height: 1.45;
}
.of-pay-actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.of-pay-actions .of-plan-btn {
width: auto;
min-width: 140px;
padding: 0 1.1rem;
}
.oview.is-active .of-page-head {
animation: ofRise 0.45s ease both;
}
@media (max-width: 960px) {
/* Solo el app autenticado bloquea el scroll de página.
Login y registro deben poder deslizar en móvil. */
html.of-auth-ok,
html.of-boot-resume,
html.of-boot-check,
html.of-boot-app,
body.is-oficial-app {
height: 100%;
height: 100dvh;
overflow: hidden !important;
overscroll-behavior: none;
touch-action: manipulation;
}
html:has(body.of-join),
html:has(body.oficial-page:not(.is-oficial-app)),
body.of-join,
body.oficial-page:not(.is-oficial-app) {
height: auto !important;
min-height: 100%;
min-height: 100dvh;
max-height: none !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior-y: auto;
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
}
body.oficial-page:not(.is-oficial-app) .of-login,
body.of-join .of-login {
max-height: none;
min-height: 100dvh;
min-height: 100svh;
overflow: visible;
touch-action: pan-y;
}
body.oficial-page {
touch-action: manipulation;
overscroll-behavior: none;
}
body.of-join.oficial-page,
body.oficial-page:not(.is-oficial-app) {
touch-action: pan-y;
overscroll-behavior-y: auto;
}
body.is-oficial-app .of-app {
display: flex;
flex-direction: column;
grid-template-columns: 1fr;
position: fixed;
inset: 0;
width: 100%;
height: 100%;
height: 100dvh;
max-height: 100dvh;
min-height: 0;
overflow: hidden;
}
.of-sidebar {
position: static;
height: 0;
min-height: 0;
padding: 0;
border: 0;
background: transparent;
overflow: visible;
pointer-events: none;
isolation: auto;
z-index: auto;
}
.of-sidebar-mesh,
.of-sidebar-beam,
.of-sidebar-rule,
.of-nav-label,
.of-sidebar-head,
.of-brand-logo {
display: none !important;
}
.of-nav,
.of-nav.is-mobile-dock,
body > .of-nav {
pointer-events: auto;
position: fixed;
left: 12px;
right: 12px;
bottom: calc(10px + env(safe-area-inset-bottom));
z-index: 9000;
display: flex;
flex-direction: row;
align-items: stretch;
gap: 0.15rem;
height: 72px;
overflow: hidden;
padding: 7px;
border: 1px solid rgba(186, 230, 253, 0.28);
border-radius: 26px;
background:
linear-gradient(180deg, rgba(18, 42, 68, 0.92), rgba(2, 8, 18, 0.96));
box-shadow:
0 22px 50px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.05) inset,
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 0 36px rgba(6, 142, 209, 0.22);
-webkit-backdrop-filter: blur(22px) saturate(1.4);
backdrop-filter: blur(22px) saturate(1.4);
}
.of-nav::after {
content: "";
position: absolute;
left: 18%;
right: 18%;
top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(186, 230, 253, 0.85), transparent);
pointer-events: none;
}
.of-nav-btn::before { display: none; }
.of-nav-btn[data-view="marketplace"],
.of-nav-btn[data-view="rangos"],
.of-nav-btn[data-view="recursos"],
.of-nav-btn[data-view="suscripcion"],
.of-nav-btn[data-view="config"] { display: none; }
.of-nav-btn.of-nav-more { display: flex; }
.of-nav-btn,
.of-nav-more {
position: relative;
flex: 1 1 0;
width: auto;
min-width: 0;
flex-direction: column;
justify-content: center;
gap: 0.08rem;
padding: 0.15rem 0.1rem;
font-size: 0.58rem;
letter-spacing: 0.01em;
animation: none;
border-radius: 18px;
color: rgba(203, 213, 225, 0.72);
}
.of-nav-btn:hover { transform: none; background: transparent; }
.of-nav-text {
display: block;
flex: none;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.58rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
opacity: 0.72;
}
.of-nav-btn.is-active,
.of-nav-more.is-active,
.of-nav-more.is-open {
flex: 1.15 1 0;
color: #fff;
background: linear-gradient(180deg, rgba(56, 189, 248, 0.38), rgba(6, 142, 209, 0.1));
box-shadow: 0 8px 22px rgba(6, 142, 209, 0.32), inset 0 0 0 1px rgba(186, 230, 253, 0.32);
}
.of-nav-btn.is-active .of-nav-text,
.of-nav-more.is-active .of-nav-text,
.of-nav-more.is-open .of-nav-text { opacity: 1; }
.of-nav-more.is-open .of-nav-ico-wrap { transform: rotate(90deg); }
.of-nav-badge {
position: absolute;
top: 4px;
right: 8px;
min-width: 1rem;
height: 1rem;
padding: 0 0.28rem;
font-size: 0.58rem;
}
.of-nav-ico-wrap {
width: 28px;
height: 28px;
border-radius: 10px;
}
.of-nav-ico { width: 16px; height: 16px; }
.of-nav-btn.is-active .of-nav-ico-wrap,
.of-nav-more.is-active .of-nav-ico-wrap {
transform: translateY(-1px) scale(1.06);
box-shadow: 0 0 18px rgba(56, 189, 248, 0.35);
}
.of-main {
flex: 1 1 auto;
height: auto;
min-height: 0;
min-width: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.of-main-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-y;
padding-top: calc(68px + env(safe-area-inset-top) + 0.35rem);
padding-bottom: calc(6.4rem + env(safe-area-inset-bottom));
}
.of-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 9100;
justify-content: space-between;
gap: 0.55rem;
min-height: calc(68px + env(safe-area-inset-top));
padding: max(0.55rem, env(safe-area-inset-top)) 0.8rem 0.55rem;
border-bottom: 1px solid rgba(186, 230, 253, 0.28);
background:
linear-gradient(180deg, rgba(14, 36, 58, 0.99), rgba(2, 8, 18, 0.97));
box-shadow:
0 16px 36px rgba(0, 0, 0, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -1px 0 rgba(125, 211, 252, 0.18);
-webkit-backdrop-filter: blur(20px) saturate(1.45);
backdrop-filter: blur(20px) saturate(1.45);
}
.of-topbar::after {
content: "";
position: absolute;
left: 12%;
right: 12%;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.75), transparent);
pointer-events: none;
}
.of-topbar-brand {
display: flex !important;
align-items: center;
min-width: 0;
flex: 0 0 auto;
}
.of-user-drop {
z-index: 9200;
}
.of-topbar-brand img {
display: block;
height: 46px;
width: auto;
max-width: min(48vw, 190px);
object-fit: contain;
object-position: left center;
filter: drop-shadow(0 8px 18px rgba(6, 142, 209, 0.38));
}
.of-topbar-right {
min-width: 0;
flex: 1 1 auto;
justify-content: flex-end;
}
.of-user-menu { min-width: 0; max-width: 100%; }
.of-user-chip {
max-width: 100%;
min-width: 0;
gap: 0.5rem;
padding: 0.28rem 0.65rem 0.28rem 0.28rem;
border-radius: 999px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(6, 142, 209, 0.08));
border-color: rgba(125, 211, 252, 0.38);
box-shadow:
0 10px 24px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 0 18px rgba(6, 142, 209, 0.12);
}
.of-user-avatar {
width: 36px;
height: 36px;
font-size: 0.72rem;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 0 14px rgba(56, 189, 248, 0.35);
}
.of-user-chip-name {
display: block;
flex: 1 1 auto;
max-width: min(52vw, 15rem);
font-size: 0.8rem;
font-weight: 750;
letter-spacing: -0.02em;
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.of-user-caret { display: block; flex-shrink: 0; }
.of-user-drop {
right: 0;
left: auto;
width: min(100vw - 1.25rem, 304px);
}
.of-kpis,
.of-dash-grid,
.earn-board,
.net-board,
.of-config-grid {
grid-template-columns: 1fr 1fr;
}
.of-plans {
grid-template-columns: 1fr;
max-width: 100%;
}
.of-panel-wide {
grid-column: 1 / -1;
}
}
@media (min-width: 641px) and (max-width: 960px) {
.of-topbar { min-height: calc(76px + env(safe-area-inset-top)); }
.of-main-scroll { padding-top: calc(76px + env(safe-area-inset-top) + 0.35rem); }
.of-topbar-brand img { height: 52px; max-width: 240px; }
.of-user-chip-name { max-width: 18rem; font-size: 0.92rem; }
}
@media (max-width: 640px) {
.of-topbar-brand img { height: 44px; max-width: min(46vw, 168px); }
.of-user-chip-name { max-width: min(48vw, 13.5rem); font-size: 0.76rem; }
.of-login-card {
width: min(100%, 440px);
margin: 0.75rem auto 1rem;
padding: 1.35rem 1rem 1.15rem;
}
body.of-join .of-join-card {
margin: 0.35rem auto 0.75rem;
}
.of-kpis,
.of-dash-grid,
.earn-board,
.net-board,
.of-config-grid,
.of-settings,
.of-plans,
.of-wallet-pair,
.of-sub-hero {
grid-template-columns: 1fr;
}
.of-activate-strip,
.of-tree-head,
.of-lock-banner,
.of-pay-confirm-actions {
flex-wrap: wrap;
}
.of-tree-canvas { min-height: 240px; }
.of-pay-sheet,
.of-pay-confirm-card,
.of-ledger-sheet,
.of-place-sheet {
width: min(100%, 560px);
max-height: min(92dvh, 760px);
overflow: auto;
}
.of-page-head h2 { font-size: 1.35rem; }
.of-kpi { padding: 0.85rem 0.8rem; }
.of-kpi-val strong { font-size: 1.15rem; }
}
@media (max-width: 380px) {
.of-user-avatar { width: 28px; height: 28px; font-size: 0.62rem; }
.of-user-chip { gap: 0.32rem; padding-right: 0.4rem; }
}
.of-dock-more {
position: fixed;
inset: 0;
z-index: 9050;
display: grid;
align-items: end;
}
.of-dock-more[hidden] { display: none !important; }
.of-dock-more-veil {
position: absolute;
inset: 0;
border: 0;
background: rgba(1, 6, 14, 0.55);
backdrop-filter: blur(6px);
animation: dialSheetIn 0.28s ease;
}
.of-dock-sheet {
position: relative;
z-index: 1;
margin: 0 12px calc(92px + env(safe-area-inset-bottom));
padding: 0.7rem 0.75rem 0.85rem;
border-radius: 22px;
border: 1px solid rgba(125, 211, 252, 0.28);
background:
radial-gradient(120% 80% at 0% 0%, rgba(6, 142, 209, 0.22), transparent 50%),
rgba(3, 12, 24, 0.96);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
animation: dockSheetIn 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-dock-handle {
display: block;
width: 42px;
height: 4px;
margin: 0.15rem auto 0.55rem;
border-radius: 999px;
background: rgba(186, 230, 253, 0.45);
}
.of-dock-kicker {
margin: 0 0 0.55rem;
text-align: center;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(186, 230, 253, 0.78);
}
.of-dock-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.of-dock-item {
min-height: 72px;
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.7rem 0.75rem;
text-align: left;
border: 1px solid rgba(125, 211, 252, 0.2);
border-radius: 16px;
background: rgba(255, 255, 255, 0.03);
color: #f8fafc;
font: inherit;
cursor: pointer;
animation: dialRowIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.of-dock-ico {
width: 36px;
height: 36px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: 12px;
color: #7dd3fc;
background: rgba(6, 142, 209, 0.16);
border: 1px solid rgba(125, 211, 252, 0.28);
}
.of-dock-ico svg { width: 18px; height: 18px; }
.of-dock-copy {
display: flex;
flex-direction: column;
gap: 0.12rem;
min-width: 0;
}
.of-dock-copy strong {
font-size: 0.86rem;
font-weight: 750;
letter-spacing: -0.01em;
}
.of-dock-copy small {
font-size: 0.68rem;
font-weight: 600;
color: rgba(186, 230, 253, 0.72);
}
.of-dock-item:nth-child(2) { animation-delay: 0.04s; }
.of-dock-item:nth-child(3) { animation-delay: 0.08s; }
.of-dock-item:nth-child(4) { animation-delay: 0.12s; }
.of-dock-item.is-active,
.of-dock-item:active {
border-color: rgba(125, 211, 252, 0.5);
background: rgba(6, 142, 209, 0.2);
box-shadow: 0 0 22px rgba(6, 142, 209, 0.22);
}
@keyframes dockSheetIn {
from { opacity: 0; transform: translateY(18px) scale(0.96); }
to { opacity: 1; transform: none; }
}
html[data-of-theme="light"] .of-dock-sheet {
background: #fff;
border-color: rgba(15, 23, 42, 0.08);
}
html[data-of-theme="light"] .of-dock-kicker { color: #0369a1; }
html[data-of-theme="light"] .of-dock-item { color: #0f172a; background: #f8fafc; }
html[data-of-theme="light"] .of-dock-copy small { color: #64748b; }
@media (min-width: 961px) {
.of-dock-more { display: none !important; }
}
body.is-dock-open { overflow: hidden; }
@media (max-width: 960px) {
.of-app,
.of-main { overflow-x: clip; }
.of-main-scroll {
overflow-x: hidden;
overflow-y: auto;
scrollbar-gutter: auto;
width: 100%;
max-width: 100%;
padding-left: 0.85rem;
padding-right: 0.85rem;
box-sizing: border-box;
touch-action: pan-y;
}
.of-app input,
.of-app textarea,
.of-app select,
.of-login input,
.of-login textarea,
.of-login select {
font-size: 16px !important;
}
.oview,
.of-panel,
.of-kpi,
.of-dash-grid,
.earn-board,
.net-board,
.of-config-grid,
.task-grid,
.of-plans {
touch-action: pan-y;
}
#view-dashboard .of-dash-live,
#view-dashboard .of-page-head,
#view-dashboard .of-kpis,
#view-dashboard .of-activate-strip,
#view-dashboard .of-dash-grid,
#view-dashboard .of-panel {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
#view-dashboard .of-page-head { margin-bottom: 0.85rem; }
#view-dashboard .of-page-head p { font-size: 0.86rem; }
#view-dashboard .of-kpis {
grid-template-columns: 1fr 1fr;
gap: 0.55rem;
align-items: stretch;
}
#view-dashboard .of-kpi:nth-child(1),
#view-dashboard .of-kpi:nth-child(2) {
grid-column: 1 / -1;
min-height: 124px;
padding: 1.15rem 1.05rem 1.05rem;
border-radius: 22px;
}
#view-dashboard .of-kpi:nth-child(1) .of-kpi-val strong,
#view-dashboard .of-kpi:nth-child(2) .of-kpi-val strong {
font-size: 1.85rem;
}
#view-dashboard .of-kpi:nth-child(1) .of-kpi-sub,
#view-dashboard .of-kpi:nth-child(2) .of-kpi-sub {
min-height: 2.7em;
}
#view-dashboard .of-kpi:nth-child(n+3) {
min-height: 108px;
padding: 0.8rem 0.75rem 0.75rem;
border-radius: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#view-dashboard .of-kpi:nth-child(n+3) .of-kpi-val strong { font-size: 1.02rem; }
#view-dashboard .of-kpi:nth-child(n+3) .of-kpi-sub {
letter-spacing: 0.04em;
font-size: 0.56rem;
}
.of-kpi:hover,
.of-panel:hover { transform: none; }
.of-kpi::after { animation: none; opacity: 0; }
.of-kpi-val,
.of-kpi-val strong {
min-width: 0;
max-width: 100%;
}
#view-dashboard .of-kpi:nth-child(n+3) .of-kpi-val {
flex-wrap: wrap;
white-space: normal;
}
#view-dashboard .of-dash-grid {
grid-template-columns: 1fr;
gap: 0.65rem;
}
#view-dashboard .of-panel {
overflow: hidden;
padding: 0.85rem 0.85rem 0.75rem;
}
#view-dashboard .of-panel-head,
#view-dashboard .of-list,
#view-dashboard .of-list li,
#view-dashboard .of-item-main {
min-width: 0;
max-width: 100%;
}
#view-dashboard .of-panel-head h3 {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media (max-width: 420px) {
.of-nav-text { display: none; }
.of-nav-btn.is-active .of-nav-text,
.of-nav-more.is-active .of-nav-text,
.of-nav-more.is-open .of-nav-text { display: block; }
}
/* ── Escudo de seguridad (sesión en otro lugar) ── */
.of-shield {
position: fixed;
inset: 0;
z-index: 9700;
display: grid;
place-items: center;
padding: 1.25rem;
}
.of-shield[hidden] {
display: none !important;
}
.of-shield-backdrop {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 20%, rgba(251, 191, 36, 0.12), transparent 55%),
rgba(1, 6, 14, 0.82);
backdrop-filter: blur(14px);
animation: ofShieldFade 0.35s ease both;
}
.of-shield-card {
position: relative;
z-index: 1;
width: min(100%, 440px);
padding: 1.65rem 1.45rem 1.4rem;
border-radius: 22px;
border: 1px solid rgba(251, 191, 36, 0.35);
background:
linear-gradient(160deg, rgba(28, 22, 8, 0.96), rgba(4, 10, 20, 0.98));
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 28px 80px rgba(0, 0, 0, 0.55);
animation: ofShieldIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
overflow: hidden;
}
.of-shield-glow {
position: absolute;
width: 220px;
height: 220px;
top: -90px;
right: -60px;
border-radius: 50%;
background: radial-gradient(circle, rgba(251, 191, 36, 0.28), transparent 70%);
pointer-events: none;
animation: ofGlowPulse 3.8s ease-in-out infinite;
}
.of-shield-icon {
width: 52px;
height: 52px;
margin: 0 auto 0.85rem;
color: #fbbf24;
display: grid;
place-items: center;
animation: ofPulseSoft 2.2s ease-in-out infinite;
}
.of-shield-icon svg {
width: 48px;
height: 48px;
}
.of-shield-kicker {
margin: 0 0 0.35rem;
text-align: center;
font-size: 0.66rem;
font-weight: 750;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #fbbf24;
}
.of-shield-kicker.is-danger {
color: #fb7185;
}
.of-shield-kicker.is-ok {
color: #6ee7b7;
}
.of-shield-card h2 {
margin: 0 0 0.55rem;
text-align: center;
font-size: 1.45rem;
font-weight: 750;
color: #f8fafc;
letter-spacing: -0.02em;
}
.of-shield-lead {
margin: 0 0 1rem;
text-align: center;
font-size: 0.9rem;
line-height: 1.55;
color: rgba(203, 213, 225, 0.92);
}
.of-shield-ask {
margin: 0 0 0.85rem;
text-align: center;
font-size: 1.05rem;
font-weight: 700;
color: #fde68a;
}
.of-shield-list {
list-style: none;
margin: 0 0 1.15rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.of-shield-list li {
position: relative;
padding: 0.55rem 0.7rem 0.55rem 1.85rem;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(2, 10, 20, 0.45);
font-size: 0.82rem;
color: #e2e8f0;
}
.of-shield-list li::before {
content: "";
position: absolute;
left: 0.75rem;
top: 50%;
width: 7px;
height: 7px;
border-radius: 50%;
transform: translateY(-50%);
background: #fb7185;
box-shadow: 0 0 10px rgba(251, 113, 133, 0.55);
}
.of-shield-actions {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.of-shield-btn {
min-height: 48px;
border: 0;
border-radius: 12px;
cursor: pointer;
font: inherit;
font-weight: 750;
font-size: 0.92rem;
transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}
.of-shield-btn:hover:not(:disabled) {
transform: translateY(-1px);
filter: brightness(1.05);
}
.of-shield-btn:disabled {
opacity: 0.65;
cursor: default;
}
.of-shield-btn.is-yes {
color: #041018;
background: linear-gradient(135deg, #7dd3fc, #068ed1 55%, #05418b);
box-shadow: 0 12px 28px rgba(6, 142, 209, 0.28);
}
.of-shield-btn.is-no,
.of-shield-btn.is-danger {
color: #fff1f2;
background: linear-gradient(135deg, #fb7185, #e11d48 50%, #9f1239);
box-shadow: 0 12px 28px rgba(225, 29, 72, 0.28);
}
.of-shield-btn.is-ghost {
color: #bae6fd;
background: transparent;
border: 1px solid rgba(125, 211, 252, 0.28);
}
.of-shield-link {
display: block;
width: 100%;
margin-top: 0.85rem;
padding: 0;
border: 0;
background: none;
color: #fda4af;
font: inherit;
font-size: 0.8rem;
font-weight: 650;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
text-align: center;
}
.of-shield-link:hover {
color: #fecdd3;
}
.of-shield-note {
margin: 0.9rem 0 0;
text-align: center;
font-size: 0.78rem;
line-height: 1.5;
color: rgba(253, 164, 175, 0.92);
}
@keyframes ofShieldFade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ofShieldIn {
from { opacity: 0; transform: translateY(18px) scale(0.96); }
to { opacity: 1; transform: none; }
}
body.of-no-position .task-grid:empty {
display: none;
}
.of-dash-lock {
min-height: min(72vh, 720px);
display: grid;
place-items: center;
padding: 1.25rem 0 2rem;
}
.of-dash-lock[hidden] {
display: none !important;
}
.of-dash-lock-card {
position: relative;
width: min(640px, 100%);
padding: 2.4rem 1.8rem 1.8rem;
border-radius: 28px;
border: 1px solid rgba(186, 230, 253, 0.28);
background:
linear-gradient(165deg, rgba(8, 40, 72, 0.92), rgba(2, 12, 24, 0.98) 55%),
radial-gradient(80% 70% at 80% 0%, rgba(56, 189, 248, 0.28), transparent 50%);
box-shadow:
0 40px 80px rgba(2, 8, 20, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
overflow: hidden;
text-align: center;
animation: ofPosIn 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-dash-lock-ring {
position: absolute;
inset: -40% -20% auto;
height: 280px;
background: radial-gradient(circle at 50% 40%, rgba(125, 211, 252, 0.22), transparent 62%);
pointer-events: none;
}
.of-dash-lock-price {
position: relative;
display: inline-flex;
align-items: baseline;
gap: 0.35rem;
margin: 0.2rem 0 1.1rem;
padding: 0.45rem 0.9rem;
border-radius: 999px;
border: 1px solid rgba(125, 211, 252, 0.35);
background: rgba(2, 12, 28, 0.45);
color: #e0f2fe;
}
.of-dash-lock-price b {
font-size: 1.35rem;
letter-spacing: -0.03em;
}
.of-dash-lock-price span {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.12em;
}
.of-dash-lock-cta {
min-width: 220px;
}
.of-dash-lock-list {
text-align: left;
}
.of-dash-lock-glow {
position: absolute;
inset: -30% auto auto -8%;
width: 280px;
height: 280px;
background: radial-gradient(circle, rgba(56, 189, 248, 0.32), transparent 68%);
pointer-events: none;
animation: ofPosPulse 3.6s ease-in-out infinite;
}
.of-dash-lock-ico {
position: relative;
width: 72px;
height: 72px;
margin: 0 auto 1rem;
border-radius: 22px;
display: grid;
place-items: center;
color: #e0f2fe;
background: linear-gradient(145deg, rgba(14, 165, 233, 0.4), rgba(3, 105, 161, 0.18));
border: 1px solid rgba(125, 211, 252, 0.4);
box-shadow: 0 0 28px rgba(14, 165, 233, 0.28);
}
.of-dash-lock-ico svg {
width: 30px;
height: 30px;
}
.of-dash-lock-card h2 {
position: relative;
margin: 0.15rem 0 0.55rem;
font-size: clamp(1.35rem, 2.4vw, 1.85rem);
line-height: 1.15;
color: #f0f9ff;
}
.of-dash-lock-card > p {
position: relative;
margin: 0 0 1rem;
max-width: 58ch;
color: rgba(186, 230, 253, 0.9);
line-height: 1.5;
}
.of-dash-lock-list {
position: relative;
margin: 0 0 1.25rem;
padding: 0;
list-style: none;
display: grid;
gap: 0.55rem;
}
.of-dash-lock-list li {
padding: 0.7rem 0.8rem 0.7rem 2.15rem;
border-radius: 12px;
background: rgba(2, 12, 28, 0.35);
border: 1px solid rgba(125, 211, 252, 0.16);
color: rgba(224, 242, 254, 0.92);
font-size: 0.88rem;
line-height: 1.4;
position: relative;
}
.of-dash-lock-list li::before {
content: "";
position: absolute;
left: 0.75rem;
top: 0.95rem;
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background: #38bdf8;
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.16);
}
.of-payout-modern {
position: relative;
overflow: hidden;
margin: 0 0 1rem;
padding: 1.2rem 1.15rem 1.1rem;
border-radius: 22px;
border: 1px solid rgba(125, 211, 252, 0.26);
background:
linear-gradient(155deg, rgba(8, 47, 73, 0.82), rgba(2, 10, 22, 0.94) 55%),
radial-gradient(90% 120% at 100% 0%, rgba(14, 165, 233, 0.22), transparent 55%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.07),
0 18px 40px rgba(0, 0, 0, 0.28);
}
.of-payout-modern-glow {
position: absolute;
inset: -40% auto auto -20%;
width: 70%;
height: 90%;
background: radial-gradient(circle, rgba(56, 189, 248, 0.18), transparent 68%);
pointer-events: none;
animation: ofAurora 10s ease-in-out infinite;
}
.of-payout-modern-top {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 0.55rem;
}
.of-payout-modern-copy { min-width: 0; flex: 1 1 auto; }
.of-payout-modern-top h3 {
margin: 0;
font-size: 1.05rem;
}
.of-payout-modern-top .of-badge {
margin-left: auto;
flex: 0 0 auto;
}
.of-payout-modern-ico {
width: 46px;
height: 46px;
border-radius: 14px;
display: grid;
place-items: center;
color: #e0f2fe;
background: rgba(14, 165, 233, 0.16);
border: 1px solid rgba(125, 211, 252, 0.28);
flex: 0 0 auto;
}
.of-payout-modern-ico svg {
width: 22px;
height: 22px;
}
.of-payout-lead {
position: relative;
z-index: 1;
margin: 0 0 0.85rem;
}
.of-payout-modern.is-locked .of-payout-row {
opacity: 0.45;
pointer-events: none;
}
.of-payout-modern.is-sealed .of-payout-form {
display: none !important;
}
.of-payout-sealed {
position: relative;
z-index: 1;
display: grid;
gap: 0.75rem;
}
.of-payout-sealed[hidden] { display: none !important; }
.of-payout-sealed-chip {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 0.9rem;
border-radius: 16px;
border: 1px solid rgba(52, 211, 153, 0.35);
background:
linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(2, 12, 24, 0.55));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.of-payout-sealed-lock {
width: 38px;
height: 38px;
border-radius: 12px;
display: grid;
place-items: center;
color: #6ee7b7;
background: rgba(16, 185, 129, 0.14);
border: 1px solid rgba(110, 231, 183, 0.28);
flex: 0 0 auto;
}
.of-payout-sealed-lock svg { width: 18px; height: 18px; }
.of-payout-sealed-chip em {
display: block;
font-style: normal;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6ee7b7;
}
.of-payout-sealed-chip strong {
display: block;
margin-top: 0.18rem;
font-size: 0.92rem;
font-weight: 750;
letter-spacing: 0.02em;
color: #f0fdf4;
word-break: break-all;
}
.of-payout-change {
appearance: none;
width: 100%;
min-height: 44px;
border-radius: 14px;
border: 1px solid rgba(125, 211, 252, 0.32);
background: rgba(14, 165, 233, 0.12);
color: #e0f2fe;
font: inherit;
font-size: 0.86rem;
font-weight: 750;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.of-payout-change:hover:not(:disabled) {
transform: translateY(-1px);
background: rgba(14, 165, 233, 0.2);
border-color: rgba(125, 211, 252, 0.5);
}
.of-payout-change:disabled,
.of-payout-change.is-pending {
opacity: 0.72;
cursor: default;
background: rgba(148, 163, 184, 0.1);
border-color: rgba(148, 163, 184, 0.25);
color: #cbd5e1;
}
.of-payout-change-note {
margin: 0;
font-size: 0.8rem;
color: #fde68a;
line-height: 1.4;
}
.of-payout-change-note[hidden] { display: none !important; }
.of-badge.is-warn {
color: #fde68a;
background: rgba(251, 191, 36, 0.14);
border: 1px solid rgba(251, 191, 36, 0.28);
}
.of-payout-lock {
margin: 0.55rem 0 0;
color: #fde68a;
font-size: 0.84rem;
}
.of-payout-lock[hidden] {
display: none !important;
}
.of-wallet-balances.is-frozen-lead .of-wallet-amount {
color: #bae6fd;
}
.of-wallet-balances.is-frozen-lead .of-wallet-avail-label {
color: #7dd3fc;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.72rem;
font-weight: 800;
}
html[data-of-theme="light"] .of-payout-modern {
background: linear-gradient(160deg, #f8fafc, #fff);
border-color: rgba(14, 165, 233, 0.2);
}
html[data-of-theme="light"] .of-payout-sealed-chip {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), #fff);
}
html[data-of-theme="light"] .of-payout-sealed-chip strong { color: #065f46; }
html[data-of-theme="light"] .of-payout-change {
color: #0c4a6e;
background: rgba(14, 165, 233, 0.08);
}
.of-wallet-seal[hidden],
.of-wallet-money[hidden],
.of-wallet-history[hidden] {
display: none !important;
}
.of-wallet-seal-ico {
width: 46px;
height: 46px;
border-radius: 13px;
display: grid;
place-items: center;
color: #e0f2fe;
background: rgba(14, 165, 233, 0.18);
border: 1px solid rgba(125, 211, 252, 0.32);
}
.of-wallet-seal-ico svg {
width: 22px;
height: 22px;
}
.of-wallet-seal strong {
display: block;
color: #f0f9ff;
}
.of-wallet-seal p {
margin: 0.25rem 0 0;
color: rgba(186, 230, 253, 0.88);
font-size: 0.82rem;
line-height: 1.4;
}
.of-pending-announce {
margin-top: 1rem;
padding: 1rem 1.05rem 0.85rem;
border-radius: 16px;
border: 1px solid rgba(251, 191, 36, 0.28);
background:
linear-gradient(160deg, rgba(120, 53, 15, 0.28), rgba(15, 23, 42, 0.55)),
radial-gradient(80% 90% at 0% 0%, rgba(245, 158, 11, 0.16), transparent 60%);
}
.of-pending-announce-ico {
width: 40px;
height: 40px;
margin-bottom: 0.55rem;
border-radius: 12px;
display: grid;
place-items: center;
color: #fde68a;
background: rgba(245, 158, 11, 0.14);
border: 1px solid rgba(251, 191, 36, 0.28);
}
.of-pending-announce-ico svg {
width: 20px;
height: 20px;
}
.of-pending-announce .of-panel-head h3 {
color: #fef3c7;
}
.of-pending-frozen {
margin-top: 0.35rem;
color: #fde68a;
}
.net-card.is-sealed strong {
letter-spacing: 0.01em;
font-size: 0.95rem;
}
.of-user-drop-bal.is-sealed .of-user-drop-bal-bar {
opacity: 0.35;
}
html[data-of-theme="light"] .of-dash-lock-card,
html[data-of-theme="light"] .of-wallet-seal {
background: linear-gradient(165deg, #f8fafc, #eff6ff);
border-color: rgba(14, 165, 233, 0.22);
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}
html[data-of-theme="light"] .of-dash-lock-card h2,
html[data-of-theme="light"] .of-wallet-seal strong {
color: #0f172a;
}
html[data-of-theme="light"] .of-dash-lock-card > p,
html[data-of-theme="light"] .of-wallet-seal p,
html[data-of-theme="light"] .of-dash-lock-list li {
color: #334155;
}
html[data-of-theme="light"] .of-dash-lock-list li {
background: #fff;
border-color: rgba(14, 165, 233, 0.16);
}
html[data-of-theme="light"] .of-pending-announce {
background: linear-gradient(160deg, #fffbeb, #fff);
border-color: rgba(245, 158, 11, 0.35);
}
html[data-of-theme="light"] .of-pending-announce .of-panel-head h3 {
color: #92400e;
}
@media (max-width: 820px) {
.of-wallet-seal {
grid-template-columns: auto 1fr;
}
.of-wallet-seal .of-pos-cta {
grid-column: 1 / -1;
width: 100%;
}
}
.of-pos-card {
position: sticky;
top: 0;
z-index: 24;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1rem 1.15rem;
align-items: center;
margin: 0 0 1.15rem;
padding: 1.05rem 1.2rem;
border-radius: 18px;
border: 1px solid rgba(125, 211, 252, 0.28);
background:
linear-gradient(135deg, rgba(6, 52, 92, 0.92), rgba(3, 22, 42, 0.96)),
radial-gradient(120% 160% at 0% 0%, rgba(14, 165, 233, 0.22), transparent 55%);
box-shadow:
0 18px 40px rgba(2, 12, 28, 0.45),
inset 0 1px 0 rgba(186, 230, 253, 0.12);
overflow: hidden;
animation: ofPosIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-pos-card[hidden] {
display: none !important;
}
.of-pos-card-glow {
position: absolute;
inset: -40% auto auto -10%;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(56, 189, 248, 0.35), transparent 68%);
pointer-events: none;
animation: ofPosPulse 3.6s ease-in-out infinite;
}
.of-pos-card-ico {
position: relative;
width: 52px;
height: 52px;
border-radius: 14px;
display: grid;
place-items: center;
color: #e0f2fe;
background: linear-gradient(145deg, rgba(14, 165, 233, 0.35), rgba(3, 105, 161, 0.2));
border: 1px solid rgba(125, 211, 252, 0.35);
box-shadow: 0 0 24px rgba(14, 165, 233, 0.25);
}
.of-pos-card-ico svg {
width: 26px;
height: 26px;
}
.of-pos-card-copy {
position: relative;
min-width: 0;
}
.of-pos-kicker {
margin: 0 0 0.2rem;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-pos-card-copy strong {
display: block;
font-size: 1.05rem;
font-weight: 800;
color: #f0f9ff;
line-height: 1.25;
}
.of-pos-card-copy p {
margin: 0.35rem 0 0;
font-size: 0.82rem;
line-height: 1.45;
color: rgba(186, 230, 253, 0.88);
max-width: 52ch;
}
.of-pos-cta {
position: relative;
flex-shrink: 0;
min-height: 46px;
padding: 0 1.25rem;
border: 0;
border-radius: 12px;
cursor: pointer;
font: inherit;
font-weight: 800;
font-size: 0.88rem;
color: #041018;
background: linear-gradient(135deg, #7dd3fc, #38bdf8 40%, #0284c7);
box-shadow: 0 12px 28px rgba(14, 165, 233, 0.35);
transition: transform 0.2s ease, filter 0.2s ease;
white-space: nowrap;
}
.of-pos-cta:hover {
transform: translateY(-1px);
filter: brightness(1.06);
}
.of-pos-cta.is-sm {
min-height: 40px;
padding: 0 1rem;
font-size: 0.8rem;
}
@keyframes ofPosIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: none; }
}
@keyframes ofPosPulse {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
.of-lock-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1rem;
margin: 0 0 1rem;
padding: 0.9rem 1.05rem;
border-radius: 14px;
border: 1px solid rgba(251, 191, 36, 0.28);
background: linear-gradient(120deg, rgba(120, 53, 15, 0.35), rgba(30, 20, 8, 0.55));
color: #fde68a;
}
.of-lock-banner[hidden] {
display: none !important;
}
.of-lock-banner.is-member-due {
border-color: rgba(248, 113, 113, 0.35);
background: linear-gradient(120deg, rgba(127, 29, 29, 0.42), rgba(30, 12, 12, 0.62));
color: #fecaca;
}
.of-lock-banner.is-member-due p {
margin: 0.25rem 0 0;
font-size: 0.82rem;
opacity: 0.92;
max-width: 36rem;
}
.of-lock-banner strong {
font-size: 0.9rem;
font-weight: 750;
}
.of-member-due-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.of-member-due-actions [hidden] { display: none !important; }
.of-pos-cta.is-ghost {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(254, 202, 202, 0.45);
color: #fee2e2;
box-shadow: none;
}
.of-pos-cta.is-ghost:hover { background: rgba(255, 255, 255, 0.12); }
html[data-of-theme="light"] .of-pos-cta.is-ghost {
background: #fff;
color: #9f1239;
border-color: rgba(225, 29, 72, 0.35);
}
@media (max-width: 520px) {
.of-member-due-actions { width: 100%; }
.of-member-due-actions .of-pos-cta { flex: 1 1 100%; }
}
.task-card.is-locked {
border-color: rgba(125, 211, 252, 0.28);
background:
linear-gradient(165deg, rgba(8, 47, 73, 0.55), rgba(4, 14, 28, 0.88));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.task-card.is-locked:hover {
transform: none;
filter: none;
}
.of-need-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.28rem 0.6rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.04em;
color: #e0f2fe;
background: rgba(14, 165, 233, 0.16);
border: 1px solid rgba(125, 211, 252, 0.35);
}
.of-task-stage {
position: relative;
min-height: 12rem;
}
.of-tasks-view {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
text-align: left;
}
.of-tasks-head,
#view-tareas .of-page-head {
text-align: left;
align-self: stretch;
width: 100%;
margin-bottom: 1rem;
}
.of-tasks-head .of-pos-kicker {
margin: 0 0 0.35rem;
}
.of-tasks-head h2 {
margin: 0 0 0.35rem;
}
.of-tasks-head p {
margin: 0;
max-width: 34rem;
}
.of-task-empty {
position: relative;
display: grid;
place-items: start stretch;
width: 100%;
margin-top: 0.15rem;
overflow: hidden;
border-radius: 22px;
border: 1px solid rgba(125, 211, 252, 0.28);
background:
radial-gradient(90% 80% at 12% 0%, rgba(56, 189, 248, 0.18), transparent 55%),
radial-gradient(70% 70% at 100% 100%, rgba(14, 165, 233, 0.12), transparent 50%),
linear-gradient(165deg, rgba(6, 28, 52, 0.95), rgba(2, 10, 22, 0.98));
box-shadow:
0 0 0 1px rgba(56, 189, 248, 0.06),
0 22px 50px rgba(0, 0, 0, 0.35);
padding: 1.15rem 1.05rem 1.2rem;
box-sizing: border-box;
}
.of-task-empty[hidden] { display: none !important; }
.of-task-empty-glow {
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.05) 48%, transparent 66%);
background-size: 220% 100%;
animation: ofWdShine 5s ease-in-out infinite;
pointer-events: none;
}
.of-task-empty-orb {
position: absolute;
border-radius: 50%;
filter: blur(28px);
pointer-events: none;
animation: ofWdOrb 8s ease-in-out infinite;
}
.of-task-empty-orb-a {
width: 140px;
height: 140px;
top: -48px;
right: -30px;
background: rgba(56, 189, 248, 0.28);
}
.of-task-empty-orb-b {
width: 110px;
height: 110px;
bottom: -40px;
left: -24px;
background: rgba(34, 211, 238, 0.16);
animation-delay: -2s;
}
.of-task-empty-card {
position: relative;
z-index: 1;
width: 100%;
text-align: left;
}
.of-task-empty-pulse {
display: inline-block;
width: 8px;
height: 8px;
margin-bottom: 0.55rem;
border-radius: 50%;
background: #38bdf8;
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.55);
animation: ofRemainPulse 1.5s ease-out infinite;
}
.of-task-empty-kicker {
margin: 0 0 0.35rem;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-task-empty-card h3 {
margin: 0 0 0.4rem;
font-size: clamp(1.15rem, 4.6vw, 1.45rem);
font-weight: 850;
letter-spacing: -0.03em;
color: #f8fafc;
line-height: 1.2;
}
.of-task-empty-lead {
margin: 0 0 1rem;
max-width: 28rem;
font-size: 0.86rem;
line-height: 1.45;
color: rgba(186, 230, 253, 0.86);
}
.of-task-countdown {
display: flex;
align-items: center;
gap: 0.45rem;
flex-wrap: nowrap;
margin: 0 0 0.85rem;
}
.of-task-cd-unit {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.7rem 0.35rem 0.55rem;
border-radius: 14px;
border: 1px solid rgba(125, 211, 252, 0.3);
background:
linear-gradient(180deg, rgba(8, 47, 73, 0.7), rgba(2, 12, 24, 0.9));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.of-task-cd-unit strong {
font-size: clamp(1.45rem, 7vw, 2rem);
font-weight: 850;
letter-spacing: -0.04em;
color: #f0f9ff;
font-variant-numeric: tabular-nums;
line-height: 1;
text-shadow: 0 0 22px rgba(56, 189, 248, 0.4);
transition: transform 0.2s ease, color 0.2s ease;
}
.of-task-cd-unit strong.is-tick {
animation: ofTaskCdTick 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-task-cd-unit span {
margin-top: 0.35rem;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-task-cd-sep {
flex: 0 0 auto;
font-style: normal;
font-size: 1.35rem;
font-weight: 800;
color: rgba(125, 211, 252, 0.65);
line-height: 1;
margin-bottom: 0.85rem;
animation: ofTaskCdBlink 1.2s ease-in-out infinite;
}
.of-task-empty-foot {
margin: 0;
font-size: 0.74rem;
color: rgba(148, 163, 184, 0.92);
}
.of-task-empty.is-ready .of-task-empty-kicker { color: #6ee7b7; }
.of-task-empty.is-ready .of-task-cd-unit {
border-color: rgba(52, 211, 153, 0.4);
}
@keyframes ofTaskCdTick {
0% { transform: translateY(4px) scale(0.92); opacity: 0.55; }
100% { transform: none; opacity: 1; }
}
@keyframes ofTaskCdBlink {
0%, 100% { opacity: 0.35; }
50% { opacity: 1; }
}
@media (max-width: 420px) {
.of-task-empty {
padding: 1rem 0.85rem 1.05rem;
border-radius: 18px;
}
.of-task-countdown { gap: 0.3rem; }
.of-task-cd-unit { padding: 0.6rem 0.2rem 0.45rem; border-radius: 12px; }
.of-task-cd-sep { font-size: 1.1rem; margin-bottom: 0.7rem; }
}
html[data-of-theme="light"] .of-task-empty {
background:
radial-gradient(90% 80% at 12% 0%, rgba(56, 189, 248, 0.14), transparent 55%),
linear-gradient(165deg, #f8fafc, #e0f2fe 60%, #f1f5f9);
border-color: rgba(14, 165, 233, 0.28);
}
html[data-of-theme="light"] .of-task-empty-card h3 { color: #0f172a; }
html[data-of-theme="light"] .of-task-empty-lead,
html[data-of-theme="light"] .of-task-empty-foot { color: #334155; }
html[data-of-theme="light"] .of-task-cd-unit {
background: #fff;
border-color: rgba(14, 165, 233, 0.28);
}
html[data-of-theme="light"] .of-task-cd-unit strong { color: #0f172a; text-shadow: none; }
.of-task-stage.is-veiled .task-grid {
opacity: 0.38;
filter: saturate(0.7);
pointer-events: none;
user-select: none;
}
.of-task-veil {
position: absolute;
inset: 0;
z-index: 4;
display: grid;
place-items: center;
padding: 1.25rem;
border-radius: 22px;
background:
radial-gradient(70% 80% at 50% 30%, rgba(14, 165, 233, 0.16), transparent 62%),
linear-gradient(180deg, rgba(2, 10, 22, 0.2), rgba(2, 10, 22, 0.55));
}
.of-task-veil[hidden] {
display: none !important;
}
.of-task-veil-card {
width: min(420px, 100%);
padding: 1.4rem 1.25rem 1.2rem;
text-align: center;
border-radius: 22px;
border: 1px solid rgba(186, 230, 253, 0.28);
background: linear-gradient(165deg, rgba(8, 40, 72, 0.92), rgba(2, 12, 24, 0.96));
box-shadow: 0 24px 50px rgba(2, 8, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.of-task-veil-card p {
margin: 0.35rem 0 0;
color: rgba(224, 242, 254, 0.88);
}
.of-task-veil-amount {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.4rem;
margin: 0.7rem 0 1rem;
}
.of-task-veil-amount strong {
font-size: clamp(2rem, 5vw, 2.8rem);
letter-spacing: -0.04em;
color: #f0f9ff;
text-shadow: 0 0 24px rgba(56, 189, 248, 0.45);
}
.of-task-veil-amount span {
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.14em;
color: #7dd3fc;
}
.of-task-veil-btn {
min-width: 200px;
animation: ofVeilPulse 1.8s ease-in-out infinite;
}
@keyframes ofVeilPulse {
0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.35); }
50% { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(14, 165, 233, 0.35); }
}
html[data-of-theme="light"] .of-task-veil-card {
background: linear-gradient(165deg, #f8fafc, #fff);
border-color: rgba(14, 165, 233, 0.22);
}
html[data-of-theme="light"] .of-task-veil-card p,
html[data-of-theme="light"] .of-task-veil-amount strong {
color: #0f172a;
}
.of-market-stage {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.85rem;
}
.of-market-view {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
text-align: left;
}
.of-market-head,
#view-marketplace .of-page-head {
text-align: left;
align-self: stretch;
width: 100%;
margin-bottom: 1rem;
}
.of-market-head h2 { margin: 0 0 0.35rem; }
.of-market-head p {
margin: 0;
max-width: 36rem;
}
.of-market-goal {
position: relative;
overflow: hidden;
width: 100%;
box-sizing: border-box;
margin: 0 0 1rem;
padding: 1.2rem 1.1rem 1.15rem;
border-radius: 22px;
border: 1px solid rgba(125, 211, 252, 0.3);
background:
radial-gradient(90% 80% at 8% 0%, rgba(56, 189, 248, 0.2), transparent 55%),
radial-gradient(70% 70% at 100% 100%, rgba(34, 211, 238, 0.12), transparent 52%),
linear-gradient(165deg, rgba(6, 28, 52, 0.96), rgba(2, 10, 22, 0.98));
box-shadow:
0 0 0 1px rgba(56, 189, 248, 0.06),
0 24px 55px rgba(0, 0, 0, 0.35);
}
.of-market-goal[hidden] { display: none !important; }
.of-market-goal.is-unlocked {
border-color: rgba(52, 211, 153, 0.4);
background:
radial-gradient(90% 80% at 8% 0%, rgba(52, 211, 153, 0.18), transparent 55%),
linear-gradient(165deg, rgba(6, 40, 32, 0.95), rgba(2, 14, 18, 0.98));
}
.of-market-goal-glow {
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.05) 48%, transparent 66%);
background-size: 220% 100%;
animation: ofWdShine 5.5s ease-in-out infinite;
pointer-events: none;
}
.of-market-goal-orb {
position: absolute;
border-radius: 50%;
filter: blur(28px);
pointer-events: none;
animation: ofWdOrb 8s ease-in-out infinite;
}
.of-market-goal-orb-a {
width: 150px;
height: 150px;
top: -50px;
right: -34px;
background: rgba(56, 189, 248, 0.3);
}
.of-market-goal-orb-b {
width: 120px;
height: 120px;
bottom: -42px;
left: -28px;
background: rgba(34, 211, 238, 0.16);
animation-delay: -2.2s;
}
.of-market-goal.is-unlocked .of-market-goal-orb-a { background: rgba(52, 211, 153, 0.28); }
.of-market-goal-inner {
position: relative;
z-index: 1;
text-align: left;
}
.of-market-goal-kicker {
margin: 0 0 0.35rem;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-market-goal.is-unlocked .of-market-goal-kicker { color: #6ee7b7; }
.of-market-goal-inner h3 {
margin: 0 0 0.4rem;
font-size: clamp(1.12rem, 4.4vw, 1.4rem);
font-weight: 850;
letter-spacing: -0.03em;
color: #f8fafc;
line-height: 1.25;
}
.of-market-goal-lead {
margin: 0 0 1rem;
max-width: 34rem;
font-size: 0.86rem;
line-height: 1.45;
color: rgba(186, 230, 253, 0.86);
}
.of-market-goal-stats {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 0.65rem;
margin-bottom: 0.85rem;
}
.of-market-goal-now,
.of-market-goal-target {
padding: 0.75rem 0.85rem;
border-radius: 14px;
border: 1px solid rgba(125, 211, 252, 0.28);
background: rgba(2, 12, 24, 0.55);
}
.of-market-goal-now em,
.of-market-goal-target em {
display: block;
margin-bottom: 0.25rem;
font-style: normal;
font-size: 0.66rem;
font-weight: 750;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-market-goal-now strong,
.of-market-goal-target strong {
font-size: clamp(1.35rem, 5.5vw, 1.85rem);
font-weight: 850;
letter-spacing: -0.03em;
color: #f0f9ff;
font-variant-numeric: tabular-nums;
line-height: 1;
text-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
}
.of-market-goal-now strong.is-tick {
animation: ofTaskCdTick 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-market-goal-bar {
position: relative;
height: 12px;
border-radius: 999px;
overflow: hidden;
background: rgba(148, 163, 184, 0.18);
box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.12);
}
.of-market-goal-bar span {
display: block;
height: 100%;
width: 0%;
border-radius: inherit;
background: linear-gradient(90deg, #38bdf8, #068ed1 45%, #22d3ee 80%, #7dd3fc);
background-size: 200% 100%;
box-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
animation: ofRemainShine 3.2s ease-in-out infinite;
}
.of-market-goal.is-unlocked .of-market-goal-bar span {
background: linear-gradient(90deg, #34d399, #10b981 50%, #6ee7b7);
box-shadow: 0 0 16px rgba(52, 211, 153, 0.45);
}
.of-market-goal-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: 0.55rem;
font-size: 0.78rem;
font-weight: 700;
color: rgba(186, 230, 253, 0.9);
}
.of-market-goal-meta #ofMarketGoalPct {
color: #7dd3fc;
font-variant-numeric: tabular-nums;
}
.of-market-open[hidden] { display: none !important; }
@media (max-width: 420px) {
.of-market-goal { padding: 1rem 0.85rem 1.05rem; border-radius: 18px; }
.of-market-goal-stats { gap: 0.5rem; }
.of-market-goal-now,
.of-market-goal-target { padding: 0.65rem 0.7rem; }
}
html[data-of-theme="light"] .of-market-goal {
background:
radial-gradient(90% 80% at 8% 0%, rgba(56, 189, 248, 0.14), transparent 55%),
linear-gradient(165deg, #f8fafc, #e0f2fe 55%, #f1f5f9);
border-color: rgba(14, 165, 233, 0.28);
}
html[data-of-theme="light"] .of-market-goal-inner h3 { color: #0f172a; }
html[data-of-theme="light"] .of-market-goal-lead,
html[data-of-theme="light"] .of-market-goal-meta { color: #334155; }
html[data-of-theme="light"] .of-market-goal-now,
html[data-of-theme="light"] .of-market-goal-target {
background: #fff;
border-color: rgba(14, 165, 233, 0.28);
}
html[data-of-theme="light"] .of-market-goal-now strong,
html[data-of-theme="light"] .of-market-goal-target strong {
color: #0f172a;
text-shadow: none;
}
.of-market-stage[hidden] {
display: none !important;
}
.of-market-card {
position: relative;
padding: 1.15rem 1.05rem 1rem;
border-radius: 18px;
border: 1px solid rgba(125, 211, 252, 0.22);
background:
linear-gradient(165deg, rgba(8, 47, 73, 0.7), rgba(2, 12, 24, 0.92)),
radial-gradient(80% 80% at 100% 0%, rgba(56, 189, 248, 0.16), transparent 55%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.of-market-card h3 {
margin: 0.7rem 0 0.35rem;
font-size: 1.05rem;
color: #f0f9ff;
}
.of-market-card p {
margin: 0 0 1rem;
color: rgba(186, 230, 253, 0.82);
font-size: 0.84rem;
line-height: 1.45;
}
html[data-of-theme="light"] .task-card.is-locked,
html[data-of-theme="light"] .of-market-card {
background: linear-gradient(165deg, #f8fafc, #fff);
border-color: rgba(14, 165, 233, 0.22);
}
html[data-of-theme="light"] .of-market-card h3 {
color: #0f172a;
}
html[data-of-theme="light"] .of-market-card p,
html[data-of-theme="light"] .of-need-badge {
color: #0f172a;
}
@media (max-width: 820px) {
.of-market-stage {
grid-template-columns: 1fr;
}
}
.earn-threshold {
margin: 0.85rem 0 0;
font-size: 0.78rem;
line-height: 1.4;
color: rgba(186, 230, 253, 0.9);
}
.of-ledger .of-item-val.is-neg {
color: #fb7185;
}
.of-tree-stage {
margin-top: 1.15rem;
padding: 1.15rem 1.1rem 1.35rem;
border-radius: 20px;
border: 1px solid rgba(125, 211, 252, 0.18);
background:
radial-gradient(80% 70% at 50% 0%, rgba(14, 165, 233, 0.14), transparent 60%),
linear-gradient(180deg, rgba(8, 28, 48, 0.92), rgba(4, 14, 28, 0.96));
box-shadow: 0 22px 48px rgba(2, 10, 24, 0.4);
overflow: hidden;
}
.of-tree-stage.is-locked {
opacity: 0.55;
filter: saturate(0.6);
}
.of-tree-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 1rem;
}
.of-tree-tools {
display: flex;
align-items: center;
gap: 0.65rem;
}
.of-tree-zoom {
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.15rem;
border-radius: 999px;
border: 1px solid var(--of-border);
background: var(--of-surface-2);
}
.of-zoom-btn {
width: 28px;
height: 28px;
border: 0;
border-radius: 50%;
color: var(--of-fg);
background: transparent;
font: inherit;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
}
.of-zoom-btn:hover { background: rgba(56, 189, 248, 0.16); }
.of-zoom-val {
min-width: 2.6rem;
text-align: center;
font-size: 0.68rem;
font-weight: 800;
color: var(--of-fg-muted);
}
.of-tree-head h3 {
margin: 0;
font-size: 1rem;
font-weight: 800;
color: var(--of-fg, #f0f9ff);
}
.of-tree-meta {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-tree-canvas {
position: relative;
overflow: auto;
padding: 0.75rem 0.5rem 1.25rem;
min-height: min(72vh, 680px);
max-height: min(90vh, 980px);
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.of-tree-you {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
margin: 0 auto 1.25rem;
text-align: center;
}
.of-tree-you strong {
font-size: 0.95rem;
color: #f0f9ff;
}
.of-tree-you em {
font-style: normal;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #38bdf8;
}
.of-tree-you.is-connected {
position: relative;
}
.of-tree-you.is-connected::after {
content: "";
position: absolute;
left: 50%;
bottom: -1.15rem;
width: 2px;
height: 1.15rem;
transform: translateX(-50%);
background: linear-gradient(180deg, rgba(56, 189, 248, 0.75), rgba(56, 189, 248, 0.15));
}
.of-tree-av {
width: 44px;
height: 44px;
border-radius: 14px;
display: grid;
place-items: center;
font-size: 0.78rem;
font-weight: 800;
color: #e0f2fe;
background: linear-gradient(145deg, #0369a1, #0c4a6e);
border: 1px solid rgba(125, 211, 252, 0.4);
box-shadow: 0 8px 20px rgba(3, 105, 161, 0.35);
}
.of-tree-av.is-you {
width: 56px;
height: 56px;
font-size: 0.95rem;
border-radius: 18px;
background: linear-gradient(145deg, #38bdf8, #0284c7 55%, #075985);
box-shadow:
0 0 0 4px rgba(14, 165, 233, 0.18),
0 12px 28px rgba(14, 165, 233, 0.4);
}
.of-tree-empty {
text-align: center;
padding: 0.5rem 0.75rem 1rem;
color: rgba(186, 230, 253, 0.85);
}
.of-tree-empty > strong {
display: block;
margin-top: 0.85rem;
color: #f0f9ff;
}
.of-tree-empty p {
margin: 0.35rem auto 0;
max-width: 36ch;
font-size: 0.82rem;
line-height: 1.45;
}
.of-tree-root,
.of-tree-branch {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
gap: 1.15rem;
position: relative;
}
.of-tree-branch {
margin-top: 1.35rem;
padding-top: 0.15rem;
}
.of-tree-node {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.of-tree-root > .of-tree-node::before,
.of-tree-branch > .of-tree-node::before {
content: "";
position: absolute;
top: -1.15rem;
left: 50%;
width: 2px;
height: 1.15rem;
transform: translateX(-50%);
background: linear-gradient(180deg, rgba(56, 189, 248, 0.15), rgba(56, 189, 248, 0.7));
}
.of-tree-branch::before {
content: "";
position: absolute;
top: 0;
left: 12%;
right: 12%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.45), transparent);
}
.of-tree-card {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.55rem;
min-width: 168px;
max-width: 210px;
padding: 0.55rem 0.65rem;
border-radius: 14px;
border: 1px solid rgba(125, 211, 252, 0.22);
background: linear-gradient(160deg, rgba(12, 74, 110, 0.55), rgba(8, 30, 52, 0.85));
box-shadow: 0 10px 24px rgba(2, 12, 28, 0.35);
transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.of-tree-card:hover {
transform: translateY(-3px);
border-color: rgba(125, 211, 252, 0.55);
box-shadow: 0 14px 32px rgba(14, 165, 233, 0.22);
}
.of-tree-ring {
position: absolute;
inset: -1px;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(186, 230, 253, 0.06);
}
.of-tree-info {
min-width: 0;
}
.of-tree-info strong {
display: block;
font-size: 0.8rem;
font-weight: 750;
color: #f0f9ff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.of-tree-info em {
display: block;
margin-top: 0.12rem;
font-style: normal;
font-size: 0.65rem;
color: rgba(125, 211, 252, 0.9);
white-space: nowrap;
}
.of-tree-live {
width: 8px;
height: 8px;
border-radius: 50%;
background: #34d399;
box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
}
.of-pending-lead {
margin: 0 0 0.75rem;
}
@keyframes ofTreePulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.06); opacity: 0.85; }
}
@keyframes ofTreeNodeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
html[data-of-theme="light"] .of-pos-card {
background:
linear-gradient(135deg, #eff6ff, #e0f2fe 55%, #f8fafc),
radial-gradient(120% 160% at 0% 0%, rgba(14, 165, 233, 0.18), transparent 55%);
border-color: rgba(14, 165, 233, 0.28);
box-shadow: 0 14px 32px rgba(14, 116, 144, 0.12);
}
html[data-of-theme="light"] .of-pos-card-copy strong {
color: #0c4a6e;
}
html[data-of-theme="light"] .of-pos-card-copy p {
color: #334155;
}
html[data-of-theme="light"] .of-lock-banner {
background: linear-gradient(120deg, #fffbeb, #fef3c7);
color: #92400e;
border-color: rgba(245, 158, 11, 0.35);
}
html[data-of-theme="light"] .of-tree-stage {
background:
radial-gradient(80% 70% at 50% 0%, rgba(14, 165, 233, 0.1), transparent 60%),
linear-gradient(180deg, #f8fafc, #eff6ff);
border-color: rgba(14, 165, 233, 0.2);
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}
html[data-of-theme="light"] .of-tree-head h3,
html[data-of-theme="light"] .of-tree-you strong,
html[data-of-theme="light"] .of-tree-info strong,
html[data-of-theme="light"] .of-tree-empty > strong {
color: #0f172a;
}
html[data-of-theme="light"] .of-tree-card {
background: linear-gradient(160deg, #ffffff, #f0f9ff);
border-color: rgba(14, 165, 233, 0.22);
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}
@media (max-width: 820px) {
.of-pos-card {
grid-template-columns: auto 1fr;
}
.of-pos-cta {
grid-column: 1 / -1;
width: 100%;
}
.of-tree-root,
.of-tree-branch {
gap: 0.75rem;
}
.of-tree-card {
min-width: 148px;
}
}
/* —— Billetera premium —— */
.of-wallet {
position: relative;
}
.of-wallet-kicker {
margin: 0 0 0.2rem;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-wallet-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
align-items: stretch;
margin-bottom: 0.85rem;
}
.of-wallet-card,
.of-wallet-band,
.of-wallet-history {
border-radius: 18px;
border: 1px solid rgba(125, 211, 252, 0.16);
background: linear-gradient(180deg, rgba(8, 24, 42, 0.78), rgba(3, 12, 24, 0.92));
}
.of-wallet-card {
display: flex;
flex-direction: column;
min-height: 100%;
padding: 0.95rem 1rem 1rem;
}
.of-wallet-amount {
display: block;
margin: 0.15rem 0 0.75rem;
font-size: clamp(1.45rem, 2.4vw, 1.85rem);
font-weight: 800;
letter-spacing: -0.03em;
color: #6ee7b7;
}
.of-wallet-chips {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
margin-top: auto;
}
.of-wchip {
padding: 0.62rem 0.7rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(2, 12, 28, 0.35);
}
.of-wchip em {
display: block;
font-style: normal;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.of-wchip b {
display: block;
margin-top: 0.2rem;
font-size: 1.05rem;
}
.of-wchip.is-success {
border-color: rgba(52, 211, 153, 0.42);
background: linear-gradient(155deg, rgba(16, 185, 129, 0.18), rgba(4, 20, 16, 0.55));
}
.of-wchip.is-success em, .of-wchip.is-success b { color: #6ee7b7; }
.of-wchip.is-warn {
border-color: rgba(251, 146, 60, 0.42);
background: linear-gradient(155deg, rgba(251, 146, 60, 0.16), rgba(4, 14, 28, 0.55));
}
.of-wchip.is-warn em, .of-wchip.is-warn b { color: #fb923c; }
.of-wchip.is-frozen {
border-color: rgba(125, 211, 252, 0.48);
background: linear-gradient(155deg, rgba(56, 189, 248, 0.18), rgba(4, 14, 28, 0.55));
}
.of-wchip.is-frozen em, .of-wchip.is-frozen b { color: #7dd3fc; }
.of-wchip.is-earn {
border-color: rgba(125, 211, 252, 0.28);
background: linear-gradient(155deg, rgba(14, 165, 233, 0.14), rgba(4, 14, 28, 0.55));
}
.of-wchip.is-earn em, .of-wchip.is-earn b { color: #e0f2fe; }
.of-wchip.is-hidden-money b { letter-spacing: 0.12em; }
.of-wallet-goals {
position: relative;
overflow: visible;
justify-content: space-between;
}
.of-wallet-goals .of-goal-stack { margin: 0; }
.of-wallet-band,
.of-wallet-history {
width: 100%;
margin-bottom: 0.85rem;
padding: 0.95rem 1rem 1rem;
}
.of-band-grid {
display: grid;
grid-template-columns: 1.4fr 0.8fr;
gap: 1rem;
align-items: center;
}
.of-push-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
min-height: 92px;
padding: 0.85rem 0.9rem;
border-radius: 16px;
border: 1px solid rgba(125, 211, 252, 0.2);
background: rgba(2, 12, 28, 0.35);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.of-push-copy strong { display: block; color: #f8fafc; }
.of-push-copy em {
display: block;
margin-top: 0.25rem;
font-style: normal;
font-size: 0.75rem;
line-height: 1.35;
color: rgba(186, 230, 253, 0.82);
}
.of-push-switch {
position: relative;
flex-shrink: 0;
width: 46px;
height: 26px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.35);
transition: background 0.2s ease;
}
.of-push-switch::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-push-toggle.is-on {
border-color: rgba(52, 211, 153, 0.45);
}
.of-push-toggle.is-on .of-push-switch { background: #10b981; }
.of-push-toggle.is-on .of-push-switch::after { transform: translateX(20px); }
html[data-of-theme="light"] .of-wallet-card,
html[data-of-theme="light"] .of-wallet-band,
html[data-of-theme="light"] .of-wallet-history,
html[data-of-theme="light"] .of-push-toggle {
background: #fff;
border-color: rgba(14, 165, 233, 0.18);
}
html[data-of-theme="light"] .of-push-copy strong { color: #0f172a; }
@media (max-width: 900px) {
.of-wallet-pair,
.of-band-grid { grid-template-columns: 1fr; }
}
.of-wallet-aurora,
.of-wallet-grid {
pointer-events: none;
position: absolute;
inset: -8% -4% auto;
height: 70%;
z-index: 0;
}
.of-wallet-aurora {
background:
radial-gradient(40% 55% at 18% 30%, rgba(56, 189, 248, 0.28), transparent 70%),
radial-gradient(36% 50% at 78% 20%, rgba(52, 211, 153, 0.16), transparent 68%);
filter: blur(8px);
animation: ofAurora 9s ease-in-out infinite;
}
.of-wallet-grid {
background-image:
linear-gradient(rgba(125, 211, 252, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(125, 211, 252, 0.05) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: linear-gradient(180deg, #000, transparent 80%);
animation: ofGridDrift 18s linear infinite;
}
.of-wallet-hero,
.of-wallet-actions,
.of-wallet-history {
position: relative;
z-index: 1;
}
.of-wallet-hero {
overflow: hidden;
padding: 1.35rem 1.35rem 1.15rem;
border-radius: 22px;
border: 1px solid rgba(125, 211, 252, 0.22);
background:
linear-gradient(165deg, rgba(8, 40, 68, 0.72), rgba(3, 12, 24, 0.92));
box-shadow:
0 24px 50px rgba(2, 10, 24, 0.45),
inset 0 1px 0 rgba(186, 230, 253, 0.12);
animation: ofWalletIn 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-wallet-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.07), transparent 62%);
transform: translateX(-120%);
animation: ofSheen 4.8s ease-in-out infinite;
pointer-events: none;
}
.of-wallet-orb {
position: relative;
width: 64px;
height: 64px;
margin-bottom: 0.85rem;
display: grid;
place-items: center;
color: #e0f2fe;
border-radius: 20px;
background: linear-gradient(145deg, rgba(14, 165, 233, 0.45), rgba(2, 132, 199, 0.15));
box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.35), 0 12px 30px rgba(14, 165, 233, 0.28);
}
.of-wallet-orb svg {
width: 28px;
height: 28px;
position: relative;
z-index: 1;
}
.of-wallet-ring {
position: absolute;
inset: -8px;
border-radius: 24px;
border: 1px solid rgba(125, 211, 252, 0.45);
animation: ofRing 2.8s ease-out infinite;
}
.of-wallet-ring.is-delay { animation-delay: 1.4s; }
.of-wallet-avail-label {
margin: 0;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7dd3fc;
}
.earn-hero-card > .of-wallet-amount,
.of-wallet-amount {
display: block;
margin: 0.2rem 0 0.35rem;
font-size: clamp(2.1rem, 5vw, 3.1rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
color: #f8fafc;
animation: ofAmountIn 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-wallet-amount small {
font-size: 0.42em;
letter-spacing: 0.08em;
margin-left: 0.2rem;
color: #7dd3fc;
}
.of-money-num {
display: inline-block;
font-variant-numeric: tabular-nums;
min-width: 0.6em;
}
.of-wallet-amount.is-tick-up,
.of-wallet-amount.is-tick-down,
.of-wchip b.is-tick-up,
.of-wchip b.is-tick-down,
[data-kpi-money] strong.is-tick-up,
[data-kpi-money] strong.is-tick-down {
transition: color 0.15s ease, text-shadow 0.15s ease, transform 0.15s ease;
}
.of-wallet-amount.is-ticking .of-money-num,
.of-wchip b.is-ticking .of-money-num,
[data-kpi-money] strong.is-ticking .of-money-num {
animation: ofMoneyTickPulse 0.45s ease-out;
}
.of-wallet-amount.is-tick-up,
.of-wchip b.is-tick-up,
[data-kpi-money] strong.is-tick-up,
.of-kpi-val.is-tick-up {
color: #4ade80 !important;
text-shadow: 0 0 22px rgba(74, 222, 128, 0.55);
}
.of-wallet-amount.is-tick-down,
.of-wchip b.is-tick-down,
[data-kpi-money] strong.is-tick-down,
.of-kpi-val.is-tick-down {
color: #fb7185 !important;
text-shadow: 0 0 22px rgba(251, 113, 133, 0.55);
}
.of-wchip.is-success b.is-tick-up,
.of-wchip.is-warn b.is-tick-up,
.of-wchip.is-frozen b.is-tick-up,
.of-wchip.is-earn b.is-tick-up {
color: #4ade80 !important;
}
.of-wchip.is-success b.is-tick-down,
.of-wchip.is-warn b.is-tick-down,
.of-wchip.is-frozen b.is-tick-down,
.of-wchip.is-earn b.is-tick-down {
color: #fb7185 !important;
}
.of-wallet-amount.is-tick-up small,
.of-wallet-amount.is-tick-down small {
color: inherit;
opacity: 0.85;
}
html[data-of-theme="light"] .of-wallet-amount.is-tick-up,
html[data-of-theme="light"] .of-wchip b.is-tick-up,
html[data-of-theme="light"] [data-kpi-money] strong.is-tick-up {
color: #059669 !important;
}
html[data-of-theme="light"] .of-wallet-amount.is-tick-down,
html[data-of-theme="light"] .of-wchip b.is-tick-down,
html[data-of-theme="light"] [data-kpi-money] strong.is-tick-down {
color: #e11d48 !important;
}
@keyframes ofMoneyTickPulse {
0% { transform: translateY(0.35em) scale(0.96); opacity: 0.55; }
55% { transform: translateY(-0.08em) scale(1.04); opacity: 1; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.of-wallet-amount.is-tick-up,
.of-wallet-amount.is-tick-down,
.of-wchip b.is-tick-up,
.of-wchip b.is-tick-down,
.of-wallet-amount.is-ticking .of-money-num,
.of-wchip b.is-ticking .of-money-num {
animation: none !important;
text-shadow: none;
}
}
.of-wallet-total-line {
margin: 0 0 1rem;
font-size: 0.82rem;
color: rgba(186, 230, 253, 0.82);
}
.of-wallet-total-line b { color: #f8fafc; }
.of-wallet-chips {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.55rem;
}
.of-wallet-chips > div {
padding: 0.65rem 0.7rem;
border-radius: 14px;
border: 1px solid rgba(125, 211, 252, 0.14);
background: rgba(2, 12, 28, 0.4);
animation: ofChipIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.of-wallet-chips > div:nth-child(2) { animation-delay: 0.06s; }
.of-wallet-chips > div:nth-child(3) { animation-delay: 0.12s; }
.of-wallet-chips > div:nth-child(4) { animation-delay: 0.18s; }
.of-wallet-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1rem;
border-radius: 22px;
border: 1px solid rgba(125, 211, 252, 0.16);
background: linear-gradient(180deg, rgba(8, 24, 42, 0.82), rgba(3, 12, 24, 0.92));
animation: ofWalletIn 0.75s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.of-wallet-history {
padding: 1rem 1.05rem 0.7rem;
border-radius: 22px;
border: 1px solid rgba(125, 211, 252, 0.16);
background: linear-gradient(180deg, rgba(8, 24, 42, 0.7), rgba(3, 12, 24, 0.88));
animation: ofWalletIn 0.8s 0.14s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.of-wallet-history-lead {
margin: 0.2rem 0 0;
font-size: 0.78rem;
color: rgba(148, 163, 184, 0.9);
}
.of-wallet-history-head {
align-items: flex-start;
gap: 0.65rem;
}
.of-ledger-more {
display: inline-flex;
align-items: center;
gap: 0.4rem;
flex: 0 0 auto;
width: auto;
max-width: 100%;
border: 1px solid rgba(125, 211, 252, 0.28);
background: rgba(14, 165, 233, 0.12);
color: #e0f2fe;
border-radius: 999px;
padding: 0.4rem 0.55rem 0.4rem 0.75rem;
font: inherit;
font-size: 0.74rem;
font-weight: 750;
white-space: nowrap;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.of-ledger-more-txt {
overflow: hidden;
text-overflow: ellipsis;
}
.of-ledger-more b {
min-width: 1.35rem;
padding: 0.1rem 0.38rem;
border-radius: 999px;
background: #0284c7;
color: #fff;
font-size: 0.68rem;
text-align: center;
}
.of-ledger-more:hover {
transform: translateY(-1px);
border-color: rgba(125, 211, 252, 0.55);
background: rgba(14, 165, 233, 0.22);
}
@media (max-width: 640px) {
.of-wallet-history-head {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.of-wallet-history-head > div {
flex: 1 1 auto;
min-width: 0;
}
.of-wallet-history-lead {
display: none;
}
.of-ledger-more {
margin-left: auto;
padding: 0.38rem 0.5rem 0.38rem 0.65rem;
font-size: 0.7rem;
}
.of-payout-modern {
padding: 1.05rem 0.95rem 1rem;
border-radius: 20px;
}
.of-payout-modern-top {
flex-wrap: wrap;
}
.of-payout-modern-top .of-badge {
margin-left: 0;
}
.of-payout-sealed-chip strong {
font-size: 0.84rem;
}
}
.of-ledger .of-led-row,
.of-ledger-full .of-led-row {
animation: ofLedIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: calc(var(--i, 0) * 45ms);
}
.of-led-mark {
width: 8px;
height: 8px;
border-radius: 50%;
background: #34d399;
box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.15);
flex-shrink: 0;
}
.of-led-mark.is-neg {
background: #fb7185;
box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.15);
}
.of-goal-bar span {
position: relative;
overflow: hidden;
}
.of-goal-bar span::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
transform: translateX(-120%);
animation: ofBarShine 2.2s ease-in-out infinite;
}
.of-ledger-modal {
position: fixed;
inset: 0;
z-index: 9500;
display: grid;
place-items: center;
padding: 1.25rem;
}
.of-ledger-modal[hidden] { display: none !important; }
.of-ledger-backdrop {
position: absolute;
inset: 0;
border: 0;
background: rgba(2, 8, 18, 0.62);
backdrop-filter: blur(10px);
cursor: pointer;
opacity: 0;
transition: opacity 0.28s ease;
}
.of-ledger-sheet {
position: relative;
width: min(680px, 100%);
max-height: min(78vh, 760px);
display: flex;
flex-direction: column;
border-radius: 22px;
border: 1px solid rgba(125, 211, 252, 0.22);
background: linear-gradient(180deg, rgba(8, 28, 48, 0.96), rgba(3, 12, 24, 0.98));
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
overflow: hidden;
transform: translateY(18px) scale(0.97);
opacity: 0;
transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}
.of-ledger-sheet-glow {
position: absolute;
inset: -40% auto auto -20%;
width: 280px;
height: 180px;
background: radial-gradient(circle, rgba(56, 189, 248, 0.28), transparent 68%);
pointer-events: none;
}
.of-ledger-modal.is-open .of-ledger-backdrop { opacity: 1; }
.of-ledger-modal.is-open .of-ledger-sheet {
transform: none;
opacity: 1;
}
.of-ledger-sheet-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.15rem 0.8rem;
}
.of-ledger-sheet-head h3 {
margin: 0;
font-size: 1.15rem;
color: #f8fafc;
}
.of-ledger-close {
width: 38px;
height: 38px;
border: 1px solid rgba(125, 211, 252, 0.2);
border-radius: 12px;
background: rgba(15, 23, 42, 0.4);
color: #e0f2fe;
cursor: pointer;
}
.of-ledger-close svg { width: 16px; height: 16px; }
.of-ledger-full {
overflow: auto;
padding: 0 1rem 1rem;
margin: 0;
}
body.of-modal-open {
overflow: hidden !important;
overscroll-behavior: none;
touch-action: none;
}
body.of-modal-open.of-wd-scroll-lock {
position: fixed;
width: 100%;
left: 0;
right: 0;
}
/* Withdraw request modal */
.of-wd-modal {
position: fixed;
inset: 0;
z-index: 9600;
display: grid;
place-items: center;
padding:
max(0.75rem, env(safe-area-inset-top))
max(0.75rem, env(safe-area-inset-right))
max(0.75rem, env(safe-area-inset-bottom))
max(0.75rem, env(safe-area-inset-left));
overflow: hidden;
box-sizing: border-box;
overscroll-behavior: none;
touch-action: none;
}
.of-wd-modal[hidden] { display: none !important; }
.of-wd-backdrop {
position: absolute;
inset: 0;
border: 0;
background:
radial-gradient(ellipse 70% 55% at 50% 42%, rgba(8, 47, 73, 0.35), transparent 70%),
rgba(1, 6, 14, 0.84);
backdrop-filter: blur(20px) saturate(1.25);
-webkit-backdrop-filter: blur(20px) saturate(1.25);
cursor: pointer;
opacity: 0;
transition: opacity 0.35s ease;
touch-action: none;
}
.of-wd-sheet {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: min(400px, calc(100vw - 1.5rem));
max-width: 100%;
max-height: min(86dvh, 640px);
margin: 0 auto;
overflow: hidden;
overscroll-behavior: contain;
box-sizing: border-box;
border-radius: 22px;
border: 1px solid rgba(125, 211, 252, 0.3);
background:
linear-gradient(165deg, rgba(12, 42, 72, 0.99), rgba(3, 12, 26, 0.995) 52%, rgba(2, 18, 36, 1));
box-shadow:
0 0 0 1px rgba(56, 189, 248, 0.1),
0 28px 90px rgba(0, 0, 0, 0.58),
0 0 70px rgba(6, 142, 209, 0.2);
transform: translate3d(0, 18px, 0) scale(0.94);
opacity: 0;
transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
touch-action: manipulation;
}
.of-wd-modal.is-open .of-wd-backdrop { opacity: 1; }
.of-wd-modal.is-open .of-wd-sheet {
transform: none;
opacity: 1;
}
.of-wd-modal.is-open.is-pop .of-wd-sheet {
animation: ofWdSheetPop 0.58s cubic-bezier(0.16, 1, 0.3, 1);
}
.of-wd-orb {
position: absolute;
border-radius: 50%;
filter: blur(28px);
pointer-events: none;
animation: ofWdOrb 7s ease-in-out infinite;
}
.of-wd-orb-a {
width: 150px;
height: 150px;
top: -52px;
right: -36px;
background: rgba(56, 189, 248, 0.32);
}
.of-wd-orb-b {
width: 120px;
height: 120px;
bottom: -44px;
left: -28px;
background: rgba(52, 211, 153, 0.2);
animation-delay: -2.5s;
}
.of-wd-shine {
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.05) 48%, transparent 62%);
background-size: 220% 100%;
animation: ofWdShine 5.5s ease-in-out infinite;
pointer-events: none;
}
.of-wd-head {
position: relative;
z-index: 1;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
padding: 0.95rem 1rem 0.25rem;
min-width: 0;
}
.of-wd-kicker {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
font-size: 0.68rem;
font-weight: 750;
letter-spacing: 0.11em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-wd-kicker em {
font-style: normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.of-wd-pulse {
flex: 0 0 auto;
width: 7px;
height: 7px;
border-radius: 50%;
background: #38bdf8;
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.55);
animation: ofRemainPulse 1.5s ease-out infinite;
}
.of-wd-close {
flex: 0 0 auto;
width: 36px;
height: 36px;
display: grid;
place-items: center;
border: 1px solid rgba(125, 211, 252, 0.22);
border-radius: 11px;
background: rgba(15, 23, 42, 0.45);
color: #e0f2fe;
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.of-wd-close:hover { transform: rotate(90deg); border-color: rgba(125, 211, 252, 0.5); }
.of-wd-close svg { width: 15px; height: 15px; }
.of-wd-body {
position: relative;
z-index: 1;
flex: 1 1 auto;
min-width: 0;
min-height: 0;
overflow: hidden;
padding: 0.2rem 1.05rem 0.35rem;
}
.of-wd-body h3 {
margin: 0 0 0.3rem;
font-size: clamp(1.08rem, 4.4vw, 1.28rem);
font-weight: 800;
letter-spacing: -0.03em;
color: #f8fafc;
line-height: 1.2;
}
.of-wd-modal.is-open .of-wd-body h3 {
animation: ofAmountIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-wd-lead {
margin: 0 0 0.85rem;
font-size: 0.82rem;
line-height: 1.4;
color: rgba(186, 230, 253, 0.8);
}
.of-wd-avail {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
padding: 0.8rem 0.9rem;
margin-bottom: 0.85rem;
border-radius: 14px;
border: 1px solid rgba(52, 211, 153, 0.28);
background:
radial-gradient(ellipse 80% 120% at 100% 0%, rgba(52, 211, 153, 0.18), transparent 60%),
rgba(6, 40, 32, 0.45);
min-width: 0;
}
.of-wd-avail-copy {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
width: 100%;
}
.of-wd-modal.is-open .of-wd-avail {
animation: ofWalletIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}
.of-wd-avail span {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #6ee7b7;
}
.of-wd-avail strong {
font-size: clamp(1.05rem, 4.2vw, 1.22rem);
font-weight: 800;
letter-spacing: -0.02em;
color: #ecfdf5;
font-variant-numeric: tabular-nums;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.of-wd-label {
display: block;
margin-bottom: 0.35rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-wd-input-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 0.35rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0.28rem 0.32rem 0.28rem 0.75rem;
border-radius: 14px;
border: 1px solid rgba(125, 211, 252, 0.28);
background: rgba(2, 12, 24, 0.72);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
overflow: hidden;
}
.of-wd-input-row:focus-within {
border-color: rgba(56, 189, 248, 0.55);
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.14);
}
.of-wd-input-row input {
width: 100%;
min-width: 0;
max-width: 100%;
border: 0;
background: transparent;
color: #f8fafc;
font-size: clamp(1.15rem, 4.8vw, 1.3rem);
font-weight: 750;
letter-spacing: -0.02em;
outline: none;
font-variant-numeric: tabular-nums;
appearance: textfield;
-moz-appearance: textfield;
-webkit-appearance: none;
}
.of-wd-input-row input::-webkit-outer-spin-button,
.of-wd-input-row input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
display: none;
}
.of-wd-input-row input.is-max-flash {
animation: ofWdMaxFlash 0.45s ease;
}
.of-wd-unit {
font-size: 0.74rem;
font-weight: 750;
color: #7dd3fc;
padding-right: 0.05rem;
white-space: nowrap;
}
.of-wd-max {
border: 0;
border-radius: 10px;
padding: 0.5rem 0.62rem;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.08em;
color: #042f2e;
background: linear-gradient(135deg, #6ee7b7, #34d399);
cursor: pointer;
transition: transform 0.18s ease, filter 0.18s ease;
-webkit-tap-highlight-color: transparent;
white-space: nowrap;
}
.of-wd-max:hover { transform: translateY(-1px); filter: brightness(1.05); }
.of-wd-max.is-tap { animation: ofWdMaxTap 0.35s ease; }
.of-wd-hint {
margin: 0.45rem 0 0;
font-size: 0.72rem;
color: rgba(148, 163, 184, 0.9);
}
.of-wd-otp-row {
display: flex;
align-items: center;
margin-top: 0.35rem;
}
.of-wd-otp-row input {
width: 100%;
border: 1px solid rgba(125, 211, 252, 0.35);
border-radius: 14px;
background: rgba(2, 12, 27, 0.72);
color: #f8fafc;
font-size: 1.55rem;
font-weight: 800;
letter-spacing: 0.42em;
text-align: center;
padding: 0.85rem 0.7rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
outline: none;
box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.08);
}
.of-wd-otp-row input:focus {
border-color: rgba(56, 189, 248, 0.75);
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}
.of-wd-otp-row input::placeholder {
letter-spacing: 0.42em;
color: rgba(148, 163, 184, 0.45);
}
.of-wd-resend {
margin-top: 0.7rem;
border: 0;
background: transparent;
color: #7dd3fc;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
padding: 0.25rem 0;
text-decoration: underline;
text-underline-offset: 3px;
}
.of-wd-resend:disabled {
color: rgba(148, 163, 184, 0.75);
cursor: default;
text-decoration: none;
}
.of-wd-dest {
margin: 0.55rem 0 0;
font-size: 0.74rem;
color: rgba(148, 163, 184, 0.95);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.of-wd-dest code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color: #bae6fd;
font-size: 0.76rem;
}
.of-wd-error {
margin: 0.55rem 0 0;
padding: 0.5rem 0.65rem;
border-radius: 10px;
border: 1px solid rgba(248, 113, 113, 0.35);
background: rgba(127, 29, 29, 0.28);
color: #fecaca;
font-size: 0.78rem;
word-break: break-word;
}
.of-wd-foot {
position: relative;
z-index: 1;
flex: 0 0 auto;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 0.55rem;
padding: 0.85rem 1.05rem max(1rem, env(safe-area-inset-bottom));
min-width: 0;
}
@media (max-width: 380px) {
.of-wd-foot { grid-template-columns: 1fr; }
.of-wd-cancel { order: 2; }
}
.of-wd-cancel {
border-radius: 13px;
border: 1px solid rgba(148, 163, 184, 0.28);
background: rgba(15, 23, 42, 0.5);
color: #e2e8f0;
font-weight: 700;
padding: 0.8rem 0.7rem;
cursor: pointer;
transition: background 0.2s ease;
}
.of-wd-cancel:hover { background: rgba(30, 41, 59, 0.7); }
.of-wd-submit {
position: relative;
overflow: hidden;
border: 0;
border-radius: 13px;
padding: 0.8rem 0.7rem;
font-weight: 800;
letter-spacing: 0.02em;
color: #04111f;
background: linear-gradient(135deg, #7dd3fc, #38bdf8 40%, #22d3ee);
cursor: pointer;
box-shadow: 0 10px 28px rgba(14, 165, 233, 0.32);
transition: transform 0.2s ease, filter 0.2s ease;
}
.of-wd-submit:hover { transform: translateY(-1px); filter: brightness(1.04); }
.of-wd-submit:disabled,
.of-wd-submit.is-busy,
.of-wd-submit.is-idle {
opacity: 0.45;
cursor: not-allowed;
transform: none;
filter: grayscale(0.25);
box-shadow: none;
}
.of-wd-submit.is-busy {
cursor: wait;
opacity: 0.65;
filter: none;
}
.of-wd-submit-glow {
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.42) 48%, transparent 66%);
background-size: 220% 100%;
animation: ofWdShine 2.8s ease-in-out infinite;
pointer-events: none;
}
@keyframes ofWdOrb {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-6%, 4%, 0) scale(1.08); }
}
@keyframes ofWdShine {
0%, 100% { background-position: 120% 0; }
50% { background-position: -20% 0; }
}
@keyframes ofWdSheetPop {
0% { transform: translate3d(0, 16px, 0) scale(0.93); opacity: 0.6; }
55% { transform: translate3d(0, -3px, 0) scale(1.015); }
100% { transform: none; opacity: 1; }
}
@keyframes ofWdMaxFlash {
0% { color: #6ee7b7; transform: scale(1.03); }
100% { color: #f8fafc; transform: none; }
}
@keyframes ofWdMaxTap {
0% { transform: scale(1); }
40% { transform: scale(0.92); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.of-wd-modal.is-open.is-pop .of-wd-sheet,
.of-wd-modal.is-open .of-wd-body h3,
.of-wd-modal.is-open .of-wd-avail,
.of-wd-orb,
.of-wd-shine,
.of-wd-submit-glow,
.of-wd-spark,
#view-ganancias .btn-activate-cta.is-blast,
#view-ganancias .btn-activate-cta.is-blast::before,
#view-ganancias .btn-activate-cta.is-blast::after {
animation: none !important;
}
}
html[data-of-theme="light"] .of-wd-sheet {
background: linear-gradient(165deg, #f8fafc, #e0f2fe 50%, #f1f5f9);
border-color: rgba(14, 165, 233, 0.28);
}
html[data-of-theme="light"] .of-wd-body h3 { color: #0f172a; }
html[data-of-theme="light"] .of-wd-lead,
html[data-of-theme="light"] .of-wd-hint { color: #334155; }
html[data-of-theme="light"] .of-wd-input-row {
background: #fff;
border-color: rgba(14, 165, 233, 0.3);
}
html[data-of-theme="light"] .of-wd-input-row input { color: #0f172a; }
html[data-of-theme="light"] .of-wd-avail strong { color: #064e3b; }
html[data-of-theme="light"] .of-wd-dest { color: #475569; }
html[data-of-theme="light"] .of-wd-dest code { color: #0369a1; }
@keyframes ofAurora {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(2%, -3%, 0) scale(1.06); }
}
@keyframes ofGridDrift {
from { background-position: 0 0, 0 0; }
to { background-position: 0 28px, 28px 0; }
}
@keyframes ofWalletIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
@keyframes ofAmountIn {
from { opacity: 0; transform: translateY(8px); filter: blur(6px); }
to { opacity: 1; transform: none; filter: none; }
}
@keyframes ofChipIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@keyframes ofRing {
0% { transform: scale(0.86); opacity: 0.7; }
100% { transform: scale(1.35); opacity: 0; }
}
@keyframes ofSheen {
0%, 55% { transform: translateX(-120%); }
100% { transform: translateX(120%); }
}
@keyframes ofLedIn {
from { opacity: 0; transform: translateX(-8px); }
to { opacity: 1; transform: none; }
}
@keyframes ofBarShine {
0%, 40% { transform: translateX(-120%); }
100% { transform: translateX(120%); }
}
@keyframes ofBarOverflow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes ofBarGlow {
0%, 100% { box-shadow: 0 0 10px rgba(52, 211, 153, 0.35); filter: brightness(1); }
50% { box-shadow: 0 0 18px rgba(110, 231, 183, 0.65); filter: brightness(1.08); }
}
@keyframes ofBarPulse {
0% { transform: scaleX(0.92); opacity: 0.75; }
60% { transform: scaleX(1.02); opacity: 1; }
100% { transform: scaleX(1); opacity: 1; }
}
html[data-of-theme="light"] .of-wallet-hero,
html[data-of-theme="light"] .of-wallet-actions,
html[data-of-theme="light"] .of-wallet-history,
html[data-of-theme="light"] .of-ledger-sheet {
background: linear-gradient(180deg, #ffffff, #f0f9ff);
border-color: rgba(14, 165, 233, 0.2);
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}
html[data-of-theme="light"] .of-wallet-amount,
html[data-of-theme="light"] .of-wallet-total-line b,
html[data-of-theme="light"] .of-ledger-sheet-head h3 {
color: #0f172a;
}
html[data-of-theme="light"] .of-wallet-chips > div {
background: #f8fafc;
}
html[data-of-theme="light"] .of-ledger-more {
color: #0c4a6e;
background: #e0f2fe;
}
@media (max-width: 900px) {
.of-wallet-stage { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.of-wallet-aurora,
.of-wallet-grid,
.of-wallet-hero::after,
.of-wallet-ring,
.of-goal-bar span::after,
.of-goal-bar.is-overflow span,
.of-goal-bar span.is-overflow,
.of-goal-bar span.is-pulse,
.of-led-row {
animation: none !important;
}
}
/* Red — árbol premium + modal de ubicación */
.of-place-queue {
margin: 0 0 1rem;
padding: 0.9rem 1rem 0.4rem;
border-radius: 18px;
border: 1px solid rgba(56, 189, 248, 0.28);
background:
radial-gradient(420px 120px at 0% 0%, rgba(6, 142, 209, 0.18), transparent 70%),
var(--of-surface-2);
}
.of-place-queue-head {
display: flex;
align-items: center;
gap: 0.55rem;
margin-bottom: 0.35rem;
}
.of-place-reopen {
border: 0;
border-radius: 999px;
padding: 0.45rem 0.85rem;
font: inherit;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
cursor: pointer;
background: linear-gradient(135deg, #068ed1, #05418b);
box-shadow: 0 8px 18px rgba(6, 142, 209, 0.28);
}
.of-tree-canvas {
overflow: auto;
padding: 0.4rem 0.2rem 1.2rem;
min-height: min(72vh, 680px);
max-height: min(90vh, 980px);
}
.of-tree-canvas .mbin-tree {
display: flex;
justify-content: center;
width: max-content;
min-width: 100%;
margin: 0 auto;
}
.of-tree-canvas .mbin-tree.is-far .xt-card {
width: 78px;
min-height: 92px;
padding: 0.35rem 0.25rem;
}
.of-tree-canvas .mbin-tree.is-far .mn-name {
font-size: 0.62rem;
}
.of-tree-canvas .mbin-tree.is-far .mn-user,
.of-tree-canvas .mbin-tree.is-far .mn-status,
.of-tree-canvas .mbin-tree.is-far .mn-leg-name {
font-size: 0.52rem;
}
.of-tree-canvas .mbin-tree.is-far .xt-kids {
gap: 0.15rem;
padding-top: 1.65rem;
}
.of-tree-canvas .mbin-tree.is-tiny .xt-card {
width: 64px;
min-height: 76px;
padding: 0.28rem 0.18rem;
border-radius: 10px;
}
.of-tree-canvas .mbin-tree.is-tiny .mn-avatar {
width: 28px;
height: 28px;
font-size: 0.62rem;
}
.of-tree-canvas .mbin-tree.is-tiny .xt-slot-open {
width: 64px;
min-height: 76px;
}
.of-tree-canvas .mbin-tree.is-tiny .xt-kids {
gap: 0.08rem;
padding-top: 1.35rem;
}
.of-tree-canvas .xt-tree {
--xt-line: rgba(14, 116, 144, 0.42);
--xt-line-soft: rgba(45, 212, 191, 0.35);
display: flex;
justify-content: center;
padding: 0.75rem 1.25rem 1.5rem;
}
.of-tree-canvas .mbin-tree {
display: flex;
justify-content: center;
align-items: flex-start;
width: max-content;
min-width: 100%;
margin: 0 auto;
padding-top: 0.5rem;
}
.of-tree-canvas .xt-kids {
display: flex;
justify-content: center;
position: relative;
padding-top: 2.45rem;
gap: 0.35rem;
}
.of-tree-canvas .xt-stem {
position: absolute;
top: 0;
left: 50%;
width: 1.5px;
height: 1.15rem;
transform: translateX(-50%);
background: linear-gradient(180deg, rgba(13, 148, 136, 0.55), var(--xt-line));
border-radius: 2px;
box-shadow: none;
}
.of-tree-canvas .xt-bar {
position: absolute;
top: 1.15rem;
left: 18%;
right: 18%;
height: 1.5px;
background: linear-gradient(
90deg,
transparent 0%,
var(--xt-line) 12%,
var(--xt-line) 88%,
transparent 100%
);
border-radius: 2px;
opacity: 0.9;
}
.of-tree-canvas .xt-kids.has-one .xt-bar {
opacity: 0;
}
.of-tree-canvas .xt-kids.has-one .xt-stem {
height: 1.35rem;
}
.of-tree-canvas .xt-branch {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.of-tree-canvas .xt-branch::before {
content: "";
position: absolute;
top: -1.3rem;
left: 50%;
width: 1.5px;
height: 1.3rem;
transform: translateX(-50%);
background: var(--xt-line);
border-radius: 2px;
opacity: 0.85;
}
.of-tree-canvas .xt-kids.has-one .xt-branch::before {
top: -1.5rem;
height: 1.5rem;
}
/* Socios 6/4/5: fila superior sin tarjeta del id 3 */
.of-tree-canvas .xt-tree.is-partners-top {
flex-direction: column;
align-items: center;
width: 100%;
}
.of-tree-canvas .xt-tree.is-partners-top > .xt-kids.is-partners-row {
padding-top: 0.35rem;
gap: 0.5rem;
width: 100%;
}
.of-tree-canvas .xt-tree.is-partners-top > .xt-kids.is-partners-row > .xt-stem {
display: none;
}
.of-tree-canvas .xt-tree.is-partners-top > .xt-kids.is-partners-row > .xt-bar {
top: 0;
opacity: 0.55;
}
.of-tree-canvas .xt-level-band {
display: flex;
justify-content: center;
margin-bottom: 0.65rem;
}
.of-tree-canvas .xt-level-band > span {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #0e7490;
background: rgba(236, 254, 255, 0.95);
border: 1px solid rgba(14, 116, 144, 0.22);
padding: 0.28rem 0.7rem;
border-radius: 999px;
}
.of-tree-canvas .mn-depth {
display: block;
margin-top: 0.15rem;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #64748b;
}
.of-net-lv.is-member .of-net-lv-foot b {
color: #0f766e;
font-variant-numeric: tabular-nums;
}
/* ——— Matriz forzada 3×7 por niveles (vista premium) ——— */
.of-tree-canvas .mbin-tree.is-levels {
display: block;
width: 100%;
min-width: 0;
padding: 0.25rem 0.35rem 1rem;
}
.mx-matrix {
--mx-ink: #0b1f2e;
--mx-line: rgba(14, 116, 144, 0.35);
--mx-accent: #0e7490;
--mx-soft: #ecfeff;
--mx-card: #ffffff;
--mx-you: #134e4a;
display: flex;
flex-direction: column;
gap: 1.15rem;
width: 100%;
max-width: 920px;
margin: 0 auto;
}
.mx-matrix-badge {
align-self: flex-start;
font-family: "Segoe UI", system-ui, sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mx-accent);
background: linear-gradient(135deg, #ecfeff, #f0fdfa);
border: 1px solid rgba(14, 116, 144, 0.22);
padding: 0.35rem 0.7rem;
border-radius: 999px;
}
.mx-you-row {
display: flex;
justify-content: center;
padding-bottom: 0.25rem;
}
.mx-level {
position: relative;
padding: 0.85rem 0.75rem 0.95rem;
border-radius: 1rem;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 253, 250, 0.75)),
radial-gradient(120% 80% at 10% 0%, rgba(34, 211, 238, 0.12), transparent 55%);
border: 1px solid rgba(14, 116, 144, 0.14);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}
.mx-level.is-full {
border-color: rgba(13, 148, 136, 0.35);
}
.mx-level-head {
display: flex;
flex-direction: column;
gap: 0.45rem;
margin-bottom: 0.75rem;
}
.mx-level-title {
display: flex;
align-items: baseline;
gap: 0.55rem;
color: var(--mx-ink);
}
.mx-level-idx {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.12em;
color: var(--mx-accent);
}
.mx-level-title strong {
font-size: 0.95rem;
font-weight: 750;
}
.mx-level-title em {
margin-left: auto;
font-style: normal;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: #0f766e;
}
.mx-level-title em i {
font-style: normal;
opacity: 0.45;
margin: 0 0.1rem;
}
.mx-level-meter {
height: 4px;
border-radius: 999px;
background: rgba(14, 116, 144, 0.12);
overflow: hidden;
}
.mx-level-meter > i {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #14b8a6, #06b6d4);
}
.mx-level-grid {
display: grid;
gap: 0.55rem;
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.mx-level[data-level="1"] .mx-level-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 520px;
margin: 0 auto;
}
.mx-level[data-level="2"] .mx-level-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 720px) {
.mx-level[data-level="2"] .mx-level-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mx-level[data-level="3"] .mx-level-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.mx-card {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
gap: 0.55rem;
align-items: center;
padding: 0.65rem 0.7rem;
border-radius: 0.85rem;
background: var(--mx-card);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
animation: mxCardIn 0.45s ease both;
animation-delay: calc(var(--i, 0) * 18ms);
}
@keyframes mxCardIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.mx-card.is-you {
border-color: rgba(13, 148, 136, 0.55);
background: linear-gradient(135deg, #f0fdfa, #ffffff);
box-shadow: 0 8px 22px rgba(13, 148, 136, 0.18);
}
.mx-card.is-you .mx-av {
background: var(--mx-you);
color: #ecfdf5;
}
.mx-card.is-spill {
border-style: dashed;
}
.mx-card.is-empty {
display: flex;
align-items: center;
justify-content: center;
min-height: 64px;
color: rgba(14, 116, 144, 0.45);
background: rgba(236, 254, 255, 0.5);
border: 1px dashed rgba(14, 116, 144, 0.28);
box-shadow: none;
}
.mx-av {
width: 2.25rem;
height: 2.25rem;
border-radius: 0.65rem;
display: grid;
place-items: center;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.02em;
background: #0f172a;
color: #e2e8f0;
}
.mx-body {
display: flex;
flex-direction: column;
gap: 0.08rem;
min-width: 0;
}
.mx-name {
font-size: 0.86rem;
font-weight: 750;
color: var(--mx-ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mx-user {
font-size: 0.72rem;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mx-meta {
font-size: 0.68rem;
font-weight: 650;
color: #0e7490;
}
.mx-spill {
position: absolute;
top: 0.35rem;
right: 0.4rem;
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #b45309;
background: #fffbeb;
border: 1px solid #fcd34d;
border-radius: 999px;
padding: 0.1rem 0.35rem;
}
.mx-ring {
display: none;
}
@media (max-width: 640px) {
.mx-level[data-level="1"] .mx-level-grid,
.mx-level[data-level="2"] .mx-level-grid,
.mx-level[data-level="3"] .mx-level-grid {
grid-template-columns: 1fr;
}
.mx-matrix {
max-width: none;
}
}
.of-tree-canvas .xt-node {
display: flex;
flex-direction: column;
align-items: center;
}
.of-tree-canvas .xt-kids {
display: flex;
justify-content: center;
position: relative;
padding-top: 2.45rem;
gap: 0.35rem;
}
.of-tree-canvas .xt-stem {
position: absolute;
top: 0;
left: 50%;
width: 1.5px;
height: 1.15rem;
transform: translateX(-50%);
background: linear-gradient(180deg, rgba(13, 148, 136, 0.55), var(--xt-line, rgba(14, 116, 144, 0.42)));
border-radius: 2px;
box-shadow: none;
}
.of-tree-canvas .xt-bar {
position: absolute;
top: 1.15rem;
left: 18%;
right: 18%;
height: 1.5px;
background: linear-gradient(
90deg,
transparent 0%,
var(--xt-line, rgba(14, 116, 144, 0.42)) 12%,
var(--xt-line, rgba(14, 116, 144, 0.42)) 88%,
transparent 100%
);
border-radius: 2px;
opacity: 0.9;
}
.of-tree-canvas .xt-kids.has-one .xt-bar { opacity: 0; }
.of-tree-canvas .xt-branch {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 0.35rem;
min-width: 104px;
}
.of-tree-canvas .xt-branch::before {
content: "";
position: absolute;
top: -1.1rem;
left: 50%;
width: 2px;
height: 1.1rem;
transform: translateX(-50%);
background: linear-gradient(180deg, var(--xt-line), rgba(6, 142, 209, 0.35));
}
.of-tree-canvas .xt-card {
width: 108px;
min-height: 118px;
padding: 0.7rem 0.4rem 0.65rem;
border-radius: 22px;
text-align: center;
position: relative;
color: var(--of-fg);
border: 1px solid rgba(125, 211, 252, 0.22);
background:
linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(2, 8, 18, 0.35)),
var(--of-surface);
box-shadow: 0 16px 34px rgba(2, 8, 18, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
opacity: 0;
animation: ofTreeNodeIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(var(--i, 0) * 28ms);
}
.of-tree-canvas .xt-card:hover {
transform: translateY(-3px) scale(1.03);
border-color: rgba(56, 189, 248, 0.45);
box-shadow: 0 18px 40px rgba(6, 142, 209, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.of-tree-canvas .xt-card .xt-ring {
position: absolute;
inset: -3px;
border-radius: 24px;
border: 1px solid transparent;
pointer-events: none;
opacity: 0;
}
.of-tree-canvas .xt-card.is-you .xt-ring,
.of-tree-canvas .xt-card.is-active .xt-ring {
opacity: 1;
border-color: rgba(56, 189, 248, 0.35);
animation: ofTreePulse 2.8s ease-in-out infinite;
}
.of-tree-canvas .mbin-tree.is-animated .xt-stem {
transform-origin: top center;
animation: ofTreeStemIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: calc(var(--i, 0) * 20ms + 80ms);
}
.of-tree-canvas .mbin-tree.is-animated .xt-bar {
transform-origin: center;
animation: ofTreeBarIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: calc(var(--i, 0) * 18ms + 120ms);
}
.of-tree-canvas .xt-slot-open {
opacity: 0;
animation: ofTreeNodeIn 0.45s ease forwards;
animation-delay: calc(var(--i, 0) * 24ms + 100ms);
}
@keyframes ofTreeStemIn {
from { opacity: 0; transform: scaleY(0); }
to { opacity: 1; transform: none; }
}
@keyframes ofTreeBarIn {
from { opacity: 0; transform: scaleX(0.2); }
to { opacity: 1; transform: none; }
}
.of-place-pick,
.of-place-queue {
display: none !important;
}
.of-tree-canvas .xt-card.is-you {
width: 122px;
border-color: rgba(56, 189, 248, 0.55);
box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.2), 0 18px 40px rgba(6, 142, 209, 0.22);
}
.of-tree-canvas .xt-card.is-hold {
border-color: rgba(251, 191, 36, 0.45);
}
.of-tree-canvas .mn-avatar {
width: 36px;
height: 36px;
margin: 0 auto 0.3rem;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 0.72rem;
font-weight: 800;
color: #fff;
background: linear-gradient(145deg, #068ed1, #05418b);
}
.of-tree-canvas .xt-card.is-hold .mn-avatar {
background: linear-gradient(145deg, #d97706, #92400e);
}
.of-tree-canvas .xt-card.is-spill {
border-color: rgba(56, 189, 248, 0.45);
}
.of-tree-canvas .mn-spill {
display: block;
margin-top: 0.15rem;
font-size: 0.52rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #38bdf8;
}
.of-tree-canvas .mn-leg,
.of-tree-canvas .mn-user,
.of-tree-canvas .mn-status,
.of-tree-canvas .mn-hold {
display: block;
line-height: 1.25;
}
.of-tree-canvas .mn-leg {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.14em;
color: var(--of-accent);
}
.of-tree-canvas .mn-leg-name {
display: block;
font-size: 0.52rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--of-fg-muted);
}
.of-tree-canvas .mn-name {
display: block;
margin-top: 0.1rem;
font-size: 0.78rem;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.of-tree-canvas .mn-user,
.of-tree-canvas .mn-status {
font-size: 0.58rem;
color: var(--of-fg-muted);
}
.of-tree-canvas .mn-hold {
margin-top: 0.25rem;
font-size: 0.58rem;
font-weight: 800;
color: #fbbf24;
}
html[data-of-theme="light"] .of-tree-canvas .mn-hold { color: #b45309; }
.of-tree-canvas .xt-slot-open {
width: 72px;
min-height: 88px;
border-radius: 16px;
border: 1.5px dashed rgba(125, 211, 252, 0.45);
background: rgba(6, 142, 209, 0.06);
color: var(--of-accent);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.15rem;
font: inherit;
}
.of-tree-canvas .xt-slot-open:disabled,
.of-tree-canvas .xt-slot-open.is-idle {
cursor: default;
opacity: 0.38;
filter: grayscale(0.45);
pointer-events: none;
}
.of-tree-canvas .xt-slot-open.is-live {
cursor: pointer;
border-color: #38bdf8;
background: rgba(56, 189, 248, 0.14);
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
}
.of-tree-canvas .xt-slot-open.is-live .xt-slot-plus {
animation: ofSlotPulse 1.35s ease-in-out infinite;
}
.of-tree-canvas .xt-slot-plus {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid currentColor;
display: grid;
place-items: center;
font-size: 1rem;
}
.of-tree-canvas .xt-slot-leg,
.of-tree-canvas .xt-slot-lbl {
font-size: 0.55rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.of-place-pick {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
margin: 0 0 0.8rem;
padding: 0.75rem 0.9rem;
border-radius: 16px;
border: 1px solid rgba(56, 189, 248, 0.35);
background: rgba(6, 142, 209, 0.1);
}
.of-place-pick p {
margin: 0.15rem 0 0;
color: var(--of-fg-muted);
font-size: 0.78rem;
}
.of-place-cancel,
.of-place-later {
border: 0;
background: transparent;
color: var(--of-fg-muted);
font: inherit;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
}
.of-place-modal {
position: fixed;
inset: 0;
z-index: 9500;
display: grid;
place-items: center;
padding: 1.2rem;
}
.of-place-modal[hidden] { display: none !important; }
.of-place-backdrop {
position: absolute;
inset: 0;
background: rgba(2, 8, 18, 0.62);
backdrop-filter: blur(8px);
}
.of-place-sheet {
position: relative;
width: min(440px, 100%);
padding: 1.35rem 1.25rem 1.1rem;
border-radius: 28px;
color: var(--of-fg);
border: 1px solid rgba(125, 211, 252, 0.28);
background:
radial-gradient(280px 140px at 100% 0%, rgba(56, 189, 248, 0.22), transparent 60%),
var(--of-surface);
box-shadow: 0 30px 80px rgba(2, 8, 18, 0.45);
transform: translateY(12px) scale(0.98);
opacity: 0;
transition: 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-place-modal.is-open .of-place-sheet {
transform: none;
opacity: 1;
}
.of-place-kicker {
margin: 0;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--of-accent);
}
.of-place-sheet h2 {
margin: 0.35rem 0 0.4rem;
font-size: 1.45rem;
letter-spacing: -0.03em;
}
.of-place-lead {
margin: 0;
color: var(--of-fg-muted);
font-size: 0.86rem;
line-height: 1.45;
}
.of-place-person {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 1rem 0;
padding: 0.7rem 0.8rem;
border-radius: 16px;
background: var(--of-surface-2);
}
.of-place-person strong,
.of-place-person em {
display: block;
font-style: normal;
}
.of-place-person em {
color: var(--of-fg-muted);
font-size: 0.78rem;
}
.of-place-av {
width: 42px;
height: 42px;
border-radius: 14px;
display: grid;
place-items: center;
font-weight: 800;
color: #fff;
background: linear-gradient(145deg, #068ed1, #05418b);
}
.of-place-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.65rem;
}
.of-place-btn {
border: 1px solid var(--of-border);
border-radius: 18px;
padding: 0.85rem 0.7rem;
text-align: left;
color: inherit;
background: var(--of-surface-2);
cursor: pointer;
font: inherit;
}
.of-place-btn span,
.of-place-btn small {
display: block;
}
.of-place-btn span {
font-weight: 800;
font-size: 0.92rem;
}
.of-place-btn small {
margin-top: 0.25rem;
color: var(--of-fg-muted);
font-size: 0.68rem;
line-height: 1.35;
}
.of-place-btn.is-auto {
color: #fff;
border-color: transparent;
background: linear-gradient(145deg, #0ea5e9, #05418b);
box-shadow: 0 14px 28px rgba(6, 142, 209, 0.32);
}
.of-place-btn.is-auto small { color: rgba(255, 255, 255, 0.78); }
.of-place-later {
display: block;
width: 100%;
margin-top: 0.85rem;
padding: 0.45rem;
}
.of-slot-people {
list-style: none;
margin: 0.8rem 0 0;
padding: 0;
display: grid;
gap: 0.45rem;
max-height: 280px;
overflow: auto;
}
.of-slot-person {
width: 100%;
display: flex;
align-items: center;
gap: 0.7rem;
text-align: left;
border: 1px solid var(--of-border);
border-radius: 14px;
padding: 0.55rem 0.65rem;
color: inherit;
background: var(--of-surface-2);
font: inherit;
cursor: pointer;
}
.of-slot-person strong,
.of-slot-person em { display: block; font-style: normal; }
.of-slot-person em { color: var(--of-fg-muted); font-size: 0.75rem; }
.of-slot-person:hover { border-color: #38bdf8; }
@keyframes ofSlotPulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.45); }
50% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(56, 189, 248, 0); }
}
@media (max-width: 640px) {
.of-place-actions { grid-template-columns: 1fr; }
.of-tree-canvas .xt-card { width: 92px; min-height: 108px; }
}
.of-net-dir {
margin-top: 1rem;
padding: 1rem 1.05rem 0.85rem;
border-radius: 18px;
border: 1px solid var(--of-border);
background:
radial-gradient(420px 140px at 100% 0%, rgba(56, 189, 248, 0.12), transparent 60%),
var(--of-surface-2);
}
.of-net-dir-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.35rem;
}
.of-net-dir-head h3 { margin: 0; font-size: 1rem; }
.of-net-dir-head p {
margin: 0.25rem 0 0;
color: var(--of-fg-muted);
font-size: 0.78rem;
line-height: 1.4;
}
.of-net-dir-list {
margin: 0.7rem 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.55rem;
}
.of-net-person {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 0.75rem;
border-radius: 16px;
border: 1px solid var(--of-border);
background: var(--of-surface);
box-shadow: 0 10px 24px rgba(2, 8, 18, 0.08);
}
.of-net-person.is-on {
border-color: rgba(56, 189, 248, 0.35);
background:
linear-gradient(135deg, rgba(14, 165, 233, 0.12), transparent 55%),
var(--of-surface);
}
.of-net-av {
width: 40px;
height: 40px;
border-radius: 14px;
display: grid;
place-items: center;
font-size: 0.72rem;
font-weight: 800;
color: #fff;
background: linear-gradient(145deg, #64748b, #334155);
}
.of-net-person.is-on .of-net-av {
background: linear-gradient(145deg, #0ea5e9, #05418b);
box-shadow: 0 8px 16px rgba(6, 142, 209, 0.28);
}
.of-net-copy strong,
.of-net-copy em,
.of-net-copy span { display: block; }
.of-net-copy strong { font-size: 0.88rem; }
.of-net-copy em,
.of-net-copy span {
font-style: normal;
color: var(--of-fg-muted);
font-size: 0.72rem;
}
.of-net-state {
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.32rem 0.55rem;
border-radius: 999px;
color: #b45309;
background: rgba(251, 191, 36, 0.16);
}
.of-net-state.is-on {
color: #0369a1;
background: rgba(56, 189, 248, 0.16);
}
.of-daily-ladder {
display: grid;
gap: 0.85rem;
margin-top: 0.85rem;
}
.of-net-empty {
margin: 0.35rem 0 0;
opacity: 0.85;
}
.of-net-earn {
display: grid;
gap: 0.85rem;
}
.of-net-earn.is-ultra {
gap: 1rem;
padding: 0.15rem;
}
.of-net-earn-head {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
padding: 1.1rem 1.15rem;
border-radius: 22px;
border: 1px solid rgba(125, 211, 252, 0.18);
background:
radial-gradient(120% 140% at 0% 0%, rgba(56, 189, 248, 0.16), transparent 55%),
radial-gradient(100% 120% at 100% 0%, rgba(52, 211, 153, 0.1), transparent 50%),
linear-gradient(155deg, rgba(10, 22, 40, 0.95), rgba(2, 8, 20, 0.92));
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(186, 230, 253, 0.08);
position: relative;
overflow: hidden;
}
.of-net-earn-head::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.04) 50%, transparent 60%);
animation: ofNetSheen 4.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes ofNetSheen {
0%, 100% { transform: translateX(-30%); opacity: 0; }
40% { opacity: 1; }
70% { transform: translateX(30%); opacity: 0; }
}
.of-net-stat {
display: grid;
gap: 0.32rem;
min-width: 0;
position: relative;
z-index: 1;
}
.of-net-stat span {
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #94a3b8;
}
.of-net-stat strong {
font-size: 1.05rem;
font-weight: 800;
color: #f1f5f9;
letter-spacing: -0.025em;
line-height: 1.15;
overflow-wrap: anywhere;
font-variant-numeric: tabular-nums;
}
.of-net-stat strong small {
font-size: 0.68rem;
font-weight: 650;
color: #94a3b8;
margin-left: 0.15rem;
}
.of-net-stat-month-card span {
color: #7dd3fc;
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: none;
font-weight: 800;
}
.of-net-stat-month-card strong {
font-size: 1.2rem;
background: linear-gradient(90deg, #f8fafc, #7dd3fc);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.of-net-stat-payout {
text-align: center;
justify-items: center;
padding: 0 0.35rem;
border-left: 1px solid rgba(148, 163, 184, 0.14);
border-right: 1px solid rgba(148, 163, 184, 0.14);
}
.of-net-stat-payout span {
color: #fcd34d;
}
.of-net-stat-payout strong {
font-size: 1.05rem;
color: #fef3c7;
}
.of-net-stat-pending {
text-align: left;
justify-items: start;
}
.of-net-stat-october {
text-align: center;
justify-items: center;
}
.of-net-stat-month {
margin: 0;
font-size: 0.62rem;
font-style: normal;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: none;
color: rgba(148, 163, 184, 0.92);
line-height: 1.35;
}
.of-net-stat-sub { display: none; }
.of-net-stat.is-ok strong { color: #6ee7b7; }
.of-net-stat.is-wait strong { color: #fcd34d; }
/* ── Tarjeta de pago del ciclo cerrado (día de pago) ── */
.of-netpay {
--np-gold: #fbbf24;
--np-gold-2: #fde68a;
--np-emerald: #34d399;
position: relative;
border-radius: 26px;
padding: 2px;
isolation: isolate;
overflow: hidden;
animation: ofNetpayIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
box-shadow:
0 30px 70px -30px rgba(251, 191, 36, 0.45),
0 18px 50px -24px rgba(16, 185, 129, 0.45);
}
.of-netpay-ring {
position: absolute;
inset: -60%;
z-index: -2;
background: conic-gradient(from 0deg, #f59e0b, #fde68a, #34d399, #0ea5e9, #a78bfa, #f59e0b);
animation: ofAcadSpin 7s linear infinite;
}
.of-netpay-inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 1.25rem;
align-items: center;
padding: 1.35rem 1.45rem;
border-radius: 24px;
background:
radial-gradient(120% 140% at 0% 0%, rgba(251, 191, 36, 0.2), transparent 50%),
radial-gradient(110% 130% at 100% 100%, rgba(16, 185, 129, 0.2), transparent 55%),
linear-gradient(150deg, #0f1a2e 0%, #081222 55%, #050b16 100%);
}
.of-netpay-aurora {
position: absolute;
inset: 2px;
z-index: 1;
border-radius: 24px;
pointer-events: none;
background:
radial-gradient(40% 60% at 20% 30%, rgba(253, 230, 138, 0.16), transparent 70%),
radial-gradient(40% 60% at 80% 70%, rgba(52, 211, 153, 0.14), transparent 70%);
mix-blend-mode: screen;
animation: ofNetpayAurora 9s ease-in-out infinite alternate;
}
.of-netpay-grain {
position: absolute;
inset: 2px;
z-index: 1;
border-radius: 24px;
pointer-events: none;
background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.09) 48%, transparent 60%);
background-size: 250% 100%;
animation: ofNetpaySheen 5.5s ease-in-out infinite;
}
.of-netpay-inner > * { position: relative; z-index: 2; }
.of-netpay-sparks { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.of-netpay-sparks i {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--np-gold-2);
box-shadow: 0 0 10px 2px rgba(253, 230, 138, 0.7);
opacity: 0;
animation: ofNetpaySpark 4.2s ease-in-out infinite;
}
.of-netpay-sparks i:nth-child(1) { left: 8%; top: 70%; animation-delay: 0s; }
.of-netpay-sparks i:nth-child(2) { left: 22%; top: 20%; animation-delay: 0.6s; background: #a7f3d0; }
.of-netpay-sparks i:nth-child(3) { left: 38%; top: 82%; animation-delay: 1.3s; }
.of-netpay-sparks i:nth-child(4) { left: 52%; top: 12%; animation-delay: 2.1s; }
.of-netpay-sparks i:nth-child(5) { left: 66%; top: 78%; animation-delay: 0.9s; background: #a7f3d0; }
.of-netpay-sparks i:nth-child(6) { left: 78%; top: 18%; animation-delay: 2.7s; }
.of-netpay-sparks i:nth-child(7) { left: 90%; top: 60%; animation-delay: 1.8s; }
.of-netpay-sparks i:nth-child(8) { left: 46%; top: 50%; animation-delay: 3.3s; background: #a7f3d0; }
.of-netpay-main {
display: flex;
align-items: center;
gap: 1rem;
min-width: 0;
flex-wrap: wrap;
}
.of-netpay-coin {
position: relative;
flex: 0 0 auto;
width: 74px;
height: 74px;
border-radius: 50%;
display: grid;
place-items: center;
overflow: hidden;
color: #3b2500;
background: radial-gradient(circle at 32% 26%, #fff7d1, #fcd34d 38%, #f59e0b 72%, #b45309);
box-shadow:
0 0 0 4px rgba(251, 191, 36, 0.18),
0 0 0 9px rgba(251, 191, 36, 0.07),
0 14px 34px -8px rgba(245, 158, 11, 0.75),
inset 0 -6px 12px rgba(146, 64, 14, 0.45),
inset 0 4px 8px rgba(255, 255, 255, 0.6);
animation: ofNetpayCoin 4.5s ease-in-out infinite;
}
.of-netpay-coin-face svg { width: 38px; height: 38px; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5)); }
.of-netpay-coin-shine {
position: absolute;
inset: -40%;
background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.85) 50%, transparent 58%);
animation: ofNetpayCoinShine 3.2s ease-in-out infinite;
}
.of-netpay-copy { flex: 1; min-width: 0; }
.of-netpay-kicker {
margin: 0 0 0.2rem;
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.72rem;
font-weight: 850;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--np-gold-2);
}
.of-netpay-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--np-gold);
box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6);
animation: ofNetpayBeat 1.8s ease-out infinite;
}
.of-netpay-amount {
margin: 0;
display: flex;
align-items: baseline;
gap: 0.4rem;
line-height: 1;
}
.of-netpay-amount strong {
font-size: clamp(2.1rem, 5.4vw, 3rem);
font-weight: 900;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
background: linear-gradient(100deg, #fffbeb 0%, #fde68a 25%, #f59e0b 45%, #fff7d1 55%, #fbbf24 75%, #fffbeb 100%);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 6px 18px rgba(245, 158, 11, 0.35));
animation: ofAcadShine 4.5s linear infinite;
}
.of-netpay-amount small { font-size: 0.85rem; font-weight: 800; color: rgba(253, 230, 138, 0.8); letter-spacing: 0.06em; }
.of-netpay-date { margin: 0.45rem 0 0; font-size: 0.8rem; font-weight: 650; color: rgba(226, 232, 240, 0.82); }
.of-netpay-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.42rem 0.8rem;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 850;
white-space: nowrap;
color: #022c22;
background: linear-gradient(110deg, #6ee7b7, #34d399 45%, #a7f3d0 55%, #34d399);
background-size: 220% 100%;
box-shadow: 0 8px 22px -8px rgba(16, 185, 129, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5);
animation: ofNewShift 3.4s linear infinite;
}
.of-netpay-chip svg { width: 14px; height: 14px; }
.of-netpay.is-deferred .of-netpay-chip {
color: #451a03;
background: linear-gradient(110deg, #fcd34d, #f59e0b 45%, #fde68a 55%, #f59e0b);
background-size: 220% 100%;
}
.of-netpay-side { display: grid; gap: 0.75rem; min-width: 0; }
.of-netpay-cd {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
}
.of-netpay-cd > i { font-style: normal; font-weight: 900; color: rgba(253, 230, 138, 0.55); font-size: 1.3rem; margin-top: -1rem; }
.of-netpay-cd-cell {
flex: 1;
max-width: 78px;
display: grid;
justify-items: center;
gap: 0.25rem;
padding: 0.6rem 0.3rem 0.5rem;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(253, 230, 138, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px -14px rgba(0, 0, 0, 0.8);
}
.of-netpay-cd-cell b {
font-size: 1.55rem;
font-weight: 900;
font-variant-numeric: tabular-nums;
color: #fffbeb;
line-height: 1;
text-shadow: 0 0 18px rgba(251, 191, 36, 0.45);
}
.of-netpay-cd-cell b.is-flip { animation: ofNetpayFlip 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.of-netpay-cd-cell small {
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(203, 213, 225, 0.75);
}
.of-netpay-cd.is-due > * { opacity: 0.25; }
.of-netpay-cd.is-due::after {
content: attr(data-due);
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-weight: 900;
font-size: 1.05rem;
color: var(--np-gold-2);
text-shadow: 0 0 18px rgba(251, 191, 36, 0.6);
animation: ofNetpayBlink 1.4s ease-in-out infinite;
}
.of-netpay-paid {
display: flex;
align-items: center;
justify-content: center;
gap: 0.7rem;
padding: 0.8rem;
border-radius: 16px;
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(52, 211, 153, 0.35);
}
.of-netpay-paid b { font-size: 1.15rem; font-weight: 900; color: #a7f3d0; }
.of-netpay-paid-check {
width: 40px;
height: 40px;
border-radius: 50%;
display: grid;
place-items: center;
color: #022c22;
background: radial-gradient(circle at 30% 25%, #a7f3d0, #10b981 70%);
box-shadow: 0 0 26px rgba(16, 185, 129, 0.7);
animation: ofCpxmPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.of-netpay-paid-check svg { width: 22px; height: 22px; }
.of-netpay-track {
position: relative;
height: 8px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.14);
overflow: hidden;
}
.of-netpay-track i {
position: absolute;
inset: 0 auto 0 0;
width: 0;
border-radius: inherit;
background: linear-gradient(90deg, #10b981, #34d399, #fde68a, #f59e0b);
box-shadow: 0 0 14px rgba(251, 191, 36, 0.6);
transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-netpay-track i::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
background-size: 40% 100%;
background-repeat: no-repeat;
animation: ofNetpayRun 2.2s linear infinite;
}
.of-netpay-foot {
display: flex;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
font-size: 0.72rem;
font-weight: 650;
color: rgba(203, 213, 225, 0.85);
}
.of-netpay-foot span:first-child { color: #a7f3d0; font-weight: 800; }
.of-netpay.is-motiv { box-shadow: 0 24px 60px -30px rgba(56, 189, 248, 0.5), 0 18px 50px -26px rgba(16, 185, 129, 0.45); }
.of-netpay.is-motiv .of-netpay-ring { background: conic-gradient(from 0deg, #10b981, #38bdf8, #a78bfa, #fbbf24, #10b981); }
.of-netpay.is-motiv .of-netpay-inner { grid-template-columns: 1fr; padding: 1.15rem 1.35rem; }
.of-netpay-coin.is-rocket {
width: 60px;
height: 60px;
color: #ecfeff;
background: radial-gradient(circle at 32% 26%, #a7f3d0, #10b981 45%, #0e7490 85%);
box-shadow:
0 0 0 4px rgba(52, 211, 153, 0.16),
0 12px 30px -8px rgba(16, 185, 129, 0.7),
inset 0 -5px 10px rgba(6, 78, 59, 0.45),
inset 0 4px 8px rgba(255, 255, 255, 0.4);
}
.of-netpay-coin.is-rocket .of-netpay-coin-face svg { width: 30px; height: 30px; }
.of-netpay-motiv-title {
margin: 0 0 0.3rem;
font-size: clamp(1.05rem, 3.4vw, 1.3rem);
font-weight: 900;
letter-spacing: -0.02em;
background: linear-gradient(100deg, #ecfdf5, #6ee7b7 40%, #fde68a 60%, #ecfdf5);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: ofAcadShine 5s linear infinite;
}
.of-netpay-motiv-text { margin: 0; font-size: 0.86rem; font-weight: 650; line-height: 1.45; color: rgba(226, 232, 240, 0.88); }
html[data-of-theme="light"] .of-netpay-motiv-title {
background: linear-gradient(100deg, #065f46, #059669 45%, #b45309 60%, #065f46);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
}
html[data-of-theme="light"] .of-netpay-motiv-text { color: #334155; }
@keyframes ofNetpayIn { from { opacity: 0; transform: translateY(18px) scale(0.98); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ofNetpayAurora { from { transform: translateX(-4%) scale(1); } to { transform: translateX(4%) scale(1.06); } }
@keyframes ofNetpaySheen { 0%, 100% { background-position: 130% 0; } 50% { background-position: -30% 0; } }
@keyframes ofNetpaySpark { 0%, 100% { opacity: 0; transform: translateY(6px) scale(0.4); } 40% { opacity: 1; transform: translateY(-6px) scale(1); } 70% { opacity: 0; transform: translateY(-14px) scale(0.6); } }
@keyframes ofNetpayCoin { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes ofNetpayCoinShine { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
@keyframes ofNetpayBeat { 0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6); } 100% { box-shadow: 0 0 0 10px rgba(251, 191, 36, 0); } }
@keyframes ofNetpayFlip { 0% { transform: translateY(-40%) rotateX(70deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes ofNetpayBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes ofNetpayRun { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (max-width: 760px) {
.of-netpay-inner { grid-template-columns: 1fr; padding: 1.15rem; gap: 1rem; }
.of-netpay-coin { width: 60px; height: 60px; }
.of-netpay-coin-face svg { width: 30px; height: 30px; }
.of-netpay-chip { order: 3; }
.of-netpay-cd-cell b { font-size: 1.3rem; }
}
html[data-of-theme="light"] .of-netpay-inner {
background:
radial-gradient(120% 140% at 0% 0%, rgba(251, 191, 36, 0.22), transparent 50%),
radial-gradient(110% 130% at 100% 100%, rgba(16, 185, 129, 0.16), transparent 55%),
linear-gradient(150deg, #fffdf5, #fff7e0 55%, #f0fdf8);
}
html[data-of-theme="light"] .of-netpay-kicker { color: #b45309; }
html[data-of-theme="light"] .of-netpay-amount strong {
background: linear-gradient(100deg, #92400e, #d97706 35%, #f59e0b 50%, #b45309 70%, #92400e);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
}
html[data-of-theme="light"] .of-netpay-amount small { color: #b45309; }
html[data-of-theme="light"] .of-netpay-date,
html[data-of-theme="light"] .of-netpay-foot { color: #475569; }
html[data-of-theme="light"] .of-netpay-foot span:first-child { color: #047857; }
html[data-of-theme="light"] .of-netpay-cd-cell { background: rgba(255, 255, 255, 0.8); border-color: rgba(217, 119, 6, 0.25); }
html[data-of-theme="light"] .of-netpay-cd-cell b { color: #78350f; text-shadow: none; }
html[data-of-theme="light"] .of-netpay-cd-cell small { color: #64748b; }
html[data-of-theme="light"] .of-netpay-paid b { color: #047857; }
@media (prefers-reduced-motion: reduce) {
.of-netpay,
.of-netpay *,
.of-netpay *::after { animation: none !important; }
.of-netpay-sparks { display: none; }
}
/* Mes siguiente — acumulando con barra de carga */
.of-net-accum {
position: relative;
padding: 1rem 1.15rem 1.15rem;
border-radius: 20px;
border: 1px solid rgba(167, 139, 250, 0.28);
background:
radial-gradient(90% 120% at 100% 0%, rgba(167, 139, 250, 0.18), transparent 55%),
linear-gradient(145deg, rgba(24, 16, 48, 0.75), rgba(6, 12, 28, 0.92));
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
overflow: hidden;
}
.of-net-accum-top {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 0.85rem;
margin-bottom: 0.85rem;
}
.of-net-accum-title {
display: grid;
gap: 0.2rem;
min-width: 0;
}
.of-net-accum-title > span {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #c4b5fd;
}
.of-net-accum-pulse {
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -0.02em;
color: #f5f3ff;
background: linear-gradient(90deg, #e9d5ff, #a78bfa 40%, #67e8f9 80%, #e9d5ff);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: ofNetAccumText 2.4s ease-in-out infinite;
}
@keyframes ofNetAccumText {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.of-net-accum-amt {
font-size: 1.05rem;
font-weight: 800;
color: #f8fafc;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.of-net-accum-amt small {
font-size: 0.65rem;
font-weight: 650;
color: #a5b4fc;
margin-left: 0.15rem;
}
.of-net-accum-track {
position: relative;
height: 10px;
border-radius: 999px;
overflow: hidden;
background: rgba(148, 163, 184, 0.14);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}
.of-net-accum-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 42%;
border-radius: inherit;
background: linear-gradient(90deg, transparent, #a78bfa, #67e8f9, #a78bfa, transparent);
background-size: 200% 100%;
box-shadow: 0 0 16px rgba(167, 139, 250, 0.45);
animation: ofNetAccumLoad 1.65s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes ofNetAccumLoad {
0% { left: -45%; width: 38%; }
50% { width: 48%; }
100% { left: 108%; width: 38%; }
}
.of-net-partner-bonus {
display: none;
}
.of-net-lv.is-partner-bonus {
margin-top: 0.55rem;
border-color: rgba(251, 191, 36, 0.35);
background:
radial-gradient(100% 120% at 0% 0%, rgba(251, 191, 36, 0.16), transparent 55%),
linear-gradient(145deg, rgba(42, 30, 8, 0.78), rgba(8, 14, 28, 0.92));
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}
.of-net-lv.is-partner-bonus.is-slim {
padding: 0.55rem 0.75rem;
border-radius: 14px;
}
.of-net-lv.is-partner-bonus.is-slim .of-net-lv-top {
gap: 0.5rem;
grid-template-columns: auto 1fr auto auto;
}
.of-net-lv.is-partner-bonus.is-slim .of-net-lv-idx.is-partner {
width: auto;
min-width: 2rem;
height: 1.7rem;
padding: 0 0.38rem;
border-radius: 9px;
font-size: 0.72rem;
}
.of-net-lv.is-partner-bonus.is-slim .of-net-lv-title strong {
font-size: 0.84rem;
}
.of-net-lv.is-partner-bonus.is-slim .of-net-lv-title em {
font-size: 0.68rem;
}
.of-net-lv.is-partner-bonus.is-slim .of-net-lv-amt {
font-size: 0.88rem;
}
.of-net-lv.is-partner-bonus.is-slim .of-net-meters {
margin-top: 0.45rem;
gap: 0.35rem;
}
.of-net-lv.is-partner-bonus.is-slim .of-net-meter-lab {
font-size: 0.66rem;
}
.of-net-lv.is-partner-bonus.is-slim .of-net-meter-track {
height: 0.38rem;
}
.of-partner-cover {
display: none;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
min-height: 1.7rem;
}
.of-partner-cover-lab {
font-size: 0.78rem;
font-weight: 650;
letter-spacing: 0.02em;
color: rgba(226, 232, 240, 0.72);
}
.of-partner-eye {
flex: 0 0 auto;
color: rgba(251, 191, 36, 0.85);
}
.of-partner-eye:hover {
color: #fde68a;
}
.of-net-lv.is-partner-bonus.is-veiled {
border-color: rgba(148, 163, 184, 0.18);
background: linear-gradient(145deg, rgba(12, 18, 30, 0.78), rgba(8, 12, 22, 0.9));
box-shadow: none;
}
.of-net-lv.is-partner-bonus.is-veiled .of-partner-body {
display: none !important;
}
.of-net-lv.is-partner-bonus.is-veiled .of-partner-cover {
display: flex;
}
.of-net-lv.is-partner-bonus.is-veiled .of-partner-eye .eye-state-hide {
display: none;
}
.of-net-lv.is-partner-bonus.is-veiled .of-partner-eye .eye-state-show {
display: block;
}
.of-net-lv.is-partner-bonus:not(.is-veiled) .of-partner-cover {
display: none;
}
.of-net-lv-idx.is-partner {
width: auto;
min-width: 2.4rem;
padding: 0 0.45rem;
color: #422006;
background: linear-gradient(145deg, #fde68a, #f59e0b);
border-color: rgba(245, 158, 11, 0.55);
box-shadow: 0 0 14px rgba(245, 158, 11, 0.35);
}
.of-net-partner-explain {
margin: 0.7rem 0 0;
font-size: 0.72rem;
font-weight: 650;
line-height: 1.45;
color: rgba(253, 230, 138, 0.9);
}
.of-net-meter-fill.is-partner.is-people {
background: linear-gradient(90deg, #fbbf24, #f59e0b 55%, #fde68a);
box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}
.of-net-meter-fill.is-partner.is-earn {
background: linear-gradient(90deg, #f59e0b, #fbbf24 40%, #34d399);
box-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
}
html[data-of-theme="light"] .of-net-lv.is-partner-bonus {
border-color: rgba(217, 119, 6, 0.28);
background:
radial-gradient(100% 120% at 0% 0%, rgba(251, 191, 36, 0.12), transparent 55%),
linear-gradient(145deg, rgba(255, 251, 235, 0.98), rgba(255, 255, 255, 0.95));
}
html[data-of-theme="light"] .of-net-lv.is-partner-bonus.is-veiled {
border-color: rgba(148, 163, 184, 0.28);
background: linear-gradient(145deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.95));
}
html[data-of-theme="light"] .of-partner-cover-lab {
color: #64748b;
}
html[data-of-theme="light"] .of-partner-eye {
color: #b45309;
}
html[data-of-theme="light"] .of-net-partner-explain {
color: #92400e;
}
.of-net-levels {
display: grid;
gap: 0.65rem;
}
.of-net-lv {
padding: 0.95rem 1rem;
border-radius: 18px;
border: 1px solid rgba(148, 163, 184, 0.14);
background:
linear-gradient(145deg, rgba(12, 24, 42, 0.72), rgba(6, 14, 28, 0.88));
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
opacity: 0;
transform: translateY(12px);
animation: ofNetLvIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: var(--lv-delay, 0ms);
}
@keyframes ofNetLvIn {
to { opacity: 1; transform: none; }
}
.of-net-lv.is-full {
border-color: rgba(52, 211, 153, 0.32);
background:
linear-gradient(145deg, rgba(8, 42, 34, 0.55), rgba(6, 18, 28, 0.9));
}
.of-net-lv-top {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.7rem;
}
.of-net-lv-idx {
width: 2.2rem;
height: 2.2rem;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.04em;
color: #e2e8f0;
background: rgba(56, 189, 248, 0.14);
border: 1px solid rgba(56, 189, 248, 0.28);
box-shadow: inset 0 1px 0 rgba(186, 230, 253, 0.12);
}
.of-net-lv-title strong {
display: block;
font-size: 0.9rem;
font-weight: 750;
color: #f8fafc;
}
.of-net-lv-title em {
display: block;
margin-top: 0.12rem;
font-style: normal;
font-size: 0.7rem;
font-weight: 700;
color: #7dd3fc;
}
.of-net-lv-title em i {
font-style: normal;
color: #64748b;
margin: 0 0.05rem;
}
.of-net-lv-amt {
font-size: 0.92rem;
font-weight: 800;
color: #f8fafc;
font-variant-numeric: tabular-nums;
text-align: right;
}
.of-net-lv-amt small {
font-size: 0.62rem;
font-weight: 650;
color: #94a3b8;
margin-left: 0.15rem;
}
.of-net-meters {
display: grid;
gap: 0.55rem;
margin-top: 0.85rem;
}
.of-net-meter-lab {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 0.28rem;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #94a3b8;
}
.of-net-meter-lab b {
font-size: 0.72rem;
font-weight: 800;
color: #e2e8f0;
font-variant-numeric: tabular-nums;
}
.of-net-meter-track {
height: 7px;
border-radius: 999px;
overflow: hidden;
background: rgba(148, 163, 184, 0.14);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
.of-net-meter-fill {
display: block;
height: 100%;
width: 0;
border-radius: inherit;
transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
}
.of-net-meter-fill.is-people {
background: linear-gradient(90deg, #38bdf8, #0ea5e9 55%, #67e8f9);
box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}
.of-net-meter-fill.is-earn {
background: linear-gradient(90deg, #a78bfa, #8b5cf6 45%, #34d399);
box-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
}
.of-net-lv.is-full .of-net-meter-fill.is-people {
background: linear-gradient(90deg, #34d399, #10b981);
box-shadow: 0 0 12px rgba(52, 211, 153, 0.35);
}
.of-net-lv-meter,
.of-net-lv-foot,
.of-net-lv-count { display: none; }
@media (max-width: 640px) {
.of-net-earn-head {
grid-template-columns: 1fr;
gap: 0.85rem;
}
.of-net-stat-payout {
text-align: left;
justify-items: start;
border-left: 0;
border-right: 0;
border-top: 1px solid rgba(148, 163, 184, 0.14);
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
padding: 0.75rem 0;
}
.of-net-accum-top {
flex-wrap: wrap;
}
}
html[data-of-theme="light"] .of-net-earn-head {
border-color: rgba(14, 116, 144, 0.16);
background:
radial-gradient(120% 140% at 0% 0%, rgba(14, 165, 233, 0.1), transparent 55%),
linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.98));
}
html[data-of-theme="light"] .of-net-stat span { color: #64748b; }
html[data-of-theme="light"] .of-net-stat strong { color: #0f172a; }
html[data-of-theme="light"] .of-net-stat strong small { color: #64748b; }
html[data-of-theme="light"] .of-net-stat.is-ok strong { color: #047857; }
html[data-of-theme="light"] .of-net-stat.is-wait strong { color: #b45309; }
html[data-of-theme="light"] .of-net-stat-month { color: #475569; }
html[data-of-theme="light"] .of-net-stat-month-card span { color: #0284c7; }
html[data-of-theme="light"] .of-net-stat-month-card strong {
background: linear-gradient(90deg, #0f172a, #0284c7);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
html[data-of-theme="light"] .of-net-stat-payout span { color: #b45309; }
html[data-of-theme="light"] .of-net-stat-payout strong { color: #92400e; }
html[data-of-theme="light"] .of-net-stat-payout {
border-color: rgba(148, 163, 184, 0.22);
}
html[data-of-theme="light"] .of-net-accum {
border-color: rgba(124, 58, 237, 0.22);
background:
radial-gradient(90% 120% at 100% 0%, rgba(167, 139, 250, 0.14), transparent 55%),
linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 243, 255, 0.95));
}
html[data-of-theme="light"] .of-net-accum-title > span { color: #6d28d9; }
html[data-of-theme="light"] .of-net-accum-amt { color: #0f172a; }
html[data-of-theme="light"] .of-net-accum-amt small { color: #7c3aed; }
html[data-of-theme="light"] .of-net-accum-track { background: rgba(148, 163, 184, 0.22); }
html[data-of-theme="light"] .of-net-meter-track { background: rgba(148, 163, 184, 0.22); }
html[data-of-theme="light"] .of-net-lv-amt { color: #0f172a; }
html[data-of-theme="light"] .of-net-lv {
border-color: rgba(148, 163, 184, 0.28);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.9));
}
html[data-of-theme="light"] .of-net-lv-title strong,
html[data-of-theme="light"] .of-net-lv-count,
html[data-of-theme="light"] .of-net-lv-foot b { color: #0f172a; }
html[data-of-theme="light"] .of-net-lv-idx {
color: #0c4a6e;
background: rgba(14, 165, 233, 0.1);
border-color: rgba(14, 165, 233, 0.22);
}
/* legacy ladder (unused) — sin animaciones de carga */
.of-lvl-summary { display: none; }
.of-lvl {
padding: 0.85rem 0.9rem 0.8rem;
border-radius: 18px;
border: 1px solid var(--of-border);
background: var(--of-surface);
}
.of-lvl.is-full { border-color: rgba(16, 185, 129, 0.4); }
.of-lvl header {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.7rem;
}
.of-lvl-n {
width: 36px;
height: 36px;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 0.72rem;
font-weight: 800;
color: #fff;
background: linear-gradient(145deg, #0ea5e9, #05418b);
}
.of-lvl header strong,
.of-lvl header em { display: block; font-style: normal; }
.of-lvl header em { color: var(--of-accent); font-size: 0.75rem; font-weight: 800; }
.of-lvl header b { font-size: 0.95rem; }
.of-lvl-meta {
display: flex;
justify-content: space-between;
margin: 0.65rem 0 0.3rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--of-fg-muted);
}
.of-lvl-meta em { font-style: normal; color: #059669; }
.of-lvl-track {
height: 8px;
border-radius: 999px;
overflow: hidden;
background: rgba(148, 163, 184, 0.18);
}
.of-lvl-track span {
display: block;
height: 100%;
width: 0;
border-radius: inherit;
background: linear-gradient(90deg, #38bdf8, #2563eb);
}
.of-lvl-track.is-earn span {
background: linear-gradient(90deg, #fbbf24, #f59e0b);
}
.of-net-pager {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
margin-top: 0.7rem;
}
.of-net-pager span {
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--of-fg-muted);
}
.of-net-page {
border: 1px solid var(--of-border);
border-radius: 999px;
padding: 0.45rem 0.85rem;
background: var(--of-surface);
color: var(--of-fg);
font: inherit;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
}
.of-net-page:disabled { opacity: 0.4; cursor: default; }
.of-net-dir-list {
margin: 0.7rem 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.55rem;
}
.of-net-person {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 0.75rem;
border-radius: 16px;
border: 1px solid var(--of-border);
background: var(--of-surface);
box-shadow: 0 10px 24px rgba(2, 8, 18, 0.08);
}
.of-net-person.is-on {
border-color: rgba(56, 189, 248, 0.35);
background:
linear-gradient(135deg, rgba(14, 165, 233, 0.12), transparent 55%),
var(--of-surface);
}
.of-net-av {
width: 40px;
height: 40px;
border-radius: 14px;
display: grid;
place-items: center;
font-size: 0.72rem;
font-weight: 800;
color: #fff;
background: linear-gradient(145deg, #64748b, #334155);
}
.of-net-person.is-on .of-net-av {
background: linear-gradient(145deg, #0ea5e9, #05418b);
box-shadow: 0 8px 16px rgba(6, 142, 209, 0.28);
}
.of-net-copy strong,
.of-net-copy em,
.of-net-copy span { display: block; }
.of-net-copy strong { font-size: 0.88rem; }
.of-net-copy em,
.of-net-copy span {
font-style: normal;
color: var(--of-fg-muted);
font-size: 0.72rem;
}
.of-net-state {
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.32rem 0.55rem;
border-radius: 999px;
color: #b45309;
background: rgba(251, 191, 36, 0.16);
}
.of-net-state.is-on {
color: #0369a1;
background: rgba(56, 189, 248, 0.16);
}
body.of-join .of-login {
max-height: none;
min-height: 100dvh;
min-height: 100svh;
align-items: center;
justify-content: safe center;
padding:
max(4.2rem, calc(env(safe-area-inset-top, 0px) + 3.2rem))
1.1rem
max(2.2rem, calc(env(safe-area-inset-bottom, 0px) + 1.2rem));
overflow: visible;
touch-action: pan-y;
}
body.of-join {
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: auto;
touch-action: pan-y;
height: auto;
min-height: 100dvh;
}
.of-sr {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.of-join-card {
width: min(100%, 920px);
max-width: 100%;
padding: 1.7rem 1.7rem 1.35rem;
box-sizing: border-box;
overflow: hidden;
isolation: isolate;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.045) inset,
0 30px 72px rgba(0, 0, 0, 0.52),
0 0 90px rgba(6, 142, 209, 0.12);
animation: ofJoinIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
body.of-join .of-join-card .of-login-card-glow::before {
width: 280px;
height: 280px;
top: -140px;
right: -90px;
}
body.of-join .of-join-card .of-login-card-glow::after {
width: 200px;
height: 200px;
top: -50px;
right: 18%;
}
@keyframes ofJoinIn {
from { opacity: 0; transform: translateY(28px) scale(0.97); filter: blur(8px); }
to { opacity: 1; transform: none; filter: none; }
}
@keyframes ofJoinRise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
body.of-join .of-join-card .of-login-logo,
body.of-join .of-join-invite,
body.of-join .of-join-form .field,
body.of-join .of-join-attest,
body.of-join .of-join-card .of-login-btn {
animation: ofJoinRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
body.of-join .of-join-card .of-login-logo { animation-delay: 0.12s; }
body.of-join .of-join-invite { animation-delay: 0.22s; }
body.of-join #joinDetails .field:nth-child(1) { animation-delay: 0.3s; }
body.of-join #joinDetails .field:nth-child(2) { animation-delay: 0.36s; }
body.of-join #joinDetails .field:nth-child(3) { animation-delay: 0.42s; }
body.of-join #joinDetails .field:nth-child(4) { animation-delay: 0.48s; }
body.of-join #joinDetails .field:nth-child(5) { animation-delay: 0.54s; }
body.of-join .of-join-attest { animation-delay: 0.6s; }
body.of-join .of-join-card .of-login-btn { animation-delay: 0.66s; }
.of-join-card.is-lock { width: min(100%, 440px); }
body.of-join .of-join-card.is-lock h1,
body.of-join .of-join-done h2 {
display: block !important;
margin: 0 0 0.4rem;
text-align: center;
font-size: 1.35rem;
letter-spacing: -0.04em;
color: #f8fafc;
}
.of-join-card.is-lock .of-login-lead,
.of-join-done .of-login-lead { text-align: center; }
.of-join-card .of-login-btn {
text-decoration: none;
}
.of-join-invite {
display: flex;
align-items: center;
gap: 0.7rem;
width: fit-content;
max-width: 100%;
margin: -0.15rem auto 1.05rem;
padding: 0.38rem 1rem 0.38rem 0.38rem;
border-radius: 999px;
border: 1px solid rgba(125, 211, 252, 0.32);
background:
linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(2, 8, 18, 0.2) 55%),
rgba(3, 14, 28, 0.55);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 10px 28px rgba(6, 142, 209, 0.12);
}
.of-join-invite-copy { min-width: 0; }
.of-join-invite-copy em {
display: block;
font-style: normal;
font-size: 0.62rem;
font-weight: 750;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-join-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
flex-shrink: 0;
font-size: 0.66rem;
font-weight: 800;
color: #fff;
background: linear-gradient(145deg, #38bdf8, #05418b);
}
.of-join-invite strong {
display: block;
max-width: 100%;
font-size: 0.92rem;
font-weight: 750;
letter-spacing: -0.02em;
color: #f8fafc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.of-join-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0.72rem 0.75rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.of-join-form {
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: clip;
}
.of-join-form .field {
margin: 0;
min-width: 0;
max-width: 100%;
}
.of-join-form .field.is-wide { grid-column: 1 / -1; }
.of-login-card .of-join-form .field label {
text-transform: none;
letter-spacing: 0;
font-size: 0.78rem;
font-weight: 650;
color: rgba(203, 213, 225, 0.92);
}
.of-login-card .of-join-form input,
.of-login-card .of-join-form select {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
min-height: 48px;
padding: 0 0.9rem;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.28);
background: rgba(2, 8, 18, 0.85);
color: #f1f5f9;
font: inherit;
font-size: 0.95rem;
outline: none;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.of-login-card .of-join-form input:focus,
.of-login-card .of-join-form select:focus {
border-color: rgba(56, 189, 248, 0.55);
box-shadow: 0 0 0 3px rgba(6, 142, 209, 0.16);
background: rgba(2, 8, 18, 0.85);
}
.of-join-phone { display: grid; grid-template-columns: 5.4rem 1fr; gap: 0.4rem; }
.of-login-card .of-join-form .of-join-attest {
display: flex !important;
align-items: center;
justify-content: flex-start;
gap: 0.55rem;
width: 100%;
margin: 0.8rem 0 0.45rem;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: rgba(226, 232, 240, 0.92);
cursor: pointer;
}
.of-login-card .of-join-form .of-join-attest input[type="checkbox"] {
appearance: none;
width: 18px;
height: 18px;
min-height: 18px;
flex: 0 0 18px;
margin: 0;
padding: 0;
border-radius: 6px;
border: 1px solid rgba(125, 211, 252, 0.45);
background: rgba(2, 8, 18, 0.85);
box-shadow: none;
display: grid;
place-items: center;
cursor: pointer;
}
.of-login-card .of-join-form .of-join-attest input[type="checkbox"]:checked {
border-color: transparent;
background: linear-gradient(145deg, #7dd3fc, #068ed1);
}
.of-login-card .of-join-form .of-join-attest input[type="checkbox"]:checked::after {
content: "";
width: 4px;
height: 8px;
border: solid #041018;
border-width: 0 2px 2px 0;
transform: rotate(45deg) translate(-1px, -1px);
}
.of-join-done { text-align: center; }
.of-join-attest[hidden],
#joinDetails[hidden],
#joinPassStep[hidden] { display: none !important; }
.of-login-card .of-join-form .of-input-wrap input { padding-right: 2.4rem; }
body.of-join .of-join-hint {
display: block;
margin: 0.28rem 0 0;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.02em;
color: rgba(148, 163, 184, 0.85);
line-height: 1.35;
}
body.of-join #joinPhoneField.is-country-flash .phone-composite {
animation: joinCountryFlash 0.65s ease;
}
@keyframes joinCountryFlash {
0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.35); }
40% { box-shadow: 0 0 0 4px rgba(6, 142, 209, 0.28); }
100% { box-shadow: 0 0 0 3px rgba(6, 142, 209, 0.16); }
}
body.of-join .phone-unified {
position: relative;
z-index: 4;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
body.of-join #joinPhoneField.is-picker-open { z-index: 6; }
body.of-join .of-join-fault {
display: block;
margin: 0.32rem 0 0;
color: #fca5a5;
font-size: 0.72rem;
font-weight: 650;
line-height: 1.3;
}
body.of-join .of-join-fault[hidden] { display: none !important; }
body.of-join .of-field-shell {
position: relative;
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
body.of-join .of-field-shell > input:not(.phone-number-field) {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
padding-right: 2.55rem !important;
}
body.of-join .of-field-shell .of-field-ok {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%) scale(0.6);
width: 1.2rem;
height: 1.2rem;
border-radius: 999px;
display: grid;
place-items: center;
font-size: 0.68rem;
font-weight: 800;
color: #041018;
background: linear-gradient(145deg, #6ee7b7, #10b981);
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
body.of-join .of-field-shell.is-phone .of-field-ok {
right: 0.55rem;
}
body.of-join .of-field-shell.is-ok .of-field-ok {
opacity: 1;
transform: translateY(-50%) scale(1);
}
body.of-join .of-field-shell.is-ok > input:not(.phone-number-field),
body.of-join .phone-composite.of-field-shell.is-ok {
border-color: rgba(110, 231, 183, 0.72) !important;
box-shadow:
0 0 0 3px rgba(16, 185, 129, 0.16),
0 0 24px rgba(16, 185, 129, 0.12);
animation: joinFieldOk 0.55s ease;
}
body.of-join .of-field-shell.is-bad > input:not(.phone-number-field),
body.of-join .phone-composite.of-field-shell.is-bad,
body.of-join .of-input-wrap.is-fault input,
body.of-join .phone-composite.is-fault {
border-color: rgba(248, 113, 113, 0.8) !important;
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.14);
}
body.of-join .of-field-shell.is-checking > input:not(.phone-number-field),
body.of-join .phone-composite.of-field-shell.is-checking {
border-color: rgba(56, 189, 248, 0.55) !important;
box-shadow: 0 0 0 3px rgba(6, 142, 209, 0.16);
}
@keyframes joinFieldOk {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35); }
55% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.18); }
100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16); }
}
body.of-join .of-login-card .of-join-form .of-field-shell > input,
body.of-join .of-login-card .of-join-form .of-input-wrap input {
transition:
border-color 0.3s ease,
box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
background 0.3s ease,
transform 0.25s ease;
}
body.of-join .of-login-card .of-join-form .of-field-shell > input:focus {
transform: translateY(-1px);
}
body.of-join .phone-unified .phone-composite {
display: flex;
align-items: center;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
min-height: 48px;
padding: 0 0.4rem;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.28);
background: rgba(2, 8, 18, 0.85);
transition: border-color 0.3s ease, box-shadow 0.35s ease;
}
body.of-join .phone-unified .phone-composite:focus-within {
border-color: rgba(56, 189, 248, 0.55);
box-shadow: 0 0 0 3px rgba(6, 142, 209, 0.16);
}
body.of-join .phone-code-flag { display: none !important; }
body.of-join .phone-code-trigger {
display: inline-flex;
align-items: center;
gap: 0.28rem;
flex: 0 1 auto;
max-width: 46%;
min-width: 0;
height: 32px;
margin: 0;
padding: 0 0.45rem;
border-radius: 8px;
border: 1px solid rgba(125, 211, 252, 0.28);
background: rgba(6, 142, 209, 0.16);
color: #e2e8f0;
font: inherit;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
body.of-join .phone-code-trigger:hover {
border-color: rgba(251, 191, 36, 0.4);
background: rgba(6, 142, 209, 0.24);
}
body.of-join .phone-code-iso {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
color: #7dd3fc;
flex-shrink: 0;
}
body.of-join .phone-code-dial {
font-size: 0.84rem;
font-weight: 650;
color: #f1f5f9;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.of-join .phone-code-chevron { color: #7dd3fc; flex-shrink: 0; transition: transform 0.2s ease; }
body.of-join .phone-code-trigger[aria-expanded="true"] .phone-code-chevron { transform: rotate(180deg); }
.of-login-card .of-join-form .phone-number-field {
flex: 1 1 auto;
width: auto;
min-width: 0;
max-width: 100%;
min-height: 0;
margin: 0;
padding: 0 2rem 0 0.55rem;
border: 0;
border-radius: 8px;
background: transparent;
box-shadow: none;
box-sizing: border-box;
}
.of-login-card .of-join-form .phone-number-field:focus {
border: 0;
box-shadow: none;
background: transparent;
transform: none;
}
/* El sheet vive en body (fixed): no empuja el layout ni genera scroll */
body.of-join #joinPhonePicker.phone-picker,
body.is-join-picker-open #joinPhonePicker {
position: fixed;
z-index: 14000;
margin: 0;
max-width: calc(100vw - 24px);
}
body.of-join #joinPhonePicker .phone-picker-list,
#joinPhonePicker.of-dial-sheet .phone-picker-list {
max-height: min(260px, 42vh);
overflow-x: hidden;
overflow-y: auto;
}
html[data-of-theme="light"] body.of-join .of-field-shell.is-ok > input:not(.phone-number-field),
html[data-of-theme="light"] body.of-join .phone-composite.of-field-shell.is-ok {
border-color: rgba(5, 150, 105, 0.55) !important;
}
.of-join-step {
margin: 0 0 0.75rem;
text-align: center;
font-size: 0.95rem;
font-weight: 750;
color: #f8fafc;
}
.of-join-meter {
height: 4px;
margin: 0.75rem 0 0.55rem;
border-radius: 999px;
overflow: hidden;
background: rgba(148, 163, 184, 0.18);
}
.of-join-meter span {
display: block;
height: 100%;
width: 0;
border-radius: inherit;
background: linear-gradient(90deg, #38bdf8, #068ed1);
transition: width 0.25s ease;
}
.of-join-rules {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0 0 0.85rem;
padding: 0;
list-style: none;
}
.of-join-rules li {
padding: 0.22rem 0.5rem;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.25);
font-size: 0.68rem;
font-weight: 700;
color: rgba(203, 213, 225, 0.75);
}
.of-join-rules li.is-ok {
color: #6ee7b7;
border-color: rgba(110, 231, 183, 0.45);
}
@media (max-width: 720px) {
.of-join-card,
.of-join-card.is-lock {
width: min(100%, 440px);
max-width: calc(100vw - 1.5rem);
padding: 1.25rem 0.95rem 1.1rem;
margin-left: auto;
margin-right: auto;
}
.of-join-grid { grid-template-columns: minmax(0, 1fr); }
body.of-join .of-login {
padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
padding-top: max(3.4rem, calc(env(safe-area-inset-top, 0px) + 2.6rem));
overflow-x: clip;
}
body.of-join .of-join-card {
margin-bottom: 0.5rem;
}
body.of-join .of-login-card .of-join-form input,
body.of-join .of-login-card .of-join-form select,
body.of-join .of-field-shell > input:not(.phone-number-field) {
font-size: 16px; /* evita zoom iOS */
}
body.of-join .phone-code-trigger {
max-width: 48%;
gap: 0.18rem;
padding: 0 0.35rem;
}
body.of-join .phone-code-iso { font-size: 0.68rem; }
body.of-join .phone-code-dial { font-size: 0.78rem; }
}
.of-pay-modal {
position: fixed;
inset: 0;
z-index: 9500;
display: grid;
place-items: center;
padding: 1.1rem;
}
.of-pay-modal[hidden] { display: none !important; }
.of-pay-backdrop {
position: absolute;
inset: 0;
background: rgba(2, 8, 18, 0.66);
backdrop-filter: blur(10px);
}
.of-pay-sheet {
position: relative;
width: min(560px, 100%);
padding: 1.35rem 1.25rem 1.15rem;
border-radius: 28px;
color: var(--of-fg);
border: 1px solid rgba(125, 211, 252, 0.32);
background:
radial-gradient(320px 160px at 100% 0%, rgba(56, 189, 248, 0.22), transparent 62%),
var(--of-surface);
box-shadow: 0 30px 80px rgba(2, 8, 18, 0.48);
transform: translateY(10px) scale(0.985);
opacity: 0;
transition: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.of-pay-modal.is-open .of-pay-sheet {
transform: none;
opacity: 1;
}
.of-pay-x {
position: absolute;
top: 0.85rem;
right: 0.85rem;
width: 36px;
height: 36px;
border: 0;
border-radius: 999px;
background: rgba(148, 163, 184, 0.12);
color: var(--of-fg);
font-size: 1.3rem;
cursor: pointer;
}
.of-pay-kicker {
margin: 0;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--of-accent);
}
.of-pay-sheet h2 {
margin: 0.28rem 2rem 0.25rem 0;
font-size: 1.35rem;
letter-spacing: -0.03em;
}
.of-pay-lead {
margin: 0 0 1rem;
color: var(--of-fg-muted);
font-size: 0.86rem;
}
.of-pay-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 0.9rem;
align-items: center;
}
.of-pay-amount {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem 0.45rem;
}
.of-pay-amount strong {
font-size: 3.4rem;
line-height: 0.9;
letter-spacing: -0.05em;
}
.of-pay-amount > span {
font-weight: 800;
color: var(--of-accent);
}
.of-pay-amount em {
flex: 1 1 100%;
font-style: normal;
font-size: 0.78rem;
color: var(--of-fg-muted);
}
.of-pay-qr {
display: grid;
place-items: center;
padding: 0.55rem;
border-radius: 22px;
background: #fff;
box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.35), 0 16px 40px rgba(56, 189, 248, 0.16);
}
.of-pay-qr img {
display: block;
width: 168px;
height: 168px;
}
.of-pay-addr-label {
display: block;
margin: 0.95rem 0 0.35rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--of-fg-muted);
}
.of-pay-addr {
display: flex;
gap: 0.45rem;
}
.of-pay-addr input {
flex: 1;
min-width: 0;
min-height: 46px;
padding: 0 0.8rem;
border-radius: 14px;
border: 1px solid rgba(125, 211, 252, 0.28);
background: rgba(2, 8, 18, 0.28);
color: var(--of-fg);
font: inherit;
font-size: 0.78rem;
}
html[data-of-theme="light"] .of-pay-addr input {
background: #f8fafc;
}
.of-pay-copy {
border: 0;
border-radius: 14px;
min-height: 46px;
padding: 0 0.9rem;
font: inherit;
font-size: 0.78rem;
font-weight: 800;
color: #042033;
background: linear-gradient(180deg, #e0f7ff, #38bdf8);
cursor: pointer;
}
.of-pay-copy.is-amount {
min-height: 34px;
margin-left: 0.2rem;
padding: 0 0.7rem;
border-radius: 999px;
}
.of-pay-copy.is-ghost {
color: var(--of-fg);
background: transparent;
border: 1px solid var(--of-border);
}
.of-pay-live {
display: flex;
align-items: center;
gap: 0.7rem;
margin-top: 0.9rem;
padding: 0.75rem 0.85rem;
border-radius: 16px;
border: 1px solid rgba(125, 211, 252, 0.22);
background: rgba(56, 189, 248, 0.08);
}
.of-pay-live strong,
.of-pay-live span {
display: block;
}
.of-pay-live strong {
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--of-accent);
}
.of-pay-live span {
font-size: 0.82rem;
}
.of-pay-live em {
margin-left: auto;
font-style: normal;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.of-pay-pulse {
width: 10px;
height: 10px;
border-radius: 999px;
background: #38bdf8;
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7);
animation: ofPayPulse 1.4s ease-out infinite;
}
.of-pay-modal.is-paid .of-pay-pulse {
background: #34d399;
animation: none;
box-shadow: none;
}
.of-pay-ok {
margin: 0.75rem 0 0;
color: #6ee7b7;
font-weight: 700;
}
.of-pay-abort {
width: 100%;
margin-top: 0.75rem;
}
.of-pay-code {
margin: 0.15rem 0 0.35rem;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-pay-confirm {
position: fixed;
inset: 0;
z-index: 9600;
display: grid;
place-items: center;
padding: 1.2rem;
}
.of-pay-confirm[hidden] { display: none !important; }
.of-pay-confirm-backdrop {
position: absolute;
inset: 0;
background: rgba(1, 6, 14, 0.62);
backdrop-filter: blur(14px);
}
.of-pay-confirm-card {
position: relative;
width: min(420px, 100%);
padding: 1.35rem 1.25rem 1.2rem;
border-radius: 24px;
border: 1px solid rgba(125, 211, 252, 0.34);
background:
linear-gradient(165deg, rgba(10, 28, 48, 0.96), rgba(3, 10, 20, 0.98));
box-shadow:
0 28px 80px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
animation: ofPayConfirmIn 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-pay-confirm-card h3 {
margin: 0.2rem 0 0.45rem;
font-size: 1.28rem;
letter-spacing: -0.04em;
color: #f8fafc;
}
.of-pay-confirm-card p {
margin: 0;
color: rgba(186, 230, 253, 0.78);
font-size: 0.88rem;
line-height: 1.5;
}
.of-pay-confirm-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1.05rem;
}
.of-pay-confirm-actions .of-pos-cta,
.of-pay-confirm-actions .of-pay-copy {
width: 100%;
}
@keyframes ofPayConfirmIn {
from { opacity: 0; transform: translateY(10px) scale(0.98); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.of-pay-confirm-card { animation: none; }
}
html[data-of-theme="light"] .of-pay-confirm-card {
background: linear-gradient(165deg, #fff, #f8fafc);
border-color: rgba(2, 132, 199, 0.22);
}
html[data-of-theme="light"] .of-pay-confirm-card h3 { color: #0f172a; }
html[data-of-theme="light"] .of-pay-confirm-card p { color: #475569; }
@keyframes ofPayPulse {
70% { box-shadow: 0 0 0 10px rgba(56, 189, 248, 0); }
100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
}
@media (max-width: 640px) {
.of-pay-grid { grid-template-columns: 1fr; }
.of-pay-amount strong { font-size: 2.8rem; }
}
/* Cambio de idioma — cinematic cover (sin scale: evita scroll/jank) */
html.lang-switching,
body.lang-switching {
overflow: hidden !important;
overscroll-behavior: none;
height: 100%;
touch-action: none;
}
body.lang-switching.oficial-page,
body.lang-switching.of-join {
overflow: hidden !important;
}
body.lang-switching .of-app,
body.lang-switching .of-login {
filter: blur(14px) brightness(0.38) saturate(0.85);
transform: none !important;
overflow: hidden !important;
pointer-events: none;
transition: filter 0.48s cubic-bezier(0.22, 1, 0.36, 1);
will-change: filter;
}
body.lang-reveal .of-app,
body.lang-reveal .of-login,
body.lang-switching.lang-reveal .of-app,
body.lang-switching.lang-reveal .of-login {
filter: none;
transition: filter 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}
.lang-transition {
position: fixed;
inset: 0;
z-index: 13000;
display: grid;
place-items: center;
pointer-events: auto;
overflow: hidden;
}
.lang-transition[hidden] {
display: none !important;
}
.lang-transition-veil {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 55% at 50% 42%, rgba(6, 142, 209, 0.32), transparent 58%),
radial-gradient(ellipse 50% 40% at 80% 80%, rgba(14, 165, 233, 0.12), transparent 50%),
#01070e;
opacity: 0;
transform: none;
}
.lang-transition-aurora {
position: absolute;
inset: -20%;
background:
conic-gradient(from 200deg at 50% 50%,
transparent 0deg,
rgba(6, 142, 209, 0.18) 60deg,
transparent 120deg,
rgba(56, 189, 248, 0.12) 200deg,
transparent 280deg,
rgba(125, 211, 252, 0.16) 320deg,
transparent 360deg);
opacity: 0;
filter: blur(40px);
pointer-events: none;
}
.lang-transition.is-in .lang-transition-veil {
animation: ofLangVeilIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.lang-transition.is-in .lang-transition-aurora {
animation: ofLangAurora 1.6s linear both;
}
.lang-transition.is-out .lang-transition-veil {
animation: ofLangVeilOut 0.55s ease forwards;
}
.lang-transition.is-out .lang-transition-aurora {
animation: ofLangAuroraOut 0.45s ease forwards;
}
.lang-shift {
position: relative;
z-index: 2;
display: grid;
justify-items: center;
gap: 0.55rem;
min-width: min(88vw, 520px);
text-align: center;
pointer-events: none;
}
.lang-shift-orb {
position: relative;
width: 5.2rem;
height: 5.2rem;
display: grid;
place-items: center;
margin-bottom: 0.35rem;
opacity: 0;
transform: scale(0.72);
}
.lang-shift-orb .lang-flag {
width: 3.35rem;
height: 3.35rem;
border-radius: 50%;
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.22),
0 0 0 6px rgba(6, 142, 209, 0.16),
0 12px 36px rgba(0, 0, 0, 0.45),
0 0 40px rgba(6, 142, 209, 0.35);
z-index: 2;
}
.lang-shift-pulse {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid rgba(125, 211, 252, 0.45);
opacity: 0;
pointer-events: none;
}
.lang-shift-pulse.is-late {
inset: -0.35rem;
border-color: rgba(56, 189, 248, 0.28);
}
.lang-transition.is-in .lang-shift-orb {
animation: ofLangOrbIn 0.55s 0.06s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.lang-transition.is-in .lang-shift-pulse {
animation: ofLangPulse 1.15s 0.12s ease-out forwards;
}
.lang-transition.is-in .lang-shift-pulse.is-late {
animation: ofLangPulse 1.15s 0.28s ease-out forwards;
}
.lang-transition.is-swap .lang-shift-orb .lang-flag {
animation: ofLangFlagSwap 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lang-shift-kicker {
margin: 0;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.46em;
text-transform: uppercase;
color: rgba(186, 230, 253, 0.78);
opacity: 0;
transform: translateY(12px);
}
.lang-shift-word {
display: block;
font-size: clamp(2.6rem, 9vw, 5.2rem);
font-weight: 800;
letter-spacing: -0.045em;
line-height: 0.94;
color: #fff;
text-shadow:
0 18px 50px rgba(6, 142, 209, 0.45),
0 0 60px rgba(125, 211, 252, 0.2);
opacity: 0;
transform: translateY(16px) scale(0.94);
}
.lang-shift-code {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.42em;
color: #7dd3fc;
opacity: 0;
transform: translateY(10px);
}
.lang-shift-code::before {
content: "";
display: block;
width: 52px;
height: 2px;
margin: 0 auto 0.75rem;
border-radius: 999px;
background: linear-gradient(90deg, transparent, #7dd3fc, #fff, #7dd3fc, transparent);
box-shadow: 0 0 18px rgba(125, 211, 252, 0.75);
}
.lang-transition.is-in .lang-shift-kicker {
animation: ofLangRise 0.48s 0.14s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.lang-transition.is-in .lang-shift-word {
animation: ofLangWordIn 0.58s 0.08s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.lang-transition.is-in .lang-shift-code {
animation: ofLangRise 0.48s 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.lang-transition.is-swap .lang-shift-word {
animation: ofLangWordSwap 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lang-transition.is-swap .lang-shift-code {
animation: ofLangCodeFlash 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.lang-transition.is-out .lang-shift-orb,
.lang-transition.is-out .lang-shift-kicker,
.lang-transition.is-out .lang-shift-word,
.lang-transition.is-out .lang-shift-code,
.lang-transition.is-out .lang-shift-pulse {
animation: ofLangWordOut 0.42s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}
@keyframes ofLangVeilIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ofLangVeilOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes ofLangAurora {
0% { opacity: 0; transform: rotate(0deg) scale(1); }
20% { opacity: 0.85; }
100% { opacity: 0.35; transform: rotate(40deg) scale(1.08); }
}
@keyframes ofLangAuroraOut {
to { opacity: 0; }
}
@keyframes ofLangOrbIn {
to { opacity: 1; transform: scale(1); }
}
@keyframes ofLangPulse {
0% { opacity: 0.7; transform: scale(0.7); }
100% { opacity: 0; transform: scale(1.55); }
}
@keyframes ofLangFlagSwap {
0% { transform: scale(1) rotate(0deg); filter: blur(0); }
40% { transform: scale(0.82) rotate(-8deg); filter: blur(6px); opacity: 0.35; }
55% { transform: scale(0.9) rotate(6deg); filter: blur(6px); opacity: 0.35; }
100% { transform: scale(1) rotate(0deg); filter: blur(0); opacity: 1; }
}
@keyframes ofLangRise {
to { opacity: 1; transform: translateY(0); }
}
@keyframes ofLangWordIn {
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ofLangWordSwap {
0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); letter-spacing: -0.045em; }
40% { opacity: 0; transform: translateY(-8px) scale(1.04); filter: blur(12px); letter-spacing: 0.08em; }
55% { opacity: 0; transform: translateY(10px) scale(0.92); filter: blur(12px); letter-spacing: -0.08em; }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); letter-spacing: -0.045em; }
}
@keyframes ofLangCodeFlash {
0%, 100% { opacity: 1; transform: translateY(0); }
45% { opacity: 0; transform: translateY(-4px); }
55% { opacity: 0; transform: translateY(4px); }
}
@keyframes ofLangWordOut {
to { opacity: 0; transform: scale(1.06); filter: blur(10px); }
}
@media (prefers-reduced-motion: reduce) {
body.lang-switching .of-app,
body.lang-switching .of-login,
.lang-transition.is-in .lang-shift-word,
.lang-transition.is-swap .lang-shift-word,
.lang-transition.is-swap .lang-shift-orb .lang-flag {
animation: none !important;
filter: none !important;
transform: none !important;
}
}
/* Network payout celebration (day N · 20s) */
.of-net-pay {
position: fixed;
inset: 0;
z-index: 12000;
display: grid;
place-items: center;
pointer-events: auto;
}
.of-net-pay[hidden] { display: none !important; }
.of-net-pay-veil {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 40%, rgba(16, 185, 129, 0.28), transparent 70%),
rgba(6, 10, 18, 0.88);
backdrop-filter: blur(10px);
animation: ofNetPayVeil 0.6s ease both;
}
.of-net-pay-stage {
position: relative;
z-index: 1;
width: min(92vw, 420px);
padding: 2.2rem 1.6rem 1.8rem;
text-align: center;
border-radius: 28px;
border: 1px solid rgba(52, 211, 153, 0.35);
background: linear-gradient(160deg, rgba(15, 23, 42, 0.95), rgba(6, 78, 59, 0.55));
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
animation: ofNetPayIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.of-net-pay-burst {
position: absolute;
inset: -20% -10%;
background:
radial-gradient(circle at 20% 30%, rgba(250, 204, 21, 0.35), transparent 40%),
radial-gradient(circle at 80% 20%, rgba(52, 211, 153, 0.3), transparent 35%),
radial-gradient(circle at 50% 80%, rgba(56, 189, 248, 0.22), transparent 40%);
animation: ofNetPayPulse 2.4s ease-in-out infinite;
pointer-events: none;
}
.of-net-pay-kicker {
margin: 0 0 0.35rem;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #6ee7b7;
}
.of-net-pay-stage h2 {
margin: 0 0 1rem;
font-size: clamp(1.35rem, 4vw, 1.75rem);
font-weight: 800;
color: #ecfdf5;
}
.of-net-pay-amount {
margin: 0 0 0.55rem;
font-size: clamp(2.1rem, 7vw, 2.85rem);
font-weight: 900;
letter-spacing: -0.03em;
color: #fbbf24;
text-shadow: 0 0 40px rgba(251, 191, 36, 0.35);
font-variant-numeric: tabular-nums;
}
.of-net-pay-amount small {
font-size: 0.42em;
font-weight: 700;
letter-spacing: 0.08em;
color: #a7f3d0;
}
.of-net-pay-dest {
margin: 0 0 1.25rem;
font-size: 0.92rem;
color: #a7f3d0;
min-height: 1.4em;
}
.of-net-pay-bar {
height: 6px;
border-radius: 99px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
margin: 0 auto 0.75rem;
max-width: 260px;
}
.of-net-pay-bar i {
display: block;
height: 100%;
width: 0%;
border-radius: inherit;
background: linear-gradient(90deg, #34d399, #fbbf24);
transition: width 0.2s linear;
}
.of-net-pay-timer {
margin: 0;
font-size: 0.78rem;
font-weight: 700;
color: rgba(167, 243, 208, 0.75);
font-variant-numeric: tabular-nums;
}
@keyframes ofNetPayVeil {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ofNetPayIn {
from { opacity: 0; transform: translateY(18px) scale(0.94); }
to { opacity: 1; transform: none; }
}
@keyframes ofNetPayPulse {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.04); }
}
html[data-of-theme="light"] .of-net-pay-veil {
background:
radial-gradient(ellipse 80% 60% at 50% 40%, rgba(16, 185, 129, 0.2), transparent 70%),
rgba(241, 245, 249, 0.92);
}
html[data-of-theme="light"] .of-net-pay-stage {
background: linear-gradient(160deg, #fff, #ecfdf5);
border-color: rgba(16, 185, 129, 0.35);
}
html[data-of-theme="light"] .of-net-pay-stage h2 { color: #064e3b; }
html[data-of-theme="light"] .of-net-pay-dest { color: #047857; }
/* ── Recursos hub ── */
.of-recursos-hub {
display: grid;
gap: 1.35rem;
}
.of-res-hero {
position: relative;
overflow: hidden;
padding: 1.45rem 1.35rem 1.55rem;
border-radius: 24px;
border: 1px solid rgba(125, 211, 252, 0.22);
background:
radial-gradient(120% 140% at 0% 0%, rgba(56, 189, 248, 0.2), transparent 55%),
radial-gradient(90% 120% at 100% 0%, rgba(52, 211, 153, 0.12), transparent 50%),
linear-gradient(155deg, rgba(8, 18, 36, 0.95), rgba(2, 8, 20, 0.92));
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.of-res-kicker {
margin: 0 0 0.35rem;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-res-hero h3 {
margin: 0;
font-size: clamp(1.25rem, 3vw, 1.7rem);
font-weight: 800;
letter-spacing: -0.03em;
color: #f8fafc;
}
.of-res-hero > p {
margin: 0.45rem 0 0;
max-width: 36rem;
color: #94a3b8;
font-size: 0.92rem;
line-height: 1.5;
}
.of-res-block {
display: grid;
gap: 0.95rem;
}
.of-res-block-head h3 {
margin: 0;
font-size: 1.05rem;
font-weight: 800;
color: #f1f5f9;
}
.of-res-block-head p {
margin: 0.25rem 0 0;
color: #94a3b8;
font-size: 0.82rem;
}
.of-res-roadmap {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0;
position: relative;
}
.of-res-roadmap::before {
content: "";
position: absolute;
left: 0.85rem;
top: 0.5rem;
bottom: 0.5rem;
width: 2px;
background: linear-gradient(180deg, rgba(56, 189, 248, 0.55), rgba(148, 163, 184, 0.15));
}
.of-res-road-item {
position: relative;
display: grid;
grid-template-columns: 1.8rem 1fr;
gap: 0.75rem;
padding: 0.85rem 0 0.85rem 0.15rem;
opacity: 0;
animation: ofTreeNodeIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(var(--i, 0) * 70ms);
}
.of-res-road-dot {
width: 0.95rem;
height: 0.95rem;
margin-top: 0.2rem;
border-radius: 50%;
border: 2px solid rgba(56, 189, 248, 0.55);
background: #0b1220;
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
z-index: 1;
}
.of-res-road-item.is-done .of-res-road-dot {
background: #34d399;
border-color: #34d399;
}
.of-res-road-item.is-active .of-res-road-dot {
background: #38bdf8;
border-color: #7dd3fc;
animation: ofTreePulse 2.4s ease-in-out infinite;
}
.of-res-road-copy {
padding: 0.85rem 1rem;
border-radius: 18px;
border: 1px solid rgba(148, 163, 184, 0.16);
background: linear-gradient(145deg, rgba(12, 24, 42, 0.72), rgba(6, 14, 28, 0.9));
}
.of-res-road-copy em {
display: block;
font-style: normal;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-res-road-copy strong {
display: block;
margin-top: 0.2rem;
font-size: 0.98rem;
color: #f8fafc;
}
.of-res-road-copy p {
margin: 0.35rem 0 0;
color: #94a3b8;
font-size: 0.82rem;
line-height: 1.45;
}
.of-res-road-tag {
display: inline-block;
margin-top: 0.55rem;
padding: 0.2rem 0.55rem;
border-radius: 999px;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #bae6fd;
background: rgba(56, 189, 248, 0.14);
border: 1px solid rgba(56, 189, 248, 0.28);
}
.of-res-road-item.is-done .of-res-road-tag {
color: #a7f3d0;
background: rgba(52, 211, 153, 0.12);
border-color: rgba(52, 211, 153, 0.28);
}
.of-res-road-item.is-upcoming .of-res-road-tag {
color: #fde68a;
background: rgba(251, 191, 36, 0.1);
border-color: rgba(251, 191, 36, 0.25);
}
.of-res-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 0.85rem;
}
.of-res-card {
display: grid;
gap: 0.75rem;
padding: 1rem;
border-radius: 20px;
border: 1px solid rgba(125, 211, 252, 0.18);
background:
radial-gradient(90% 120% at 100% 0%, rgba(167, 139, 250, 0.12), transparent 55%),
linear-gradient(145deg, rgba(12, 24, 42, 0.8), rgba(6, 14, 28, 0.92));
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
opacity: 0;
animation: ofTreeNodeIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(var(--i, 0) * 60ms);
transition: transform 0.25s ease, border-color 0.25s ease;
}
.of-res-card:hover {
transform: translateY(-3px);
border-color: rgba(56, 189, 248, 0.4);
}
.of-res-card-ico {
width: 2.6rem;
height: 2.6rem;
border-radius: 14px;
display: grid;
place-items: center;
font-size: 0.72rem;
font-weight: 800;
color: #0c4a6e;
background: linear-gradient(145deg, #e0f2fe, #38bdf8);
}
.of-res-card-meta {
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #94a3b8;
}
.of-res-card-copy strong {
display: block;
margin-top: 0.2rem;
font-size: 0.98rem;
color: #f8fafc;
}
.of-res-card-copy p {
margin: 0.35rem 0 0;
color: #94a3b8;
font-size: 0.78rem;
line-height: 1.4;
}
.of-res-card-actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.of-res-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.15rem;
padding: 0.45rem 0.85rem;
border-radius: 12px;
border: 0;
font: inherit;
font-size: 0.78rem;
font-weight: 750;
text-decoration: none;
cursor: pointer;
color: #04101d;
background: linear-gradient(135deg, #7dd3fc, #38bdf8);
}
.of-res-btn.is-ghost {
color: #e2e8f0;
background: rgba(148, 163, 184, 0.14);
border: 1px solid rgba(148, 163, 184, 0.22);
}
.of-res-empty {
margin: 0;
padding: 1rem;
color: #94a3b8;
font-size: 0.88rem;
}
.of-res-viewer {
position: fixed;
inset: 0;
z-index: 90;
display: grid;
place-items: center;
padding: 1rem;
}
.of-res-viewer[hidden] { display: none !important; }
.of-res-viewer-backdrop {
position: absolute;
inset: 0;
background: rgba(2, 8, 18, 0.72);
backdrop-filter: blur(6px);
}
.of-res-viewer-sheet {
position: relative;
z-index: 1;
width: min(960px, 100%);
height: min(88vh, 820px);
display: grid;
grid-template-rows: auto 1fr;
border-radius: 22px;
overflow: hidden;
border: 1px solid rgba(125, 211, 252, 0.25);
background: #0b1220;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.of-res-viewer-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}
.of-res-viewer-kicker {
margin: 0;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-res-viewer-head h3 {
margin: 0.15rem 0 0;
font-size: 1rem;
color: #f8fafc;
}
.of-res-viewer-actions {
display: flex;
gap: 0.4rem;
align-items: center;
position: relative;
z-index: 2;
}
.of-res-viewer-actions .of-res-btn {
pointer-events: auto;
cursor: pointer;
min-width: 2.35rem;
}
#ofResViewerClose {
font-size: 1.35rem;
line-height: 1;
padding: 0.35rem 0.7rem;
}
.of-res-viewer-frame {
width: 100%;
height: 100%;
border: 0;
background: #111827;
}
html[data-of-theme="light"] .of-res-hero {
background:
radial-gradient(120% 140% at 0% 0%, rgba(14, 165, 233, 0.12), transparent 55%),
linear-gradient(155deg, #fff, #f1f5f9);
border-color: rgba(14, 116, 144, 0.18);
}
html[data-of-theme="light"] .of-res-hero h3,
html[data-of-theme="light"] .of-res-block-head h3,
html[data-of-theme="light"] .of-res-road-copy strong,
html[data-of-theme="light"] .of-res-card-copy strong { color: #0f172a; }
html[data-of-theme="light"] .of-res-road-copy,
html[data-of-theme="light"] .of-res-card {
background: linear-gradient(145deg, #fff, #f8fafc);
border-color: rgba(148, 163, 184, 0.28);
}
/* ================= Academia ================= */
.of-nav-new {
position: relative;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.28rem;
height: 1.3rem;
padding: 0 0.5rem 0 0.42rem;
border-radius: 999px;
font-size: 0.6rem;
font-weight: 850;
letter-spacing: 0.12em;
line-height: 1;
color: #022c22;
background: linear-gradient(110deg, #6ee7b7 0%, #34d399 30%, #fde68a 50%, #34d399 70%, #10b981 100%);
background-size: 250% 100%;
box-shadow:
0 0 0 1px rgba(110, 231, 183, 0.55),
0 6px 16px -6px rgba(16, 185, 129, 0.85),
0 0 18px -4px rgba(52, 211, 153, 0.55);
overflow: hidden;
isolation: isolate;
animation: ofNewShift 3.2s linear infinite, ofNewGlow 2.4s ease-in-out infinite;
}
.of-nav-new::after {
content: "";
position: absolute;
inset: -2px auto -2px -40%;
width: 35%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
transform: skewX(-20deg);
animation: ofNewSweep 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
z-index: -1;
}
.of-nav-new i {
width: 5px;
height: 5px;
border-radius: 50%;
background: #022c22;
box-shadow: 0 0 0 0 rgba(2, 44, 34, 0.5);
animation: ofNewDot 1.6s ease-out infinite;
}
.of-nav-new.is-sm {
height: 1.1rem;
font-size: 0.52rem;
padding: 0 0.4rem 0 0.34rem;
vertical-align: 1px;
margin-left: 0.25rem;
}
.of-nav-academia .of-nav-ico-wrap {
border-color: rgba(52, 211, 153, 0.28);
background: radial-gradient(circle at 30% 20%, rgba(52, 211, 153, 0.18), rgba(255, 255, 255, 0.02) 70%);
}
.of-nav-academia .of-nav-ico { color: #6ee7b7; opacity: 1; }
.of-nav-academia:hover { background: rgba(16, 185, 129, 0.09); }
.of-nav-academia.is-active .of-nav-new {
color: #022c22;
background: linear-gradient(110deg, #fff 0%, #d1fae5 40%, #fde68a 50%, #d1fae5 60%, #fff 100%);
background-size: 250% 100%;
}
.of-dock-academia .of-dock-ico { color: #6ee7b7; }
@keyframes ofNewShift { to { background-position: -250% 0; } }
@keyframes ofNewSweep { 0%, 55% { left: -40%; } 100% { left: 120%; } }
@keyframes ofNewGlow {
0%, 100% { box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.55), 0 6px 16px -6px rgba(16, 185, 129, 0.85), 0 0 14px -6px rgba(52, 211, 153, 0.45); }
50% { box-shadow: 0 0 0 1px rgba(253, 230, 138, 0.7), 0 6px 18px -5px rgba(16, 185, 129, 0.95), 0 0 22px -2px rgba(52, 211, 153, 0.7); }
}
@keyframes ofNewDot {
0% { box-shadow: 0 0 0 0 rgba(2, 44, 34, 0.55); }
100% { box-shadow: 0 0 0 5px rgba(2, 44, 34, 0); }
}
.of-acad-view { width: 100%; }
.of-acad-stage {
position: relative;
overflow: hidden;
isolation: isolate;
border-radius: 26px;
padding: clamp(1.4rem, 4vw, 3rem) clamp(1.1rem, 4vw, 3rem) 0;
min-height: min(78vh, 720px);
display: flex;
flex-direction: column;
gap: clamp(1.4rem, 3vw, 2.2rem);
background:
radial-gradient(120% 90% at 50% -10%, rgba(16, 185, 129, 0.16), transparent 60%),
linear-gradient(160deg, #06121f 0%, #071a2b 45%, #041019 100%);
border: 1px solid rgba(52, 211, 153, 0.18);
box-shadow:
0 40px 80px -40px rgba(0, 0, 0, 0.8),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
animation: ofAcadIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.of-acad-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.of-acad-grid {
position: absolute;
inset: -40px;
background-image:
linear-gradient(rgba(52, 211, 153, 0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(52, 211, 153, 0.07) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
animation: ofAcadGrid 14s linear infinite;
}
.of-acad-aurora {
position: absolute;
width: 60%;
aspect-ratio: 1;
border-radius: 50%;
filter: blur(70px);
opacity: 0.5;
mix-blend-mode: screen;
}
.of-acad-aurora.is-a { background: #10b981; top: -25%; left: -10%; animation: ofAcadFloatA 16s ease-in-out infinite; }
.of-acad-aurora.is-b { background: #0ea5e9; top: 10%; right: -20%; opacity: 0.32; animation: ofAcadFloatB 19s ease-in-out infinite; }
.of-acad-aurora.is-c { background: #f59e0b; bottom: -35%; left: 30%; opacity: 0.18; animation: ofAcadFloatA 22s ease-in-out infinite reverse; }
.of-acad-scan {
position: absolute;
left: 0;
right: 0;
height: 140px;
top: -140px;
background: linear-gradient(180deg, transparent, rgba(52, 211, 153, 0.08) 70%, rgba(110, 231, 183, 0.25) 99%, transparent);
animation: ofAcadScan 6.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.of-acad-dust i {
position: absolute;
bottom: -10px;
left: var(--x);
width: 3px;
height: 3px;
border-radius: 50%;
background: #a7f3d0;
box-shadow: 0 0 8px 2px rgba(52, 211, 153, 0.6);
opacity: 0;
animation: ofAcadDust var(--t) linear var(--d) infinite;
}
.of-acad-dust i:nth-child(3n) { background: #fde68a; box-shadow: 0 0 8px 2px rgba(251, 191, 36, 0.55); }
.of-acad-hero {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: clamp(1.5rem, 5vw, 3.5rem);
}
.of-acad-orb {
position: relative;
width: clamp(200px, 26vw, 280px);
aspect-ratio: 1;
display: grid;
place-items: center;
}
.of-acad-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid rgba(52, 211, 153, 0.22);
}
.of-acad-ring.is-1 { animation: ofAcadSpin 14s linear infinite; }
.of-acad-ring.is-2 {
inset: 13%;
border-style: dashed;
border-color: rgba(110, 231, 183, 0.3);
animation: ofAcadSpin 10s linear infinite reverse;
}
.of-acad-ring.is-3 {
inset: -9%;
border-color: rgba(251, 191, 36, 0.14);
transform: rotateX(68deg);
animation: ofAcadTilt 9s linear infinite;
}
.of-acad-ring i {
position: absolute;
top: -5px;
left: calc(50% - 5px);
width: 10px;
height: 10px;
border-radius: 50%;
background: radial-gradient(circle, #ecfdf5, #34d399 60%);
box-shadow: 0 0 14px 4px rgba(52, 211, 153, 0.7);
}
.of-acad-ring.is-2 i:nth-child(2) {
top: auto;
bottom: -4px;
width: 8px;
height: 8px;
background: radial-gradient(circle, #fffbeb, #fbbf24 60%);
box-shadow: 0 0 14px 4px rgba(251, 191, 36, 0.6);
}
.of-acad-ring.is-3 i {
background: radial-gradient(circle, #fffbeb, #f59e0b 60%);
box-shadow: 0 0 16px 5px rgba(245, 158, 11, 0.55);
}
.of-acad-pulse {
position: absolute;
inset: 26%;
border-radius: 50%;
border: 2px solid rgba(52, 211, 153, 0.5);
animation: ofAcadPulse 3.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.of-acad-pulse.is-late { animation-delay: 1.6s; }
.of-acad-core {
position: relative;
width: 46%;
aspect-ratio: 1;
border-radius: 50%;
display: grid;
place-items: center;
background:
radial-gradient(circle at 35% 25%, rgba(110, 231, 183, 0.35), transparent 55%),
linear-gradient(160deg, #0b2a2a, #06121f);
border: 1px solid rgba(110, 231, 183, 0.45);
box-shadow:
0 0 0 8px rgba(16, 185, 129, 0.06),
0 0 50px -6px rgba(16, 185, 129, 0.75),
inset 0 0 30px rgba(16, 185, 129, 0.25);
animation: ofAcadBob 4.5s ease-in-out infinite;
}
.of-acad-cap {
width: 68%;
filter: drop-shadow(0 6px 14px rgba(16, 185, 129, 0.55));
animation: ofAcadCap 4.5s ease-in-out infinite;
}
.of-acad-tassel { transform-origin: 52px 27px; animation: ofAcadTassel 2.2s ease-in-out infinite; }
.of-acad-spark {
position: absolute;
width: 14px;
height: 14px;
background: #fde68a;
clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.9));
animation: ofAcadTwinkle 2.6s ease-in-out infinite;
}
.of-acad-spark.is-1 { top: 12%; right: 14%; }
.of-acad-spark.is-2 { bottom: 16%; left: 8%; width: 10px; height: 10px; background: #a7f3d0; animation-delay: 0.9s; }
.of-acad-spark.is-3 { top: 48%; right: -2%; width: 8px; height: 8px; animation-delay: 1.7s; }
.of-acad-copy { min-width: 0; }
.of-acad-tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.38rem 0.8rem 0.38rem 0.6rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 750;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #a7f3d0;
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(52, 211, 153, 0.3);
animation: ofAcadRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.of-acad-tag-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #fbbf24;
box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6);
animation: ofAcadBeacon 1.8s ease-out infinite;
}
.of-acad-title {
margin: 0.9rem 0 0.8rem;
display: flex;
flex-direction: column;
line-height: 1.02;
letter-spacing: -0.035em;
}
.of-acad-title-main {
font-size: clamp(2.3rem, 6vw, 4rem);
font-weight: 850;
background: linear-gradient(100deg, #ecfdf5 0%, #6ee7b7 35%, #fde68a 50%, #6ee7b7 65%, #ecfdf5 100%);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: ofAcadRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both, ofAcadShine 6s linear infinite;
}
.of-acad-title-sub {
font-size: clamp(1.25rem, 3.2vw, 2rem);
font-weight: 700;
color: rgba(226, 232, 240, 0.9);
animation: ofAcadRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
.of-acad-lead {
margin: 0;
max-width: 34rem;
font-size: 0.98rem;
line-height: 1.65;
color: rgba(203, 213, 225, 0.82);
animation: ofAcadRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}
.of-acad-progress {
margin-top: 1.4rem;
max-width: 30rem;
animation: ofAcadRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}
.of-acad-progress-top {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.78rem;
font-weight: 700;
color: #6ee7b7;
margin-bottom: 0.55rem;
}
.of-acad-progress-dots { display: inline-flex; gap: 3px; }
.of-acad-progress-dots i {
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
animation: ofAcadDots 1.2s ease-in-out infinite;
}
.of-acad-progress-dots i:nth-child(2) { animation-delay: 0.15s; }
.of-acad-progress-dots i:nth-child(3) { animation-delay: 0.3s; }
.of-acad-bar {
position: relative;
height: 10px;
border-radius: 999px;
overflow: hidden;
background: rgba(15, 23, 42, 0.8);
border: 1px solid rgba(52, 211, 153, 0.2);
}
.of-acad-bar-fill {
position: absolute;
inset: 0 auto 0 0;
border-radius: inherit;
background:
repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.18) 0 8px, transparent 8px 16px),
linear-gradient(90deg, #047857, #10b981 50%, #6ee7b7);
background-size: 22px 22px, 100% 100%;
box-shadow: 0 0 18px rgba(16, 185, 129, 0.7);
animation: ofAcadBuild 7s cubic-bezier(0.65, 0, 0.35, 1) infinite, ofAcadStripes 0.9s linear infinite;
}
.of-acad-bar-fill i {
position: absolute;
right: -2px;
top: 50%;
width: 14px;
height: 14px;
margin-top: -7px;
border-radius: 50%;
background: radial-gradient(circle, #fff, #fde68a 45%, transparent 70%);
filter: blur(0.5px);
}
.of-acad-modules {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.9rem;
}
.of-acad-mod {
position: relative;
display: flex;
align-items: flex-start;
gap: 0.8rem;
padding: 1rem;
border-radius: 18px;
overflow: hidden;
background: linear-gradient(155deg, rgba(15, 35, 50, 0.85), rgba(6, 18, 31, 0.9));
border: 1px solid rgba(148, 163, 184, 0.14);
backdrop-filter: blur(8px);
animation: ofAcadRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.65s + var(--m) * 0.12s) both;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.of-acad-mod::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 30%, rgba(110, 231, 183, 0.12) 50%, transparent 70%);
background-size: 250% 100%;
animation: ofAcadModSheen 4.5s ease-in-out calc(var(--m) * 0.8s) infinite;
pointer-events: none;
}
.of-acad-mod:hover {
transform: translateY(-4px);
border-color: rgba(52, 211, 153, 0.4);
box-shadow: 0 18px 40px -20px rgba(16, 185, 129, 0.6);
}
.of-acad-mod-ico {
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 12px;
display: grid;
place-items: center;
color: #6ee7b7;
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(52, 211, 153, 0.28);
}
.of-acad-mod-ico svg { width: 22px; height: 22px; }
.of-acad-mod-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.of-acad-mod-body strong { font-size: 0.92rem; font-weight: 750; color: #f1f5f9; }
.of-acad-mod-body small { font-size: 0.74rem; color: rgba(148, 163, 184, 0.9); }
.of-acad-skel { display: flex; flex-direction: column; gap: 5px; margin-top: 0.55rem; }
.of-acad-skel i {
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(148, 163, 184, 0.12), rgba(110, 231, 183, 0.35), rgba(148, 163, 184, 0.12));
background-size: 200% 100%;
animation: ofAcadSkel 1.8s ease-in-out infinite;
}
.of-acad-skel i:first-child { width: 88%; }
.of-acad-skel i:last-child { width: 58%; animation-delay: 0.25s; }
.of-acad-mod-state {
flex: 0 0 auto;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.25rem 0.5rem;
border-radius: 999px;
color: #fbbf24;
background: rgba(251, 191, 36, 0.1);
border: 1px solid rgba(251, 191, 36, 0.3);
}
.of-acad-tape {
position: relative;
margin: auto calc(-1 * clamp(1.1rem, 4vw, 3rem)) 0;
padding: 0.6rem 0;
overflow: hidden;
background: repeating-linear-gradient(-45deg, #fbbf24 0 18px, #0b1520 18px 36px);
box-shadow: 0 -10px 30px -12px rgba(251, 191, 36, 0.45);
}
.of-acad-tape::before {
content: "";
position: absolute;
inset: 0.35rem 0;
background: #06121f;
border-top: 1px solid rgba(251, 191, 36, 0.5);
border-bottom: 1px solid rgba(251, 191, 36, 0.5);
}
.of-acad-tape-track {
position: relative;
display: flex;
align-items: center;
gap: 1.2rem;
width: max-content;
white-space: nowrap;
font-size: 0.72rem;
font-weight: 850;
letter-spacing: 0.28em;
color: #fde68a;
animation: ofAcadTape 22s linear infinite;
}
.of-acad-tape-track b { color: #34d399; font-weight: 400; }
@keyframes ofAcadIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes ofAcadRise { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ofAcadGrid { to { transform: translate(40px, 40px); } }
@keyframes ofAcadFloatA { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18%, 12%) scale(1.15); } }
@keyframes ofAcadFloatB { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-16%, 18%) scale(0.9); } }
@keyframes ofAcadScan { 0% { top: -140px; } 100% { top: 100%; } }
@keyframes ofAcadDust {
0% { transform: translateY(0) scale(0.6); opacity: 0; }
12% { opacity: 1; }
85% { opacity: 0.8; }
100% { transform: translateY(-110vh) translateX(20px) scale(1.2); opacity: 0; }
}
@keyframes ofAcadSpin { to { transform: rotate(360deg); } }
@keyframes ofAcadTilt { from { transform: rotateX(68deg) rotateZ(0); } to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes ofAcadPulse { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes ofAcadBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ofAcadCap { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes ofAcadTassel { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(12deg); } }
@keyframes ofAcadTwinkle { 0%, 100% { transform: scale(0.4) rotate(0); opacity: 0.2; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes ofAcadBeacon { 0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.65); } 100% { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0); } }
@keyframes ofAcadShine { to { background-position: -220% 0; } }
@keyframes ofAcadDots { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes ofAcadBuild { 0% { width: 6%; } 45% { width: 72%; } 60% { width: 72%; } 92% { width: 96%; } 100% { width: 96%; } }
@keyframes ofAcadStripes { to { background-position: 22px 0, 0 0; } }
@keyframes ofAcadModSheen { 0%, 60% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
@keyframes ofAcadSkel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes ofAcadTape { to { transform: translateX(-50%); } }
@media (max-width: 900px) {
.of-acad-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.of-acad-title { align-items: center; }
.of-acad-lead, .of-acad-progress { margin-left: auto; margin-right: auto; }
.of-acad-modules { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.of-acad-stage { border-radius: 20px; min-height: auto; }
.of-acad-orb { width: 190px; }
}
html[data-of-theme="light"] .of-acad-stage {
background:
radial-gradient(120% 90% at 50% -10%, rgba(16, 185, 129, 0.16), transparent 60%),
linear-gradient(160deg, #ffffff 0%, #f0fdf8 50%, #ecfeff 100%);
border-color: rgba(16, 185, 129, 0.22);
box-shadow: 0 30px 60px -36px rgba(15, 23, 42, 0.35);
}
html[data-of-theme="light"] .of-acad-aurora { mix-blend-mode: multiply; opacity: 0.22; }
html[data-of-theme="light"] .of-acad-grid {
background-image:
linear-gradient(rgba(5, 150, 105, 0.09) 1px, transparent 1px),
linear-gradient(90deg, rgba(5, 150, 105, 0.09) 1px, transparent 1px);
}
html[data-of-theme="light"] .of-acad-title-main {
background-image: linear-gradient(100deg, #064e3b 0%, #059669 35%, #d97706 50%, #059669 65%, #064e3b 100%);
}
html[data-of-theme="light"] .of-acad-title-sub { color: #0f172a; }
html[data-of-theme="light"] .of-acad-lead { color: #475569; }
html[data-of-theme="light"] .of-acad-tag { color: #047857; background: rgba(16, 185, 129, 0.1); }
html[data-of-theme="light"] .of-acad-progress-top { color: #047857; }
html[data-of-theme="light"] .of-acad-bar { background: #e2e8f0; }
html[data-of-theme="light"] .of-acad-mod {
background: linear-gradient(155deg, #ffffff, #f8fafc);
border-color: rgba(148, 163, 184, 0.3);
}
html[data-of-theme="light"] .of-acad-mod-body strong { color: #0f172a; }
html[data-of-theme="light"] .of-acad-mod-body small { color: #64748b; }
html[data-of-theme="light"] .of-acad-mod-ico,
html[data-of-theme="light"] .of-nav-academia .of-nav-ico,
html[data-of-theme="light"] .of-dock-academia .of-dock-ico { color: #059669; }
html[data-of-theme="light"] .of-acad-mod-state { color: #b45309; }
/* NEW en la barra inferior móvil: badge flotante sobre el icono */
@media (max-width: 960px) {
.of-nav .of-nav-academia { color: rgba(209, 250, 229, 0.9); }
.of-nav .of-nav-academia .of-nav-text { opacity: 0.9; }
.of-nav .of-nav-academia .of-nav-ico-wrap {
position: relative;
overflow: visible;
border-color: rgba(52, 211, 153, 0.55);
background:
radial-gradient(circle at 30% 20%, rgba(110, 231, 183, 0.35), transparent 65%),
linear-gradient(160deg, rgba(6, 78, 59, 0.85), rgba(2, 20, 24, 0.9));
animation: ofDockAcadRing 2.4s ease-out infinite;
}
.of-nav .of-nav-academia .of-nav-ico-wrap::before,
.of-nav .of-nav-academia .of-nav-ico-wrap::after {
content: "";
position: absolute;
width: 7px;
height: 7px;
background: #fde68a;
clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.95));
animation: ofAcadTwinkle 2.2s ease-in-out infinite;
pointer-events: none;
}
.of-nav .of-nav-academia .of-nav-ico-wrap::before { left: -5px; bottom: -2px; }
.of-nav .of-nav-academia .of-nav-ico-wrap::after {
left: -3px;
top: -4px;
width: 5px;
height: 5px;
background: #a7f3d0;
animation-delay: 1.1s;
}
.of-nav .of-nav-academia .of-nav-new {
position: absolute;
top: 1px;
left: calc(50% + 2px);
z-index: 2;
height: 15px;
gap: 0.18rem;
padding: 0 0.34rem 0 0.28rem;
font-size: 0.48rem;
letter-spacing: 0.1em;
border: 1px solid rgba(255, 255, 255, 0.55);
transform-origin: left bottom;
animation:
ofNewShift 2.6s linear infinite,
ofNewGlow 2s ease-in-out infinite,
ofDockNewFloat 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.of-nav .of-nav-academia .of-nav-new i { width: 4px; height: 4px; }
.of-nav .of-nav-academia.is-active {
background: linear-gradient(180deg, rgba(52, 211, 153, 0.34), rgba(16, 185, 129, 0.08));
box-shadow: 0 8px 22px rgba(16, 185, 129, 0.32), inset 0 0 0 1px rgba(167, 243, 208, 0.35);
}
.of-nav .of-nav-academia.is-active .of-nav-ico-wrap { box-shadow: 0 0 18px rgba(52, 211, 153, 0.55); }
}
@keyframes ofDockAcadRing {
0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55), 0 0 12px rgba(16, 185, 129, 0.35); }
70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0), 0 0 12px rgba(16, 185, 129, 0.35); }
100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0), 0 0 12px rgba(16, 185, 129, 0.35); }
}
@keyframes ofDockNewFloat {
0%, 100% { transform: translateY(0) rotate(-4deg) scale(1); }
50% { transform: translateY(-2px) rotate(3deg) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
.of-nav .of-nav-academia .of-nav-ico-wrap,
.of-nav .of-nav-academia .of-nav-ico-wrap::before,
.of-nav .of-nav-academia .of-nav-ico-wrap::after,
.of-nav-new,
.of-nav-new::after,
.of-nav-new i,
.of-acad-stage,
.of-acad-stage *,
.of-acad-stage *::before {
animation: none !important;
}
.of-acad-bar-fill { width: 72%; }
.of-acad-dust { display: none; }
}
/* ================= Tareas · CPX Research ================= */
.of-cpx {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
}
.of-cpx[hidden] { display: none !important; }
.of-cpx-goal {
position: relative;
overflow: hidden;
isolation: isolate;
padding: 1.25rem 1.3rem 1.1rem;
border-radius: 22px;
background:
radial-gradient(120% 140% at 0% 0%, rgba(16, 185, 129, 0.2), transparent 55%),
linear-gradient(160deg, #07192a 0%, #061321 100%);
border: 1px solid rgba(52, 211, 153, 0.22);
box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.of-cpx-goal-glow {
position: absolute;
inset: auto -20% -60% 40%;
height: 160%;
border-radius: 50%;
background: radial-gradient(circle, rgba(52, 211, 153, 0.22), transparent 60%);
filter: blur(30px);
z-index: -1;
animation: ofAcadFloatB 14s ease-in-out infinite;
}
.of-cpx-goal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.of-cpx-kicker {
margin: 0 0 0.3rem;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6ee7b7;
}
.of-cpx-amount {
margin: 0;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.4rem;
}
.of-cpx-amount strong {
font-size: clamp(1.9rem, 5vw, 2.5rem);
font-weight: 850;
letter-spacing: -0.03em;
line-height: 1;
background: linear-gradient(100deg, #ecfdf5, #6ee7b7 45%, #fde68a 60%, #ecfdf5);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: ofAcadShine 7s linear infinite;
}
.of-cpx-amount-of {
font-size: 0.95rem;
font-weight: 700;
color: rgba(203, 213, 225, 0.75);
}
.of-cpx-amount-of b { color: #f1f5f9; }
.of-cpx-badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.38rem 0.75rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 800;
color: #a7f3d0;
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(52, 211, 153, 0.32);
}
.of-cpx-badge i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #34d399;
animation: ofAcadBeacon 1.8s ease-out infinite;
}
.of-cpx-bar {
position: relative;
margin-top: 1rem;
height: 14px;
border-radius: 999px;
overflow: hidden;
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(52, 211, 153, 0.2);
}
.of-cpx-bar-fill {
position: absolute;
inset: 0 auto 0 0;
width: 0;
border-radius: inherit;
background:
repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.16) 0 8px, transparent 8px 16px),
linear-gradient(90deg, #047857, #10b981 55%, #6ee7b7);
background-size: 22px 22px, 100% 100%;
box-shadow: 0 0 18px rgba(16, 185, 129, 0.65);
transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
animation: ofAcadStripes 0.9s linear infinite;
}
.of-cpx-bar-fill i {
position: absolute;
right: -3px;
top: 50%;
width: 16px;
height: 16px;
margin-top: -8px;
border-radius: 50%;
background: radial-gradient(circle, #fff, #fde68a 45%, transparent 70%);
}
.of-cpx-meta {
display: flex;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 0.6rem;
font-size: 0.8rem;
font-weight: 700;
color: rgba(226, 232, 240, 0.85);
}
.of-cpx-meta span:last-child { color: rgba(148, 163, 184, 0.95); font-weight: 600; }
.of-cpx-note {
margin: 0.75rem 0 0;
font-size: 0.8rem;
line-height: 1.5;
color: rgba(148, 163, 184, 0.95);
}
.of-cpx-goal.is-reached {
border-color: rgba(251, 191, 36, 0.45);
box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(251, 191, 36, 0.18), 0 0 40px -14px rgba(251, 191, 36, 0.5);
}
.of-cpx-goal.is-reached .of-cpx-badge {
color: #fef3c7;
background: rgba(251, 191, 36, 0.16);
border-color: rgba(251, 191, 36, 0.45);
}
.of-cpx-goal.is-reached .of-cpx-badge i { background: #fbbf24; }
.of-cpx-goal.is-reached .of-cpx-bar-fill {
background:
repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 0 8px, transparent 8px 16px),
linear-gradient(90deg, #10b981, #34d399 40%, #fbbf24);
background-size: 22px 22px, 100% 100%;
box-shadow: 0 0 22px rgba(251, 191, 36, 0.6);
}
.of-cpx-goal.is-reached .of-cpx-meta span:first-child { color: #fde68a; }
.of-cpx-wall {
border-radius: 22px;
overflow: hidden;
background: #fff;
border: 1px solid rgba(148, 163, 184, 0.2);
box-shadow: 0 24px 50px -32px rgba(0, 0, 0, 0.75);
}
.of-cpx-wall-head {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.35rem 1rem;
padding: 0.85rem 1.1rem;
background: linear-gradient(160deg, #07192a, #061321);
border-bottom: 1px solid rgba(52, 211, 153, 0.2);
}
.of-cpx-wall-head strong { font-size: 0.95rem; color: #f1f5f9; }
.of-cpx-wall-head span { font-size: 0.75rem; color: rgba(148, 163, 184, 0.95); }
.of-cpx-frame {
display: block;
width: 100%;
height: min(1400px, 150vh);
border: 0;
background: #fff;
}
@media (max-width: 640px) {
.of-cpx-goal { padding: 1.05rem 1rem 1rem; border-radius: 18px; }
.of-cpx-wall { border-radius: 18px; }
.of-cpx-frame { height: 1500px; }
}
html[data-of-theme="light"] .of-cpx-goal,
html[data-of-theme="light"] .of-cpx-wall-head {
background:
radial-gradient(120% 140% at 0% 0%, rgba(16, 185, 129, 0.14), transparent 55%),
linear-gradient(160deg, #ffffff, #f0fdf8);
border-color: rgba(16, 185, 129, 0.25);
}
html[data-of-theme="light"] .of-cpx-amount strong {
background-image: linear-gradient(100deg, #064e3b, #059669 45%, #d97706 60%, #064e3b);
}
html[data-of-theme="light"] .of-cpx-amount-of b,
html[data-of-theme="light"] .of-cpx-wall-head strong { color: #0f172a; }
html[data-of-theme="light"] .of-cpx-meta { color: #334155; }
html[data-of-theme="light"] .of-cpx-kicker,
html[data-of-theme="light"] .of-cpx-badge { color: #047857; }
html[data-of-theme="light"] .of-cpx-bar { background: #e2e8f0; }
.of-cpx-list { display: flex; flex-direction: column; gap: 0.85rem; }
.of-cpx-list-head {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.35rem 1rem;
padding: 0 0.15rem;
}
.of-cpx-list-head strong { font-size: 1rem; font-weight: 750; color: var(--of-fg, #f1f5f9); letter-spacing: -0.01em; }
.of-cpx-list-head span { font-size: 0.76rem; color: rgba(148, 163, 184, 0.95); }
.of-cpx-grid[hidden] { display: none !important; }
/* Nunca bloquear selección: el refresh es silencioso */
.of-cpx-grid.is-loading,
.of-cpx-grid.is-seeking {
opacity: 1;
pointer-events: auto;
filter: none;
}
.of-cpx-list.is-syncing .of-cpx-list-head strong {
position: relative;
}
.of-cpx-list.is-syncing .of-cpx-list-head strong::after {
content: "";
display: inline-block;
width: 0.45rem;
height: 0.45rem;
margin-left: 0.45rem;
border-radius: 50%;
vertical-align: middle;
background: #34d399;
box-shadow: 0 0 10px rgba(52, 211, 153, 0.75);
animation: ofEarnSyncDot 1.1s ease-in-out infinite;
}
@keyframes ofEarnSyncDot {
0%, 100% { opacity: 0.35; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.15); }
}
.task-card.is-opp {
cursor: pointer;
}
.task-card.is-opp .task-btn {
pointer-events: none;
}
.task-card.is-skeleton {
pointer-events: none;
cursor: default;
border-color: rgba(148, 163, 184, 0.12);
background: linear-gradient(155deg, rgba(8, 20, 36, 0.85), rgba(4, 12, 24, 0.9));
animation: none;
}
.task-card.is-skeleton:hover {
transform: none;
box-shadow: none;
border-color: rgba(148, 163, 184, 0.12);
}
.of-sk {
display: block;
border-radius: 999px;
background: linear-gradient(
100deg,
rgba(148, 163, 184, 0.1) 20%,
rgba(226, 232, 240, 0.22) 40%,
rgba(148, 163, 184, 0.1) 60%
);
background-size: 220% 100%;
animation: ofSkShine 1.35s ease-in-out infinite;
}
.of-sk-chip { width: 4.6rem; height: 0.72rem; }
.of-sk-chip.is-sm { width: 3.2rem; }
.of-sk-chip.is-xs { width: 2.2rem; height: 0.55rem; }
.of-sk-title {
width: 72%;
height: 1.05rem;
margin: 0.55rem 0 0.55rem;
border-radius: 8px;
}
.of-sk-line {
width: 100%;
height: 0.62rem;
margin: 0 0 0.4rem;
border-radius: 6px;
}
.of-sk-line.is-short { width: 58%; margin-bottom: 0.75rem; }
.of-sk-bar {
flex: 1;
height: 7px;
border-radius: 999px;
}
.of-sk-pay { width: 5.5rem; height: 0.95rem; border-radius: 8px; }
.of-sk-btn { width: 5.2rem; height: 2rem; border-radius: 999px; }
.task-card.is-skeleton .task-progress {
gap: 0.55rem;
}
@keyframes ofSkShine {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
.of-sk { animation: none; background: rgba(148, 163, 184, 0.14); }
.of-cpx-list.is-syncing .of-cpx-list-head strong::after { animation: none; }
}
/* ── Busqueda premium de encuestas / ofertas ── */
.of-earn-seek {
--seek-accent: #34d399;
--seek-glow: rgba(52, 211, 153, 0.45);
position: relative;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.7rem;
min-height: 11.5rem;
margin: 0.35rem 0 0.85rem;
padding: 1.6rem 1.1rem 1.45rem;
border-radius: 1.35rem;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(120% 90% at 50% -10%, rgba(52, 211, 153, 0.18), transparent 55%),
linear-gradient(165deg, rgba(8, 28, 42, 0.96), rgba(4, 14, 24, 0.98));
border: 1px solid rgba(52, 211, 153, 0.22);
box-shadow:
0 22px 48px -28px rgba(0, 0, 0, 0.9),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.of-earn-seek.is-on,
.of-earn-seek:not([hidden]) {
display: flex;
}
.of-earn-seek[hidden] { display: none !important; }
.of-earn-seek::before {
content: "";
position: absolute;
inset: -40% -20%;
background:
conic-gradient(from 180deg at 50% 50%, transparent 0deg, rgba(52, 211, 153, 0.12) 55deg, transparent 110deg, rgba(45, 212, 191, 0.1) 200deg, transparent 280deg);
animation: ofEarnSeekSweep 4.2s linear infinite;
opacity: 0.85;
z-index: 0;
pointer-events: none;
}
.of-earn-seek-visual {
position: relative;
width: 4.75rem;
height: 4.75rem;
z-index: 1;
}
.of-earn-seek-halo,
.of-earn-seek-ring,
.of-earn-seek-core,
.of-earn-seek-beam {
position: absolute;
inset: 0;
border-radius: 50%;
}
.of-earn-seek-halo {
background: radial-gradient(circle, var(--seek-glow), transparent 68%);
animation: ofEarnSeekPulse 1.8s ease-in-out infinite;
}
.of-earn-seek-ring {
inset: 0.35rem;
border: 1.5px solid rgba(52, 211, 153, 0.35);
border-top-color: var(--seek-accent);
border-right-color: rgba(45, 212, 191, 0.55);
animation: ofEarnSeekSpin 1.15s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
box-shadow: 0 0 18px rgba(52, 211, 153, 0.25);
}
.of-earn-seek-core {
inset: 1.35rem;
background:
radial-gradient(circle at 35% 30%, #ecfdf5, #34d399 45%, #0f766e 100%);
box-shadow:
0 0 0 3px rgba(52, 211, 153, 0.18),
0 8px 20px rgba(16, 185, 129, 0.35);
animation: ofEarnSeekCore 2.4s ease-in-out infinite;
}
.of-earn-seek-beam {
inset: 0.15rem;
background: conic-gradient(from 0deg, transparent 0 72%, rgba(255, 255, 255, 0.55) 88%, transparent 100%);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
animation: ofEarnSeekSpin 2.4s linear infinite reverse;
opacity: 0.9;
}
.of-earn-seek-dots {
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
z-index: 2;
}
.of-earn-seek-dots i {
position: absolute;
width: 0.38rem;
height: 0.38rem;
margin: -0.19rem;
border-radius: 50%;
background: #ecfdf5;
box-shadow: 0 0 10px rgba(52, 211, 153, 0.85);
animation: ofEarnSeekOrbit 2.2s linear infinite;
}
.of-earn-seek-dots i:nth-child(1) { --a: 0deg; animation-delay: 0s; }
.of-earn-seek-dots i:nth-child(2) { --a: 120deg; animation-delay: -0.35s; }
.of-earn-seek-dots i:nth-child(3) { --a: 240deg; animation-delay: -0.7s; }
.of-earn-seek > strong {
position: relative;
z-index: 1;
margin: 0;
font-size: 0.98rem;
font-weight: 750;
letter-spacing: -0.015em;
color: #ecfdf5;
text-align: center;
}
.of-earn-seek > small {
position: relative;
z-index: 1;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(167, 243, 208, 0.78);
text-align: center;
}
@keyframes ofEarnSeekSpin {
to { transform: rotate(360deg); }
}
@keyframes ofEarnSeekPulse {
0%, 100% { transform: scale(0.92); opacity: 0.55; }
50% { transform: scale(1.08); opacity: 1; }
}
@keyframes ofEarnSeekCore {
0%, 100% { transform: scale(1); }
50% { transform: scale(0.92); }
}
@keyframes ofEarnSeekSweep {
to { transform: rotate(360deg); }
}
@keyframes ofEarnSeekOrbit {
from { transform: rotate(var(--a, 0deg)) translateX(2.05rem) rotate(calc(-1 * var(--a, 0deg))); }
to { transform: rotate(calc(var(--a, 0deg) + 360deg)) translateX(2.05rem) rotate(calc(-1 * (var(--a, 0deg) + 360deg))); }
}
html[data-of-theme="light"] .of-earn-seek {
background:
radial-gradient(120% 90% at 50% -10%, rgba(16, 185, 129, 0.14), transparent 55%),
linear-gradient(165deg, #f8fffc, #eef8f3);
border-color: rgba(16, 185, 129, 0.28);
box-shadow: 0 18px 36px -24px rgba(15, 118, 110, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
html[data-of-theme="light"] .of-earn-seek > strong { color: #064e3b; }
html[data-of-theme="light"] .of-earn-seek > small { color: rgba(6, 95, 70, 0.72); }
/* ── Centro de ganancias: pestañas ── */
.of-hub-tabs {
position: relative;
display: inline-flex;
align-self: flex-start;
gap: 0.25rem;
padding: 0.3rem;
border-radius: 999px;
background: linear-gradient(160deg, rgba(10, 30, 46, 0.92), rgba(5, 15, 26, 0.95));
border: 1px solid rgba(52, 211, 153, 0.2);
box-shadow: 0 18px 36px -24px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05);
max-width: 100%;
}
.of-hub-tabs[hidden] { display: none !important; }
.of-hub-ink {
position: absolute;
top: 0.3rem;
bottom: 0.3rem;
left: 0;
width: 0;
border-radius: 999px;
background: linear-gradient(120deg, #059669, #10b981 55%, #34d399);
box-shadow: 0 8px 22px -8px rgba(16, 185, 129, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.25);
transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.of-hub-tab {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.6rem 1.05rem;
border: 0;
border-radius: 999px;
background: transparent;
color: rgba(203, 213, 225, 0.82);
font: inherit;
font-size: 0.86rem;
font-weight: 750;
letter-spacing: -0.01em;
cursor: pointer;
white-space: nowrap;
transition: color 0.25s ease;
}
.of-hub-tab svg { width: 17px; height: 17px; flex: 0 0 auto; }
.of-hub-tab:hover { color: #f1f5f9; }
.of-hub-tab.is-active { color: #022c22; }
.of-hub-tab:focus-visible { outline: 2px solid #6ee7b7; outline-offset: 2px; }
.of-hub-tab-live {
font-style: normal;
font-size: 0.7rem;
font-weight: 800;
padding: 0.12rem 0.45rem;
border-radius: 999px;
color: #fde68a;
background: rgba(251, 191, 36, 0.14);
border: 1px solid rgba(251, 191, 36, 0.35);
}
.of-hub-tab.is-active .of-hub-tab-live { color: #022c22; background: rgba(255, 255, 255, 0.35); border-color: transparent; }
.of-hub-tab-live[hidden] { display: none; }
[data-hub-pane].is-enter { animation: ofHubEnter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes ofHubEnter {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
/* ── TimeWall: muro integrado ── */
.of-tw {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
border-radius: 24px;
overflow: hidden;
background: linear-gradient(165deg, #081a2b 0%, #06121f 55%, #040c16 100%);
border: 1px solid rgba(52, 211, 153, 0.26);
box-shadow:
0 30px 70px -36px rgba(0, 0, 0, 0.9),
0 0 0 1px rgba(255, 255, 255, 0.03) inset,
0 0 70px -34px rgba(16, 185, 129, 0.55);
}
.of-tw[hidden] { display: none !important; }
.of-tw-aura {
position: absolute;
inset: -40% -10% auto;
height: 70%;
z-index: -1;
background:
radial-gradient(closest-side at 25% 50%, rgba(16, 185, 129, 0.28), transparent),
radial-gradient(closest-side at 80% 40%, rgba(251, 191, 36, 0.16), transparent);
filter: blur(34px);
animation: ofCpxmGlow 8s ease-in-out infinite;
pointer-events: none;
}
.of-tw-head {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 1.05rem 1.1rem 0.9rem 1.2rem;
}
.of-tw-ico {
flex: 0 0 auto;
width: 48px;
height: 48px;
border-radius: 15px;
display: grid;
place-items: center;
color: #022c22;
background: radial-gradient(circle at 30% 25%, #fde68a, #34d399 55%, #059669);
box-shadow: 0 10px 26px -10px rgba(16, 185, 129, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.of-tw-ico svg { width: 24px; height: 24px; }
.of-tw-titles { flex: 1; min-width: 0; }
.of-tw-kicker {
margin: 0 0 0.15rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #6ee7b7;
}
.of-tw-kicker i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #34d399;
animation: ofAcadBeacon 1.8s ease-out infinite;
}
.of-tw-titles h3 {
margin: 0;
font-size: clamp(1.1rem, 3.4vw, 1.35rem);
font-weight: 850;
letter-spacing: -0.02em;
color: #f8fafc;
}
.of-tw-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.of-tw-tags span {
font-size: 0.68rem;
font-weight: 700;
padding: 0.16rem 0.5rem;
border-radius: 999px;
color: rgba(226, 232, 240, 0.88);
background: rgba(148, 163, 184, 0.1);
border: 1px solid rgba(148, 163, 184, 0.16);
}
.of-tw-today {
flex: 0 0 auto;
display: grid;
justify-items: end;
line-height: 1.05;
padding: 0.5rem 0.75rem;
border-radius: 14px;
background: rgba(251, 191, 36, 0.08);
border: 1px solid rgba(251, 191, 36, 0.28);
}
.of-tw-today small {
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(253, 230, 138, 0.8);
}
.of-tw-today strong {
font-size: 1.15rem;
font-weight: 850;
font-variant-numeric: tabular-nums;
background: linear-gradient(100deg, #fef3c7, #fbbf24 50%, #fef3c7);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: ofAcadShine 6s linear infinite;
}
.of-tw-today em { font-style: normal; font-size: 0.62rem; font-weight: 800; color: rgba(253, 230, 138, 0.7); }
.of-tw-today.is-pop { animation: ofTwPop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes ofTwPop {
0% { transform: scale(1); }
35% { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.18), 0 0 34px rgba(251, 191, 36, 0.55); }
100% { transform: scale(1); }
}
.of-tw-expand {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 12px;
display: grid;
place-items: center;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(148, 163, 184, 0.08);
color: #e2e8f0;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.of-tw-expand:hover { background: rgba(16, 185, 129, 0.16); border-color: rgba(52, 211, 153, 0.45); transform: translateY(-1px); }
.of-tw-expand svg { width: 19px; height: 19px; }
.of-tw-expand .is-close-ico,
.of-tw.is-full .of-tw-expand .is-open-ico { display: none; }
.of-tw.is-full .of-tw-expand .is-close-ico { display: block; }
.of-tw-steps {
list-style: none;
margin: 0;
padding: 0 1.1rem 0.95rem 1.2rem;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
counter-reset: none;
}
.of-tw-steps li {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
padding: 0.5rem 0.65rem;
border-radius: 12px;
background: rgba(15, 30, 45, 0.7);
border: 1px solid rgba(52, 211, 153, 0.12);
font-size: 0.75rem;
font-weight: 650;
line-height: 1.3;
color: rgba(226, 232, 240, 0.9);
}
.of-tw-steps b {
flex: 0 0 auto;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 0.72rem;
font-weight: 850;
color: #022c22;
background: linear-gradient(140deg, #6ee7b7, #10b981);
}
.of-tw-steps li:nth-child(2) b { background: linear-gradient(140deg, #fde68a, #f59e0b); }
.of-tw-stage {
position: relative;
margin: 0 0.6rem;
border-radius: 18px;
overflow: hidden;
background: #fff;
box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.18), 0 20px 40px -26px rgba(0, 0, 0, 0.9);
}
.of-tw-frame {
display: block;
width: 100%;
height: clamp(620px, 78vh, 1100px);
border: 0;
background: #fff;
}
.of-tw-loader,
.of-tw-burst {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
text-align: center;
padding: 1.5rem;
}
.of-tw-loader { background: radial-gradient(90% 70% at 50% 40%, #0a2233, #050d17); }
.of-tw-loader strong { font-size: 1rem; color: #f1f5f9; }
.of-tw-loader small { font-size: 0.78rem; color: rgba(148, 163, 184, 0.95); }
.of-tw-loader[hidden],
.of-tw-burst[hidden] { display: none !important; }
.of-tw-burst {
gap: 0.55rem;
background: radial-gradient(70% 55% at 50% 45%, rgba(6, 40, 32, 0.92), rgba(3, 10, 18, 0.88));
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
opacity: 0;
pointer-events: none;
}
.of-tw-burst.is-show { animation: ofTwBurst 3.2s ease both; }
@keyframes ofTwBurst {
0% { opacity: 0; }
10%, 80% { opacity: 1; }
100% { opacity: 0; }
}
.of-tw-burst strong {
font-size: clamp(1.8rem, 6vw, 2.6rem);
font-weight: 850;
background: linear-gradient(100deg, #ecfdf5, #6ee7b7 40%, #fde68a 55%, #6ee7b7 70%, #ecfdf5);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: ofAcadShine 4s linear infinite;
}
.of-tw-burst small { font-size: 0.85rem; font-weight: 700; color: #a7f3d0; }
.of-tw-foot {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.1rem 0.85rem;
}
.of-tw-reload {
flex: 0 0 auto;
border: 1px solid rgba(148, 163, 184, 0.25);
background: rgba(148, 163, 184, 0.08);
color: #e2e8f0;
font: inherit;
font-size: 0.76rem;
font-weight: 750;
padding: 0.4rem 0.85rem;
border-radius: 999px;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
.of-tw-reload:hover { background: rgba(16, 185, 129, 0.14); border-color: rgba(52, 211, 153, 0.45); }
.of-tw.is-full {
position: fixed;
inset: 0;
z-index: 12000;
border-radius: 0;
border: 0;
animation: ofHubEnter 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.of-tw.is-full .of-tw-steps { display: none; }
.of-tw.is-full .of-tw-stage { flex: 1; min-height: 0; }
.of-tw.is-full .of-tw-frame { height: 100%; }
.of-tw.is-full .of-tw-head { padding-top: max(0.9rem, env(safe-area-inset-top)); }
.of-tw.is-full .of-tw-foot { padding-bottom: max(0.85rem, env(safe-area-inset-bottom)); }
.of-dtask.is-tw .of-dtask-ico { color: #fbbf24; }
@media (max-width: 640px) {
.of-hub-tabs { align-self: stretch; }
.of-hub-tab { flex: 1; justify-content: center; padding: 0.6rem 0.6rem; font-size: 0.82rem; }
.of-tw { border-radius: 20px; }
.of-tw-head { flex-wrap: wrap; gap: 0.7rem; padding: 0.95rem 0.9rem 0.8rem; }
.of-tw-ico { width: 42px; height: 42px; border-radius: 13px; }
.of-tw-titles { flex: 1 1 calc(100% - 110px); }
.of-tw-today { order: 3; flex: 1; grid-auto-flow: column; justify-content: space-between; align-items: baseline; gap: 0.4rem; }
.of-tw-expand { order: 2; }
.of-tw-steps { grid-template-columns: 1fr; padding: 0 0.9rem 0.8rem; gap: 0.35rem; }
.of-tw-steps li { padding: 0.42rem 0.6rem; }
.of-tw-stage { margin: 0 0.35rem; border-radius: 14px; }
.of-tw-frame { height: clamp(560px, 80vh, 900px); }
.of-tw.is-full .of-tw-stage { margin: 0; border-radius: 0; }
.of-tw.is-full .of-tw-today { display: none; }
.of-tw-foot { padding: 0.65rem 0.9rem 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
.of-hub-ink, .of-tw-aura, .of-tw-today strong { transition: none; animation: none; }
}
html[data-of-theme="light"] .of-hub-tabs {
background: linear-gradient(160deg, #ffffff, #f0fdf8);
border-color: rgba(16, 185, 129, 0.25);
}
html[data-of-theme="light"] .of-hub-tab { color: #475569; }
html[data-of-theme="light"] .of-hub-tab:hover { color: #0f172a; }
html[data-of-theme="light"] .of-hub-tab.is-active { color: #022c22; }
html[data-of-theme="light"] .of-tw {
background:
radial-gradient(120% 140% at 0% 0%, rgba(16, 185, 129, 0.12), transparent 55%),
linear-gradient(160deg, #ffffff, #f0fdf8);
border-color: rgba(16, 185, 129, 0.25);
}
html[data-of-theme="light"] .of-tw-titles h3 { color: #0f172a; }
html[data-of-theme="light"] .of-tw-kicker { color: #047857; }
html[data-of-theme="light"] .of-tw-tags span { color: #334155; background: #f1f5f9; border-color: #e2e8f0; }
html[data-of-theme="light"] .of-tw-steps li { color: #1e293b; background: #ffffff; border-color: rgba(16, 185, 129, 0.18); }
html[data-of-theme="light"] .of-tw-today { background: #fffbeb; }
html[data-of-theme="light"] .of-tw-today strong { background-image: linear-gradient(100deg, #92400e, #d97706 50%, #92400e); }
html[data-of-theme="light"] .of-tw-today small,
html[data-of-theme="light"] .of-tw-today em { color: #b45309; }
html[data-of-theme="light"] .of-tw-expand,
html[data-of-theme="light"] .of-tw-reload { color: #0f172a; background: #f1f5f9; border-color: #e2e8f0; }
html[data-of-theme="light"] .of-tw-foot .of-cpxm-secure { color: #047857; }
/* ── TimeWall: pantalla de inicio nativa ── */
.of-tw-cats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.6rem;
padding: 0 1.1rem 0.9rem 1.2rem;
}
.of-tw-cat {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.55rem;
padding: 0.85rem 0.8rem;
border-radius: 16px;
background:
radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 60%),
rgba(12, 28, 42, 0.85);
border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
animation: ofHubEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.of-tw-cat:nth-child(2) { animation-delay: 0.06s; }
.of-tw-cat:nth-child(3) { animation-delay: 0.12s; }
.of-tw-cat:nth-child(4) { animation-delay: 0.18s; }
.of-tw-cat-ico {
width: 36px;
height: 36px;
border-radius: 11px;
display: grid;
place-items: center;
color: var(--c);
background: color-mix(in srgb, var(--c) 14%, transparent);
box-shadow: 0 0 22px -6px color-mix(in srgb, var(--c) 60%, transparent);
}
.of-tw-cat-ico svg { width: 20px; height: 20px; }
.of-tw-cat strong { font-size: 0.82rem; font-weight: 800; color: #f1f5f9; }
.of-tw-cta {
position: relative;
overflow: hidden;
margin: 0 1.1rem 1.15rem 1.2rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
min-height: 56px;
border: 0;
border-radius: 18px;
font: inherit;
font-size: 1rem;
font-weight: 850;
letter-spacing: -0.01em;
color: #022c22;
cursor: pointer;
background: linear-gradient(110deg, #059669, #10b981 40%, #34d399 70%, #fde68a);
background-size: 160% 100%;
box-shadow: 0 18px 36px -16px rgba(16, 185, 129, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35);
transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.6s ease;
}
.of-tw-cta:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 22px 44px -16px rgba(16, 185, 129, 1), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.of-tw-cta:active { transform: translateY(0) scale(0.99); }
.of-tw-cta svg { width: 20px; height: 20px; transition: transform 0.25s ease; }
.of-tw-cta:hover svg { transform: translateX(4px); }
.of-tw-cta-shine {
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
transform: translateX(-100%);
animation: ofCpxSheen 3.6s ease-in-out infinite;
pointer-events: none;
}
.of-twm-ico { background: radial-gradient(circle at 30% 25%, #fde68a, #34d399 55%, #059669) !important; color: #022c22 !important; }
.of-twm .of-cpxm-chip.is-reward { white-space: nowrap; }
.of-twm-reload { background: rgba(148, 163, 184, 0.1) !important; border-color: rgba(148, 163, 184, 0.3) !important; color: #e2e8f0 !important; }
@media (max-width: 640px) {
.of-tw-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 0.9rem 0.8rem; gap: 0.5rem; }
.of-tw-cat { flex-direction: row; align-items: center; padding: 0.65rem 0.7rem; }
.of-tw-cat-ico { width: 32px; height: 32px; }
.of-tw-cta { margin: 0 0.9rem 1rem; min-height: 54px; }
.of-twm .of-cpxm-chips { display: none; }
.of-twm-reload { display: none; }
}
.of-twm-theme svg { width: 18px; height: 18px; }
.of-twm-theme:hover { transform: none; }
.of-twm-theme .is-sun { display: none; }
.of-twm.is-dark .of-twm-theme { color: #fde68a; border-color: rgba(253, 230, 138, 0.35); background: rgba(253, 230, 138, 0.08); }
.of-twm.is-dark .of-twm-theme .is-moon { display: none; }
.of-twm.is-dark .of-twm-theme .is-sun { display: block; }
.of-twm.is-dark .of-cpxm-body { background: #0b1220; }
.of-twm.is-dark .of-cpxm-frame {
background: #fff;
/* el muro es de otro dominio: solo se puede oscurecer invirtiendo el iframe entero */
filter: invert(0.9) hue-rotate(180deg) saturate(1.15) contrast(0.95);
}
.of-twm .of-cpxm-sheet { width: min(1120px, 100%); }
.of-earnm .of-cpxm-sheet { width: min(980px, 100%); }
.of-earnm .of-cpxm-chip.is-reward { white-space: nowrap; }
.of-earnm .of-cpxm-chip[hidden] { display: none; }
.of-earnm .of-cpxm-titles h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.of-cpxp-intro { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.8rem 0.9rem; border-radius: 14px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.04)); border: 1px solid rgba(52, 211, 153, 0.3); }
.of-cpxp-intro[hidden] { display: none; }
.of-cpxp-intro-ico { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #6ee7b7; background: rgba(16, 185, 129, 0.18); }
.of-cpxp-intro-ico svg { width: 18px; height: 18px; }
.of-cpxp-intro p { margin: 0; display: grid; gap: 0.15rem; }
.of-cpxp-intro strong { font-size: 0.9rem; color: #ecfdf5; }
.of-cpxp-intro span { font-size: 0.8rem; line-height: 1.45; color: rgba(203, 213, 225, 0.85); }
html[data-of-theme="light"] .of-cpxp-intro { background: #ecfdf5; border-color: #a7f3d0; }
html[data-of-theme="light"] .of-cpxp-intro strong { color: #065f46; }
html[data-of-theme="light"] .of-cpxp-intro span { color: #475569; }
@media (min-width: 641px) {
.of-twm .of-cpxm-sheet { height: min(880px, 100%); }
}
html[data-of-theme="light"] .of-tw-cat { background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 60%), #ffffff; }
html[data-of-theme="light"] .of-tw-cat strong { color: #0f172a; }
/* ── Lista de encuestas: bloqueo por perfil y "ver más" ── */
.of-cpx-list.is-gated .of-cpx-list-head .of-cpx-tools { display: none; }
.of-cpx-list.is-gated .of-cpx-prof-cta {
padding: 1.4rem 1.2rem;
flex-wrap: wrap;
justify-content: center;
text-align: center;
flex-direction: column;
gap: 0.75rem;
}
.of-cpx-list.is-gated .of-cpx-prof-ico { width: 56px; height: 56px; border-radius: 18px; }
.of-cpx-list.is-gated .of-cpx-prof-ico svg { width: 28px; height: 28px; }
.of-cpx-list.is-gated .of-cpx-prof-copy { align-items: center; }
.of-cpx-list.is-gated .of-cpx-prof-copy strong { font-size: 1.1rem; }
.of-cpx-list.is-gated .of-cpx-prof-go { display: inline-block; padding: 0.6rem 1.4rem; font-size: 0.88rem; }
.of-cpx-more {
align-self: center;
border: 1px dashed rgba(148, 163, 184, 0.35);
background: transparent;
color: rgba(203, 213, 225, 0.85);
font: inherit;
font-size: 0.8rem;
font-weight: 750;
padding: 0.55rem 1.1rem;
border-radius: 999px;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease;
}
.of-cpx-more[hidden] { display: none !important; }
.of-cpx-more:hover { border-color: rgba(52, 211, 153, 0.5); color: #a7f3d0; }
html[data-of-theme="light"] .of-cpx-more { color: #475569; border-color: #cbd5e1; }
/* ── Botón guardar perfil: guardando / listo ── */
.of-cpxp-save {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.55rem;
overflow: hidden;
transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.2s ease;
}
.of-cpxp-save:disabled { cursor: default; opacity: 1; }
.of-cpxp-save-spin,
.of-cpxp-save-check { display: none; flex: 0 0 auto; }
.of-cpxp-save-spin {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2.5px solid rgba(2, 44, 34, 0.25);
border-top-color: #022c22;
animation: ofAcadSpin 0.7s linear infinite;
}
.of-cpxp-save-check { width: 20px; height: 20px; }
.of-cpxp-save.is-saving .of-cpxp-save-spin { display: inline-block; }
.of-cpxp-save.is-saving::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
transform: translateX(-100%);
animation: ofCpxSaving 1.1s ease-in-out infinite;
}
@keyframes ofCpxSaving { to { transform: translateX(100%); } }
.of-cpxp-save.is-saved {
background: linear-gradient(120deg, #fde68a, #fbbf24) !important;
color: #3b2a00 !important;
box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.2), 0 12px 30px -10px rgba(251, 191, 36, 0.8) !important;
animation: ofTwPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.of-cpxp-save.is-saved .of-cpxp-save-check { display: inline-block; animation: ofCpxmPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.of-cpxp-sheet.is-shake { animation: ofCpxShake 0.42s ease; }
@keyframes ofCpxShake {
0%, 100% { transform: none; }
20% { transform: translateX(-8px); }
40% { transform: translateX(7px); }
60% { transform: translateX(-5px); }
80% { transform: translateX(3px); }
}
.task-card { cursor: pointer; }
.task-card.is-done,
.task-card.is-locked { cursor: default; }
.task-card:focus-visible { outline: 2px solid #34d399; outline-offset: 3px; }
.task-card.is-cpx .task-actions .task-btn { pointer-events: none; }
.task-card.is-cpx.is-top { border-color: rgba(251, 191, 36, 0.35); }
.task-card.is-cpx.is-top .task-carry { color: #fde68a; background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.35); }
.task-card.is-opening { animation: ofCpxOpen 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes ofCpxOpen {
0% { transform: scale(1); }
35% { transform: scale(0.97); box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.45); }
100% { transform: scale(1); }
}
.of-cpx-empty {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
padding: 2rem 1.25rem;
text-align: center;
border-radius: 20px;
background: linear-gradient(160deg, rgba(15, 35, 50, 0.85), rgba(6, 18, 31, 0.92));
border: 1px dashed rgba(52, 211, 153, 0.3);
}
.of-cpx-empty[hidden] { display: none !important; }
.of-cpx-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.of-cpx-empty-actions [hidden] { display: none !important; }
.of-hub-tab[hidden] { display: none !important; }
.of-ml-rule { margin: -0.2rem 0 0.8rem; font-size: 0.8rem; color: rgba(203, 213, 225, 0.7); }
.of-ml-pending { color: #fde68a; border-color: rgba(253, 230, 138, 0.35); background: rgba(253, 230, 138, 0.08); cursor: default; }
.of-ml-pending[hidden] { display: none !important; }
.of-ml-headline { display: flex; align-items: center; gap: 0.7rem; margin: 0.35rem 0 0.2rem; }
.of-ml-headline h4 { margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.of-ml-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.2); }
.of-ml-icon.is-blank { display: grid; place-items: center; font-weight: 800; color: #022c22; background: linear-gradient(135deg, #6ee7b7, #fde68a); border: 0; }
.of-ml-card p { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.of-ml-walls { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.of-ml-walls:empty { display: none; }
#taskGrid.is-native { margin: 0; }
.of-easy-head {
display: flex;
align-items: center;
gap: 0.8rem;
margin-top: 0.35rem;
}
.of-easy-head[hidden] { display: none !important; }
.of-easy-head p { margin: 0; display: grid; gap: 0.12rem; min-width: 0; }
.of-easy-head strong { font-size: 1.05rem; font-weight: 850; color: #f8fafc; }
.of-easy-head small { font-size: 0.82rem; line-height: 1.4; color: rgba(203, 213, 225, 0.85); }
.of-easy-step {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 12px;
font-weight: 900;
font-size: 0.95rem;
color: #022c22;
background: linear-gradient(135deg, #6ee7b7, #10b981);
box-shadow: 0 8px 20px -10px rgba(16, 185, 129, 0.9);
}
.of-easy-head.is-extra { margin-top: 0.9rem; opacity: 0.92; }
.of-easy-head.is-extra .of-easy-step {
color: #e2e8f0;
background: rgba(148, 163, 184, 0.16);
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.3);
}
html[data-of-theme="light"] .of-easy-head strong { color: #0f172a; }
html[data-of-theme="light"] .of-easy-head small { color: #475569; }
html[data-of-theme="light"] .of-easy-head.is-extra .of-easy-step { color: #334155; background: #f1f5f9; }
.of-task-veil-card[hidden] { display: none !important; }
.of-task-veil-card.is-debt .of-pos-kicker,
.of-task-veil-card.is-member-due .of-pos-kicker { color: #fca5a5; }
html[data-of-theme="light"] .of-task-veil-card.is-debt .of-pos-kicker,
html[data-of-theme="light"] .of-task-veil-card.is-member-due .of-pos-kicker { color: #b91c1c; }
html[data-of-theme="light"] .of-ml-rule { color: #64748b; }
html[data-of-theme="light"] .of-ml-pending { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
.of-cpx-empty p { margin: 0; max-width: 30rem; font-size: 0.88rem; line-height: 1.55; color: rgba(203, 213, 225, 0.85); }
html[data-of-theme="light"] .of-cpx-list-head strong { color: #0f172a; }
html[data-of-theme="light"] .of-cpx-empty { background: linear-gradient(160deg, #ffffff, #f0fdf8); }
html[data-of-theme="light"] .of-cpx-empty p { color: #475569; }
.task-card.is-cpx.is-paused { border-color: rgba(52, 211, 153, 0.55); box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.25), 0 14px 34px -18px rgba(16, 185, 129, 0.6); }
.task-card.is-cpx.is-paused::after {
content: "";
position: absolute;
top: 0.8rem;
right: 0.8rem;
width: 8px;
height: 8px;
border-radius: 50%;
background: #34d399;
box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
animation: ofCpxmBeat 1.6s ease-out infinite;
}
/* ── Modal de encuesta ── */
body.of-cpxm-lock { overflow: hidden; }
.of-cpxm {
position: fixed;
inset: 0;
z-index: 12000;
display: grid;
place-items: center;
padding: clamp(0.5rem, 2.5vw, 1.75rem);
}
.of-cpxm[hidden] { display: none !important; }
.of-cpxm-veil {
position: absolute;
inset: 0;
border: 0;
padding: 0;
cursor: pointer;
background: radial-gradient(120% 90% at 50% 0%, rgba(6, 78, 59, 0.35), rgba(2, 6, 14, 0.82) 60%);
-webkit-backdrop-filter: blur(10px) saturate(1.2);
backdrop-filter: blur(10px) saturate(1.2);
opacity: 0;
transition: opacity 0.28s ease;
}
.of-cpxm-sheet {
position: relative;
width: min(980px, 100%);
height: min(860px, 100%);
display: flex;
flex-direction: column;
border-radius: 26px;
overflow: hidden;
isolation: isolate;
background: linear-gradient(165deg, #081a2b 0%, #06121f 55%, #040c16 100%);
border: 1px solid rgba(52, 211, 153, 0.28);
box-shadow:
0 40px 90px -30px rgba(0, 0, 0, 0.85),
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 0 60px -20px rgba(16, 185, 129, 0.45);
opacity: 0;
transform: translateY(24px) scale(0.97);
transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-cpxm.is-open .of-cpxm-veil { opacity: 1; }
.of-cpxm.is-open .of-cpxm-sheet { opacity: 1; transform: none; }
.of-cpxm-glow {
position: absolute;
inset: -30% -10% auto;
height: 60%;
z-index: -1;
background: radial-gradient(closest-side, rgba(16, 185, 129, 0.28), transparent);
filter: blur(30px);
animation: ofCpxmGlow 7s ease-in-out infinite;
pointer-events: none;
}
.of-cpxm-head {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.95rem 1rem 0.95rem 1.1rem;
border-bottom: 1px solid rgba(52, 211, 153, 0.16);
background: linear-gradient(180deg, rgba(16, 185, 129, 0.08), transparent);
}
.of-cpxm-ico {
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 13px;
display: grid;
place-items: center;
color: #6ee7b7;
background: radial-gradient(circle at 30% 20%, rgba(110, 231, 183, 0.3), rgba(6, 78, 59, 0.55));
border: 1px solid rgba(110, 231, 183, 0.4);
box-shadow: 0 0 22px -6px rgba(16, 185, 129, 0.8);
}
.of-cpxm-ico svg { width: 22px; height: 22px; }
.of-cpxm-titles { flex: 1; min-width: 0; }
.of-cpxm-kicker {
margin: 0 0 0.15rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6ee7b7;
}
.of-cpxm-kicker i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #34d399;
animation: ofCpxmBeat 1.6s ease-out infinite;
}
.of-cpxm-titles h3 {
margin: 0;
font-size: 1.05rem;
font-weight: 750;
letter-spacing: -0.015em;
color: #f8fafc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.of-cpxm-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.of-cpxm-chip {
padding: 0.32rem 0.65rem;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 750;
color: #cbd5e1;
background: rgba(148, 163, 184, 0.1);
border: 1px solid rgba(148, 163, 184, 0.2);
white-space: nowrap;
}
.of-cpxm-chip.is-reward {
color: #022c22;
background: linear-gradient(110deg, #6ee7b7, #34d399 45%, #fde68a 55%, #34d399);
background-size: 220% 100%;
border-color: rgba(255, 255, 255, 0.4);
animation: ofNewShift 3.4s linear infinite;
}
.of-cpxm-close {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 12px;
display: grid;
place-items: center;
border: 1px solid rgba(148, 163, 184, 0.22);
background: rgba(255, 255, 255, 0.04);
color: #e2e8f0;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.of-cpxm-close:hover { background: rgba(52, 211, 153, 0.14); border-color: rgba(52, 211, 153, 0.45); transform: rotate(90deg); }
.of-cpxm-close svg { width: 18px; height: 18px; }
.of-cpxm-body {
position: relative;
flex: 1;
min-height: 0;
background: #fff;
}
.of-cpxm-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.of-cpxm-loader,
.of-cpxm-switch,
.of-cpxm-done {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 1.5rem;
text-align: center;
background: radial-gradient(90% 70% at 50% 40%, #0a2233, #050d17);
}
.of-cpxm-loader[hidden],
.of-cpxm-switch[hidden],
.of-cpxm-done[hidden] { display: none !important; }
.of-cpxm-loader strong { font-size: 1rem; color: #f1f5f9; }
.of-cpxm-loader small { font-size: 0.78rem; color: rgba(148, 163, 184, 0.95); }
.of-cpxm-orbit {
position: relative;
width: 74px;
height: 74px;
margin-bottom: 0.6rem;
border-radius: 50%;
border: 1px dashed rgba(52, 211, 153, 0.35);
animation: ofAcadSpin 3.2s linear infinite;
}
.of-cpxm-orbit::after {
content: "";
position: absolute;
inset: 24px;
border-radius: 50%;
background: radial-gradient(circle, #6ee7b7, #059669 70%);
box-shadow: 0 0 26px rgba(16, 185, 129, 0.75);
animation: ofCpxmCore 1.6s ease-in-out infinite;
}
.of-cpxm-orbit i {
position: absolute;
top: -5px;
left: calc(50% - 5px);
width: 10px;
height: 10px;
border-radius: 50%;
background: #a7f3d0;
box-shadow: 0 0 12px 3px rgba(52, 211, 153, 0.7);
transform-origin: 5px 42px;
}
.of-cpxm-orbit i:nth-child(2) { transform: rotate(120deg); background: #fde68a; box-shadow: 0 0 12px 3px rgba(251, 191, 36, 0.6); }
.of-cpxm-orbit i:nth-child(3) { transform: rotate(240deg); }
.of-cpxm-switch { background: rgba(4, 12, 22, 0.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.of-cpxm-switch-card {
max-width: 26rem;
padding: 1.4rem 1.3rem;
border-radius: 20px;
background: linear-gradient(160deg, #0b2233, #071624);
border: 1px solid rgba(251, 191, 36, 0.35);
box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8);
animation: ofAcadRise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.of-cpxm-switch-card strong { display: block; font-size: 1.02rem; color: #fde68a; margin-bottom: 0.35rem; }
.of-cpxm-switch-card p { margin: 0 0 1rem; font-size: 0.86rem; line-height: 1.5; color: rgba(203, 213, 225, 0.9); }
.of-cpxm-switch-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.of-cpxm-done strong { font-size: 1.35rem; font-weight: 800; color: #f8fafc; letter-spacing: -0.02em; }
.of-cpxm-done-amount {
margin: 0 0 0.6rem;
font-size: clamp(1.8rem, 6vw, 2.6rem);
font-weight: 850;
background: linear-gradient(100deg, #ecfdf5, #6ee7b7 40%, #fde68a 55%, #6ee7b7 70%, #ecfdf5);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: ofAcadShine 4s linear infinite;
}
.of-cpxm-done-check {
position: relative;
width: 84px;
height: 84px;
border-radius: 50%;
display: grid;
place-items: center;
color: #022c22;
background: radial-gradient(circle at 30% 25%, #a7f3d0, #10b981 70%);
box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.12), 0 0 50px rgba(16, 185, 129, 0.7);
animation: ofCpxmPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.of-cpxm-done-check svg { width: 42px; height: 42px; }
.of-cpxm-done-burst {
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
background: conic-gradient(from 0deg, transparent, rgba(52, 211, 153, 0.35), transparent 30%, rgba(251, 191, 36, 0.3), transparent 60%, rgba(52, 211, 153, 0.35), transparent);
filter: blur(18px);
animation: ofAcadSpin 6s linear infinite;
pointer-events: none;
}
.of-cpxm-foot {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 1.1rem;
border-top: 1px solid rgba(52, 211, 153, 0.14);
background: rgba(4, 12, 22, 0.6);
}
.of-cpxm-secure {
flex: 1;
min-width: 0;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.74rem;
color: rgba(167, 243, 208, 0.85);
}
.of-cpxm-secure svg { width: 15px; height: 15px; flex: 0 0 auto; }
.of-cpxm-secure span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-cpxm-elapsed {
font-variant-numeric: tabular-nums;
font-size: 0.8rem;
font-weight: 750;
color: #e2e8f0;
padding: 0.25rem 0.55rem;
border-radius: 8px;
background: rgba(148, 163, 184, 0.1);
}
.of-cpxm-pause {
border: 1px solid rgba(52, 211, 153, 0.4);
background: rgba(16, 185, 129, 0.12);
color: #a7f3d0;
font: inherit;
font-size: 0.8rem;
font-weight: 750;
padding: 0.42rem 0.9rem;
border-radius: 999px;
cursor: pointer;
transition: background 0.2s ease;
}
.of-cpxm-pause:hover { background: rgba(16, 185, 129, 0.24); }
.of-cpxm-lang {
display: inline-flex;
align-items: center;
gap: 0.35rem;
border: 1px solid rgba(251, 191, 36, 0.4);
background: rgba(251, 191, 36, 0.1);
color: #fde68a;
font: inherit;
font-size: 0.78rem;
font-weight: 750;
padding: 0.42rem 0.8rem;
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s ease;
}
.of-cpxm-lang svg { width: 15px; height: 15px; flex: 0 0 auto; }
.of-cpxm-lang:hover { background: rgba(251, 191, 36, 0.22); }
.of-cpxm-lang:disabled { opacity: 0.6; cursor: wait; }
@media (max-width: 640px) {
.of-cpxm-secure { display: none; }
.of-cpxm-foot { justify-content: flex-end; }
.of-cpxm-elapsed { margin-right: auto; }
}
html[data-of-theme="light"] .of-cpxm-lang { color: #92400e; background: #fffbeb; border-color: rgba(217, 119, 6, 0.4); }
/* ── Pastilla de encuesta en pausa ── */
.of-cpx-pill {
position: fixed;
right: 18px;
bottom: calc(18px + env(safe-area-inset-bottom));
z-index: 9500;
display: flex;
align-items: stretch;
border-radius: 999px;
background: linear-gradient(160deg, rgba(10, 34, 51, 0.96), rgba(4, 12, 22, 0.97));
border: 1px solid rgba(52, 211, 153, 0.45);
box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.8), 0 0 30px -10px rgba(16, 185, 129, 0.7);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
animation: ofCpxmPillIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.of-cpx-pill[hidden] { display: none !important; }
.of-cpx-pill-main {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.55rem 0.6rem 0.55rem 0.9rem;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.of-cpx-pill-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #fbbf24;
animation: ofCpxmBeat 1.6s ease-out infinite;
}
.of-cpx-pill-copy { display: flex; flex-direction: column; line-height: 1.2; }
.of-cpx-pill-copy strong { font-size: 0.84rem; color: #f8fafc; }
.of-cpx-pill-copy small { font-size: 0.7rem; color: rgba(167, 243, 208, 0.85); }
.of-cpx-pill-go {
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
color: #022c22;
background: linear-gradient(135deg, #6ee7b7, #10b981);
box-shadow: 0 0 16px rgba(16, 185, 129, 0.6);
}
.of-cpx-pill-go svg { width: 15px; height: 15px; margin-left: 2px; }
.of-cpx-pill-x {
width: 36px;
border: 0;
border-left: 1px solid rgba(148, 163, 184, 0.18);
background: transparent;
color: rgba(203, 213, 225, 0.75);
cursor: pointer;
display: grid;
place-items: center;
border-radius: 0 999px 999px 0;
}
.of-cpx-pill-x:hover { color: #fca5a5; }
.of-cpx-pill-x svg { width: 15px; height: 15px; }
@keyframes ofCpxmBeat {
0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); }
100% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
}
@keyframes ofCpxmGlow { 0%, 100% { opacity: 0.7; transform: translateX(-6%); } 50% { opacity: 1; transform: translateX(6%); } }
@keyframes ofCpxmCore { 0%, 100% { transform: scale(0.85); } 50% { transform: scale(1.08); } }
@keyframes ofCpxmPop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ofCpxmPillIn { from { opacity: 0; transform: translateY(16px) scale(0.95); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) {
.of-cpx-pill { left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); }
.of-cpx-pill-main { flex: 1; }
}
/* ── Encuestas CPX: probabilidad, orden, perfil y avisos ── */
.of-cpx-tools { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.of-cpx-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.36rem 0.75rem;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.24);
background: rgba(148, 163, 184, 0.08);
color: rgba(226, 232, 240, 0.9);
font: inherit;
font-size: 0.76rem;
font-weight: 750;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.of-cpx-chip[hidden] { display: none !important; }
.of-cpx-chip svg { width: 15px; height: 15px; }
.of-cpx-chip:hover { border-color: rgba(52, 211, 153, 0.45); background: rgba(16, 185, 129, 0.12); }
.of-cpx-chip.is-on { color: #a7f3d0; border-color: rgba(52, 211, 153, 0.5); background: rgba(16, 185, 129, 0.14); }
.of-cpx-chip.is-on svg { animation: ofCpxBell 2.4s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes ofCpxBell {
0%, 70%, 100% { transform: rotate(0); }
76% { transform: rotate(14deg); }
84% { transform: rotate(-12deg); }
92% { transform: rotate(6deg); }
}
.of-cpx-sort {
display: inline-flex;
align-self: flex-start;
gap: 0.25rem;
padding: 0.25rem;
border-radius: 999px;
background: rgba(10, 28, 42, 0.8);
border: 1px solid rgba(148, 163, 184, 0.16);
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.of-cpx-sort[hidden] { display: none !important; }
.of-cpx-sort button {
border: 0;
border-radius: 999px;
padding: 0.42rem 0.9rem;
background: transparent;
color: rgba(203, 213, 225, 0.8);
font: inherit;
font-size: 0.78rem;
font-weight: 750;
white-space: nowrap;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease;
}
.of-cpx-sort button:hover { color: #f1f5f9; }
.of-cpx-sort button.is-active {
color: #022c22;
background: linear-gradient(120deg, #10b981, #34d399);
box-shadow: 0 6px 16px -8px rgba(16, 185, 129, 0.9);
}
.of-cpx-prof-cta {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 0.85rem;
width: 100%;
padding: 0.9rem 1rem;
border-radius: 18px;
border: 1px solid rgba(251, 191, 36, 0.38);
background:
radial-gradient(120% 160% at 0% 0%, rgba(251, 191, 36, 0.16), transparent 55%),
linear-gradient(160deg, #0b2233, #071624);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.85), 0 0 34px -18px rgba(251, 191, 36, 0.6);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.of-cpx-prof-cta[hidden] { display: none !important; }
.of-cpx-prof-cta:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -24px rgba(0, 0, 0, 0.85), 0 0 40px -14px rgba(251, 191, 36, 0.7); }
.of-cpx-prof-cta::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.08) 50%, transparent 65%);
transform: translateX(-100%);
animation: ofCpxSheen 4.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes ofCpxSheen { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.of-cpx-prof-ico {
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 13px;
display: grid;
place-items: center;
color: #3b2a00;
background: radial-gradient(circle at 30% 25%, #fef3c7, #fbbf24 60%, #d97706);
box-shadow: 0 8px 20px -8px rgba(251, 191, 36, 0.8);
}
.of-cpx-prof-ico svg { width: 22px; height: 22px; }
.of-cpx-prof-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.of-cpx-prof-copy strong { font-size: 0.95rem; font-weight: 800; color: #fef3c7; }
.of-cpx-prof-copy small { font-size: 0.76rem; color: rgba(226, 232, 240, 0.8); }
.of-cpx-prof-go {
flex: 0 0 auto;
padding: 0.45rem 0.95rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 800;
color: #3b2a00;
background: linear-gradient(120deg, #fde68a, #fbbf24);
}
.task-card.is-cpx .of-cpx-chance {
display: flex;
align-items: center;
gap: 0.6rem;
margin-top: auto;
}
.of-cpx-chance-track {
flex: 1;
height: 7px;
border-radius: 999px;
overflow: hidden;
background: rgba(148, 163, 184, 0.16);
}
.of-cpx-chance-track i {
display: block;
height: 100%;
border-radius: inherit;
transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-cpx-chance span { font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.is-chance-high .of-cpx-chance-track i { background: linear-gradient(90deg, #059669, #34d399); box-shadow: 0 0 10px rgba(52, 211, 153, 0.6); }
.is-chance-high .of-cpx-chance span { color: #6ee7b7; }
.is-chance-mid .of-cpx-chance-track i { background: linear-gradient(90deg, #d97706, #fbbf24); }
.is-chance-mid .of-cpx-chance span { color: #fcd34d; }
.is-chance-low .of-cpx-chance-track i { background: linear-gradient(90deg, #64748b, #94a3b8); }
.is-chance-low .of-cpx-chance span { color: #94a3b8; }
.task-card.is-cpx.is-chance-low { opacity: 0.82; }
.of-cpx-pick {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 850;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #022c22;
background: linear-gradient(120deg, #6ee7b7, #fde68a);
}
.task-card.is-cpx.is-pick {
border-color: rgba(52, 211, 153, 0.5);
box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.2), 0 18px 40px -22px rgba(16, 185, 129, 0.75);
}
.of-cpx-new {
margin-left: auto;
margin-right: 0.35rem;
padding: 0.14rem 0.5rem;
border-radius: 999px;
font-size: 0.66rem;
font-weight: 850;
color: #3b2a00;
background: linear-gradient(120deg, #fde68a, #fbbf24);
animation: ofCpxmBeat 1.8s ease-out infinite;
}
.task-card.is-cpx.is-new { animation: ofCpxNewIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes ofCpxNewIn {
from { opacity: 0; transform: translateY(12px) scale(0.98); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.45); }
to { opacity: 1; transform: none; }
}
.of-nav-badge {
margin-left: auto;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
display: inline-grid;
place-items: center;
font-size: 0.68rem;
font-weight: 850;
color: #3b2a00;
background: linear-gradient(120deg, #fde68a, #fbbf24);
box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6);
animation: ofCpxNavBeat 1.8s ease-out infinite;
}
@keyframes ofCpxNavBeat {
0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6); }
100% { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0); }
}
.of-cpx-news {
position: fixed;
left: 50%;
top: calc(16px + env(safe-area-inset-top));
z-index: 9600;
display: flex;
align-items: stretch;
max-width: calc(100vw - 24px);
transform: translateX(-50%);
border-radius: 999px;
background: linear-gradient(160deg, rgba(10, 34, 51, 0.97), rgba(4, 12, 22, 0.98));
border: 1px solid rgba(251, 191, 36, 0.45);
box-shadow: 0 20px 44px -16px rgba(0, 0, 0, 0.85), 0 0 34px -10px rgba(251, 191, 36, 0.55);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.of-cpx-news[hidden] { display: none !important; }
.of-cpx-news.is-in { animation: ofCpxNewsIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes ofCpxNewsIn {
from { opacity: 0; transform: translate(-50%, -24px) scale(0.92); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.of-cpx-news-main {
display: flex;
align-items: center;
gap: 0.65rem;
min-width: 0;
padding: 0.5rem 0.55rem 0.5rem 0.6rem;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.of-cpx-news-spark {
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 50%;
display: grid;
place-items: center;
color: #3b2a00;
background: radial-gradient(circle at 30% 25%, #fef3c7, #fbbf24 65%);
box-shadow: 0 0 18px rgba(251, 191, 36, 0.65);
}
.of-cpx-news-spark svg { width: 18px; height: 18px; animation: ofAcadSpin 6s linear infinite; }
.of-cpx-news-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.of-cpx-news-copy strong { font-size: 0.85rem; color: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-cpx-news-copy small { font-size: 0.72rem; font-weight: 700; color: #fde68a; }
.of-cpx-news-copy small:empty { display: none; }
.of-cpx-news-go {
flex: 0 0 auto;
padding: 0.4rem 0.85rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 850;
color: #022c22;
background: linear-gradient(120deg, #6ee7b7, #10b981);
}
.of-cpxm-help {
position: absolute;
left: 50%;
bottom: 14px;
z-index: 3;
display: flex;
align-items: center;
gap: 0.6rem;
max-width: calc(100% - 24px);
padding: 0.4rem 0.45rem 0.4rem 0.9rem;
border-radius: 999px;
transform: translateX(-50%);
background: rgba(4, 12, 22, 0.92);
border: 1px solid rgba(52, 211, 153, 0.35);
box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.8);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
animation: ofCpxmPillIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.of-cpxm-help[hidden] { display: none !important; }
.of-cpxm-help span { font-size: 0.78rem; color: rgba(226, 232, 240, 0.85); white-space: nowrap; }
.of-cpxm-help button {
border: 0;
border-radius: 999px;
padding: 0.4rem 0.85rem;
font: inherit;
font-size: 0.78rem;
font-weight: 800;
color: #022c22;
background: linear-gradient(120deg, #6ee7b7, #10b981);
cursor: pointer;
white-space: nowrap;
}
.of-cpxm-away {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 1.5rem;
text-align: center;
background: radial-gradient(90% 70% at 50% 40%, #0a2233, #050d17);
}
.of-cpxm-away[hidden] { display: none !important; }
.of-cpxm-away strong { font-size: 1.05rem; color: #f1f5f9; }
.of-cpxm-away small { font-size: 0.8rem; color: rgba(148, 163, 184, 0.95); margin-bottom: 0.6rem; }
.of-cpxp {
position: fixed;
inset: 0;
z-index: 12100;
display: grid;
place-items: center;
padding: 1rem;
}
.of-cpxp[hidden] { display: none !important; }
.of-cpxp-veil {
position: absolute;
inset: 0;
border: 0;
padding: 0;
cursor: pointer;
background: radial-gradient(120% 90% at 50% 0%, rgba(6, 78, 59, 0.35), rgba(2, 6, 14, 0.82) 60%);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
opacity: 0;
transition: opacity 0.25s ease;
}
.of-cpxp-sheet {
position: relative;
isolation: isolate;
overflow: hidden;
width: min(420px, 100%);
max-height: calc(100dvh - 2rem);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.9rem;
padding: 1.1rem 1.15rem 1.2rem;
border-radius: 24px;
background: linear-gradient(165deg, #081a2b 0%, #06121f 55%, #040c16 100%);
border: 1px solid rgba(52, 211, 153, 0.28);
box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), 0 0 60px -20px rgba(16, 185, 129, 0.45);
opacity: 0;
transform: translateY(20px) scale(0.97);
transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-cpxp.is-open .of-cpxp-veil { opacity: 1; }
.of-cpxp.is-open .of-cpxp-sheet { opacity: 1; transform: none; }
.of-cpxp-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.of-cpxp-head h3 { margin: 0; font-size: 1.1rem; font-weight: 850; letter-spacing: -0.02em; color: #f8fafc; }
.of-cpxp-field { display: flex; flex-direction: column; gap: 0.35rem; }
.of-cpxp-field > span { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; color: rgba(167, 243, 208, 0.9); }
.of-cpxp-field input,
.of-cpxp-field select {
width: 100%;
min-height: 46px;
padding: 0.6rem 0.85rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.24);
background: rgba(15, 30, 45, 0.85);
color: #f1f5f9;
font: inherit;
font-size: 0.92rem;
color-scheme: dark;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.of-cpxp-field input:focus,
.of-cpxp-field select:focus {
outline: none;
border-color: rgba(52, 211, 153, 0.6);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.of-cpxp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.of-cpxp-seg label { position: relative; cursor: pointer; }
.of-cpxp-seg input { position: absolute; opacity: 0; pointer-events: none; }
.of-cpxp-seg b {
display: grid;
place-items: center;
min-height: 46px;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.24);
background: rgba(15, 30, 45, 0.85);
color: rgba(226, 232, 240, 0.9);
font-size: 0.9rem;
font-weight: 750;
transition: all 0.2s ease;
}
.of-cpxp-seg input:checked + b {
color: #022c22;
border-color: transparent;
background: linear-gradient(120deg, #10b981, #34d399);
box-shadow: 0 8px 20px -10px rgba(16, 185, 129, 0.9);
}
.of-cpxp-seg input:focus-visible + b { outline: 2px solid #6ee7b7; outline-offset: 2px; }
.of-cpxp-hint { display: block; margin-top: 0.15rem; font-size: 0.72rem; line-height: 1.4; color: rgba(148, 163, 184, 0.95); }
.of-cpxp-msg { margin: 0; min-height: 1em; font-size: 0.8rem; font-weight: 700; color: #fca5a5; }
.of-cpxp-msg:empty { display: none; }
.of-cpxp-save { width: 100%; min-height: 48px; justify-content: center; }
.of-cpxp-privacy { text-align: center; font-size: 0.72rem; color: rgba(148, 163, 184, 0.9); }
@media (max-width: 640px) {
.of-cpx-list-head { align-items: center; }
.of-cpx-sort { align-self: stretch; }
.of-cpx-sort button { flex: 1; padding: 0.42rem 0.5rem; }
.of-cpx-prof-cta { padding: 0.8rem 0.85rem; gap: 0.7rem; }
.of-cpx-prof-go { display: none; }
.of-cpxm-help span { display: none; }
.of-cpxp { place-items: end center; padding: 0; }
.of-cpxp-sheet { width: 100%; border-radius: 24px 24px 0 0; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); }
}
html[data-of-theme="light"] .of-cpx-chip { color: #0f172a; background: #f1f5f9; border-color: #e2e8f0; }
html[data-of-theme="light"] .of-cpx-chip.is-on { color: #047857; background: #ecfdf5; border-color: rgba(16, 185, 129, 0.4); }
html[data-of-theme="light"] .of-cpx-sort { background: #f1f5f9; border-color: #e2e8f0; }
html[data-of-theme="light"] .of-cpx-sort button { color: #475569; }
html[data-of-theme="light"] .of-cpx-sort button.is-active { color: #022c22; }
html[data-of-theme="light"] .of-cpx-prof-cta { background: radial-gradient(120% 160% at 0% 0%, rgba(251, 191, 36, 0.18), transparent 55%), linear-gradient(160deg, #ffffff, #fffbeb); }
html[data-of-theme="light"] .of-cpx-prof-copy strong { color: #92400e; }
html[data-of-theme="light"] .of-cpx-prof-copy small { color: #475569; }
html[data-of-theme="light"] .is-chance-high .of-cpx-chance span { color: #047857; }
html[data-of-theme="light"] .is-chance-mid .of-cpx-chance span { color: #b45309; }
html[data-of-theme="light"] .is-chance-low .of-cpx-chance span { color: #64748b; }
html[data-of-theme="light"] .of-cpxp-sheet { background: linear-gradient(165deg, #ffffff, #f0fdf8); border-color: rgba(16, 185, 129, 0.25); }
html[data-of-theme="light"] .of-cpxp-head h3 { color: #0f172a; }
html[data-of-theme="light"] .of-cpxp-field > span { color: #047857; }
html[data-of-theme="light"] .of-cpxp-field input,
html[data-of-theme="light"] .of-cpxp-field select,
html[data-of-theme="light"] .of-cpxp-seg b { background: #ffffff; color: #0f172a; border-color: #cbd5e1; color-scheme: light; }
@media (max-width: 640px) {
.of-cpxm { padding: 0; }
.of-cpxm-sheet { width: 100%; height: 100%; border-radius: 0; border: 0; }
.of-cpxm-head { padding: calc(0.7rem + env(safe-area-inset-top)) 0.75rem 0.7rem; gap: 0.6rem; }
.of-cpxm-ico { width: 36px; height: 36px; }
.of-cpxm-chips .of-cpxm-chip:not(.is-reward) { display: none; }
.of-cpxm-foot { padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom)); }
}
html[data-of-theme="light"] .of-cpxm-sheet { background: linear-gradient(165deg, #ffffff, #f0fdf8); border-color: rgba(16, 185, 129, 0.3); }
html[data-of-theme="light"] .of-cpxm-titles h3 { color: #0f172a; }
html[data-of-theme="light"] .of-cpxm-kicker,
html[data-of-theme="light"] .of-cpxm-secure { color: #047857; }
html[data-of-theme="light"] .of-cpxm-close { color: #0f172a; border-color: rgba(15, 23, 42, 0.15); }
html[data-of-theme="light"] .of-cpxm-chip { color: #334155; }
html[data-of-theme="light"] .of-cpxm-foot { background: rgba(255, 255, 255, 0.85); }
html[data-of-theme="light"] .of-cpxm-elapsed { color: #0f172a; }
html[data-of-theme="light"] .of-cpxm-pause { color: #047857; }
@media (prefers-reduced-motion: reduce) {
.of-cpx-goal-glow,
.of-cpx-amount strong,
.of-cpx-badge i,
.of-cpx-bar-fill,
.task-card.is-opening,
.task-card.is-cpx.is-paused::after,
.of-cpxm *,
.of-cpx-pill,
.of-cpx-pill * { animation: none !important; }
.of-cpxm-sheet { transition: opacity 0.2s ease; transform: none; }
}
/* ID de transacción en el historial */
.of-led-tx {
align-self: flex-start;
margin-top: 0.2rem;
padding: 0.05rem 0.4rem;
border: 1px solid var(--of-border);
border-radius: 6px;
background: transparent;
color: var(--of-fg-faint);
font: 600 0.62rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: 0.04em;
cursor: pointer;
transition: color 0.2s, border-color 0.2s;
}
.of-led-tx:hover { color: var(--of-accent); border-color: var(--of-accent); }
/* ===== Comunidad: afiliados y subafiliados ===== */
.of-net-dir.of-cmty {
position: relative;
overflow: hidden;
isolation: isolate;
margin-top: 1.25rem;
padding: 1.35rem 1.35rem 1.1rem;
border-radius: 24px;
border: 1px solid rgba(125, 211, 252, 0.18);
background:
linear-gradient(160deg, rgba(14, 165, 233, 0.1), transparent 45%),
linear-gradient(340deg, rgba(168, 85, 247, 0.1), transparent 50%),
rgba(4, 16, 32, 0.92);
box-shadow: 0 24px 60px -30px rgba(14, 165, 233, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.of-cmty-aurora {
position: absolute;
inset: -40% -20% auto;
height: 320px;
z-index: -1;
background:
radial-gradient(closest-side at 25% 50%, rgba(56, 189, 248, 0.22), transparent),
radial-gradient(closest-side at 75% 40%, rgba(192, 132, 252, 0.2), transparent),
radial-gradient(closest-side at 50% 70%, rgba(52, 211, 153, 0.14), transparent);
filter: blur(18px);
animation: of-cmty-drift 14s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes of-cmty-drift {
from { transform: translate3d(-4%, 0, 0) rotate(-2deg); }
to { transform: translate3d(4%, 6%, 0) rotate(2deg); }
}
.of-cmty-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
}
.of-cmty-kicker {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-cmty-kicker::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #34d399;
box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
animation: of-cmty-pulse 2.2s ease-in-out infinite;
}
@keyframes of-cmty-pulse {
50% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}
.of-cmty-titles h3 {
margin: 0.3rem 0 0;
font-size: clamp(1.25rem, 2.4vw, 1.6rem);
font-weight: 900;
letter-spacing: -0.02em;
background: linear-gradient(90deg, #f8fafc, #bae6fd 55%, #e9d5ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.of-cmty-titles p {
margin: 0.3rem 0 0;
color: var(--of-fg-muted);
font-size: 0.82rem;
}
.of-cmty-stats {
display: flex;
gap: 0.55rem;
}
.of-cmty-stat {
min-width: 84px;
padding: 0.6rem 0.8rem;
border-radius: 16px;
border: 1px solid var(--of-border);
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(10px);
text-align: center;
}
.of-cmty-stat strong {
display: block;
font-size: 1.35rem;
font-weight: 900;
line-height: 1.1;
color: var(--of-fg);
font-variant-numeric: tabular-nums;
}
.of-cmty-stat span {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--of-fg-muted);
}
.of-cmty-stat.is-total { border-color: rgba(125, 211, 252, 0.35); background: rgba(56, 189, 248, 0.1); }
.of-cmty-stat.is-on strong { color: #34d399; }
.of-cmty-stat.is-off strong { color: #fbbf24; }
.of-cmty-meter {
position: relative;
height: 6px;
margin: 1rem 0 0.9rem;
border-radius: 99px;
background: rgba(251, 191, 36, 0.18);
overflow: hidden;
}
.of-cmty-meter i {
position: absolute;
inset: 0 auto 0 0;
width: 0;
border-radius: inherit;
background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
box-shadow: 0 0 14px rgba(52, 211, 153, 0.6);
transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-cmty-tools {
display: flex;
flex-direction: column;
gap: 0.7rem;
margin-bottom: 1rem;
}
.of-cmty-levels {
display: flex;
gap: 0.45rem;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 2px;
}
.of-cmty-levels::-webkit-scrollbar { display: none; }
.of-cmty-chip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.42rem 0.5rem 0.42rem 0.8rem;
border-radius: 99px;
border: 1px solid var(--of-border);
background: rgba(255, 255, 255, 0.04);
color: var(--of-fg-soft);
font: inherit;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.of-cmty-chip b {
min-width: 22px;
padding: 0.1rem 0.4rem;
border-radius: 99px;
background: rgba(255, 255, 255, 0.08);
font-size: 0.7rem;
text-align: center;
}
.of-cmty-chip:hover { transform: translateY(-1px); border-color: rgba(125, 211, 252, 0.4); }
.of-cmty-chip.is-on {
border-color: transparent;
background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
color: #fff;
box-shadow: 0 8px 22px -10px rgba(139, 92, 246, 0.8);
}
.of-cmty-chip.is-on b { background: rgba(255, 255, 255, 0.22); }
.of-cmty-filters {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.of-cmty-search {
flex: 1 1 220px;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0 0.85rem;
border-radius: 14px;
border: 1px solid var(--of-border);
background: rgba(255, 255, 255, 0.04);
transition: border-color 0.2s, box-shadow 0.2s;
}
.of-cmty-search:focus-within {
border-color: rgba(125, 211, 252, 0.55);
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
}
.of-cmty-search svg {
width: 16px;
height: 16px;
fill: none;
stroke: var(--of-fg-muted);
stroke-width: 2;
stroke-linecap: round;
}
.of-cmty-search input {
flex: 1;
min-width: 0;
height: 40px;
border: 0;
outline: 0;
background: transparent;
color: var(--of-fg);
font: inherit;
font-size: 0.85rem;
}
.of-cmty-seg {
display: inline-flex;
padding: 3px;
border-radius: 14px;
border: 1px solid var(--of-border);
background: rgba(255, 255, 255, 0.04);
}
.of-cmty-seg button {
padding: 0 0.85rem;
height: 34px;
border: 0;
border-radius: 11px;
background: transparent;
color: var(--of-fg-muted);
font: inherit;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.of-cmty-seg button.is-on { background: rgba(255, 255, 255, 0.1); color: var(--of-fg); }
.of-cmty-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 0.7rem;
}
.of-cmty-card {
--lv: #38bdf8;
position: relative;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 0.85rem 0.85rem 0.9rem;
border-radius: 18px;
border: 1px solid var(--of-border);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
overflow: hidden;
opacity: 0;
transform: translateY(10px) scale(0.98);
animation: of-cmty-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc(var(--i, 0) * 45ms);
transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
@keyframes of-cmty-in {
to { opacity: 1; transform: none; }
}
.of-cmty-card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--lv);
box-shadow: 0 0 14px var(--lv);
}
.of-cmty-card:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--lv) 45%, transparent);
box-shadow: 0 16px 34px -20px var(--lv);
}
.of-cmty-card.lv-1 { --lv: #38bdf8; }
.of-cmty-card.lv-2 { --lv: #a78bfa; }
.of-cmty-card.lv-3 { --lv: #f472b6; }
.of-cmty-card.lv-4 { --lv: #fb923c; }
.of-cmty-card.lv-5 { --lv: #facc15; }
.of-cmty-card.lv-6 { --lv: #34d399; }
.of-cmty-card.lv-7 { --lv: #2dd4bf; }
.of-cmty-card.lv-0 { --lv: #94a3b8; }
.of-cmty-av {
position: relative;
flex: 0 0 auto;
width: 46px;
height: 46px;
border-radius: 50%;
padding: 2px;
background: conic-gradient(from 200deg, var(--lv), transparent 70%, var(--lv));
}
.of-cmty-av b {
display: grid;
place-items: center;
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--lv) 55%, #0b1324), #0b1324 75%);
color: #fff;
font-size: 0.88rem;
font-weight: 900;
letter-spacing: 0.02em;
}
.of-cmty-av i {
position: absolute;
right: 0;
bottom: 1px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #071426;
background: #64748b;
}
.of-cmty-card.is-on .of-cmty-av i { background: #34d399; box-shadow: 0 0 8px #34d399; }
.of-cmty-card.is-off .of-cmty-av { filter: saturate(0.55); }
.of-cmty-copy {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.of-cmty-copy strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--of-fg);
font-size: 0.92rem;
font-weight: 800;
}
.of-cmty-copy em {
font-style: normal;
font-size: 0.74rem;
color: var(--of-accent);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.of-cmty-meta,
.of-cmty-by {
font-size: 0.7rem;
color: var(--of-fg-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.of-cmty-by { color: var(--of-fg-faint); }
.of-cmty-by.is-mine { color: #6ee7b7; font-weight: 700; }
.of-cmty-side {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.35rem;
}
.of-cmty-lv {
padding: 0.18rem 0.5rem;
border-radius: 99px;
background: color-mix(in srgb, var(--lv) 18%, transparent);
color: var(--lv);
font-size: 0.66rem;
font-weight: 800;
white-space: nowrap;
}
.of-cmty-state {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.68rem;
font-weight: 700;
color: #fbbf24;
white-space: nowrap;
}
.of-cmty-state i {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.of-cmty-state.is-on { color: #34d399; }
.of-cmty-empty {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: 2rem 1rem;
border-radius: 18px;
border: 1px dashed var(--of-border);
color: var(--of-fg-muted);
font-size: 0.85rem;
text-align: center;
}
.of-cmty-empty span { font-size: 1.4rem; color: #a78bfa; }
.of-cmty .of-net-pager { margin-top: 1rem; }
html[data-of-theme="light"] .of-net-dir.of-cmty {
border-color: rgba(3, 105, 161, 0.16);
background:
linear-gradient(160deg, rgba(14, 165, 233, 0.08), transparent 45%),
linear-gradient(340deg, rgba(168, 85, 247, 0.08), transparent 50%),
#ffffff;
box-shadow: 0 24px 50px -32px rgba(3, 105, 161, 0.35);
}
html[data-of-theme="light"] .of-cmty-titles h3 {
background: linear-gradient(90deg, #0f172a, #0369a1 60%, #7c3aed);
-webkit-background-clip: text;
background-clip: text;
}
html[data-of-theme="light"] .of-cmty-kicker { color: #0369a1; }
html[data-of-theme="light"] .of-cmty-stat,
html[data-of-theme="light"] .of-cmty-chip,
html[data-of-theme="light"] .of-cmty-search,
html[data-of-theme="light"] .of-cmty-seg { background: #f8fafc; }
html[data-of-theme="light"] .of-cmty-chip b { background: rgba(15, 23, 42, 0.07); }
html[data-of-theme="light"] .of-cmty-chip.is-on b { background: rgba(255, 255, 255, 0.25); }
html[data-of-theme="light"] .of-cmty-seg button.is-on { background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); }
html[data-of-theme="light"] .of-cmty-card { background: linear-gradient(135deg, #ffffff, #f8fafc); }
html[data-of-theme="light"] .of-cmty-av i { border-color: #fff; }
html[data-of-theme="light"] .of-cmty-stat.is-on strong,
html[data-of-theme="light"] .of-cmty-state.is-on { color: #059669; }
html[data-of-theme="light"] .of-cmty-stat.is-off strong,
html[data-of-theme="light"] .of-cmty-state { color: #b45309; }
html[data-of-theme="light"] .of-cmty-by.is-mine { color: #059669; }
@media (max-width: 640px) {
.of-net-dir.of-cmty { padding: 1.1rem 0.9rem 0.9rem; border-radius: 20px; }
.of-cmty-stats { width: 100%; }
.of-cmty-stat { flex: 1; min-width: 0; }
.of-cmty-seg { width: 100%; }
.of-cmty-seg button { flex: 1; }
.of-cmty-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.of-cmty-aurora,
.of-cmty-kicker::before { animation: none; }
.of-cmty-card { animation: none; opacity: 1; transform: none; }
}
/* ===== Layout fluido: el contenido usa todo el ancho útil en pantallas grandes ===== */
.of-main-scroll {
max-width: 1760px;
padding-left: clamp(1rem, 2.6vw, 2.75rem);
padding-right: clamp(1rem, 2.6vw, 2.75rem);
}
.of-kpis { gap: clamp(0.7rem, 1vw, 1.1rem); }
.of-kpi-val strong { font-size: clamp(1.15rem, 1.05rem + 0.55vw, 1.75rem); }
.of-dash-grid { gap: clamp(0.8rem, 1vw, 1.15rem); align-items: start; }
@media (min-width: 641px) and (max-width: 960px) {
#view-dashboard .of-kpis { gap: 0.7rem; }
#view-dashboard .of-kpi:nth-child(1),
#view-dashboard .of-kpi:nth-child(2) {
grid-column: auto;
min-height: 116px;
}
#view-dashboard .of-kpi:nth-child(1) .of-kpi-val strong,
#view-dashboard .of-kpi:nth-child(2) .of-kpi-val strong { font-size: 1.6rem; }
#view-dashboard .of-kpi:nth-child(n+3) { min-height: 100px; padding: 0.95rem 0.95rem 0.85rem; }
#view-dashboard .of-kpi:nth-child(n+3) .of-kpi-val strong { font-size: 1.2rem; }
#view-dashboard .of-dash-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (min-width: 641px) and (max-width: 1559px) {
#dashAffiliates {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
column-gap: 1.25rem;
}
}
@media (min-width: 1280px) {
.of-config-grid,
.of-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-grid,
.bonus-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media (min-width: 1560px) {
.of-dash-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.9fr); }
.of-dash-grid .of-panel-wide { grid-column: auto; }
}
@media (min-width: 1680px) {
.of-kpi { padding: 1.25rem 1.35rem 1.15rem; }
.of-panel { padding: 1.15rem 1.25rem 1rem; }
}
@media (max-width: 640px) {
.of-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.of-kpi { padding: 0.8rem 0.75rem 0.75rem; border-radius: 16px; }
.of-kpi-sub { font-size: 0.58rem; letter-spacing: 0.08em; }
.of-kpi-val { flex-wrap: wrap; row-gap: 0.15rem; }
.of-kpi-val strong { font-size: 1.1rem; }
}
@media (max-width: 359px) {
.of-kpis { grid-template-columns: 1fr; }
}
/* ===== Historial: filas con ícono por tipo, agrupadas por día ===== */
.of-list .of-led-row,
.of-led-row {
--led: #38bdf8;
position: relative;
gap: 0.75rem;
margin: 0 -0.35rem;
padding: 0.65rem 0.5rem;
border-top: 0;
border-radius: 14px;
transition: background 0.2s ease;
}
.of-led-row + .of-led-row::before {
content: "";
position: absolute;
top: 0;
left: 3.35rem;
right: 0.5rem;
height: 1px;
background: rgba(148, 163, 184, 0.1);
}
.of-led-row:hover { background: rgba(56, 189, 248, 0.06); }
.of-led-row.k-task { --led: #38bdf8; }
.of-led-row.k-affiliate { --led: #a78bfa; }
.of-led-row.k-community { --led: #34d399; }
.of-led-row.k-membership { --led: #fbbf24; }
.of-led-row.k-withdraw { --led: #fb7185; }
.of-led-row.k-quick_bonus { --led: #f472b6; }
.of-led-row.k-rank_bonus { --led: #facc15; }
.of-led-ico {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 2.35rem;
height: 2.35rem;
border-radius: 12px;
color: var(--led);
background: color-mix(in srgb, var(--led) 14%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--led) 26%, transparent);
}
.of-led-ico svg {
width: 1.15rem;
height: 1.15rem;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.of-led-row .of-item-title { font-size: 0.86rem; }
.of-led-row .of-item-sub { margin-top: 0.18rem; font-size: 0.72rem; }
.of-led-end {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.25rem;
}
.of-led-row .of-item-val {
font-size: 0.92rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
white-space: nowrap;
}
.of-led-row .of-item-val small {
margin-left: 0.25rem;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.06em;
opacity: 0.7;
}
.of-led-row .of-led-tx { margin-top: 0; }
.of-list .of-led-day,
.of-led-day {
display: block;
padding: 0.85rem 0.15rem 0.3rem;
border-top: 0;
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--of-fg-faint);
}
.of-list .of-led-day:first-child { padding-top: 0.1rem; }
.of-led-day span {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.of-led-day span::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #38bdf8;
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
}
.of-led-mark { display: none; }
/* ===== Tareas del dashboard: un clic abre la tarea ===== */
#dashTasks { gap: 0.45rem; }
#dashTasks li.of-dtask,
#dashTasks li.of-dgoal,
#dashTasks li.of-dtask-more {
border-top: 0;
}
.of-dtask {
--dt: #38bdf8;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 0.75rem !important;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.12);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
cursor: pointer;
animation: ofLedIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: calc(var(--i, 0) * 50ms);
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.of-dtask:hover,
.of-dtask:focus-visible {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--dt) 45%, transparent);
background: color-mix(in srgb, var(--dt) 8%, transparent);
box-shadow: 0 10px 24px -14px var(--dt);
outline: none;
}
.of-dtask.is-claim { --dt: #34d399; }
.of-dtask.is-done { --dt: #64748b; opacity: 0.7; }
.of-dtask.is-survey.is-top { --dt: #fbbf24; }
.of-dtask-ico {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 2.3rem;
height: 2.3rem;
border-radius: 12px;
color: var(--dt);
background: color-mix(in srgb, var(--dt) 14%, transparent);
}
.of-dtask-ico svg,
.of-dtask-go svg {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.of-dtask-ico svg { width: 1.15rem; height: 1.15rem; }
.of-dtask-copy {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.of-dtask-copy strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--of-fg);
font-size: 0.86rem;
font-weight: 700;
}
.of-dtask-copy span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--of-fg-faint);
font-size: 0.72rem;
}
.of-dtask-bar,
.of-dgoal-bar {
display: block;
height: 4px;
margin-top: 0.3rem;
border-radius: 99px;
background: rgba(148, 163, 184, 0.16);
overflow: hidden;
}
.of-dtask-bar b,
.of-dgoal-bar b {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #0ea5e9, #34d399);
}
.of-dtask-end {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.3rem;
}
.of-dtask-end em {
font-style: normal;
font-weight: 800;
font-size: 0.88rem;
color: #6ee7b7;
font-variant-numeric: tabular-nums;
}
.of-dtask-go {
display: inline-flex;
align-items: center;
gap: 0.15rem;
padding: 0.18rem 0.35rem 0.18rem 0.55rem;
border-radius: 99px;
background: color-mix(in srgb, var(--dt) 16%, transparent);
color: var(--dt);
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.03em;
white-space: nowrap;
}
.of-dtask-go svg { width: 0.8rem; height: 0.8rem; transition: transform 0.2s ease; }
.of-dtask:hover .of-dtask-go svg { transform: translateX(2px); }
.of-dgoal {
display: block !important;
padding: 0.8rem 0.85rem !important;
border-radius: 14px;
border: 1px solid rgba(56, 189, 248, 0.22);
background:
radial-gradient(120% 140% at 100% 0%, rgba(56, 189, 248, 0.14), transparent 60%),
rgba(2, 12, 28, 0.35);
cursor: pointer;
}
.of-dgoal.is-reached { border-color: rgba(52, 211, 153, 0.35); }
.of-dgoal-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
}
.of-dgoal-top strong { font-size: 0.86rem; color: var(--of-fg); }
.of-dgoal-top span {
padding: 0.12rem 0.5rem;
border-radius: 99px;
background: rgba(56, 189, 248, 0.16);
color: #7dd3fc;
font-size: 0.68rem;
font-weight: 800;
}
.of-dgoal.is-reached .of-dgoal-top span { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; }
.of-dgoal-bar { height: 6px; margin: 0.55rem 0 0.4rem; }
.of-dgoal em {
font-style: normal;
font-size: 0.72rem;
color: var(--of-fg-muted);
font-variant-numeric: tabular-nums;
}
.of-dtask-more {
justify-content: center !important;
padding: 0.7rem !important;
border-radius: 14px;
border: 1px dashed rgba(125, 211, 252, 0.3);
color: #7dd3fc;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
}
.of-dtask-more:hover { background: rgba(56, 189, 248, 0.08); }
html[data-of-theme="light"] .of-led-row:hover { background: rgba(3, 105, 161, 0.05); }
html[data-of-theme="light"] .of-led-row + .of-led-row::before { background: rgba(15, 23, 42, 0.08); }
html[data-of-theme="light"] .of-led-row.k-community { --led: #059669; }
html[data-of-theme="light"] .of-led-row.k-task { --led: #0284c7; }
html[data-of-theme="light"] .of-led-row.k-affiliate { --led: #7c3aed; }
html[data-of-theme="light"] .of-led-row.k-membership { --led: #d97706; }
html[data-of-theme="light"] .of-led-row.k-withdraw { --led: #e11d48; }
html[data-of-theme="light"] .of-dtask {
border-color: rgba(15, 23, 42, 0.08);
background: #ffffff;
}
html[data-of-theme="light"] .of-dtask-end em { color: #059669; }
html[data-of-theme="light"] .of-dgoal {
border-color: rgba(3, 105, 161, 0.18);
background: radial-gradient(120% 140% at 100% 0%, rgba(14, 165, 233, 0.1), transparent 60%), #f8fafc;
}
html[data-of-theme="light"] .of-dgoal-top span { color: #0369a1; }
html[data-of-theme="light"] .of-dtask-more { color: #0369a1; border-color: rgba(3, 105, 161, 0.3); }
@media (max-width: 640px) {
.of-led-ico { width: 2.1rem; height: 2.1rem; border-radius: 11px; }
.of-led-row + .of-led-row::before { left: 3.05rem; }
.of-led-row .of-item-title { font-size: 0.82rem; }
.of-dtask { gap: 0.6rem; padding: 0.6rem 0.6rem !important; }
.of-dtask-ico { width: 2.05rem; height: 2.05rem; }
}
@media (prefers-reduced-motion: reduce) {
.of-dtask { animation: none; }
}
/* ===== Billeteras: Tareas + Comisiones ===== */
.of-led-row.k-transfer { --led: #94a3b8; }
.of-led-row.k-transfer .of-item-val { color: #cbd5e1; }
html[data-of-theme="light"] .of-led-row.k-transfer { --led: #64748b; }
html[data-of-theme="light"] .of-led-row.k-transfer .of-item-val { color: #475569; }
.of-vault-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 0.85rem;
padding: 0.95rem 1.1rem;
border-radius: 18px;
border: 1px solid rgba(125, 211, 252, 0.16);
background:
radial-gradient(120% 140% at 0% 0%, rgba(56, 189, 248, 0.12), transparent 55%),
linear-gradient(180deg, rgba(8, 24, 42, 0.78), rgba(3, 12, 24, 0.92));
}
.of-vault-summary-main .of-wallet-amount { margin: 0.1rem 0 0; color: #f0f9ff; }
.of-vault-summary-main .of-wallet-avail-label {
margin: 0;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7dd3fc;
}
.of-vault-summary-chips {
display: grid;
grid-template-columns: repeat(2, minmax(150px, 1fr));
gap: 0.5rem;
}
.of-vaults {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.9rem;
margin-bottom: 0.85rem;
}
.of-vault {
--vault: #38bdf8;
--vault-2: #0ea5e9;
--vault-soft: rgba(56, 189, 248, 0.14);
--vault-line: rgba(56, 189, 248, 0.28);
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 0.8rem;
padding: 1.1rem 1.15rem 1.05rem;
border-radius: 22px;
border: 1px solid var(--vault-line);
background:
linear-gradient(160deg, var(--vault-soft), transparent 45%),
linear-gradient(180deg, rgba(8, 22, 40, 0.92), rgba(2, 10, 22, 0.96));
box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.of-vault:hover {
transform: translateY(-2px);
box-shadow: 0 24px 48px -26px var(--vault), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.of-vault.is-com {
--vault: #34d399;
--vault-2: #10b981;
--vault-soft: rgba(52, 211, 153, 0.14);
--vault-line: rgba(52, 211, 153, 0.3);
}
.of-vault::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
background: linear-gradient(90deg, transparent, var(--vault), var(--vault-2), transparent);
opacity: 0.9;
z-index: 1;
}
.of-vault-glow {
position: absolute;
top: -40%;
right: -25%;
width: 70%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, var(--vault-soft), transparent 70%);
filter: blur(8px);
pointer-events: none;
z-index: -1;
animation: ofVaultGlow 9s ease-in-out infinite alternate;
}
@keyframes ofVaultGlow {
from { transform: translate(0, 0) scale(1); opacity: 0.8; }
to { transform: translate(-12%, 10%) scale(1.15); opacity: 1; }
}
.of-vault-head {
display: flex;
align-items: center;
gap: 0.7rem;
}
.of-vault-ico {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 2.6rem;
height: 2.6rem;
border-radius: 14px;
color: var(--vault);
background: linear-gradient(145deg, var(--vault-soft), rgba(255, 255, 255, 0.02));
border: 1px solid var(--vault-line);
box-shadow: 0 8px 20px -12px var(--vault);
}
.of-vault-ico svg { width: 1.35rem; height: 1.35rem; }
.of-vault-title { min-width: 0; flex: 1 1 auto; }
.of-vault-kicker {
margin: 0;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(186, 230, 253, 0.6);
}
.of-vault-title h3 {
margin: 0.05rem 0 0;
font-size: 1.12rem;
font-weight: 800;
letter-spacing: -0.01em;
color: #f8fafc;
}
.of-vault-badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.3rem 0.6rem;
border-radius: 999px;
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.04em;
white-space: nowrap;
color: var(--vault);
background: var(--vault-soft);
border: 1px solid var(--vault-line);
}
.of-vault-badge svg { width: 0.85rem; height: 0.85rem; }
.of-vault-amount {
display: flex;
align-items: baseline;
gap: 0.4rem;
min-height: 2.6rem;
}
.of-vault-amount strong {
font-size: clamp(1.9rem, 3.4vw, 2.5rem);
font-weight: 850;
line-height: 1;
letter-spacing: -0.035em;
font-variant-numeric: tabular-nums;
background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--vault) 55%, #ffffff));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.of-vault-amount.is-hidden-money strong {
color: var(--vault);
-webkit-text-fill-color: currentColor;
}
.of-vault-unit {
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.1em;
color: var(--vault);
}
.of-vault-sub {
margin: -0.45rem 0 0;
font-size: 0.78rem;
color: rgba(186, 230, 253, 0.78);
}
.of-vault-sub[hidden] { display: none !important; }
.of-vault .of-vault-goal {
margin: 0;
border-color: var(--vault-line);
background: rgba(2, 12, 26, 0.55);
}
.of-vault.is-task .of-goal-bar span {
background: linear-gradient(90deg, #0ea5e9, #38bdf8 55%, #67e8f9);
}
.of-vault.is-com .of-goal-bar span {
background: linear-gradient(90deg, #059669, #34d399 55%, #a7f3d0);
box-shadow: 0 0 14px rgba(52, 211, 153, 0.4);
}
.of-vault-facts {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
.of-vault-facts li {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
padding: 0.55rem 0.65rem;
border-radius: 13px;
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(2, 12, 28, 0.4);
}
.of-vault-fact-ico {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 1.85rem;
height: 1.85rem;
border-radius: 10px;
color: var(--vault);
background: var(--vault-soft);
}
.of-vault-fact-ico svg { width: 1rem; height: 1rem; }
.of-vault-facts em {
display: block;
font-style: normal;
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(186, 230, 253, 0.6);
}
.of-vault-facts b {
display: block;
margin-top: 0.1rem;
font-size: 0.78rem;
font-weight: 700;
line-height: 1.25;
color: #e0f2fe;
}
.of-vault-note {
margin: auto 0 0;
font-size: 0.72rem;
line-height: 1.45;
color: rgba(186, 230, 253, 0.62);
}
.of-vault-actions {
position: relative;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 0.55rem;
}
.of-vault-actions .btn-activate-cta { width: 100%; margin: 0; }
.of-vault-move {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 46px;
padding: 0.6rem 0.9rem;
border-radius: 14px;
border: 1px solid rgba(56, 189, 248, 0.38);
background: linear-gradient(145deg, rgba(14, 165, 233, 0.16), rgba(2, 12, 28, 0.6));
color: #bae6fd;
font: inherit;
font-size: 0.85rem;
font-weight: 800;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.of-vault-move svg { width: 1.05rem; height: 1.05rem; }
.of-vault-move:hover:not(:disabled) {
transform: translateY(-1px);
border-color: rgba(56, 189, 248, 0.7);
background: linear-gradient(145deg, rgba(14, 165, 233, 0.28), rgba(2, 12, 28, 0.6));
}
.of-vault-move:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.of-tr-route {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0.55rem;
margin: 0.2rem 0 0.9rem;
}
.of-tr-node {
padding: 0.65rem 0.75rem;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.2);
background: rgba(2, 12, 28, 0.45);
text-align: center;
}
.of-tr-node.is-com { border-color: rgba(52, 211, 153, 0.35); }
.of-tr-node.is-task { border-color: rgba(56, 189, 248, 0.35); }
.of-tr-node em {
display: block;
font-style: normal;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.of-tr-node.is-com em { color: #6ee7b7; }
.of-tr-node.is-task em { color: #7dd3fc; }
.of-tr-node b {
display: block;
margin-top: 0.15rem;
font-size: 1.05rem;
font-variant-numeric: tabular-nums;
color: #f8fafc;
}
.of-tr-arrow {
display: grid;
place-items: center;
width: 2.1rem;
height: 2.1rem;
border-radius: 50%;
color: #7dd3fc;
background: rgba(14, 165, 233, 0.14);
animation: ofTrNudge 1.6s ease-in-out infinite;
}
.of-tr-arrow svg { width: 1.1rem; height: 1.1rem; }
@keyframes ofTrNudge {
0%, 100% { transform: translateX(-2px); }
50% { transform: translateX(3px); }
}
.of-tr-modal .of-wd-input-row .of-wd-max + .of-wd-max { margin-left: 0.35rem; }
.of-tr-modal .of-wd-max[hidden] { display: none !important; }
html[data-of-theme="light"] .of-vault-summary {
background: radial-gradient(120% 140% at 0% 0%, rgba(14, 165, 233, 0.1), transparent 55%), #fff;
border-color: rgba(14, 165, 233, 0.18);
}
html[data-of-theme="light"] .of-vault-summary-main .of-wallet-amount { color: #0f172a; }
html[data-of-theme="light"] .of-vault-summary-main .of-wallet-avail-label { color: #0369a1; }
html[data-of-theme="light"] .of-vault {
background: linear-gradient(160deg, var(--vault-soft), transparent 50%), #fff;
box-shadow: 0 16px 36px -26px rgba(15, 23, 42, 0.35);
}
html[data-of-theme="light"] .of-vault.is-task { --vault: #0284c7; --vault-2: #0ea5e9; }
html[data-of-theme="light"] .of-vault.is-com { --vault: #059669; --vault-2: #10b981; }
html[data-of-theme="light"] .of-vault-title h3 { color: #0f172a; }
html[data-of-theme="light"] .of-vault-kicker,
html[data-of-theme="light"] .of-vault-facts em { color: #64748b; }
html[data-of-theme="light"] .of-vault-amount strong {
background: linear-gradient(180deg, #0f172a, var(--vault));
-webkit-background-clip: text;
background-clip: text;
}
html[data-of-theme="light"] .of-vault-sub,
html[data-of-theme="light"] .of-vault-note { color: #475569; }
html[data-of-theme="light"] .of-vault .of-vault-goal,
html[data-of-theme="light"] .of-vault-facts li { background: #f8fafc; border-color: rgba(15, 23, 42, 0.08); }
html[data-of-theme="light"] .of-vault-facts b { color: #0f172a; }
html[data-of-theme="light"] .of-vault-move {
color: #075985;
background: rgba(14, 165, 233, 0.08);
border-color: rgba(2, 132, 199, 0.35);
}
html[data-of-theme="light"] .of-tr-node { background: #f8fafc; }
html[data-of-theme="light"] .of-tr-node b { color: #0f172a; }
@media (max-width: 960px) {
.of-vaults { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.of-vault { padding: 0.95rem 0.9rem 0.9rem; border-radius: 18px; }
.of-vault-summary { padding: 0.85rem 0.9rem; }
.of-vault-summary-chips { grid-template-columns: 1fr 1fr; width: 100%; }
.of-vault-facts { grid-template-columns: 1fr; }
.of-vault-actions { grid-template-columns: 1fr; }
.of-vault-badge span { display: none; }
.of-vault-badge { padding: 0.35rem; }
}
@media (prefers-reduced-motion: reduce) {
.of-vault-glow, .of-tr-arrow { animation: none; }
.of-vault:hover { transform: none; }
}
/* ===== Billeteras: versión limpia ===== */
.of-vault {
gap: 0.95rem;
padding: 1.25rem 1.25rem 1.2rem;
border-radius: 24px;
}
.of-vault::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(140deg, color-mix(in srgb, var(--vault) 55%, transparent), transparent 35%, transparent 65%, color-mix(in srgb, var(--vault-2) 40%, transparent));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 2;
}
.of-vault-amount {
position: relative;
padding: 0.15rem 0 0.1rem;
}
.of-vault-amount strong {
font-size: clamp(2.1rem, 3.8vw, 2.75rem);
text-shadow: 0 0 28px color-mix(in srgb, var(--vault) 25%, transparent);
}
.of-vault-sub {
margin-top: -0.6rem;
font-size: 0.74rem;
letter-spacing: 0.01em;
}
.of-vault .of-vault-goal {
border-radius: 16px;
backdrop-filter: blur(6px);
}
.of-vault .of-vault-goal p:empty { display: none; }
.of-vault-foot {
margin-top: auto;
display: flex;
justify-content: flex-start;
}
.of-vault-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
max-width: 100%;
padding: 0.5rem 0.85rem 0.5rem 0.65rem;
border-radius: 999px;
border: 1px solid var(--vault-line);
background: linear-gradient(135deg, var(--vault-soft), rgba(2, 12, 28, 0.35));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
white-space: nowrap;
}
.of-vault-pill svg { flex: 0 0 auto; width: 0.95rem; height: 0.95rem; color: var(--vault); }
.of-vault-pill em {
font-style: normal;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(186, 230, 253, 0.65);
}
.of-next-charge { align-items: stretch; padding: 0.6rem 0.6rem 0.6rem 0.75rem; }
.of-next-copy {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.35rem;
min-width: 0;
flex: 1 1 auto;
}
.of-next-status {
font-style: normal;
font-size: 0.72rem;
font-weight: 750;
line-height: 1.3;
color: #e0f2fe;
}
.of-next-charge:not(.is-ready) .of-next-status i { display: none; }
.of-next-when {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.15rem 0.4rem;
padding-top: 0.35rem;
border-top: 1px dashed rgba(148, 163, 184, 0.22);
}
.of-next-when svg { flex: 0 0 auto; width: 0.9rem; height: 0.9rem; color: var(--vault, #38bdf8); }
.of-next-when small {
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(186, 230, 253, 0.6);
}
.of-next-when b {
font-size: 0.8rem;
font-weight: 800;
color: #f8fafc;
}
.of-next-charge .of-goal-remain-days { align-self: center; }
.of-next-charge.is-ready .of-next-status { color: #a7f3d0; }
html[data-of-theme="light"] .of-next-status { color: #0c4a6e; }
html[data-of-theme="light"] .of-next-charge.is-ready .of-next-status { color: #065f46; }
html[data-of-theme="light"] .of-next-when { border-top-color: rgba(15, 23, 42, 0.12); }
html[data-of-theme="light"] .of-next-when small { color: #64748b; }
html[data-of-theme="light"] .of-next-when b { color: #0f172a; }
.of-vault-sub.is-legacy {
margin-top: -0.75rem;
font-size: 0.7rem;
color: rgba(186, 230, 253, 0.6);
}
.of-vault-pill { flex-wrap: wrap; white-space: normal; border-radius: 16px; }
.of-vault-pill b {
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.8rem;
font-weight: 800;
color: #f0f9ff;
font-variant-numeric: tabular-nums;
}
.of-vault-actions.is-single {
margin-top: auto;
grid-template-columns: 1fr;
}
.of-vault-actions.is-single .btn-activate-cta {
min-height: 50px;
border-radius: 16px;
font-size: 0.95rem;
letter-spacing: 0.02em;
}
html[data-of-theme="light"] .of-vault-pill {
background: linear-gradient(135deg, var(--vault-soft), #fff);
}
html[data-of-theme="light"] .of-vault-pill em { color: #64748b; }
html[data-of-theme="light"] .of-vault-pill b { color: #0f172a; }
html[data-of-theme="light"] .of-vault-amount strong { text-shadow: none; }
@media (max-width: 640px) {
.of-vault { padding: 1.05rem 1rem 1rem; border-radius: 20px; }
}
/* ===== Banca: tarjeta principal ===== */
.of-led-row.k-transfer_out { --led: #fb923c; }
.of-led-row.k-transfer_in { --led: #34d399; }
.of-bank-hero {
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"top top"
"bal chips"
"act act";
gap: 1rem 1.25rem;
margin-bottom: 0.9rem;
padding: 1.25rem 1.35rem 1.2rem;
border-radius: 26px;
border: 1px solid rgba(186, 230, 253, 0.18);
background:
linear-gradient(135deg, rgba(14, 116, 144, 0.55) 0%, rgba(8, 47, 73, 0.75) 38%, rgba(2, 6, 23, 0.95) 100%);
box-shadow:
0 30px 60px -34px rgba(14, 165, 233, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.of-bank-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.07) 48%, transparent 60%);
transform: translateX(-60%);
animation: ofBankSheen 7s ease-in-out infinite;
pointer-events: none;
z-index: -1;
}
@keyframes ofBankSheen {
0%, 55% { transform: translateX(-70%); }
100% { transform: translateX(70%); }
}
.of-bank-hero-mesh {
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(45% 70% at 92% 0%, rgba(52, 211, 153, 0.28), transparent 70%),
radial-gradient(40% 60% at 0% 100%, rgba(56, 189, 248, 0.25), transparent 70%),
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 14px);
}
.of-bank-hero-top {
grid-area: top;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.of-bank-brand { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.of-bank-chip {
position: relative;
flex: 0 0 auto;
width: 2.6rem;
height: 1.95rem;
border-radius: 7px;
background: linear-gradient(135deg, #fde68a, #d97706 55%, #fcd34d);
box-shadow: inset 0 0 0 1px rgba(120, 53, 15, 0.35), 0 4px 10px -4px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.of-bank-chip i {
position: absolute;
left: 0;
right: 0;
height: 1px;
background: rgba(120, 53, 15, 0.45);
}
.of-bank-chip i:nth-child(1) { top: 33%; }
.of-bank-chip i:nth-child(2) { top: 66%; }
.of-bank-chip i:nth-child(3) { top: 0; bottom: 0; left: 50%; right: auto; width: 1px; height: auto; }
.of-bank-kicker {
margin: 0;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.22em;
color: rgba(224, 242, 254, 0.7);
}
.of-bank-handle {
margin: 0.1rem 0 0;
font-size: 0.95rem;
font-weight: 800;
color: #f0f9ff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.of-bank-live {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.65rem;
border-radius: 999px;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.06em;
color: #a7f3d0;
background: rgba(16, 185, 129, 0.14);
border: 1px solid rgba(52, 211, 153, 0.3);
}
.of-bank-live i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #34d399;
box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
animation: ofBankPulse 2s ease-out infinite;
}
@keyframes ofBankPulse {
0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
100% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
}
.of-bank-balance { grid-area: bal; min-width: 0; align-self: end; }
.of-bank-balance .of-wallet-avail-label {
margin: 0;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(186, 230, 253, 0.8);
}
.of-bank-balance .of-wallet-amount {
margin: 0.2rem 0 0;
font-size: clamp(2.1rem, 4.6vw, 3.1rem);
font-weight: 850;
letter-spacing: -0.04em;
line-height: 1.02;
color: #ffffff;
text-shadow: 0 8px 30px rgba(14, 165, 233, 0.35);
font-variant-numeric: tabular-nums;
}
.of-bank-balance .of-wallet-amount small {
font-size: 0.38em;
letter-spacing: 0.1em;
color: #7dd3fc;
text-shadow: none;
}
.of-bank-chips {
grid-area: chips;
display: grid;
grid-template-columns: repeat(2, minmax(140px, 1fr));
gap: 0.5rem;
align-self: end;
}
.of-bank-chips .of-wchip {
backdrop-filter: blur(6px);
background: rgba(2, 12, 28, 0.45);
}
.of-bank-actions {
grid-area: act;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.6rem;
}
.of-bank-act {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 52px;
padding: 0.6rem 0.8rem;
border-radius: 16px;
border: 1px solid rgba(186, 230, 253, 0.2);
background: rgba(255, 255, 255, 0.06);
color: #e0f2fe;
font: inherit;
font-size: 0.9rem;
font-weight: 800;
cursor: pointer;
backdrop-filter: blur(8px);
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.of-bank-act:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.11);
border-color: rgba(186, 230, 253, 0.4);
}
.of-bank-act:active { transform: translateY(0) scale(0.98); }
.of-bank-act-ico {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 11px;
background: rgba(255, 255, 255, 0.1);
}
.of-bank-act-ico svg { width: 1.1rem; height: 1.1rem; }
.of-bank-act.is-primary {
color: #022c22;
border-color: transparent;
background: linear-gradient(135deg, #6ee7b7, #34d399 45%, #22d3ee);
box-shadow: 0 14px 30px -14px rgba(52, 211, 153, 0.8);
}
.of-bank-act.is-primary .of-bank-act-ico { background: rgba(2, 44, 34, 0.14); }
.of-bank-act.is-primary:hover {
background: linear-gradient(135deg, #a7f3d0, #34d399 45%, #22d3ee);
box-shadow: 0 18px 36px -14px rgba(52, 211, 153, 0.95);
}
.of-bank-act.is-muted { filter: saturate(0.4); opacity: 0.75; }
/* ===== Hoja de transferencia ===== */
.of-tr-modal .of-wd-sheet {
width: min(480px, calc(100vw - 1.5rem));
max-height: min(92dvh, 780px);
}
.of-tr-pane {
position: relative;
z-index: 1;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.of-tr-pane > .of-wd-body {
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.of-tr-tabs {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.35rem;
margin: 0.15rem 1.05rem 0.4rem;
padding: 0.3rem;
border-radius: 16px;
background: rgba(2, 12, 28, 0.55);
border: 1px solid rgba(148, 163, 184, 0.16);
}
.of-tr-tab {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 42px;
border: 0;
border-radius: 12px;
background: transparent;
color: rgba(186, 230, 253, 0.75);
font: inherit;
font-size: 0.82rem;
font-weight: 800;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.of-tr-tab svg { width: 1.05rem; height: 1.05rem; }
.of-tr-tab.is-active {
color: #f0f9ff;
background: linear-gradient(135deg, rgba(14, 165, 233, 0.4), rgba(16, 185, 129, 0.28));
box-shadow: 0 8px 20px -12px rgba(14, 165, 233, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.of-tr-pane[hidden], .of-mt-step[hidden] { display: none !important; }
.of-mt-step { animation: ofMtIn 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes ofMtIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.of-mt-step .of-wd-foot {
position: sticky;
bottom: -0.35rem;
margin: 0.9rem -1.05rem -0.35rem;
background: linear-gradient(180deg, rgba(3, 12, 24, 0), rgba(3, 12, 24, 0.97) 35%);
}
html[data-of-theme="light"] .of-mt-step .of-wd-foot {
background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 35%);
}
.of-mt-user {
position: relative;
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0 0.85rem;
min-height: 52px;
border-radius: 14px;
border: 1px solid rgba(125, 211, 252, 0.28);
background: rgba(2, 12, 28, 0.55);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.of-mt-user:focus-within {
border-color: rgba(56, 189, 248, 0.7);
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.14);
}
.of-mt-at { font-size: 1.15rem; font-weight: 800; color: #38bdf8; }
.of-mt-user input {
flex: 1 1 auto;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: #f8fafc;
font: inherit;
font-size: 1.02rem;
font-weight: 700;
}
.of-mt-spin {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid rgba(56, 189, 248, 0.25);
border-top-color: #38bdf8;
animation: ofMtSpin 0.7s linear infinite;
}
@keyframes ofMtSpin { to { transform: rotate(360deg); } }
.of-mt-spin[hidden], .of-mt-recipient[hidden], .of-mt-user-msg[hidden] { display: none !important; }
.of-mt-recipient {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.6rem;
padding: 0.7rem 0.8rem;
border-radius: 16px;
border: 1px solid rgba(52, 211, 153, 0.35);
background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(2, 12, 28, 0.55));
}
.of-mt-recipient.is-pop { animation: ofMtPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes ofMtPop {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: none; }
}
.of-mt-avatar {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 2.7rem;
height: 2.7rem;
border-radius: 50%;
font-weight: 850;
font-size: 0.95rem;
color: #022c22;
background: linear-gradient(135deg, #a7f3d0, #34d399 50%, #22d3ee);
box-shadow: 0 8px 18px -8px rgba(52, 211, 153, 0.8);
}
.of-mt-avatar.is-xl { width: 4.2rem; height: 4.2rem; font-size: 1.35rem; }
.of-mt-recipient-copy { min-width: 0; flex: 1 1 auto; }
.of-mt-recipient-copy strong { display: block; color: #f8fafc; font-size: 0.95rem; }
.of-mt-recipient-copy em { display: block; font-style: normal; font-size: 0.78rem; color: rgba(167, 243, 208, 0.85); }
.of-mt-verified {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.55rem;
border-radius: 999px;
font-size: 0.64rem;
font-weight: 800;
color: #6ee7b7;
background: rgba(16, 185, 129, 0.16);
white-space: nowrap;
}
.of-mt-verified svg { width: 0.9rem; height: 0.9rem; }
.of-mt-user-msg { margin: 0.45rem 0 0; font-size: 0.8rem; color: #fda4af; }
.of-mt-note {
width: 100%;
min-height: 46px;
padding: 0 0.85rem;
border-radius: 14px;
border: 1px solid rgba(125, 211, 252, 0.22);
background: rgba(2, 12, 28, 0.55);
color: #f8fafc;
font: inherit;
font-size: 0.9rem;
outline: 0;
}
.of-mt-note:focus { border-color: rgba(56, 189, 248, 0.6); }
.of-mt-break {
margin: 0.9rem 0 0;
padding: 0.7rem 0.85rem;
border-radius: 14px;
border: 1px dashed rgba(148, 163, 184, 0.28);
background: rgba(2, 12, 28, 0.35);
}
.of-mt-break > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
padding: 0.25rem 0;
font-size: 0.84rem;
}
.of-mt-break > div[hidden] { display: none; }
.of-mt-break dt { color: rgba(186, 230, 253, 0.75); }
.of-mt-break dd { margin: 0; color: #f0f9ff; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.of-mt-break .is-total {
margin-top: 0.3rem;
padding-top: 0.55rem;
border-top: 1px solid rgba(148, 163, 184, 0.18);
}
.of-mt-break .is-total dt, .of-mt-break .is-total dd { color: #6ee7b7; font-weight: 850; font-size: 0.95rem; }
.of-mt-confirm-hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
padding: 0.4rem 0 0.2rem;
text-align: center;
}
.of-mt-confirm-to { margin: 0.45rem 0 0; color: rgba(186, 230, 253, 0.85); font-size: 0.88rem; text-align: center; }
.of-mt-confirm-to strong { color: #f8fafc; }
.of-mt-confirm-to em { font-style: normal; color: #6ee7b7; }
.of-mt-confirm-handle { font-style: normal; font-size: 0.82rem; color: #6ee7b7; }
.of-mt-confirm-amount {
display: block;
margin-top: 0.35rem;
font-size: clamp(2rem, 7vw, 2.6rem);
font-weight: 850;
letter-spacing: -0.04em;
color: #ffffff;
text-align: center;
font-variant-numeric: tabular-nums;
}
.of-mt-confirm-amount small { font-size: 0.4em; letter-spacing: 0.1em; color: #7dd3fc; }
.of-mt-pass {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0 0.85rem;
min-height: 52px;
border-radius: 14px;
border: 1px solid rgba(125, 211, 252, 0.28);
background: rgba(2, 12, 28, 0.55);
color: #7dd3fc;
}
.of-mt-pass:focus-within { border-color: rgba(56, 189, 248, 0.7); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.14); }
.of-mt-pass svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.of-mt-pass input {
flex: 1 1 auto;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: #f8fafc;
font: inherit;
font-size: 1rem;
letter-spacing: 0.08em;
}
.of-mt-warn {
margin: 0.65rem 0 0;
padding: 0.55rem 0.7rem;
border-radius: 12px;
font-size: 0.74rem;
line-height: 1.4;
color: #fde68a;
background: rgba(251, 191, 36, 0.08);
border: 1px solid rgba(251, 191, 36, 0.2);
}
.of-mt-receipt { text-align: center; }
.of-mt-check {
width: 4.6rem;
height: 4.6rem;
margin: 0.2rem auto 0.4rem;
color: #34d399;
filter: drop-shadow(0 10px 24px rgba(52, 211, 153, 0.55));
}
.of-mt-check svg { width: 100%; height: 100%; }
.of-mt-check circle { stroke-dasharray: 150; stroke-dashoffset: 150; animation: ofMtDraw 0.7s ease forwards; }
.of-mt-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ofMtDraw 0.45s 0.5s ease forwards; }
@keyframes ofMtDraw { to { stroke-dashoffset: 0; } }
.of-mt-receipt-kicker {
margin: 0;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #6ee7b7;
}
.of-mt-break.is-receipt { text-align: left; }
html[data-of-theme="light"] .of-bank-hero {
background: linear-gradient(135deg, #0369a1 0%, #0c4a6e 45%, #082f49 100%);
}
html[data-of-theme="light"] .of-tr-tabs { background: #f1f5f9; border-color: rgba(15, 23, 42, 0.08); }
html[data-of-theme="light"] .of-tr-tab { color: #475569; }
html[data-of-theme="light"] .of-tr-tab.is-active { color: #0f172a; background: #fff; box-shadow: 0 6px 16px -10px rgba(15, 23, 42, 0.35); }
html[data-of-theme="light"] .of-mt-user,
html[data-of-theme="light"] .of-mt-pass,
html[data-of-theme="light"] .of-mt-note,
html[data-of-theme="light"] .of-mt-break { background: #f8fafc; border-color: rgba(15, 23, 42, 0.12); }
html[data-of-theme="light"] .of-mt-user input,
html[data-of-theme="light"] .of-mt-pass input,
html[data-of-theme="light"] .of-mt-note,
html[data-of-theme="light"] .of-mt-recipient-copy strong,
html[data-of-theme="light"] .of-mt-confirm-to strong,
html[data-of-theme="light"] .of-mt-confirm-amount,
html[data-of-theme="light"] .of-mt-break dd { color: #0f172a; }
html[data-of-theme="light"] .of-mt-break dt,
html[data-of-theme="light"] .of-mt-confirm-to { color: #475569; }
html[data-of-theme="light"] .of-mt-recipient { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), #fff); }
html[data-of-theme="light"] .of-mt-recipient-copy em,
html[data-of-theme="light"] .of-mt-confirm-handle,
html[data-of-theme="light"] .of-mt-break .is-total dt,
html[data-of-theme="light"] .of-mt-break .is-total dd { color: #047857; }
html[data-of-theme="light"] .of-mt-warn { color: #92400e; background: #fffbeb; }
@media (max-width: 760px) {
.of-bank-hero {
grid-template-columns: 1fr;
grid-template-areas: "top" "bal" "chips" "act";
padding: 1.05rem 1rem 1rem;
border-radius: 22px;
}
.of-bank-chips { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.of-bank-act { flex-direction: column; gap: 0.3rem; min-height: 68px; font-size: 0.78rem; }
.of-bank-live span { display: none; }
.of-tr-tabs { margin: 0 0.9rem 0.2rem; }
.of-tr-tab span { font-size: 0.76rem; }
}
@media (prefers-reduced-motion: reduce) {
.of-bank-hero::after, .of-bank-live i, .of-mt-step, .of-mt-recipient.is-pop { animation: none; }
.of-mt-check circle, .of-mt-check path { animation: none; stroke-dashoffset: 0; }
}
/* ===== Banca: 2 acciones ===== */
.of-bank-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) {
.of-bank-act { flex-direction: row; gap: 0.5rem; min-height: 54px; font-size: 0.86rem; }
}
/* ===== Buscar miembro: estados del campo ===== */
.of-mt-state {
display: none;
flex: 0 0 auto;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
}
.of-mt-state svg { width: 15px; height: 15px; }
.of-mt-state.is-ok { color: #052e1c; background: linear-gradient(145deg, #6ee7b7, #10b981); box-shadow: 0 0 16px rgba(16, 185, 129, 0.55); }
.of-mt-state.is-miss { color: #fff; background: linear-gradient(145deg, #fb7185, #e11d48); box-shadow: 0 0 16px rgba(225, 29, 72, 0.45); }
.of-mt-user.is-found .of-mt-state.is-ok,
.of-mt-user.is-missing .of-mt-state.is-miss {
display: grid;
animation: ofMtStateIn 0.32s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes ofMtStateIn {
from { transform: scale(0.3) rotate(-25deg); opacity: 0; }
to { transform: none; opacity: 1; }
}
.of-mt-user.is-found {
border-color: rgba(52, 211, 153, 0.75);
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14);
}
.of-mt-user.is-missing {
border-color: rgba(251, 113, 133, 0.75);
box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.13);
animation: ofMtShake 0.38s ease;
}
@keyframes ofMtShake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-5px); }
45% { transform: translateX(4px); }
70% { transform: translateX(-2px); }
}
.of-mt-user.is-searching::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: -1px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, #38bdf8, #34d399, transparent);
background-size: 200% 100%;
animation: ofMtScan 0.9s linear infinite;
}
@keyframes ofMtScan {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
.of-mt-paste {
flex: 0 0 auto;
padding: 0.38rem 0.7rem;
border-radius: 999px;
border: 1px solid rgba(56, 189, 248, 0.4);
background: rgba(14, 165, 233, 0.14);
color: #7dd3fc;
font: inherit;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.of-mt-paste:hover { background: rgba(14, 165, 233, 0.26); border-color: rgba(56, 189, 248, 0.75); transform: translateY(-1px); }
.of-mt-user.is-found .of-mt-paste,
.of-mt-user.is-searching .of-mt-paste { display: none; }
.of-mt-user-msg {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-top: 0.55rem;
padding: 0.6rem 0.75rem;
border-radius: 12px;
border: 1px solid rgba(251, 113, 133, 0.35);
background: linear-gradient(135deg, rgba(225, 29, 72, 0.16), rgba(2, 12, 28, 0.5));
color: #fecdd3;
font-weight: 600;
line-height: 1.4;
animation: ofMtMsgIn 0.28s ease-out;
}
.of-mt-user-msg::before {
content: "!";
flex: 0 0 auto;
display: grid;
place-items: center;
width: 1.15rem;
height: 1.15rem;
margin-top: 0.05rem;
border-radius: 50%;
background: #e11d48;
color: #fff;
font-size: 0.72rem;
font-weight: 900;
}
@keyframes ofMtMsgIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
html[data-of-theme="light"] .of-mt-user-msg { background: #fff1f2; color: #9f1239; border-color: rgba(225, 29, 72, 0.3); }
html[data-of-theme="light"] .of-mt-paste { color: #0369a1; background: #e0f2fe; }
/* ===== Saldo en tiempo real: destello verde / rojo ===== */
.of-bank-balance,
.of-vault-amount { position: relative; }
.of-vault-amount strong.is-tick-up {
background: none;
-webkit-text-fill-color: #4ade80;
color: #4ade80;
text-shadow: 0 0 26px rgba(74, 222, 128, 0.6);
}
.of-vault-amount strong.is-tick-down {
background: none;
-webkit-text-fill-color: #fb7185;
color: #fb7185;
text-shadow: 0 0 26px rgba(251, 113, 133, 0.6);
}
.of-vault-amount strong.is-ticking { animation: ofMoneyTickPulse 0.45s ease-out; }
.of-money-delta {
position: absolute;
right: 0;
top: -0.2rem;
z-index: 3;
padding: 0.28rem 0.6rem;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 850;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
pointer-events: none;
animation: ofDeltaFloat 1.85s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.of-money-delta.is-up {
color: #052e1c;
background: linear-gradient(135deg, #86efac, #22c55e);
box-shadow: 0 8px 22px -6px rgba(34, 197, 94, 0.7);
}
.of-money-delta.is-down {
color: #fff;
background: linear-gradient(135deg, #fb7185, #e11d48);
box-shadow: 0 8px 22px -6px rgba(225, 29, 72, 0.7);
}
@keyframes ofDeltaFloat {
0% { opacity: 0; transform: translateY(10px) scale(0.7); }
15% { opacity: 1; transform: translateY(0) scale(1.08); }
30% { transform: translateY(-2px) scale(1); }
75% { opacity: 1; transform: translateY(-14px); }
100% { opacity: 0; transform: translateY(-26px); }
}
.of-bank-hero.is-gain,
.of-vault.is-gain { animation: ofCardGain 1.6s ease-out; }
.of-bank-hero.is-loss,
.of-vault.is-loss { animation: ofCardLoss 1.6s ease-out; }
@keyframes ofCardGain {
0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
18% { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.75), 0 0 48px rgba(34, 197, 94, 0.45); }
100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@keyframes ofCardLoss {
0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
18% { box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.75), 0 0 48px rgba(225, 29, 72, 0.4); }
100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
}
@media (prefers-reduced-motion: reduce) {
.of-money-delta, .of-bank-hero.is-gain, .of-bank-hero.is-loss, .of-vault.is-gain, .of-vault.is-loss,
.of-mt-user.is-missing, .of-mt-user.is-searching::after, .of-mt-state { animation: none !important; }
}
/* ── Préstamo: tarjeta en billetera ── */
.of-loan {
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
gap: 0.9rem;
margin-bottom: 0.9rem;
padding: 1.2rem 1.25rem;
border-radius: 24px;
border: 1px solid rgba(167, 139, 250, 0.32);
background:
radial-gradient(ellipse 70% 90% at 100% 0%, rgba(139, 92, 246, 0.28), transparent 60%),
linear-gradient(160deg, rgba(30, 20, 60, 0.85), rgba(8, 10, 24, 0.92));
box-shadow: 0 22px 50px -18px rgba(139, 92, 246, 0.45);
animation: ofLoanIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.of-loan[hidden] { display: none; }
@keyframes ofLoanIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.of-loan::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
background: linear-gradient(90deg, transparent, #a78bfa, #22d3ee, transparent);
}
.of-loan-glow {
position: absolute;
inset: -40% -20% auto auto;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(167, 139, 250, 0.35), transparent 70%);
filter: blur(10px);
z-index: -1;
animation: ofLoanGlow 6s ease-in-out infinite alternate;
}
@keyframes ofLoanGlow { to { transform: translate(-30px, 20px) scale(1.15); } }
.of-loan-head { display: flex; align-items: center; gap: 0.6rem; }
.of-loan-head h3 { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; margin: 0; flex: 1; }
.of-loan-ico {
width: 36px; height: 36px; border-radius: 12px;
display: grid; place-items: center;
color: #c4b5fd;
background: rgba(139, 92, 246, 0.18);
border: 1px solid rgba(167, 139, 250, 0.35);
}
.of-loan-ico svg { width: 18px; height: 18px; }
.of-loan-state {
padding: 0.28rem 0.7rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #c4b5fd;
background: rgba(139, 92, 246, 0.16);
border: 1px solid rgba(167, 139, 250, 0.35);
}
.of-loan-state.is-late { color: #fda4af; background: rgba(225, 29, 72, 0.14); border-color: rgba(251, 113, 133, 0.4); }
.of-loan-amt { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.of-loan-amt small { font-size: 0.78rem; color: rgba(226, 232, 240, 0.7); font-weight: 600; }
.of-loan-amt strong {
font-size: clamp(1.9rem, 6vw, 2.5rem);
font-weight: 850;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
background: linear-gradient(135deg, #ede9fe, #a78bfa);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.of-loan-amt span { font-size: 0.86rem; color: rgba(226, 232, 240, 0.6); font-weight: 600; }
.of-loan-bar { height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.of-loan-bar i {
display: block;
height: 100%;
width: 0;
border-radius: inherit;
background: linear-gradient(90deg, #8b5cf6, #22d3ee, #34d399);
box-shadow: 0 0 16px rgba(139, 92, 246, 0.6);
transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.of-loan-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.7rem; }
.of-loan-meta span {
display: grid;
gap: 0.15rem;
padding: 0.6rem 0.75rem;
border-radius: 14px;
background: rgba(0, 0, 0, 0.28);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.of-loan-meta em { font-style: normal; font-size: 0.68rem; color: rgba(226, 232, 240, 0.6); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.of-loan-meta b { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.of-loan-pay { display: grid; grid-template-columns: 1fr auto; gap: 0.55rem; align-items: center; }
.of-loan-input {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0 0.45rem 0 0.9rem;
border-radius: 16px;
border: 1px solid rgba(167, 139, 250, 0.35);
background: rgba(0, 0, 0, 0.35);
transition: border-color 0.2s, box-shadow 0.2s;
}
.of-loan-input:focus-within { border-color: #a78bfa; box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2); }
.of-loan-input input {
flex: 1;
min-width: 0;
padding: 0.85rem 0;
border: 0;
outline: none;
background: transparent;
color: #fff;
font: inherit;
font-size: 1.05rem;
font-weight: 750;
font-variant-numeric: tabular-nums;
}
.of-loan-input > span { font-size: 0.74rem; font-weight: 750; color: rgba(226, 232, 240, 0.6); }
.of-loan-max {
padding: 0.38rem 0.65rem;
border-radius: 10px;
font-size: 0.72rem;
font-weight: 800;
color: #c4b5fd;
background: rgba(139, 92, 246, 0.18);
border: 1px solid rgba(167, 139, 250, 0.35);
}
.of-loan-btn {
padding: 0.9rem 1.15rem;
border-radius: 16px;
font-weight: 800;
font-size: 0.88rem;
color: #fff;
border: 0;
background: linear-gradient(135deg, #8b5cf6, #6d28d9 55%, #0ea5e9);
box-shadow: 0 14px 30px -10px rgba(139, 92, 246, 0.75);
transition: transform 0.2s, filter 0.2s, opacity 0.2s;
white-space: nowrap;
}
.of-loan-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.1); }
.of-loan-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.of-loan-btn.is-busy { opacity: 0.7; pointer-events: none; }
.of-loan-input input:disabled { opacity: 0.5; }
.of-loan-hint { grid-column: 1 / -1; margin: 0; font-size: 0.74rem; color: rgba(226, 232, 240, 0.62); }
.of-loan-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.of-loan-events li {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.75rem;
border-radius: 12px;
background: rgba(0, 0, 0, 0.25);
border-left: 3px solid #34d399;
font-size: 0.8rem;
animation: ofLoanIn 0.45s ease both;
}
.of-loan-events li.is-extension { border-left-color: #38bdf8; }
.of-loan-events li span { display: grid; gap: 0.1rem; font-weight: 700; }
.of-loan-events li small { font-size: 0.68rem; color: rgba(226, 232, 240, 0.55); font-weight: 500; }
.of-loan-events li b { color: #86efac; font-variant-numeric: tabular-nums; }
.of-loan-events li.is-extension b { color: #7dd3fc; }
.of-loan.is-late { border-color: rgba(251, 113, 133, 0.4); }
.of-loan.is-late .of-loan-amt strong { background: linear-gradient(135deg, #ffe4e6, #fb7185); -webkit-background-clip: text; background-clip: text; }
.of-loan.is-loss { animation: ofCardLoss 1.6s ease-out; }
.of-loan.is-settled { animation: ofCardGain 1.6s ease-out; }
@media (max-width: 560px) {
.of-loan-pay { grid-template-columns: 1fr; }
.of-loan-btn { width: 100%; }
}
/* ── Historial de retiros ── */
.of-wdh {
grid-column: 1 / -1;
position: relative;
overflow: hidden;
width: 100%;
margin-bottom: 0.85rem;
padding: 1.15rem 1.15rem 0.9rem;
border-radius: 24px;
border: 1px solid rgba(52, 211, 153, 0.2);
background:
radial-gradient(120% 90% at 100% 0%, rgba(16, 185, 129, 0.14), transparent 55%),
radial-gradient(90% 80% at 0% 100%, rgba(14, 165, 233, 0.1), transparent 60%),
linear-gradient(180deg, rgba(6, 26, 36, 0.82), rgba(3, 12, 22, 0.94));
box-shadow: 0 24px 50px rgba(2, 10, 24, 0.42), inset 0 1px 0 rgba(167, 243, 208, 0.08);
animation: ofWalletIn 0.8s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.of-wdh-aurora {
position: absolute;
inset: -40% -20% auto auto;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(52, 211, 153, 0.22), transparent 65%);
filter: blur(10px);
pointer-events: none;
animation: ofWdhDrift 12s ease-in-out infinite alternate;
}
@keyframes ofWdhDrift {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(-60px, 40px) scale(1.15); }
}
.of-wdh > *:not(.of-wdh-aurora) { position: relative; z-index: 1; }
.of-wdh-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.95rem; }
.of-wdh-title { display: flex; align-items: center; gap: 0.7rem; }
.of-wdh-title h3 { margin: 0; font-size: 1.02rem; font-weight: 750; letter-spacing: -0.01em; }
.of-wdh-ico {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 13px;
color: #6ee7b7;
background: linear-gradient(145deg, rgba(16, 185, 129, 0.28), rgba(6, 78, 59, 0.35));
border: 1px solid rgba(110, 231, 183, 0.3);
box-shadow: 0 0 22px rgba(16, 185, 129, 0.25);
}
.of-wdh-ico svg { width: 20px; height: 20px; }
.of-wdh-count {
min-width: 30px;
padding: 0.22rem 0.6rem;
border-radius: 999px;
text-align: center;
font-size: 0.74rem;
font-weight: 800;
color: #a7f3d0;
background: rgba(16, 185, 129, 0.14);
border: 1px solid rgba(110, 231, 183, 0.25);
font-variant-numeric: tabular-nums;
}
.of-wdh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
.of-wdh-stat {
display: grid;
gap: 0.2rem;
padding: 0.85rem 0.95rem;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(0, 0, 0, 0.28);
}
.of-wdh-stat small { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: rgba(148, 163, 184, 0.95); }
.of-wdh-stat strong { font-size: clamp(1.25rem, 3.4vw, 1.6rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.of-wdh-stat strong em { font-style: normal; font-size: 0.7rem; font-weight: 700; color: rgba(148, 163, 184, 0.9); letter-spacing: 0; }
.of-wdh-stat.is-paid strong span {
background: linear-gradient(135deg, #ecfdf5, #34d399 60%, #10b981);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.of-wdh-stat.is-pending strong span { color: #fcd34d; }
.of-wdh-sub { font-size: 0.72rem; color: rgba(148, 163, 184, 0.85); }
.of-wdh.has-pending .of-wdh-stat.is-pending {
border-color: rgba(251, 191, 36, 0.3);
background: linear-gradient(160deg, rgba(251, 191, 36, 0.1), rgba(0, 0, 0, 0.28));
}
.of-wdh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; position: relative; }
.of-wdh-item {
--c: 52, 211, 153;
position: relative;
display: grid;
grid-template-columns: 40px 1fr;
gap: 0.8rem;
padding: 0.85rem 0.9rem;
border-radius: 18px;
border: 1px solid rgba(var(--c), 0.14);
background: linear-gradient(100deg, rgba(var(--c), 0.07), rgba(0, 0, 0, 0.22) 55%);
animation: ofWdhIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: calc(var(--i, 0) * 60ms);
transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.of-wdh-item:hover { transform: translateY(-2px); border-color: rgba(var(--c), 0.35); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3); }
.of-wdh-item.is-pending { --c: 251, 191, 36; }
.of-wdh-item.is-rejected { --c: 248, 113, 113; }
.of-wdh-item.is-cancelled { --c: 148, 163, 184; }
@keyframes ofWdhIn {
from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
to { opacity: 1; transform: none; filter: none; }
}
.of-wdh-node {
position: relative;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 14px;
color: rgb(var(--c));
background: rgba(var(--c), 0.13);
border: 1px solid rgba(var(--c), 0.35);
box-shadow: 0 0 18px rgba(var(--c), 0.22);
}
.of-wdh-node svg { width: 20px; height: 20px; }
.of-wdh-item.is-pending .of-wdh-node::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 17px;
border: 1.5px solid rgba(var(--c), 0.55);
animation: ofWdhRing 1.8s ease-out infinite;
}
@keyframes ofWdhRing {
from { transform: scale(0.92); opacity: 0.9; }
to { transform: scale(1.25); opacity: 0; }
}
.of-wdh-body { display: grid; gap: 0.4rem; min-width: 0; }
.of-wdh-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.of-wdh-amt { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.of-wdh-amt small { margin-left: 0.3rem; font-size: 0.66rem; font-weight: 700; color: rgba(148, 163, 184, 0.9); }
.of-wdh-pill {
flex: 0 0 auto;
padding: 0.24rem 0.65rem;
border-radius: 999px;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.04em;
color: rgb(var(--c));
background: rgba(var(--c), 0.13);
border: 1px solid rgba(var(--c), 0.3);
}
.of-wdh-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.of-wdh-steps i { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; position: relative; }
.of-wdh-steps i.is-done { background: rgba(var(--c), 0.85); }
.of-wdh-steps i.is-live::after {
content: "";
position: absolute;
inset: 0;
width: 45%;
border-radius: inherit;
background: linear-gradient(90deg, transparent, rgba(var(--c), 0.95), transparent);
animation: ofWdhScan 1.6s ease-in-out infinite;
}
@keyframes ofWdhScan {
from { transform: translateX(-100%); }
to { transform: translateX(240%); }
}
.of-wdh-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; font-size: 0.74rem; color: rgba(203, 213, 225, 0.9); }
.of-wdh-meta em { font-style: normal; color: rgba(148, 163, 184, 0.8); margin-right: 0.3rem; }
.of-wdh-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.of-wdh-foot:empty { display: none; }
.of-wdh-addr,
.of-wdh-copy {
padding: 0.2rem 0.5rem;
border-radius: 8px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.7rem;
color: rgba(203, 213, 225, 0.95);
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.07);
}
.of-wdh-copy { cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.of-wdh-copy:hover { color: #a7f3d0; border-color: rgba(110, 231, 183, 0.4); }
.of-wdh-tx {
display: inline-flex;
align-items: center;
gap: 0.2rem;
font-size: 0.72rem;
font-weight: 700;
color: #6ee7b7;
text-decoration: none;
}
.of-wdh-tx svg { width: 15px; height: 15px; transition: transform 0.2s; }
.of-wdh-tx:hover svg { transform: translate(2px, -2px); }
.of-wdh-note {
margin: 0;
padding: 0.45rem 0.6rem;
border-radius: 10px;
font-size: 0.74rem;
color: #fecaca;
background: rgba(248, 113, 113, 0.08);
border-left: 2px solid rgba(248, 113, 113, 0.6);
}
.of-wdh-empty {
display: grid;
justify-items: center;
gap: 0.7rem;
padding: 1.6rem 1rem 1.2rem;
text-align: center;
}
.of-wdh-empty strong { font-size: 0.95rem; font-weight: 700; color: rgba(226, 232, 240, 0.95); }
.of-wdh-empty-art {
position: relative;
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 50%;
color: #6ee7b7;
background: radial-gradient(circle at 35% 30%, rgba(52, 211, 153, 0.35), rgba(6, 78, 59, 0.4) 65%);
border: 1px solid rgba(110, 231, 183, 0.35);
}
.of-wdh-empty-art svg { width: 28px; height: 28px; }
.of-wdh-empty-art i {
position: absolute;
inset: -1px;
border-radius: 50%;
border: 1.5px solid rgba(110, 231, 183, 0.45);
animation: ofWdhRing 2.6s ease-out infinite;
}
.of-wdh-empty-art i + i { animation-delay: 1.3s; }
.of-wdh-more {
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
width: 100%;
margin-top: 0.7rem;
padding: 0.6rem;
border-radius: 14px;
border: 1px dashed rgba(110, 231, 183, 0.25);
background: transparent;
color: #a7f3d0;
font: inherit;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.of-wdh-more:hover { background: rgba(16, 185, 129, 0.08); border-color: rgba(110, 231, 183, 0.5); }
.of-wdh-more svg { width: 16px; height: 16px; transition: transform 0.3s; }
.of-wdh-more.is-open svg { transform: rotate(180deg); }
@media (max-width: 560px) {
.of-wdh { padding: 1rem 0.85rem 0.8rem; }
.of-wdh-stats { gap: 0.45rem; }
.of-wdh-stat { padding: 0.7rem 0.75rem; }
.of-wdh-item { grid-template-columns: 34px 1fr; gap: 0.65rem; padding: 0.75rem; }
.of-wdh-node { width: 34px; height: 34px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.of-wdh, .of-wdh-item, .of-wdh-aurora, .of-wdh-node::after, .of-wdh-steps i::after, .of-wdh-empty-art i { animation: none !important; }
}
/* Actualización en vivo sin reproducir animaciones de entrada / anti-parpadeo */
.of-quiet,
.of-quiet * {
animation: none !important;
animation-duration: 0s !important;
animation-delay: 0s !important;
transition-duration: 0.01ms !important;
}
.of-quiet .task-card,
.of-quiet .of-earn-sep {
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
/* Préstamo vencido: cuenta inhabilitada */
.of-loanlock {
position: fixed;
inset: 0;
z-index: 9400;
display: grid;
place-items: center;
padding:
max(1rem, env(safe-area-inset-top))
max(1rem, env(safe-area-inset-right))
max(1rem, env(safe-area-inset-bottom))
max(1rem, env(safe-area-inset-left));
overflow-y: auto;
}
.of-loanlock[hidden] { display: none !important; }
.of-loanlock-veil {
position: fixed;
inset: 0;
background:
radial-gradient(60% 50% at 50% 30%, rgba(244, 63, 94, 0.18), transparent 70%),
rgba(3, 7, 18, 0.78);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
animation: ofLoanLockFade 0.35s ease both;
}
.of-loanlock-card {
position: relative;
width: min(100%, 420px);
padding: 2rem 1.6rem 1.5rem;
border-radius: 24px;
text-align: center;
color: #e2e8f0;
background: linear-gradient(165deg, rgba(30, 16, 28, 0.96), rgba(10, 14, 28, 0.98));
border: 1px solid rgba(244, 63, 94, 0.28);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
animation: ofLoanLockIn 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
}
.of-loanlock-icon {
width: 64px;
height: 64px;
margin: 0 auto 1rem;
display: grid;
place-items: center;
border-radius: 20px;
color: #fda4af;
background: radial-gradient(circle at 30% 25%, rgba(251, 113, 133, 0.35), rgba(244, 63, 94, 0.12));
box-shadow: 0 0 0 6px rgba(244, 63, 94, 0.08), 0 12px 30px rgba(244, 63, 94, 0.25);
animation: ofLoanLockPulse 2.4s ease-in-out infinite;
}
.of-loanlock-icon svg { width: 30px; height: 30px; }
.of-loanlock-kicker {
margin: 0 0 0.35rem;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fb7185;
}
.of-loanlock-card h2 {
margin: 0 0 0.6rem;
font-size: clamp(1.35rem, 5vw, 1.6rem);
font-weight: 800;
color: #fff;
}
.of-loanlock-lead {
margin: 0 auto 1.2rem;
max-width: 34ch;
font-size: 0.9rem;
line-height: 1.5;
color: #94a3b8;
}
.of-loanlock-amount {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 1rem;
margin-bottom: 0.75rem;
border-radius: 16px;
background: rgba(244, 63, 94, 0.08);
border: 1px solid rgba(244, 63, 94, 0.2);
}
.of-loanlock-amount > span { font-size: 0.82rem; color: #fda4af; font-weight: 700; }
.of-loanlock-amount strong { font-size: 1.45rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.of-loanlock-amount small { font-size: 0.75rem; color: #94a3b8; font-weight: 700; }
.of-loanlock-sponsor {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
margin-bottom: 1.1rem;
border-radius: 16px;
text-align: left;
background: rgba(148, 163, 184, 0.07);
border: 1px solid rgba(148, 163, 184, 0.14);
}
.of-loanlock-sponsor[hidden] { display: none !important; }
.of-loanlock-avatar {
flex-shrink: 0;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 12px;
font-weight: 800;
color: #041018;
background: linear-gradient(135deg, #7dd3fc, #38bdf8);
}
.of-loanlock-who { min-width: 0; flex: 1; display: grid; gap: 0.1rem; }
.of-loanlock-who small { font-size: 0.72rem; color: #94a3b8; }
.of-loanlock-who strong {
font-size: 0.92rem;
color: #f1f5f9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.of-loanlock-wa {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 38px;
padding: 0 0.8rem;
border-radius: 11px;
font-size: 0.8rem;
font-weight: 800;
text-decoration: none;
color: #052e16;
background: linear-gradient(135deg, #4ade80, #22c55e);
box-shadow: 0 8px 20px rgba(34, 197, 94, 0.28);
transition: transform 0.2s ease, filter 0.2s ease;
}
.of-loanlock-wa[hidden] { display: none !important; }
.of-loanlock-wa svg { width: 16px; height: 16px; }
.of-loanlock-wa:hover { transform: translateY(-1px); filter: brightness(1.06); }
.of-loanlock-actions { display: grid; gap: 0.5rem; }
.of-loanlock-actions .of-pos-cta { width: 100%; }
.of-loanlock-later {
min-height: 42px;
border: 0;
border-radius: 12px;
font: inherit;
font-size: 0.85rem;
font-weight: 700;
color: #94a3b8;
background: transparent;
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease;
}
.of-loanlock-later:hover { color: #e2e8f0; background: rgba(148, 163, 184, 0.08); }
@keyframes ofLoanLockFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ofLoanLockIn {
from { opacity: 0; transform: translateY(18px) scale(0.96); }
to { opacity: 1; transform: none; }
}
@keyframes ofLoanLockPulse {
0%, 100% { box-shadow: 0 0 0 6px rgba(244, 63, 94, 0.08), 0 12px 30px rgba(244, 63, 94, 0.25); }
50% { box-shadow: 0 0 0 12px rgba(244, 63, 94, 0.03), 0 12px 34px rgba(244, 63, 94, 0.35); }
}
@media (max-width: 420px) {
.of-loanlock { place-items: end center; padding: 0; }
.of-loanlock-card {
width: 100%;
border-radius: 24px 24px 0 0;
padding: 1.6rem 1.15rem calc(1.2rem + env(safe-area-inset-bottom));
animation-name: ofLoanLockUp;
}
.of-loanlock-sponsor { flex-wrap: wrap; }
.of-loanlock-wa { width: 100%; justify-content: center; }
}
@keyframes ofLoanLockUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.of-loanlock-veil, .of-loanlock-card, .of-loanlock-icon { animation: none !important; }
}
/* Préstamo vencido · versión premium */
.of-loanlock { z-index: 9600; }
.of-loanlock-card {
width: min(100%, 440px);
max-height: calc(100dvh - 2rem);
overflow-y: auto;
overscroll-behavior: contain;
padding: 1.6rem 1.4rem 1.3rem;
text-align: left;
isolation: isolate;
background:
radial-gradient(120% 70% at 100% 0%, rgba(244, 63, 94, 0.16), transparent 60%),
radial-gradient(90% 60% at 0% 100%, rgba(16, 185, 129, 0.08), transparent 65%),
linear-gradient(165deg, rgba(28, 14, 26, 0.97), rgba(8, 12, 26, 0.98));
border: 1px solid rgba(251, 113, 133, 0.3);
box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 0 60px -20px rgba(244, 63, 94, 0.45);
scrollbar-width: none;
}
.of-loanlock-card::-webkit-scrollbar { display: none; }
.of-loanlock-glow {
position: absolute;
inset: -1px;
z-index: -1;
border-radius: inherit;
padding: 1px;
background: conic-gradient(from var(--ll-a, 0deg), transparent 0 70%, rgba(251, 113, 133, 0.9) 82%, rgba(253, 164, 175, 0.4) 90%, transparent 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: ofLlSpin 5s linear infinite;
pointer-events: none;
}
@property --ll-a { syntax: ""; initial-value: 0deg; inherits: false; }
@keyframes ofLlSpin { to { --ll-a: 360deg; } }
.of-loanlock-grip { display: none; }
.of-loanlock-top { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; }
.of-loanlock-top .of-loanlock-icon { position: relative; flex: 0 0 auto; width: 56px; height: 56px; margin: 0; border-radius: 18px; }
.of-loanlock-ring {
position: absolute;
inset: -6px;
border-radius: 22px;
border: 1px solid rgba(251, 113, 133, 0.45);
animation: ofLlRing 2.2s ease-out infinite;
}
@keyframes ofLlRing {
from { opacity: 0.9; transform: scale(0.92); }
to { opacity: 0; transform: scale(1.25); }
}
.of-loanlock-heading { min-width: 0; }
.of-loanlock-heading h2 { margin: 0; font-size: clamp(1.25rem, 5vw, 1.5rem); font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.of-loanlock-kicker { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0.25rem; }
.of-loanlock-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #fb7185; box-shadow: 0 0 0 0 rgba(251, 113, 133, 0.7); animation: ofLlDot 1.6s ease-out infinite; }
@keyframes ofLlDot {
0% { box-shadow: 0 0 0 0 rgba(251, 113, 133, 0.7); }
100% { box-shadow: 0 0 0 9px rgba(251, 113, 133, 0); }
}
.of-loanlock-hero {
position: relative;
padding: 1.1rem 1.15rem 1rem;
margin-bottom: 0.7rem;
border-radius: 18px;
overflow: hidden;
background: linear-gradient(140deg, rgba(244, 63, 94, 0.16), rgba(244, 63, 94, 0.04));
border: 1px solid rgba(251, 113, 133, 0.26);
}
.of-loanlock-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.07) 50%, transparent 70%);
transform: translateX(-100%);
animation: ofLlSweep 3.8s ease-in-out infinite;
pointer-events: none;
}
@keyframes ofLlSweep { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.of-loanlock-hero > span { display: block; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fda4af; }
.of-loanlock-hero strong { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.15rem; }
.of-loanlock-hero em { font-style: normal; font-size: clamp(2.1rem, 10vw, 2.7rem); font-weight: 800; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; text-shadow: 0 0 28px rgba(251, 113, 133, 0.35); }
.of-loanlock-hero small { font-size: 0.85rem; font-weight: 800; color: #fda4af; }
.of-loanlock-hero p { margin: 0.35rem 0 0; font-size: 0.8rem; color: #94a3b8; }
.of-loanlock-hero p:empty { display: none; }
.of-loanlock-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin-bottom: 0.8rem; }
.of-loanlock-stats > div {
display: grid;
gap: 0.15rem;
padding: 0.7rem 0.85rem;
border-radius: 14px;
background: rgba(148, 163, 184, 0.06);
border: 1px solid rgba(148, 163, 184, 0.14);
}
.of-loanlock-stats small { font-size: 0.7rem; font-weight: 700; color: #94a3b8; }
.of-loanlock-stats b { font-size: 1rem; font-weight: 800; color: #f1f5f9; font-variant-numeric: tabular-nums; }
.of-loanlock-stats em { font-style: normal; }
.of-loanlock-blocked { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.85rem; padding: 0; list-style: none; }
.of-loanlock-blocked li {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.38rem 0.65rem;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 700;
color: #fecdd3;
background: rgba(244, 63, 94, 0.1);
border: 1px solid rgba(251, 113, 133, 0.22);
}
.of-loanlock-blocked svg { width: 13px; height: 13px; flex: 0 0 auto; }
.of-loanlock-card .of-loanlock-lead { max-width: none; margin: 0 0 1rem; font-size: 0.84rem; text-align: left; }
.of-loanlock-sponsor { margin-bottom: 0.9rem; }
.of-loanlock-pay {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 52px;
font-size: 0.98rem;
}
.of-loanlock-pay svg { width: 20px; height: 20px; }
.of-loanlock-pay-shine {
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
transform: translateX(-120%);
animation: ofLlSweep 2.8s ease-in-out infinite;
pointer-events: none;
}
.of-loanlock-later { display: grid; gap: 0.05rem; padding: 0.45rem; text-align: center; }
.of-loanlock-later small { font-size: 0.7rem; font-weight: 600; color: #64748b; }
.of-loanlock.is-in .of-loanlock-hero em { animation: ofLlPop 0.6s 0.15s cubic-bezier(0.2, 0.9, 0.25, 1.2) both; }
@keyframes ofLlPop { from { opacity: 0; transform: translateY(8px) scale(0.94); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
.of-loanlock { place-items: end center; padding: 0; }
.of-loanlock-card {
width: 100%;
max-height: 94dvh;
border-radius: 26px 26px 0 0;
padding: 0.8rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
animation-name: ofLoanLockUp;
}
.of-loanlock-grip { display: block; width: 42px; height: 4px; margin: 0 auto 0.9rem; border-radius: 99px; background: rgba(148, 163, 184, 0.35); }
.of-loanlock-top .of-loanlock-icon { width: 48px; height: 48px; border-radius: 15px; }
.of-loanlock-sponsor { flex-wrap: wrap; }
.of-loanlock-wa { width: 100%; justify-content: center; }
}
@media (max-height: 640px) {
.of-loanlock-card .of-loanlock-lead { display: none; }
}
html[data-of-theme="light"] .of-loanlock-veil { background: radial-gradient(60% 50% at 50% 30%, rgba(244, 63, 94, 0.16), transparent 70%), rgba(15, 23, 42, 0.55); }
html[data-of-theme="light"] .of-loanlock-card {
color: #334155;
background:
radial-gradient(120% 70% at 100% 0%, rgba(244, 63, 94, 0.1), transparent 60%),
linear-gradient(165deg, #ffffff, #fff5f6);
border-color: rgba(244, 63, 94, 0.28);
box-shadow: 0 30px 70px rgba(15, 23, 42, 0.25);
}
html[data-of-theme="light"] .of-loanlock-heading h2,
html[data-of-theme="light"] .of-loanlock-hero em { color: #0f172a; text-shadow: none; }
html[data-of-theme="light"] .of-loanlock-hero { background: linear-gradient(140deg, #ffe4e6, #fff1f2); border-color: #fecdd3; }
html[data-of-theme="light"] .of-loanlock-hero > span,
html[data-of-theme="light"] .of-loanlock-hero small { color: #be123c; }
html[data-of-theme="light"] .of-loanlock-stats > div { background: #f8fafc; border-color: #e2e8f0; }
html[data-of-theme="light"] .of-loanlock-stats b { color: #0f172a; }
html[data-of-theme="light"] .of-loanlock-blocked li { color: #be123c; background: #fff1f2; border-color: #fecdd3; }
html[data-of-theme="light"] .of-loanlock-who strong { color: #0f172a; }
html[data-of-theme="light"] .of-loanlock-sponsor { background: #f8fafc; border-color: #e2e8f0; }
@media (prefers-reduced-motion: reduce) {
.of-loanlock-glow, .of-loanlock-ring, .of-loanlock-kicker i, .of-loanlock-hero::after, .of-loanlock-pay-shine, .of-loanlock.is-in .of-loanlock-hero em { animation: none !important; }
}
/* Menú de usuario: deuda vencida */
.of-drop-debt {
display: flex;
align-items: center;
gap: 0.7rem;
appearance: none;
width: calc(100% - 1.5rem);
margin: 0 0.75rem 0.55rem;
padding: 0.65rem 0.7rem;
border: 1px solid rgba(251, 113, 133, 0.35);
border-radius: 14px;
font: inherit;
text-align: left;
color: #fecdd3;
background: linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(244, 63, 94, 0.06));
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.of-drop-debt[hidden] { display: none !important; }
.of-drop-debt:hover { transform: translateY(-1px); border-color: rgba(251, 113, 133, 0.6); }
.of-drop-debt-ico { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fda4af; background: rgba(244, 63, 94, 0.18); }
.of-drop-debt-ico svg { width: 18px; height: 18px; }
.of-drop-debt-copy { flex: 1; min-width: 0; display: grid; gap: 0.05rem; }
.of-drop-debt-copy strong { font-size: 0.86rem; font-weight: 800; color: #fff; }
.of-drop-debt-copy small { font-size: 0.75rem; font-weight: 700; color: #fda4af; }
.of-drop-debt-copy em { font-style: normal; font-variant-numeric: tabular-nums; }
.of-drop-debt-go { flex: 0 0 auto; padding: 0.32rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 6px 16px rgba(225, 29, 72, 0.35); }
html[data-of-theme="light"] .of-drop-debt { color: #9f1239; background: linear-gradient(135deg, #ffe4e6, #fff1f2); border-color: #fecdd3; }
html[data-of-theme="light"] .of-drop-debt-copy strong { color: #881337; }
html[data-of-theme="light"] .of-drop-debt-copy small { color: #be123c; }
.of-user-chip.is-debt { position: relative; }
.of-user-chip.is-debt::after {
content: "";
position: absolute;
top: 2px;
right: 2px;
width: 9px;
height: 9px;
border-radius: 50%;
background: #f43f5e;
border: 2px solid #0b1120;
animation: ofLlDot 1.6s ease-out infinite;
}
html[data-of-theme="light"] .of-user-chip.is-debt::after { border-color: #fff; }
/* ── Rangos ── */
.of-nav-rangos .of-nav-ico,
.of-dock-rangos .of-dock-ico { color: #fcd34d; }
html[data-of-theme="light"] .of-nav-rangos .of-nav-ico,
html[data-of-theme="light"] .of-dock-rangos .of-dock-ico { color: #b45309; }
.of-rank-badge.is-static { position: relative; right: auto; bottom: auto; top: auto; display: inline-block; flex: 0 0 auto; }
.of-rank-badge.is-md { width: 46px; height: 46px; }
.of-rank-badge.is-md .of-rank-spark { width: 5px; height: 5px; }
.of-rk-mod { align-items: center; }
.of-rk-mod .of-rank-badge { margin: 4px; }
.of-rk-level { font-size: 0.66rem !important; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.of-nav-new.is-soon {
color: #1a1206;
background: linear-gradient(110deg, #fef3c7 0%, #facc15 30%, #fff7d1 50%, #facc15 70%, #ca8a04 100%);
background-size: 250% 100%;
box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.55), 0 6px 16px -6px rgba(234, 179, 8, 0.85), 0 0 18px -4px rgba(250, 204, 21, 0.5);
text-transform: uppercase;
}
.of-nav-new.is-soon i { background: #1a1206; }
/* Rangos · muy pronto (misma escena que Academia, en dorado) */
.of-acad-stage.is-ranks {
background:
radial-gradient(120% 90% at 50% -10%, rgba(250, 204, 21, 0.16), transparent 60%),
linear-gradient(160deg, #0f0d06 0%, #17130a 45%, #070604 100%);
border-color: rgba(250, 204, 21, 0.2);
}
.is-ranks .of-acad-grid {
background-image:
linear-gradient(rgba(250, 204, 21, 0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(250, 204, 21, 0.07) 1px, transparent 1px);
}
.is-ranks .of-acad-aurora.is-a { background: #ca8a04; opacity: 0.2; }
.is-ranks .of-acad-aurora.is-b { background: #e879f9; opacity: 0.22; }
.is-ranks .of-acad-aurora.is-c { background: #38bdf8; opacity: 0.16; }
.is-ranks .of-acad-scan { background: linear-gradient(180deg, transparent, rgba(250, 204, 21, 0.08) 70%, rgba(253, 230, 138, 0.25) 99%, transparent); }
.is-ranks .of-acad-dust i { background: #fde68a; box-shadow: 0 0 8px 2px rgba(250, 204, 21, 0.6); }
.is-ranks .of-acad-dust i:nth-child(3n) { background: #f5d0fe; box-shadow: 0 0 8px 2px rgba(232, 121, 249, 0.55); }
.is-ranks .of-acad-ring { border-color: rgba(250, 204, 21, 0.24); }
.is-ranks .of-acad-ring.is-2 { border-color: rgba(253, 230, 138, 0.32); }
.is-ranks .of-acad-ring.is-3 { border-color: rgba(232, 121, 249, 0.18); }
.is-ranks .of-acad-ring i { background: radial-gradient(circle, #fffbeb, #facc15 60%); box-shadow: 0 0 14px 4px rgba(250, 204, 21, 0.7); }
.is-ranks .of-acad-ring.is-2 i:nth-child(2) { background: radial-gradient(circle, #fdf4ff, #e879f9 60%); box-shadow: 0 0 14px 4px rgba(232, 121, 249, 0.6); }
.is-ranks .of-acad-ring.is-3 i { background: radial-gradient(circle, #ecfeff, #22d3ee 60%); box-shadow: 0 0 16px 5px rgba(34, 211, 238, 0.55); }
.is-ranks .of-acad-pulse { border-color: rgba(250, 204, 21, 0.5); }
.is-ranks .of-acad-core {
background:
radial-gradient(circle at 35% 25%, rgba(253, 230, 138, 0.35), transparent 55%),
linear-gradient(160deg, #2a2108, #0f0d06);
border-color: rgba(253, 230, 138, 0.5);
box-shadow: 0 0 0 8px rgba(250, 204, 21, 0.06), 0 0 50px -6px rgba(250, 204, 21, 0.75), inset 0 0 30px rgba(250, 204, 21, 0.25);
}
.is-ranks .of-rk-trophy { filter: drop-shadow(0 6px 14px rgba(250, 204, 21, 0.55)); }
.is-ranks .of-acad-spark.is-2 { background: #f5d0fe; }
.is-ranks .of-acad-tag { color: #fde68a; background: rgba(250, 204, 21, 0.1); border-color: rgba(250, 204, 21, 0.32); }
.is-ranks .of-acad-tag-dot { background: #e879f9; }
.is-ranks .of-acad-title-main { background-image: linear-gradient(100deg, #fffbeb 0%, #facc15 35%, #f5d0fe 50%, #facc15 65%, #fffbeb 100%); }
.is-ranks .of-acad-progress-top { color: #fde68a; }
.is-ranks .of-acad-bar { border-color: rgba(250, 204, 21, 0.22); }
.is-ranks .of-acad-bar-fill {
background:
repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 0 8px, transparent 8px 16px),
linear-gradient(90deg, #cd7f32, #eab308 35%, #38bdf8 65%, #e879f9);
background-size: 22px 22px, 100% 100%;
box-shadow: 0 0 18px rgba(250, 204, 21, 0.6);
}
.is-ranks .of-acad-mod { background: linear-gradient(155deg, rgba(40, 32, 12, 0.85), rgba(12, 10, 5, 0.9)); }
.is-ranks .of-acad-mod::before { background-image: linear-gradient(115deg, transparent 30%, rgba(253, 230, 138, 0.12) 50%, transparent 70%); }
.is-ranks .of-acad-mod:hover { border-color: rgba(250, 204, 21, 0.45); box-shadow: 0 18px 40px -20px rgba(250, 204, 21, 0.55); }
.is-ranks .of-acad-skel i { background-image: linear-gradient(90deg, rgba(148, 163, 184, 0.12), rgba(253, 230, 138, 0.35), rgba(148, 163, 184, 0.12)); }
.is-ranks .of-acad-tape { background: repeating-linear-gradient(-45deg, #facc15 0 18px, #0f0d06 18px 36px); }
.is-ranks .of-acad-tape::before { background: #0f0d06; }
.is-ranks .of-acad-tape-track b { color: #e879f9; }
html[data-of-theme="light"] .of-acad-stage.is-ranks { background: radial-gradient(120% 90% at 50% -10%, rgba(250, 204, 21, 0.18), transparent 60%), linear-gradient(160deg, #fffdf5, #fef9e7); border-color: #fde68a; }
html[data-of-theme="light"] .is-ranks .of-acad-title-main { background-image: linear-gradient(100deg, #a16207 0%, #ca8a04 35%, #a21caf 50%, #ca8a04 65%, #a16207 100%); }
html[data-of-theme="light"] .is-ranks .of-acad-tag { color: #92400e; background: rgba(250, 204, 21, 0.14); }
html[data-of-theme="light"] .is-ranks .of-acad-progress-top { color: #a16207; }
html[data-of-theme="light"] .is-ranks .of-acad-mod { background: #fff; }
html[data-of-theme="light"] .is-ranks .of-acad-core { background: radial-gradient(circle at 35% 25%, rgba(253, 230, 138, 0.5), transparent 55%), linear-gradient(160deg, #3a2e0b, #1a1406); }
/* ===== Earn hero: contador GEG + meta + decimales ===== */
.of-earn-hero {
position: relative;
display: grid;
gap: 0.7rem;
margin: 0 0 1.1rem;
padding: 0.85rem;
border-radius: 26px;
border: 1px solid rgba(148, 163, 184, 0.16);
background:
radial-gradient(120% 80% at 0% 0%, rgba(52, 211, 153, 0.14), transparent 50%),
radial-gradient(90% 70% at 100% 0%, rgba(56, 189, 248, 0.12), transparent 45%),
linear-gradient(160deg, rgba(8, 18, 32, 0.96), rgba(3, 8, 18, 0.98));
box-shadow: 0 22px 50px -30px rgba(0, 0, 0, 0.85);
overflow: hidden;
isolation: isolate;
}
.of-earn-hero[hidden] { display: none !important; }
.of-earn-hero-aura {
position: absolute;
inset: -40% -20% auto;
height: 80%;
background: radial-gradient(ellipse at 50% 0%, rgba(110, 231, 183, 0.18), transparent 65%);
pointer-events: none;
z-index: 0;
}
.of-earn-hero > *:not(.of-earn-hero-aura) { position: relative; z-index: 1; }
.of-earn-tier {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.75rem 0.9rem;
padding: 0.9rem 1rem;
border-radius: 20px;
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(8px);
}
.of-earn-tier-ico {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 14px;
color: #022c22;
background: linear-gradient(145deg, #6ee7b7, #34d399);
box-shadow: 0 12px 24px -14px rgba(16, 185, 129, 0.95);
}
.of-earn-tier-ico svg { width: 22px; height: 22px; }
.of-earn-tier.is-goal .of-earn-tier-ico {
background: linear-gradient(145deg, #7dd3fc, #38bdf8 55%, #a78bfa);
color: #082f49;
box-shadow: 0 12px 24px -14px rgba(56, 189, 248, 0.95);
}
.of-earn-tier-ico.is-gold,
.of-earn-tier.is-micro .of-earn-tier-ico {
background: linear-gradient(145deg, #fff7c2, #f2c86b, #b98a2e);
color: #1a1206;
box-shadow: 0 12px 24px -14px rgba(242, 200, 107, 0.95);
}
.of-earn-tier-copy { min-width: 0; }
.of-earn-tier-kicker {
margin: 0 0 0.2rem;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(167, 243, 208, 0.85);
}
.of-earn-tier.is-goal .of-earn-tier-kicker { color: rgba(186, 230, 253, 0.9); }
.of-earn-tier.is-micro .of-earn-tier-kicker { color: rgba(253, 230, 138, 0.92); }
.of-earn-tier-value {
margin: 0;
font-size: 1.35rem;
font-weight: 900;
letter-spacing: -0.03em;
color: #f8fafc;
line-height: 1.15;
}
.of-earn-tier-value span,
.of-earn-tier-value .of-cpx-amount-of {
font-size: 0.85rem;
font-weight: 700;
color: rgba(203, 213, 225, 0.75);
}
.of-earn-tier-value.is-micro-val {
font-variant-numeric: tabular-nums;
color: #fde68a;
text-shadow: 0 0 24px rgba(251, 191, 36, 0.35);
}
.of-earn-tier-value.is-micro-val small {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.06em;
color: rgba(253, 230, 138, 0.7);
}
.of-earn-tier-sub {
margin: 0.35rem 0 0;
font-size: 0.78rem;
line-height: 1.35;
color: rgba(148, 163, 184, 0.92);
}
.of-earn-tier-chip,
.of-earn-tier .of-cpx-badge {
justify-self: end;
align-self: start;
display: inline-flex;
align-items: center;
gap: 0.3rem;
min-height: 2rem;
padding: 0.35rem 0.7rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 850;
color: #a7f3d0;
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(52, 211, 153, 0.3);
}
.of-earn-tier.is-goal .of-earn-tier-chip,
.of-earn-tier.is-goal .of-cpx-badge {
color: #bae6fd;
background: rgba(56, 189, 248, 0.12);
border-color: rgba(125, 211, 252, 0.35);
}
.of-earn-bar,
.of-earn-tier .of-cpx-bar {
margin-top: 0.55rem;
height: 8px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.14);
overflow: hidden;
}
.of-earn-bar-fill,
.of-earn-tier .of-cpx-bar-fill {
display: block;
height: 100%;
width: 0;
border-radius: inherit;
background: linear-gradient(90deg, #34d399, #6ee7b7 55%, #fde68a);
transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
}
.of-earn-bar.is-micro .of-earn-bar-fill {
background: linear-gradient(90deg, #b98a2e, #f2c86b 45%, #fff2c4);
}
.of-earn-tier.is-native.is-done {
border-color: rgba(52, 211, 153, 0.35);
box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.12);
}
.of-earn-tier.is-goal.is-reached {
border-color: rgba(52, 211, 153, 0.48);
background:
radial-gradient(120% 140% at 100% 0%, rgba(52, 211, 153, 0.16), transparent 55%),
radial-gradient(90% 100% at 0% 100%, rgba(56, 189, 248, 0.1), transparent 50%),
rgba(255, 255, 255, 0.04);
}
.of-earn-tier.is-goal.is-reached .of-earn-tier-ico {
background: linear-gradient(145deg, #6ee7b7, #34d399 55%, #22d3ee);
box-shadow: 0 12px 28px -12px rgba(52, 211, 153, 0.95);
animation: ofEarnIcoGlow 2.8s ease-in-out infinite;
}
.of-earn-tier.is-goal.is-reached .of-cpx-bar-fill,
.of-earn-tier.is-goal.is-reached .of-earn-bar-fill {
background: linear-gradient(90deg, #22d3ee, #34d399 40%, #fde68a 78%, #fff7c2);
box-shadow: 0 0 18px rgba(52, 211, 153, 0.45);
}
.of-earn-tier.is-goal.is-reached .of-cpx-badge,
.of-earn-tier.is-goal .of-cpx-badge.is-done {
color: #052e1c;
background: linear-gradient(120deg, #bbf7d0, #6ee7b7 55%, #34d399);
border-color: rgba(167, 243, 208, 0.85);
box-shadow: 0 10px 22px -12px rgba(52, 211, 153, 0.9);
}
.of-earn-tier.is-goal.is-reached .of-cpx-badge i,
.of-earn-tier .of-cpx-badge.is-done i {
background: #064e3b;
box-shadow: 0 0 0 3px rgba(6, 78, 59, 0.18);
animation: none;
}
.of-earn-tier .of-cpx-badge.is-flip {
animation: ofEarnBadgeFlip 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-earn-tier.is-celebrate {
animation: ofEarnCelebrate 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-earn-tier.is-celebrate::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.28) 48%, transparent 72%);
animation: ofEarnShimmer 1.15s ease-out;
}
.of-earn-tier {
position: relative;
overflow: hidden;
transition: border-color 0.45s ease, background 0.45s ease, box-shadow 0.45s ease, transform 0.35s ease;
}
.of-earn-tier-value .of-money-num,
.of-earn-tier-value.is-micro-val .of-money-num {
display: inline-block;
font-variant-numeric: tabular-nums;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease, text-shadow 0.35s ease;
}
.of-earn-tier-value.is-ticking .of-money-num,
.of-earn-tier-value.is-tick-up .of-money-num {
transform: translateY(-1px) scale(1.03);
color: #ecfdf5;
text-shadow: 0 0 22px rgba(110, 231, 183, 0.45);
}
.of-earn-tier-value.is-micro-val.is-tick-up .of-money-num,
.of-earn-tier-value.is-micro-val.is-ticking .of-money-num {
color: #fff7c2;
text-shadow: 0 0 24px rgba(251, 191, 36, 0.55);
}
.of-earn-tier.is-micro.is-ready {
border-color: rgba(251, 191, 36, 0.45);
background:
radial-gradient(90% 120% at 100% 0%, rgba(251, 191, 36, 0.16), transparent 55%),
rgba(255, 255, 255, 0.04);
animation: ofMicroPulse 2.4s ease-in-out infinite;
}
@keyframes ofMicroPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
50% { box-shadow: 0 0 28px -8px rgba(251, 191, 36, 0.45); }
}
@keyframes ofEarnCelebrate {
0% { transform: scale(1); }
35% { transform: scale(1.018); }
100% { transform: scale(1); }
}
@keyframes ofEarnShimmer {
from { transform: translateX(-70%); opacity: 0.15; }
40% { opacity: 0.85; }
to { transform: translateX(70%); opacity: 0; }
}
@keyframes ofEarnBadgeFlip {
0% { transform: scale(0.86) rotateX(55deg); opacity: 0.35; }
55% { transform: scale(1.08) rotateX(0deg); opacity: 1; }
100% { transform: scale(1) rotateX(0deg); }
}
@keyframes ofEarnIcoGlow {
0%, 100% { filter: brightness(1); transform: scale(1); }
50% { filter: brightness(1.08); transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
.of-earn-tier.is-celebrate,
.of-earn-tier.is-celebrate::after,
.of-earn-tier .of-cpx-badge.is-flip,
.of-earn-tier.is-goal.is-reached .of-earn-tier-ico,
.of-earn-tier.is-micro.is-ready {
animation: none !important;
}
}
.of-earn-claim {
position: relative;
justify-self: end;
align-self: center;
overflow: hidden;
min-height: 2.6rem;
padding: 0.55rem 1rem;
border: 0;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 850;
letter-spacing: 0.01em;
color: rgba(148, 163, 184, 0.85);
background: rgba(148, 163, 184, 0.12);
cursor: not-allowed;
transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.of-earn-claim.is-ready:not(:disabled) {
color: #1a1206;
cursor: pointer;
background: linear-gradient(120deg, #fff7c2, #f2c86b 40%, #34d399);
box-shadow: 0 14px 30px -14px rgba(242, 200, 107, 0.95);
}
.of-earn-claim.is-ready:not(:disabled):hover {
transform: translateY(-2px) scale(1.02);
}
.of-earn-claim-shine {
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
transform: translateX(-120%);
pointer-events: none;
}
.of-earn-claim.is-ready:not(:disabled) .of-earn-claim-shine {
animation: ofClaimShine 2.8s ease-in-out infinite;
}
@keyframes ofClaimShine {
0%, 40% { transform: translateX(-120%); }
70%, 100% { transform: translateX(120%); }
}
.of-earn-hero-note {
margin: 0.15rem 0.35rem 0.15rem;
font-size: 0.78rem;
line-height: 1.45;
color: rgba(148, 163, 184, 0.88);
}
.of-earn-wall-lead {
margin: -0.15rem 0.2rem 0.55rem;
font-size: 0.78rem;
line-height: 1.4;
color: rgba(148, 163, 184, 0.9);
}
.of-cpx-list.is-unified .of-cpx-list-head strong {
letter-spacing: -0.02em;
}
.of-tw-dock {
margin: 0.85rem 0 0.35rem;
border-radius: 1.35rem;
overflow: hidden;
border: 1px solid rgba(52, 211, 153, 0.28);
background:
radial-gradient(120% 90% at 0% 0%, rgba(52, 211, 153, 0.14), transparent 55%),
linear-gradient(165deg, rgba(8, 28, 42, 0.98), rgba(4, 14, 24, 0.99));
box-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.9);
animation: ofEarnCelebrate 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.of-tw-dock[hidden] { display: none !important; }
.of-tw-dock-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
padding: 0.85rem 1rem 0.7rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.of-tw-dock-head strong {
display: block;
margin-top: 0.15rem;
font-size: 1.05rem;
font-weight: 800;
color: #ecfdf5;
}
.of-tw-dock-actions {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
.of-tw-dock-body {
position: relative;
min-height: min(68vh, 640px);
background: #020617;
}
.of-tw-dock-frame {
display: block;
width: 100%;
height: min(68vh, 640px);
border: 0;
background: #020617;
}
.of-tw-dock-body .of-cpxm-loader {
position: absolute;
inset: 0;
z-index: 2;
}
html[data-of-theme="light"] .of-tw-dock {
background:
radial-gradient(120% 90% at 0% 0%, rgba(16, 185, 129, 0.12), transparent 55%),
linear-gradient(165deg, #ffffff, #f8fafc);
border-color: rgba(16, 185, 129, 0.28);
}
html[data-of-theme="light"] .of-tw-dock-head strong { color: #064e3b; }
html[data-of-theme="light"] .of-earn-wall-lead { color: #64748b; }
html[data-of-theme="light"] .task-card.is-skeleton {
background: linear-gradient(155deg, #ffffff, #f1f5f9);
border-color: rgba(148, 163, 184, 0.28);
}
html[data-of-theme="light"] .of-sk {
background: linear-gradient(
100deg,
rgba(148, 163, 184, 0.18) 20%,
rgba(226, 232, 240, 0.7) 40%,
rgba(148, 163, 184, 0.18) 60%
);
background-size: 220% 100%;
}
@media (max-width: 640px) {
.of-tw-dock-body,
.of-tw-dock-frame { min-height: 72vh; height: 72vh; }
}
@media (max-width: 640px) {
.of-earn-hero { padding: 0.7rem; border-radius: 22px; gap: 0.55rem; }
.of-earn-tier {
grid-template-columns: auto 1fr;
grid-template-areas:
"ico copy"
"ico chip"
"claim claim";
gap: 0.45rem 0.75rem;
padding: 0.85rem 0.9rem;
}
.of-earn-tier-ico { grid-area: ico; align-self: start; width: 40px; height: 40px; }
.of-earn-tier-copy { grid-area: copy; }
.of-earn-tier-chip,
.of-earn-tier .of-cpx-badge { grid-area: chip; justify-self: start; }
.of-earn-claim {
grid-area: claim;
width: 100%;
justify-self: stretch;
margin-top: 0.25rem;
}
.of-earn-tier:not(.is-micro) {
grid-template-areas:
"ico copy"
"ico chip";
}
.of-earn-tier-value { font-size: 1.2rem; }
}
html[data-of-theme="light"] .of-earn-hero {
background:
radial-gradient(120% 80% at 0% 0%, rgba(16, 185, 129, 0.1), transparent 50%),
linear-gradient(160deg, #ffffff, #f8fafc);
border-color: rgba(15, 23, 42, 0.08);
box-shadow: 0 18px 40px -28px rgba(15, 23, 42, 0.35);
}
html[data-of-theme="light"] .of-earn-tier {
background: #fff;
border-color: rgba(15, 23, 42, 0.08);
}
html[data-of-theme="light"] .of-earn-tier-value { color: #0f172a; }
html[data-of-theme="light"] .of-earn-tier-value.is-micro-val { color: #a16207; text-shadow: none; }
html[data-of-theme="light"] .of-earn-tier-sub { color: #64748b; }
html[data-of-theme="light"] .of-earn-hero-note { color: #64748b; }
/* ===== Earn hub: cartas premium CPX / TimeWall (nativas) ===== */
.of-tw.is-cards {
position: relative;
display: grid;
gap: 0.95rem;
padding: 0;
border: 0;
background: transparent;
overflow: visible;
}
.of-tw.is-cards .of-tw-aura { display: none; }
.of-tw-strip {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.1rem;
border-radius: 20px;
border: 1px solid rgba(52, 211, 153, 0.22);
background:
radial-gradient(90% 120% at 0% 0%, rgba(52, 211, 153, 0.18), transparent 55%),
radial-gradient(70% 100% at 100% 0%, rgba(251, 191, 36, 0.12), transparent 50%),
linear-gradient(145deg, rgba(8, 24, 36, 0.95), rgba(4, 12, 22, 0.98));
}
.of-tw-strip-copy { min-width: 0; }
.of-tw-strip .of-tw-kicker { margin: 0 0 0.25rem; }
.of-tw-strip h3 {
margin: 0;
font-size: 1.28rem;
font-weight: 900;
letter-spacing: -0.02em;
color: #f8fafc;
}
.of-tw-strip-lead {
margin: 0.35rem 0 0;
font-size: 0.84rem;
line-height: 1.45;
color: rgba(186, 230, 253, 0.78);
max-width: 28rem;
}
.of-tw-foot-hint {
margin: 0.15rem 0 0;
font-size: 0.78rem;
color: rgba(148, 163, 184, 0.85);
text-align: center;
}
.of-tw-cta.is-ghost-cta { display: none !important; }
.of-tw-grid { margin-top: 0.15rem; }
.task-card.is-earn {
--earn-accent: #34d399;
display: flex;
flex-direction: column;
gap: 0.45rem;
padding: 1.1rem 1.15rem 1.05rem;
border-radius: 22px;
border: 1px solid rgba(148, 163, 184, 0.18);
background:
linear-gradient(165deg, rgba(15, 32, 48, 0.92), rgba(5, 12, 24, 0.96));
box-shadow:
0 18px 40px -28px rgba(0, 0, 0, 0.85),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
isolation: isolate;
}
.task-card.is-earn .of-earn-mesh {
position: absolute;
inset: -20% -10% auto -10%;
height: 70%;
background:
radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--earn-accent) 28%, transparent), transparent 60%),
radial-gradient(ellipse at 90% 20%, rgba(251, 191, 36, 0.12), transparent 55%);
pointer-events: none;
z-index: 0;
opacity: 0.9;
}
.task-card.is-earn > *:not(.of-earn-mesh) { position: relative; z-index: 1; }
.task-card.is-earn:hover {
transform: translateY(-5px);
border-color: color-mix(in srgb, var(--earn-accent) 55%, rgba(148, 163, 184, 0.25));
box-shadow:
0 22px 48px -24px color-mix(in srgb, var(--earn-accent) 55%, transparent),
0 0 0 1px color-mix(in srgb, var(--earn-accent) 25%, transparent);
}
.task-card.is-earn .of-earn-brand {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-width: 0;
}
.task-card.is-earn .of-earn-ico {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 12px;
color: #022c22;
background: linear-gradient(145deg, #6ee7b7, #34d399 55%, #fde68a);
box-shadow: 0 10px 22px -12px rgba(16, 185, 129, 0.9);
}
.task-card.is-earn .of-earn-ico svg { width: 18px; height: 18px; }
.task-card.is-earn .of-earn-ico.is-sky { background: linear-gradient(145deg, #7dd3fc, #38bdf8); color: #082f49; }
.task-card.is-earn .of-earn-ico.is-amber { background: linear-gradient(145deg, #fde68a, #f59e0b); color: #451a03; }
.task-card.is-earn .of-earn-ico.is-violet { background: linear-gradient(145deg, #d8b4fe, #a78bfa); color: #2e1065; }
.task-card.is-earn .of-earn-ico.is-gold { background: linear-gradient(145deg, #fff7c2, #f2c86b, #b98a2e); color: #1a1206; }
.task-card.is-earn .of-earn-ico.is-emerald { background: linear-gradient(145deg, #6ee7b7, #10b981); color: #022c22; }
.task-card.is-earn .of-earn-badges {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0.1rem 0 0.15rem;
}
.task-card.is-earn .of-earn-body { flex: 1 1 auto; min-height: 4.2rem; }
.task-card.is-earn .of-earn-body h4 {
margin: 0 0 0.35rem;
font-size: 1.08rem;
font-weight: 850;
letter-spacing: -0.02em;
color: #f8fafc;
line-height: 1.25;
}
.task-card.is-earn .of-earn-body p {
margin: 0;
font-size: 0.86rem;
line-height: 1.45;
color: rgba(203, 213, 225, 0.82);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.task-card.is-earn .of-earn-pay {
display: inline-flex;
align-items: baseline;
gap: 0.2rem;
font-size: 1.12rem;
font-weight: 900;
letter-spacing: -0.02em;
color: #6ee7b7;
text-shadow: 0 0 24px rgba(52, 211, 153, 0.35);
}
.task-card.is-earn .of-earn-pay em { font-style: normal; opacity: 0.75; }
.task-card.is-earn .of-earn-pay small {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.06em;
color: rgba(167, 243, 208, 0.75);
}
.task-card.is-earn .of-earn-pay.is-soft {
font-size: 0.78rem;
font-weight: 700;
color: rgba(253, 230, 138, 0.9);
text-shadow: none;
}
.task-card.is-earn .task-foot {
margin-top: 0.35rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.task-card.is-earn .task-actions .task-btn.is-claim {
pointer-events: none;
min-height: 2.35rem;
padding: 0.45rem 0.95rem;
border-radius: 999px;
font-weight: 800;
letter-spacing: 0.01em;
color: #022c22;
background: linear-gradient(120deg, #6ee7b7, #34d399 40%, #fde68a);
box-shadow: 0 10px 24px -12px rgba(52, 211, 153, 0.95);
}
.task-card.is-cpx { --earn-accent: #38bdf8; }
.task-card.is-cpx.is-pick { --earn-accent: #fbbf24; }
.task-card.is-cpx.is-chance-high { --earn-accent: #34d399; }
.task-card.is-cpx.is-chance-low { --earn-accent: #94a3b8; opacity: 0.9; }
.task-card.is-tw { --earn-accent: #34d399; }
.task-card.is-tw.is-tone-sky { --earn-accent: #38bdf8; }
.task-card.is-tw.is-tone-amber { --earn-accent: #fbbf24; }
.task-card.is-tw.is-tone-violet { --earn-accent: #a78bfa; }
.task-card.is-tw.is-tone-gold { --earn-accent: #f2c86b; }
.task-card.is-tw.is-hero {
grid-column: 1 / -1;
background:
radial-gradient(90% 140% at 0% 0%, rgba(251, 191, 36, 0.2), transparent 55%),
linear-gradient(145deg, rgba(28, 22, 8, 0.95), rgba(8, 14, 24, 0.98));
border-color: rgba(251, 191, 36, 0.35);
}
.of-cpx-new.is-live {
color: #a7f3d0;
background: rgba(16, 185, 129, 0.14);
border: 1px solid rgba(52, 211, 153, 0.35);
}
.of-earn-sep {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0.35rem 0 0.1rem;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(167, 243, 208, 0.85);
}
.of-earn-sep::before,
.of-earn-sep::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.35), transparent);
}
.of-cpx-grid:has(.of-earn-sep) {
align-items: stretch;
}
@media (max-width: 720px) {
.of-tw-strip { flex-direction: column; align-items: stretch; }
.task-card.is-tw.is-hero { grid-column: auto; }
}
html[data-of-theme="light"] .of-tw-strip {
background:
radial-gradient(90% 120% at 0% 0%, rgba(16, 185, 129, 0.12), transparent 55%),
linear-gradient(145deg, #ffffff, #f0fdf8);
border-color: rgba(16, 185, 129, 0.25);
}
html[data-of-theme="light"] .of-tw-strip h3 { color: #0f172a; }
html[data-of-theme="light"] .of-tw-strip-lead { color: #475569; }
html[data-of-theme="light"] .task-card.is-earn {
background: linear-gradient(165deg, #ffffff, #f8fafc);
border-color: rgba(15, 23, 42, 0.08);
box-shadow: 0 14px 32px -22px rgba(15, 23, 42, 0.35);
}
html[data-of-theme="light"] .task-card.is-earn .of-earn-body h4 { color: #0f172a; }
html[data-of-theme="light"] .task-card.is-earn .of-earn-body p { color: #475569; }
html[data-of-theme="light"] .task-card.is-earn .of-earn-pay { color: #059669; text-shadow: none; }
html[data-of-theme="light"] .task-card.is-tw.is-hero {
background: linear-gradient(145deg, #fffbeb, #ffffff);
}