/*__MVPS_CSS__:59f7dc26c8ef05471434fd4b9b77f465*/ :root { --mvp-coin-img: url('data:image/png;base64,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'); --gray-0: #ffffff; --gray-50: #fafafa; --gray-100:#f4f4f5; --gray-150:#eeeeef; --gray-200:#e4e4e7; --gray-300:#d1d1d6; --gray-400:#a1a1aa; --gray-500:#71717a; --gray-600:#52525b; --gray-700:#3f3f46; --gray-800:#27272a; --gray-900:#18181b; --gray-950:#09090b; --accent: #d97706; --accent-hi: #f59e0b; --accent-lo: rgba(217,119,6,0.18); --accent-dim: rgba(217,119,6,0.10); --accent-ring:rgba(217,119,6,0.25); --like: #ff3040; --icono-accion: 21px; --icono-barra: 22px; --icono-trazo: 2; --avatar-inicial-neutra: linear-gradient(145deg, #3b3b43 0%, #1e1e23 100%); --green: #16a34a; --green-dim: rgba(22,163,74,0.10); --red: #dc2626; --red-dim: rgba(220,38,38,0.10); --blue: #2563eb; --blue-dim: rgba(37,99,235,0.10); --bg: #0c0c0e; --surface: #111114; --surface2: #18181c; --border: #27272a; --border-lo: #1f1f22; --tx-hi: #f4f4f5; --tx: #d4d4d8; --tx-2: #71717a; --tx-3: #52525b; --tx-inv: #09090b; --r-sm: 6px; --r: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --shadow-xs: 0 1px 2px rgba(0,0,0,.05); --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -1px rgba(0,0,0,.04); --shadow-md: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04); --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.08), 0 10px 10px -5px rgba(0,0,0,.03); --zona-arriba: max(var(--safe-area-inset-top, 0px), env(safe-area-inset-top, 0px)); --zona-abajo: max(var(--safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px)); } .cal-nav-btn { width: 32px; height: 32px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border); color: var(--tx-2); display: flex; align-items: center; justify-content: center; cursor: pointer; } .cal-nav-btn:active { transform: scale(0.92); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .cal-wd { text-align: center; font-size: 10px; font-weight: 600; color: var(--tx-3); text-transform: uppercase; padding-bottom: 4px; } .cal-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 12px; font-weight: 600; color: var(--tx-2); background: var(--surface2); border: 1px solid transparent; } .cal-empty { background: transparent; } .cal-done { background: linear-gradient(160deg, #FF8E00, #F15A00); color: #fff; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }@media (hover: hover) {.cal-done:hover { transform: scale(1.1); box-shadow: 0 4px 14px rgba(241,90,0,0.4); } } .cal-done:active { transform: scale(0.95); } .day-diary-overlay { align-items: flex-end; justify-content: center; padding: 0; background: rgba(0,0,0,0.6); } .day-diary-sheet { width: 100%; max-width: 520px; height: 88svh; border-radius: 22px 22px 0 0; display: flex; flex-direction: column; overflow: hidden; animation: sheetUp 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both; } .day-diary-header { display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .day-diary-posts { flex: 1; overflow-y: auto; padding: 4px 0 88px; -webkit-overflow-scrolling: touch; } .diary-loading { display: flex; align-items: center; justify-content: center; padding: 56px 0; } .diary-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 20px; text-align: center; } .cal-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .rarity-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--tx-2); background: var(--surface2); } .clan-room { position:fixed; inset:0; z-index:100; background:var(--bg,#0b0b0f); display:flex; flex-direction:column; } .clan-room.hidden { display:none; } .clan-disc-search { display:flex; align-items:center; gap:8px; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; } .clan-disc-search input { flex:1; background:none; border:none; outline:none; color:var(--tx-hi); font-size:14px; } .clan-disc-card { display:flex; align-items:center; gap:12px; background:var(--surface,#15151b); border:1px solid var(--border); border-radius:12px; padding:12px; margin-bottom:10px; } .clan-disc-photo { width:40px; height:40px; border-radius:11px; background:var(--surface2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; } .clan-disc-photo img { width:100%; height:100%; object-fit:cover; } .clan-disc-name { font-size:14px; font-weight:600; color:var(--tx-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .clan-disc-meta { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--tx-3); margin-top:2px; } .clan-disc-desc { font-size:11px; color:var(--tx-3); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .clan-disc-join { background:var(--accent); color:#fff; border:none; border-radius:9px; padding:7px 14px; font-size:12px; font-weight:600; cursor:pointer; flex-shrink:0; } .clan-disc-join:disabled { background:var(--surface2); color:var(--tx-3); cursor:not-allowed; } .clan-disc-empty { text-align:center; padding:24px; color:var(--tx-3); font-size:13px; } .cg-privacy-toggle { display:flex; gap:8px; } .cg-priv-seg { flex:1; padding:9px; border-radius:10px; background:var(--surface2); border:1px solid var(--border); color:var(--tx-2); font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; } .cg-priv-seg.active { background:var(--accent); color:#fff; border-color:var(--accent); } .clan-kick-btn { background:none; border:none; color:#ef4444; cursor:pointer; padding:4px; display:flex; align-items:center; flex-shrink:0; } .prof-level-badge { background:var(--accent-dim,#23202e); color:var(--accent); border:1px solid var(--accent-ring,rgba(124,92,255,.3)); border-radius:999px; padding:1px 9px; font-size:11px; font-weight:700; letter-spacing:.02em; flex-shrink:0; } .focus-overlay { position: fixed; inset: 0; z-index: 4000; background: radial-gradient(circle at 50% 28%, #2a1a4a 0%, #140e26 62%, #0c0818 100%); display: flex; align-items: center; justify-content: center; } .focus-overlay.hidden { display: none !important; } .focus-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.12); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; } .focus-close:active { transform: scale(0.92); } .focus-inner { text-align: center; padding: 26px 24px; max-width: 360px; width: 100%; } .focus-label { font-size: 13px; font-weight: 800; letter-spacing: 3px; color: #c4b5fd; } .focus-mascot-wrap { position: relative; width: 180px; height: 180px; margin: 20px auto 8px; display: flex; align-items: center; justify-content: center; } .focus-mascot img { display: block; } .focus-acc { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-size: 46px; line-height: 1; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); } .focus-time { font-size: 54px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 1px; line-height: 1; } .focus-coins-row { display: flex; align-items: center; justify-content: center; gap: 6px; color: #fde68a; font-weight: 700; font-size: 15px; margin-top: 10px; } .focus-rate { color: #9d86c9; font-weight: 500; font-size: 12px; } .focus-progress { height: 8px; background: rgba(255,255,255,0.12); border-radius: 6px; margin: 20px 0 6px; overflow: hidden; } .focus-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #a78bfa, #7c3aed); border-radius: 6px; transition: width .3s linear; } .focus-max-note { font-size: 11px; color: #7d6ba0; margin-bottom: 22px; line-height: 1.45; } .focus-stop-btn { width: 100%; padding: 15px; border-radius: 14px; background: #fff; color: #1a1030; border: none; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; } .focus-stop-btn:active { transform: scale(0.97); } .focus-coin-float { position: absolute; font-size: 22px; animation: focusCoinUp 1.1s ease-out forwards; pointer-events: none; z-index: 2; } @keyframes focusCoinUp { 0% { transform: translateY(10px) scale(0.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-80px) scale(1.1); opacity: 0; } } .wardrobe-btn { width: 38px; height: 38px; border-radius: 11px; background: var(--surface2); border: 1px solid var(--border); color: var(--tx-2); display: flex; align-items: center; justify-content: center; cursor: pointer; } .wardrobe-btn:active { transform: scale(0.92); } .modal-overlay { background: rgba(0,0,0,0.35); } .theme-toggle-switch { position: relative; width: 46px; height: 26px; border-radius: 13px; background: var(--surface2); border: 1px solid var(--border); cursor: pointer; transition: background .2s, border-color .2s; flex-shrink: 0; } .theme-toggle-switch.on { background: var(--accent); border-color: var(--accent); } .theme-toggle-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.6); transition: transform .2s, background .2s; } .theme-toggle-switch.on .theme-toggle-knob { transform: translateX(20px); background: #fff; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--tx); line-height: 1.5; } button, input, textarea, select { font-family: inherit; } body { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } input, textarea, select, [contenteditable="true"], [contenteditable=""] { -webkit-touch-callout: default; -webkit-user-select: text; -moz-user-select: text; user-select: text; } picture { display: contents; } .ud-1 { display: none; } .uno .ud-1 { display: inline; } .uno .ud-n { display: none; } * { scrollbar-width: none; } ::-webkit-scrollbar { display: none; } ::selection { background: var(--accent-lo); color: var(--tx-hi); } .glass { background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.04) 100% ); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.08) inset, 0 -1px 0 rgba(0,0,0,0.2) inset; } .glass-strong { background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.07) 100% ); backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.12) inset, 0 -1px 0 rgba(0,0,0,0.3) inset, 0 0 0 0.5px rgba(255,255,255,0.05); } .glass-card { background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.05) 100% ); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.07) inset; position: relative; overflow: hidden; } .glass-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%); pointer-events: none; border-radius: inherit; } .glass-bar { background: rgba(12,12,14,0.75); backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%); border-bottom: 1px solid rgba(255,255,255,0.07); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; } .glass-pill { background: rgba(255,255,255,0.07); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.08) inset; } .glass-modal { background: linear-gradient(160deg, rgba(20,20,26,0.88) 0%, rgba(14,14,18,0.94) 100% ); backdrop-filter: blur(48px) saturate(200%); -webkit-backdrop-filter: blur(48px) saturate(200%); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.10) inset, 0 0 0 0.5px rgba(255,255,255,0.04); } .glass-gold { background: linear-gradient(135deg, rgba(217,119,6,0.15) 0%, rgba(217,119,6,0.06) 50%, rgba(217,119,6,0.10) 100% ); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(217,119,6,0.22); box-shadow: 0 4px 20px rgba(217,119,6,0.12), 0 1px 0 rgba(255,215,0,0.12) inset; } @keyframes glassRipple { 0% { transform: scale(0); opacity: 0.4; } 100% { transform: scale(4); opacity: 0; } } .glass-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.15); width: 60px; height: 60px; margin-top: -30px; margin-left: -30px; animation: glassRipple 0.5s ease-out forwards; pointer-events: none; } .hidden { display: none !important; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } .t-xs { font-size: 11px; line-height: 1.4; } .t-sm { font-size: 12px; line-height: 1.5; } .t-base { font-size: 14px; line-height: 1.57; } .t-lg { font-size: 17px; line-height: 1.5; } .t-xl { font-size: 20px; line-height: 1.4; } .t-3xl { font-size: 30px; line-height: 1.25; } .fw-5 { font-weight: 500; } .fw-6 { font-weight: 600; } .fw-7 { font-weight: 700; } .fw-8 { font-weight: 800; } .tracking-tight { letter-spacing: -0.025em; } .tracking-wider { letter-spacing: 0.08em; } .container { max-width: 1080px; margin: 0 auto; padding: 0 32px; } .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .gap-4 { gap: 14px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; cursor: pointer; font-family: inherit; font-weight: 500; letter-spacing: -0.01em; transition: all 0.15s ease; white-space: nowrap; position: relative; overflow: hidden; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn:active { transform: scale(0.985); } .btn:disabled, .btn[disabled] { opacity: 0.45; pointer-events: none; cursor: not-allowed; } .btn-sm { font-size: 13px; padding: 6px 12px; border-radius: var(--r); } .btn-md { font-size: 14px; padding: 8px 16px; border-radius: var(--r-md); } .btn-lg { font-size: 15px; padding: 10px 20px; border-radius: var(--r-lg); } .btn-full { width: 100%; } .btn-primary { background: linear-gradient(135deg, #d97706, #b45309); color: #ffffff !important; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 2px 8px rgba(217,119,6,0.35), inset 0 1px 0 rgba(255,255,255,0.15); font-weight: 600; }@media (hover: hover) {.btn-primary:hover { background: linear-gradient(135deg, #b45309, #92400e); border-color: rgba(255,255,255,0.25); } } .btn-secondary { background: rgba(255,255,255,0.06); color: #ffffff !important; border: 1px solid rgba(255,255,255,0.28); box-shadow: 0 1px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06); font-weight: 500; }@media (hover: hover) {.btn-secondary:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.45); } } .btn-ghost { background: transparent; color: rgba(255,255,255,0.65); border: 1px solid transparent; }@media (hover: hover) {.btn-ghost:hover { background: rgba(255,255,255,0.08); color: #ffffff; border-color: rgba(255,255,255,0.18); } } .field { display: flex; flex-direction: column; gap: 5px; } .label { font-size: 12px; font-weight: 500; color: var(--tx-2); letter-spacing: 0.01em; } .input { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 9px 12px; font-size: 14px; color: var(--tx-hi); font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s; outline: none; box-shadow: var(--shadow-xs); } .input:focus { border-color: var(--gray-400); box-shadow: 0 0 0 3px var(--accent-ring); } .input::placeholder { color: var(--tx-3); } .textarea { min-height: 88px; resize: vertical; line-height: 1.55; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 20px; box-shadow: var(--shadow-sm); } .divider { height: 1px; background: var(--border); margin: 0; } .icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .icon svg { display: block; } .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gray-100); border: 1px solid var(--border); font-weight: 600; color: var(--tx); letter-spacing: -0.02em; flex-shrink: 0; } .av-sm { width: 28px; height: 28px; font-size: 11px; } .icon-wrap { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r); background: var(--surface2); flex-shrink: 0; } .iw-md { width: 36px; height: 36px; } .capa-dialogo { position: fixed; inset: 0; } #toast-root { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { display: inline-flex; align-items: center; gap: 8px; background: var(--gray-950); color: var(--gray-50); border-radius: var(--r-lg); padding: 10px 16px; font-size: 13px; font-weight: 450; letter-spacing: -0.01em; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.05); animation: toastIn .2s ease forwards; } .toast.warning { background: #451a03; color: #fcd34d; } .toast.error { background: #450a0a; color: #fca5a5; } @keyframes toastIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-overlay { position: fixed; inset: 0; background: rgba(9,9,11,.45); backdrop-filter: blur(2px); z-index: 800; display: flex; align-items: flex-end; justify-content: center; } .modal-overlay.center { align-items: center; } .modal-overlay.hidden { display: none !important; } .modal-sheet { border: none; border-radius: 20px 20px 0 0; padding: 0; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: var(--shadow-lg); animation: sheetUp .22s ease; } @keyframes sheetUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 1; } .modal-body { padding: 22px; } .modal-footer { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; gap: 10px; position: sticky; bottom: 0; background: var(--bg); } .dropdown { position: absolute; top: calc(100% + 6px); right: 0; border-radius: var(--r-xl); padding: 6px; min-width: 180px; z-index: 300; box-shadow: var(--shadow-md); animation: fadeIn .15s ease; } .dropdown.hidden { display: none; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .dd-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r); font-size: 13px; font-weight: 450; color: var(--tx); cursor: pointer; transition: background .1s; }@media (hover: hover) {.dd-item:hover { background: var(--surface2); } } .dd-item.danger { color: var(--red); } .dd-sep { height: 1px; background: var(--border); margin: 4px 0; } .notif-panel { position: fixed; top: 58px; right: 20px; width: 320px; max-height: 440px; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-xl); z-index: 400; box-shadow: var(--shadow-lg); animation: fadeIn .15s ease; } .notif-panel.hidden { display: none; } .notif-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--border-lo); } .notif-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-lo); transition: background .1s; cursor: pointer; }@media (hover: hover) {.notif-item:hover { background: var(--surface); } } .notif-item:last-child { border-bottom: none; } .notif-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 6px; } img[data-foto-ref] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; } img[data-foto-ref]:not([src]) { visibility: hidden; } .ptr { height: 0; opacity: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: none; pointer-events: none; } .ptr-anillo { display: block; width: 26px; height: 26px; overflow: visible; transform: rotate(-90deg); transform-origin: 50% 50%; } .ptr-pista, .ptr-arco { fill: none; stroke-width: 2.4; stroke-linecap: round; } .ptr-pista { stroke: rgba(255,255,255,.12); } .ptr-arco { stroke: rgba(255,255,255,.9); stroke-dasharray: 0 100; transition: stroke .2s ease; } .ptr-armado .ptr-arco { stroke: #fff; } .ptr-armado .ptr-anillo { filter: drop-shadow(0 0 6px rgba(255,255,255,.28)); } .ptr-recargando .ptr-anillo { animation: ptr-gira .9s linear infinite; } .ptr-recargando .ptr-arco { animation: ptr-respira 1.35s cubic-bezier(.4,0,.2,1) infinite; } .ptr-completo .ptr-arco { stroke: #fff; stroke-dasharray: 100 100; } @keyframes ptr-gira { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } } @keyframes ptr-respira { 0% { stroke-dasharray: 10 100; stroke-dashoffset: 0; } 50% { stroke-dasharray: 62 100; stroke-dashoffset: -14; } 100% { stroke-dasharray: 10 100; stroke-dashoffset: -100; } } @media (prefers-reduced-motion: reduce) { .ptr-recargando .ptr-anillo { animation: none; } .ptr-recargando .ptr-arco { animation: none; stroke-dasharray: 70 100; } } .settings-section { padding: 0 20px 20px; } .settings-title { font-size: 11px; font-weight: 600; color: var(--tx-3); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 12px; } .settings-group { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); margin-bottom: 14px; } .settings-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border-lo); transition: background .12s; } .settings-row:last-child { border-bottom: none; } .settings-row-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--surface2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .settings-row-info { flex: 1; } .settings-row-label { font-size: 14px; font-weight: 500; color: var(--tx-hi); } .settings-row-sub { font-size: 11px; color: var(--tx-3); margin-top: 2px; } .prof-avatar-mascot { position: relative; flex-shrink: 0; width: 100px; height: 100px; } .prof-avatar-canvas { width: 100px; height: 100px; border-radius: 50%; background: var(--surface2); border: 2.5px solid var(--border); display: flex; align-items: center; justify-content: center; position: relative; overflow: visible; box-shadow: 0 0 0 1px rgba(255,255,255,0.06); } .prof-avatar-canvas.sk-b { border-radius: 50%; background-color: rgba(255,255,255,.055); background-image: linear-gradient(100deg, rgba(255,255,255,0) 22%, rgba(255,255,255,.075) 48%, rgba(255,255,255,0) 74%); background-size: 220% 100%; background-repeat: no-repeat; animation: sk-brillo 1.45s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .prof-avatar-canvas.sk-b { animation: none; background-image: none; } } .prof-avatar-canvas-inner { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; } .prof-avatar-mascot { cursor: pointer; } .evo-timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding: 0 0 4px; } .evo-tl-item { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: var(--r-xl); position: relative; z-index: 1; transition: background .15s; } .evo-tl-item.tl-unlocked { cursor: pointer; }@media (hover: hover) {.evo-tl-item.tl-unlocked:hover { background: rgba(255,255,255,0.04); } } .evo-tl-item.tl-current { background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); border-radius: var(--r-xl); } .evo-tl-item.tl-locked { opacity: 0.32; cursor: not-allowed; filter: grayscale(0.5); } .evo-tl-dot-white { background: transparent !important; border-color: transparent; box-shadow: inset 0 0 0 var(--filo-blanco-ancho) var(--filo-blanco); } .evo-tl-item.tl-selected { background: var(--accent-dim); border-radius: 12px; } .evo-tl-dot { width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--border); background: var(--surface2); position: relative; z-index: 1; transition: border-color .2s, box-shadow .2s; } .evo-tl-item.tl-unlocked .evo-tl-dot { border-color: rgba(255,255,255,0.15); } .evo-tl-item.tl-current .evo-tl-dot { border-color: var(--evo-color, var(--accent)); box-shadow: 0 0 0 3px rgba(255,255,255,0.06), 0 0 16px var(--evo-glow, rgba(217,119,6,0.35)); background: var(--surface); } .evo-tl-info { flex: 1; } .evo-tl-name { font-size: 15px; font-weight: 600; color: var(--tx-hi); letter-spacing: -0.02em; } .evo-tl-item.tl-locked .evo-tl-name { color: var(--tx-3); } .evo-tl-req { font-size: 11px; color: var(--tx-3); margin-top: 2px; } .evo-tl-badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; background: rgba(255,255,255,.10); color: var(--tx-hi); border: 1px solid var(--filo-blanco); flex-shrink: 0; } .evo-tl-lock { width: 28px; height: 28px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .evo-tl-xp-wrap { margin-top: 6px; } .evo-tl-xp-bar-track { height: 3px; background: var(--border); border-radius: 99px; overflow: hidden; margin-top: 4px; } .evo-tl-xp-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--evo-color, var(--accent)), var(--accent-hi)); transition: width .5s ease; } .coming-soon-box { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 28px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r-2xl); margin: 4px 0 8px; } .coming-soon-icon { width: 60px; height: 60px; border-radius: 18px; background: var(--accent-dim); border: 1px solid var(--accent-ring); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; animation: comingSoonPulse 2.4s ease-in-out infinite; } @keyframes comingSoonPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217,119,6,0.25); } 50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(217,119,6,0); } } .coming-soon-title { font-size: 18px; font-weight: 700; color: var(--tx-hi); letter-spacing: -0.02em; margin-bottom: 6px; } .coming-soon-sub { font-size: 13px; color: var(--tx-2); line-height: 1.6; max-width: 280px; } .pub-foto { position: relative; width: 100%; overflow: hidden; border: none; padding: 0; cursor: pointer; display: block; border-radius: var(--r-2xl); background: radial-gradient(120% 130% at 50% -10%, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 62%), linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 28px rgba(0,0,0,.34); -webkit-tap-highlight-color: transparent; transition: transform .16s cubic-bezier(.32,.72,0,1), box-shadow .16s; } .pub-foto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255,255,255,.09); pointer-events: none; } .pub-foto:active { transform: scale(.985); box-shadow: 0 6px 18px rgba(0,0,0,.3); } .pub-foto-in { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px 20px; text-align: center; } .pub-foto-icono { width: 60px; height: 60px; border-radius: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--tx-inv); background: linear-gradient(180deg, var(--gray-0) 0%, var(--gray-150) 100%); box-shadow: 0 8px 22px rgba(0,0,0,.40), inset 0 -1px 0 rgba(0,0,0,.08); } .pub-foto-t { font-size: 17px; font-weight: 750; color: var(--tx-hi); letter-spacing: -.02em; } .pub-foto-s { font-size: 12.5px; color: var(--tx-3); line-height: 1.45; max-width: 30ch; } .pub-foto.tiene-foto { background: #000; } .pub-foto.tiene-foto .pub-foto-in { padding: 0; } .pub-foto-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } .pub-foto-cambiar { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 99px; background: rgba(0,0,0,.62); color: #fff; font-size: 11.5px; font-weight: 650; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .pub-foto-ok { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 99px; background: rgba(22,163,74,.92); color: #fff; font-size: 11.5px; font-weight: 700; } .pub-sec { margin-top: 22px; } .pub-sec-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .pub-sec-t { font-size: 13px; font-weight: 700; color: var(--tx-hi); letter-spacing: -.01em; min-width: 0; } .pub-sec-n { font-size: 11px; font-weight: 650; color: var(--tx-3); font-variant-numeric: tabular-nums; flex-shrink: 0; } .pub-mas { margin-left: auto; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--tx-hi); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .14s cubic-bezier(.32,.72,0,1), background .14s; } .pub-mas:active { transform: scale(.9); background: rgba(255,255,255,.12); } .pub-habitos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .pub-habitos > .pub-hab:only-child, .pub-habitos > .pub-vacio { grid-column: 1 / -1; } .pub-hab { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 26px 8px 10px; border-radius: var(--r-lg); background: var(--surface2); border: 1.5px solid var(--border); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .15s, background .15s, transform .12s; } .pub-hab:active { transform: scale(.99); } .pub-hab-ico { width: 28px; height: 28px; border-radius: var(--r-md); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); color: var(--tx-2); } .pub-hab-txt { flex: 1; min-width: 0; } .pub-hab-n { font-size: 12.5px; font-weight: 650; color: var(--tx-hi); letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .pub-hab-sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } .pub-hab .hc-more { position: absolute; right: 1px; top: 50%; transform: translateY(-50%); z-index: 2; padding: 4px 3px; } .pub-hab.sel { border-color: var(--tx-hi); background: rgba(255,255,255,.06); } .pub-hab.sel .pub-hab-ico { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: var(--tx-hi); } .pub-hab.hecho { background: linear-gradient(135deg, #16a34a, #15803d); border-color: #15803d; box-shadow: 0 6px 18px rgba(22,163,74,.24); } .pub-hab.hecho .pub-hab-n, .pub-hab.hecho .pub-hab-sub { color: #fff; } .pub-hab.hecho .pub-hab-ico { background: rgba(255,255,255,.18); border-color: transparent; color: #fff; } @keyframes pubHabEntra { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } } .pub-hab.nuevo { animation: pubHabEntra .34s cubic-bezier(.32,.72,0,1); } .pub-vacio { padding: 22px 16px; text-align: center; border: 1px dashed var(--border); border-radius: var(--r-lg); background: var(--surface2); } .pub-vacio-t { font-size: 13px; font-weight: 650; color: var(--tx-hi); margin-top: 8px; } .pub-vacio-s { font-size: 11.5px; color: var(--tx-3); margin-top: 3px; line-height: 1.5; } .pub-premium { display: flex; align-items: center; gap: 11px; min-width: 0; margin-top: 14px; padding: 12px 13px; border-radius: var(--r-lg); background: var(--surface2); border: 1px solid var(--border); } .pub-premium.tope { background: var(--accent-dim); border-color: var(--accent-ring); } .pub-premium-ico { width: 32px; height: 32px; border-radius: var(--r-md); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #f0900d, #b45309); color: #fff; } .pub-premium-txt { flex: 1; min-width: 0; } .pub-premium-t { font-size: 12.5px; font-weight: 650; color: var(--tx-hi); } .pub-premium-s { font-size: 11px; color: var(--tx-3); margin-top: 2px; line-height: 1.45; } .pub-premium-b { flex-shrink: 0; border: none; cursor: pointer; padding: 8px 13px; border-radius: 9px; min-height: 34px; background: linear-gradient(135deg, #d97706, #b45309); color: #fff; font-size: 11.5px; font-weight: 700; font-family: inherit; -webkit-tap-highlight-color: transparent; } .pub-premium-b:active { transform: scale(.96); } .pub-desc { position: relative; } .pub-desc textarea { width: 100%; resize: none; line-height: 1.55; font-size: 14px; padding: 13px 14px; border-radius: var(--r-lg); min-height: 84px; } .mencion-lista { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 60; margin-bottom: 6px; padding: 6px; max-height: 232px; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-lg); background: var(--surface2); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 14px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04); --avatar-inicial-fondo: var(--avatar-inicial-neutra); } .mencion-opcion { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px; border-radius: 11px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .12s ease; } .mencion-opcion:active { background: rgba(255,255,255,.07); } @media (hover: hover) { .mencion-opcion:hover { background: rgba(255,255,255,.05); } } .mencion-cara { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; } .mencion-ident { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mencion-usuario, .mencion-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mencion-usuario { font-size: 14px; font-weight: 650; color: var(--tx-hi); letter-spacing: -.01em; } .mencion-nombre { font-size: 12.5px; color: var(--tx-3); } #hs-sheet { height: 82vh; height: min(82svh, calc(100svh - var(--kb, 0px))); max-height: min(780px, calc(100svh - var(--kb, 0px))); } .hs-barra { flex-shrink: 0; display: flex; gap: 8px; align-items: center; padding: 12px 16px 10px; border-bottom: 1px solid rgba(255,255,255,.06); } .hs-buscar { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; } .hs-buscar > .hs-lupa { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; display: flex; color: var(--tx-3); pointer-events: none; z-index: 1; } .hs-buscar > .hs-lupa svg { width: 16px; height: 16px; } .hs-buscar input { width: 100%; padding: 11px 12px 11px 34px; min-height: 44px; font-size: 14px; border-radius: 12px; } .hs-barra > .hs-person { flex: none; min-height: 44px; padding: 0 14px; border-radius: 12px; gap: 6px; font-size: 13px; white-space: nowrap; } .hs-cuerpo { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 16px calc(20px + var(--zona-abajo)); } .hs-cat { font-size: 11px; font-weight: 700; color: var(--tx-3); letter-spacing: .05em; text-transform: uppercase; margin: 16px 0 8px; } .hs-cat:first-child { margin-top: 0; } .hs-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (max-width: 380px) { .hs-rejilla { grid-template-columns: 1fr; } } .hs-item { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 11px 11px; border-radius: var(--r-md); min-height: 46px; background: var(--surface2); border: 1.5px solid var(--border); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .15s, background .15s, transform .12s; } .hs-item:active { transform: scale(.97); } .hs-item-n { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--tx-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hs-item-mas { flex-shrink: 0; color: var(--tx-hi); display: flex; } .hs-item.activo { background: rgba(22,163,74,.12); border-color: rgba(22,163,74,.42); cursor: default; } .hs-item.activo .hs-item-n { color: var(--tx-2); } .hs-item.activo:active { transform: none; } .hs-item.bloq { opacity: .45; } @keyframes hsPulso { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 100% { box-shadow: 0 0 0 12px rgba(22,163,74,0); } } .hs-item.recien { animation: hsPulso .45s ease-out; } .hs-tope { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border-radius: var(--r-lg); margin-bottom: 14px; background: var(--accent-dim); border: 1px solid var(--accent-ring); } .hs-tope-ico { width: 32px; height: 32px; border-radius: var(--r-md); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #f0900d, #b45309); color: #fff; } .hs-tope-t { font-size: 13px; font-weight: 700; color: var(--tx-hi); } .hs-tope-s { font-size: 11.5px; color: var(--tx-2); margin-top: 3px; line-height: 1.5; } .hs-tope-b { margin-top: 10px; border: none; cursor: pointer; padding: 9px 14px; border-radius: 9px; min-height: 38px; background: linear-gradient(135deg, #d97706, #b45309); color: #fff; font-size: 12px; font-weight: 700; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; } .hs-nada { text-align: center; padding: 34px 16px; color: var(--tx-3); font-size: 13px; } #landing { height: 100vh; height: 100dvh; display: none; flex-direction: column; overflow-y: auto; overflow-x: hidden; } .marca-nombre { font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: var(--tx-hi); line-height: 1; } .marca-nombre span { color: var(--tx-hi); } .portada { flex: 0 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: calc(24px + var(--zona-arriba)) 24px calc(32px + var(--zona-abajo)); text-align: center; background: radial-gradient(80% 46% at 50% 40%, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 72%); } .portada-marca { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 7vh; } .portada-nombre { margin: 0; font-size: clamp(46px, 14vw, 76px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--tx-hi); } .portada-lema { margin: 14px 0 0; font-size: clamp(16px, 4.6vw, 19px); font-weight: 500; letter-spacing: -.01em; line-height: 1.4; color: var(--gray-400); } .portada-acciones { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; } .portada-marca { animation: portadaEntra .7s cubic-bezier(.22,1,.36,1) .05s both; } .portada-acciones { animation: portadaEntra .7s cubic-bezier(.22,1,.36,1) .22s both; } @keyframes portadaEntra { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } } @media (prefers-reduced-motion: reduce) { .portada-marca, .portada-acciones { animation: portadaAparece .01s linear both; } } @keyframes portadaAparece { from { opacity: 0; } to { opacity: 1; } } #landing.portada-app .l-web { display: none; } .l-sec { width: 100%; max-width: 900px; margin: 0 auto; padding: 56px 24px; border-top: 1px solid var(--border); } .l-sec-t { font-size: clamp(24px, 5vw, 34px); font-weight: 700; letter-spacing: -0.03em; color: var(--tx-hi); margin: 0 0 18px; } .l-sec-p { font-size: 16px; line-height: 1.7; color: var(--tx-2); margin: 0 0 14px; max-width: 680px; } .l-rejilla { display: grid; gap: 14px; margin-top: 26px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .l-tarj { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 18px 18px 20px; } .l-tarj-t { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--tx-hi); margin: 0 0 6px; } .l-tarj-p { font-size: 14px; line-height: 1.55; color: var(--tx-2); margin: 0; } .l-pasos { list-style: none; counter-reset: paso; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; } .l-paso { counter-increment: paso; padding-left: 46px; position: relative; } .l-paso::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-lo); color: var(--accent); font-size: 14px; font-weight: 700; } .l-paso-t { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--tx-hi); margin: 4px 0 4px; } .l-paso-p { font-size: 15px; line-height: 1.6; color: var(--tx-2); margin: 0; } .l-pie { width: 100%; max-width: 900px; margin: 0 auto; padding: 34px 24px calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); text-align: center; } .l-pie-enlaces { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; margin-bottom: 18px; } .l-pie-enlaces a { font-size: 13.5px; color: var(--tx-2); text-decoration: underline; text-underline-offset: 3px; }@media (hover: hover) {.l-pie-enlaces a:hover { color: var(--tx-hi); } } .l-pie-legal { font-size: 12.5px; color: var(--tx-3); margin: 0; } .l-pie-legal a { color: var(--tx-3); } #auth-screen { height: 100vh; height: 100dvh; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: calc(68px + var(--zona-arriba)) 24px calc(40px + var(--zona-abajo)); background: var(--bg); } .auth-container { width: 100%; max-width: 400px; margin: auto; } #perfil-no-cargado { position: fixed; inset: 0; z-index: 70; height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); } #perfil-no-cargado.hidden { display: none; } .pnc-caja { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; } .pnc-icono { width: 40px; height: 40px; color: var(--tx-3); } .pnc-titulo { font-size: 19px; font-weight: 700; color: var(--tx-1); margin: 0; } .pnc-texto { font-size: 13.5px; line-height: 1.5; color: var(--tx-2); margin: 0 0 6px; max-width: 320px; } .pnc-caja .btn { margin-top: 2px; } #actualizacion-obligatoria { position: fixed; inset: 0; z-index: 2147483000; height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; padding: calc(24px + var(--zona-arriba)) 24px calc(24px + var(--zona-abajo)); background: var(--bg); touch-action: none; overscroll-behavior: contain; } #actualizacion-obligatoria.hidden { display: none; } .auth-back { position: fixed; z-index: 60; top: calc(14px + env(safe-area-inset-top, 0px)); left: calc(14px + env(safe-area-inset-left, 0px)); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface2); border: 1px solid var(--border); color: var(--tx-1); cursor: pointer; transition: transform .12s ease, background .15s ease; }@media (hover: hover) {.auth-back:hover { background: var(--surface); } } .auth-back:active { transform: scale(.92); } .auth-logo-mark { display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .auth-headline { text-align: center; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--tx-hi); margin-bottom: 4px; } .auth-sub { text-align: center; font-size: 14px; color: var(--tx-2); margin-bottom: 28px; } .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); padding: 28px; box-shadow: var(--shadow-md); } .auth-error { display: none; align-items: center; gap: 8px; background: var(--red-dim); border: 1px solid rgba(220,38,38,.2); border-radius: var(--r); padding: 10px 12px; font-size: 13px; color: var(--red); margin-bottom: 4px; } .auth-error.on { display: flex; } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 4px 0; } .auth-divider span { font-size: 12px; color: var(--tx-3); } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .auth-footer { text-align: center; font-size: 13px; color: var(--tx-2); margin-top: 18px; } .auth-footer a { color: var(--tx-hi); font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .auth-link-inline { align-self: flex-end; margin-top: 6px; font-size: 12.5px; color: var(--tx-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }@media (hover: hover) {.auth-link-inline:hover { color: var(--tx-hi); } } .auth-notice { display: flex; align-items: flex-start; gap: 10px; background: var(--green-dim); border: 1px solid rgba(22,163,74,.2); border-radius: var(--r); padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--tx-1); } .auth-notice.hidden { display: none; } .pw-reqs { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .pw-req { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.35; color: var(--tx-3); transition: color .15s ease; } .pw-req-mark { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--border); position: relative; transition: background .15s ease, border-color .15s ease; } .pw-req.is-ok { color: var(--green); } .pw-req.is-ok .pw-req-mark { background: var(--green); border-color: var(--green); } .pw-req.is-ok .pw-req-mark::after { content: ''; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); } .cap-box:empty { display: none; } .cap-box { display: flex; justify-content: center; } .cap-box iframe { max-width: 100%; } #app { height: 100vh; display: none; flex-direction: column; background: var(--bg); overflow: hidden; padding-top: var(--zona-arriba); padding-bottom: var(--zona-abajo); } #app.visible { display: flex; } .app-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 52px; flex-shrink: 0; position: relative; z-index: 20; } .app-logo { font-size: 14px; font-weight: 700; letter-spacing: -0.03em; color: var(--tx-hi); } .app-logo span { color: var(--tx-hi); } .topbar-right { display: flex; align-items: center; gap: 7px; } .coin-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 2px; background: none; border: none; font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; } :root { --racha-viva: #ff8e00; } .racha-chip { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 3px 2px; background: none; border: none; border-radius: 999px; font-family: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--tx-3); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .4s ease, transform .16s ease; } .racha-chip.racha-viva { color: var(--racha-viva); } .racha-chip:active { transform: scale(.94); } .racha-chip:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .racha-chip-num { color: currentColor; font-variant-numeric: tabular-nums; } .racha-chip .duo-flame { width: calc(var(--cabecera-dibujo) * 96 / 104); height: calc(var(--cabecera-dibujo) * 116 / 104); pointer-events: none; filter: grayscale(1) brightness(.75); opacity: .55; transition: filter .4s ease, opacity .4s ease; } .racha-chip .duo-flame svg { width: 100%; height: 100%; } .racha-chip .duo-flame::after { display: none; } .racha-chip .flame-outer, .racha-chip .flame-inner { animation: none; } .racha-chip.racha-viva .duo-flame { filter: drop-shadow(0 1px 5px rgba(255,142,0,.45)); opacity: 1; } @media (prefers-reduced-motion: reduce) { .racha-chip, .racha-chip .duo-flame { transition: none; } .racha-chip:active { transform: none; } } .racha-llama { --aviso: 9px; --aviso-x: -2px; --aviso-y: -1px; --aviso-aire: 1.25px; position: relative; display: inline-flex; flex-shrink: 0; } .racha-aviso { position: absolute; right: var(--aviso-x); bottom: var(--aviso-y); width: var(--aviso); height: var(--aviso); border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); pointer-events: none; opacity: 0; transform: scale(.4); } .racha-aviso svg { display: block; width: 100%; height: 100%; fill: currentColor; } .racha-chip.racha-pendiente .racha-aviso { opacity: 1; transform: none; transition: opacity .2s ease, transform .34s cubic-bezier(.34,1.56,.64,1); } .racha-chip.racha-pendiente .duo-flame { --aviso-centro: calc(100% - var(--aviso) / 2 - var(--aviso-x)) calc(100% - var(--aviso) / 2 - var(--aviso-y)); --aviso-hueco: calc(var(--aviso) / 2 + var(--aviso-aire)); -webkit-mask: radial-gradient(circle at var(--aviso-centro), transparent var(--aviso-hueco), #000 calc(var(--aviso-hueco) + .5px)); mask: radial-gradient(circle at var(--aviso-centro), transparent var(--aviso-hueco), #000 calc(var(--aviso-hueco) + .5px)); } .racha-chip:not(.racha-pendiente) .racha-pendiente-texto { display: none; } @media (prefers-reduced-motion: reduce) { .racha-chip.racha-pendiente .racha-aviso { transition: none; } } .icon-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--r); background: transparent; border: none; cursor: pointer; color: var(--tx-2); transition: background .1s, color .1s; position: relative; }@media (hover: hover) {.icon-btn:hover { background: var(--surface2); color: var(--tx); } } .av-btn { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; background: var(--surface2); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--tx); transition: border-color .1s; position: relative; }@media (hover: hover) {.av-btn:hover { border-color: var(--gray-400); } } .notif-badge { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; background: var(--red); border-radius: 50%; border: 1.5px solid var(--bg); } :root { --isla-alto: 58px; --isla-abajo: 10px; --isla-hueco: calc(var(--isla-alto) + var(--isla-abajo) + 8px); } .app-bottomnav { position: relative; z-index: 20; flex-shrink: 0; height: 0; padding: 0; border: none; background: transparent; pointer-events: none; } .bnav-isla { position: absolute; left: 0; right: 0; bottom: var(--isla-abajo); margin: 0 auto; width: calc(100% - 28px); max-width: 420px; height: var(--isla-alto); display: flex; align-items: stretch; border-radius: 999px; overflow: hidden; pointer-events: auto; touch-action: none; background: rgba(14,14,18,.55); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.10); } .bnav-marcador { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; transform: translate3d(200%, 0, 0); pointer-events: none; transition: transform .34s cubic-bezier(.22, 1, .3, 1), opacity .2s ease; } .bnav-marcador::before { content: ''; position: absolute; inset: 8px 11px; border-radius: 999px; background: rgba(255,255,255,.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.20); } .bnav-sin-marca .bnav-marcador { opacity: 0; } .bnav-item, .bnav-center { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; position: relative; border: none; background: none; padding: 0; cursor: pointer; font-family: inherit; color: rgba(255,255,255,.55); -webkit-tap-highlight-color: transparent; transition: color .2s ease; } .bnav-ico { width: 22px; height: 22px; display: block; } .bnav-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } .bnav-marcado { color: #fff; } .bnav-marcado .bnav-ico { filter: drop-shadow(0 0 7px rgba(255,255,255,.40)); } @media (hover: hover) { .bnav-item:hover { color: rgba(255,255,255,.72); } } .bnav-item:active .bnav-ico { transform: scale(.9); } .bnav-item:focus-visible, .bnav-center:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 999px; } .bnav-center-inner { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 999px; color: inherit; background: transparent; transition: color .22s ease, transform .16s ease; } .bnav-center:active .bnav-center-inner { transform: scale(.92); } .bnav-center-inner .bnav-ico { position: absolute; top: 50%; left: 50%; width: 23px; height: 23px; margin: -11.5px 0 0 -11.5px; transition: opacity .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1); } .bnav-ico-mas { opacity: 0; transform: rotate(-90deg) scale(.5); } .bnav-ico-casa { opacity: 1; transform: none; } .bnav-center-inner.active .bnav-ico-mas { opacity: 1; transform: none; } .bnav-center-inner.active .bnav-ico-casa { opacity: 0; transform: rotate(90deg) scale(.5); } .bnav-rotulo-mas { display: none; } .bnav-center-inner.active .bnav-rotulo-mas { display: block; } .bnav-center-inner.active .bnav-rotulo-casa { display: none; } @media (prefers-reduced-motion: reduce) { .bnav-item, .bnav-center, .bnav-center-inner, .bnav-marcador, .bnav-center-inner .bnav-ico { transition: none; } .bnav-center:active .bnav-center-inner, .bnav-item:active .bnav-ico { transform: none; } } @media (max-width: 360px) { :root { --isla-alto: 54px; --isla-abajo: 8px; } .bnav-isla { width: calc(100% - 20px); } .bnav-ico { width: 20px; height: 20px; } .bnav-center-inner { width: 36px; height: 36px; } .bnav-center-inner .bnav-ico { width: 21px; height: 21px; margin: -10.5px 0 0 -10.5px; } .bnav-marcador::before { inset: 7px 7px; } } .app-panels { flex: 1; overflow: hidden; position: relative; } .panel { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: none; overscroll-behavior: contain; padding-bottom: var(--isla-hueco); } .panel.active { display: block; } .streak-count { font-size: 20px; font-weight: 700; letter-spacing: -0.04em; color: var(--tx-hi); } .feed-post { border-bottom: 1px solid rgba(255,255,255,0.06); } .post-time { margin-left: auto; font-size: 11px; color: var(--tx-3); } .post-caption { padding: 0 20px 12px; font-size: 13px; color: var(--tx-2); line-height: 1.55; } .habit-choice { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--r-md); border: 1.5px solid var(--border); cursor: pointer; transition: all .12s; margin-bottom: 0; background: var(--surface2); }@media (hover: hover) {.habit-choice:hover { border-color: var(--gray-600); background: var(--surface); } } .habit-choice.selected { border-color: var(--gray-200); background: var(--surface); } #feed-container, #feed-selector { max-width: 470px; margin-left: auto; margin-right: auto; } .post-img-wrap { max-width: 470px; margin-left: auto; margin-right: auto; } :root { --feed-tabs-ancho: 252px; } :root { --feed-nav-sombra: 0 1px 3px rgba(0, 0, 0, .55); } #feed-selector { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 11px 21px 12px 14px; background: none; } .feed-nav-ico { flex: 0 0 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; border-radius: 999px; color: var(--tx-2); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .18s ease, background .18s ease, transform .16s ease; }@media (hover: hover) { .feed-nav-ico:hover { color: var(--tx-hi); background: var(--surface2); } } .feed-nav-ico:active { transform: scale(.9); } .feed-nav-ico:focus-visible { outline: 2px solid var(--tx-hi); outline-offset: -2px; } .feed-nav-glifo { width: 20px; height: 20px; display: block; filter: drop-shadow(var(--feed-nav-sombra)); } .feed-tabs { position: relative; flex: 0 1 var(--feed-tabs-ancho); min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 0; } .feed-tab { background: transparent; border: none; cursor: pointer; padding: 5px 1px 7px; white-space: nowrap; font-family: inherit; font-size: 14px; line-height: 1.57; font-weight: 400; letter-spacing: -.01em; color: var(--tx-2); text-shadow: var(--feed-nav-sombra); transition: color .22s ease; -webkit-tap-highlight-color: transparent; } .feed-tab.active { color: var(--tx-hi); font-weight: 800; } .feed-tabs-linea { position: absolute; left: 0; bottom: -1px; width: calc(100% / 3); height: 2px; transform: translateX(100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1); pointer-events: none; } .feed-tabs-linea::after { content: ''; display: block; margin: 0 auto; width: 24px; height: 100%; border-radius: 2px; background: var(--tx-hi); box-shadow: var(--feed-nav-sombra); } #panel-home[data-feed-modo="siguiendo"] .feed-tabs-linea { transform: translateX(0); } #panel-home[data-feed-modo="comunidad"] .feed-tabs-linea { transform: translateX(200%); } @media (prefers-reduced-motion: reduce) { .feed-tabs-linea { transition: none; } } @media (max-width: 360px) { :root { --feed-tabs-ancho: 228px; } #feed-selector { padding-left: 8px; padding-right: 12px; } .feed-nav-ico { flex: 0 0 27px; height: 27px; } .feed-nav-glifo { width: 18px; height: 18px; } .feed-tab { font-size: 13px; } } #panel-home:not([data-feed-modo="comunidad"]) #feed-container { padding-top: 10px; } .podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding: 32px 20px 20px; border-bottom: 1px solid var(--border); } .pod-col { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; } .pod-crown { width: 22px; height: 22px; } .pod-platform { border-radius: 6px 6px 0 0; width: 100%; background: var(--surface2); border: 1px solid var(--border); border-bottom: none; } .pod-name { font-size: 12px; font-weight: 600; color: var(--tx); letter-spacing: -0.02em; } .pod-sub { font-size: 11px; color: var(--tx-3); } .rank-table { padding: 0 20px; } .shop-header { position: sticky; top: 0; z-index: 10; background: rgba(12,12,14,.97); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: 16px 20px 12px; } .shop-bal-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 14px; } .shop-bal-n { font-size: 28px; font-weight: 700; letter-spacing: -0.04em; color: var(--tx-hi); } .shop-bal-l { font-size: 13px; color: var(--tx-3); } .shop-tabs { display: flex; gap: 4px; background: var(--bg); border-radius: var(--r-md); padding: 3px; border: 1px solid var(--border); } .shop-tab { flex: 1; padding: 6px 10px; border-radius: var(--r); font-size: 12px; font-weight: 500; color: var(--tx-2); cursor: pointer; border: none; background: transparent; font-family: inherit; transition: all .15s; text-align: center; } .shop-tab.active { background: var(--surface2); color: var(--tx-hi); box-shadow: var(--shadow-xs); } .shop-section { padding: 20px 20px 0; } .shop-section-title { font-size: 11px; font-weight: 600; color: var(--tx-3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; } .shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; } .shop-grid > .sk-estado, .shop-grid > .sk-wrap { grid-column: 1 / -1; } .shop-grid > .sk-wrap > [aria-hidden] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .shop-card { border: none; border-radius: var(--r-xl); padding: 18px 14px 14px; cursor: pointer; transition: all .15s; position: relative; box-shadow: var(--shadow-xs); }@media (hover: hover) {.shop-card:hover { border-color: var(--gray-300); box-shadow: var(--shadow); transform: translateY(-1px); } } .shop-card.owned { border-color: rgba(22,163,74,.25); background: var(--green-dim); } .shop-card-icon { width: 48px; height: 48px; border-radius: var(--r-lg); background: var(--surface2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; box-shadow: var(--shadow-xs); } .shop-card-name { font-size: 13px; font-weight: 600; text-align: center; color: var(--tx-hi); margin-bottom: 4px; letter-spacing: -0.01em; } .shop-card-rarity { font-size: 10px; text-align: center; font-weight: 500; margin-bottom: 12px; } .shop-card-price { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--accent); } .shop-card-badge { position: absolute; top: 8px; right: 8px; padding: 2px 7px; border-radius: var(--r-sm); font-size: 10px; font-weight: 600; } .coin-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 20px 20px; } .coin-packs-aviso { grid-column: 1 / -1; text-align: center; padding: 26px 12px; font-size: 13px; font-weight: 550; color: var(--tx-3); } .coin-pack { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 12px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-xl); cursor: pointer; transition: all .15s; box-shadow: var(--shadow-xs); }@media (hover: hover) {.coin-pack:hover { border-color: var(--gray-300); box-shadow: var(--shadow); } } .coin-pack:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .coin-pack.best { border-color: var(--accent-ring); background: var(--accent-dim); } .coin-pack-cinta { position: absolute; top: 0; left: 0; right: 0; padding: 3px 0; text-align: center; font-size: 9.5px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--accent); } .coin-pack.best { padding-top: 30px; } .coin-pack-moneda { width: 52px; height: 52px; background-image: var(--mvp-coin-img); background-size: contain; background-position: center; background-repeat: no-repeat; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35)); } .coin-pack-cifra { font-size: 25px; font-weight: 800; line-height: 1.1; color: var(--tx-hi); letter-spacing: -0.03em; margin-top: 6px; font-variant-numeric: tabular-nums; } .coin-pack-bonus { font-size: 11.5px; font-weight: 650; color: var(--green); } .coin-pack-precio { margin-top: 10px; width: 100%; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface3, rgba(255,255,255,0.06)); border: 1px solid var(--border); font-size: 14px; font-weight: 750; color: var(--tx-hi); letter-spacing: -0.01em; text-align: center; } .coin-pack.best .coin-pack-precio { background: var(--accent); border-color: var(--accent); color: #fff; } @media (max-width: 340px) { .coin-packs { grid-template-columns: 1fr; } } .profile-top { padding: 24px 20px 20px; border-bottom: 1px solid var(--border); } .mascot-section { padding: 20px; border-bottom: 1px solid var(--border); } .mascot-section-title { font-size: 11px; font-weight: 600; color: var(--tx-3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; } .stt-nota { display: flex; align-items: flex-start; gap: 7px; margin: 4px 0 16px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font-size: 11.5px; color: var(--tx-3); line-height: 1.45; } .stt-vacio { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 46px 26px 40px; gap: 10px; } .stt-vacio-ico { width: 64px; height: 64px; border-radius: 20px; margin-bottom: 4px; display: flex; align-items: center; justify-content: center; background: var(--surface2); border: 1px solid var(--border); color: var(--tx-3); } .stt-vacio-t { font-size: 16px; font-weight: 700; color: var(--tx-hi); letter-spacing: -.02em; } .stt-vacio-s { font-size: 12.5px; color: var(--tx-3); line-height: 1.5; max-width: 320px; } .stt-col-estado { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .stt-bloqueada { opacity: .5; pointer-events: none; } .mascot-card { border: none; border-radius: var(--r-2xl); padding: 28px 20px; text-align: center; margin-bottom: 16px; box-shadow: var(--shadow-xs); } .mascot-icon-large { width: 88px; height: 88px; border-radius: 22px; background: var(--surface2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: var(--shadow-sm); } .evo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .profile-habits-section { padding: 20px; } .profile-habit-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-lo); } .profile-habit-row:last-child { border-bottom: none; } .habit-icon-wrap { width: 32px; height: 32px; border-radius: var(--r); background: var(--surface2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #comunidad-barra { display: none; } #panel-home[data-feed-modo="comunidad"] #comunidad-barra { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 470px; margin: 0 auto; padding: 2px 16px 12px; } #panel-home[data-feed-modo="comunidad"], #comunidad-temas, #social-composer { --avatar-inicial-fondo: var(--avatar-inicial-neutra); } #panel-home[data-feed-modo="comunidad"] .sk-accion, #comunidad-temas .sk-accion, #social-composer .sk-accion { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: var(--tx-hi); } @media (hover: hover) { #panel-home[data-feed-modo="comunidad"] .sk-accion:hover, #comunidad-temas .sk-accion:hover, #social-composer .sk-accion:hover { background: rgba(255,255,255,.11); } } #panel-home[data-feed-modo="comunidad"] :focus-visible, #comunidad-temas :focus-visible, #social-composer :focus-visible { outline-color: rgba(255,255,255,.7); } #panel-home[data-feed-modo="comunidad"] ::selection, #comunidad-temas ::selection, #social-composer ::selection { background: rgba(255,255,255,.22); } .comunidad-control { position: relative; flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 13px 0 12px; border-radius: 999px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.26); color: rgba(255,255,255,.72); font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: -.005em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .16s ease, opacity .2s ease; } .comunidad-control::after { content: ''; position: absolute; inset: -4px; } .comunidad-control.solo-icono { flex: 0 0 38px; width: 38px; padding: 0; } .comunidad-control-ico { flex: 0 0 auto; display: block; width: 16px; height: 16px; } .comunidad-control-flecha { flex: 0 0 auto; display: block; width: 14px; height: 14px; opacity: .55; margin-right: -2px; } .comunidad-control-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (hover: hover) { .comunidad-control:hover { color: #fff; border-color: rgba(255,255,255,.18); } } .comunidad-control:active { transform: scale(.96); } .comunidad-control:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .comunidad-control.active { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.24); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 6px 16px rgba(0,0,0,.26); } .comunidad-control.active .comunidad-control-ico { filter: drop-shadow(0 0 7px rgba(255,255,255,.40)); } #comunidad-btn-guardados.active svg { fill: currentColor; } .comunidad-control:disabled { opacity: .38; cursor: default; transform: none; box-shadow: none; } .social-cats { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 12px; scrollbar-width: none; touch-action: pan-x; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 16px; -webkit-overflow-scrolling: touch; } .social-cats::-webkit-scrollbar { display: none; } .social-cats.en-hoja { flex-wrap: wrap; gap: 8px; overflow: visible; padding: 14px 16px 4px; touch-action: auto; scroll-snap-type: none; } .social-cat { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 38px; padding: 9px 15px; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); color: var(--tx-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; font-family: inherit; scroll-snap-align: center; transition: background .16s ease, color .16s ease, border-color .16s ease; -webkit-tap-highlight-color: transparent; } .social-cat:focus-visible { outline: 2px solid var(--tx-hi); outline-offset: 2px; } .social-cat.active { background: var(--tx-hi); color: var(--bg); border-color: var(--tx-hi); font-weight: 700; } .social-cat::after { content: ''; position: absolute; inset: -6px -2px; } .social-cat { position: relative; } .comunidad-temas-cuerpo { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); } #comunidad-temas-lista .sk-estado { padding: 12px 16px 8px; } #comunidad-temas-lista .sk-accion { margin-top: 8px; } .social-card { position: relative; margin: 0 12px 10px; padding: 13px 15px 10px; border-radius: 18px; background: var(--cristal-publicacion); border: 1px solid rgba(255,255,255,.085); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); contain: content; } .social-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .social-autor { display: flex; align-items: center; gap: 9px; background: none; border: 0; padding: 0; cursor: pointer; min-width: 0; flex: 1 1 auto; text-align: left; font-family: inherit; } .social-autor-cara { flex: 0 0 auto; display: block; width: 38px; height: 38px; } .social-autor-ident { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .social-autor-nombre { font-size: 14px; font-weight: 700; color: var(--tx-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .social-autor-sub { font-size: 11.5px; color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .social-texto { margin: 10px 0 10px; font-size: 15px; line-height: 1.5; color: var(--tx); white-space: pre-wrap; overflow-wrap: anywhere; } .social-acciones { display: flex; align-items: center; gap: 18px; } .social-act { display: flex; align-items: center; gap: 5px; background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--tx-3); font-size: 12.5px; font-weight: 600; font-family: inherit; -webkit-tap-highlight-color: transparent; } .social-act[data-social-act="like"].on { color: var(--like); } .social-act[data-social-act="like"].on svg { fill: var(--like); } .social-act[data-social-act="guardar"].on { color: var(--tx-hi); } .social-act[data-social-act="guardar"].on svg { fill: var(--tx-hi); } .social-act svg { transition: fill .18s ease, stroke .18s ease, color .18s ease; } .social-act svg { stroke-width: var(--icono-trazo); } .social-act:active svg { transform: scale(.88); } .social-sep { flex: 1; } .social-menu-caja { position: relative; flex: 0 0 auto; } .social-mas { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: none; border: 0; cursor: pointer; color: var(--tx-2); -webkit-tap-highlight-color: transparent; } @media (hover: hover) {.social-mas:hover { background: var(--surface); color: var(--tx-hi); } } .social-menu { position: absolute; right: 0; top: 32px; z-index: 60; min-width: 190px; padding: 5px; border-radius: 13px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 30px rgba(0,0,0,.42); } .social-menu.hidden { display: none; } .social-menu-item { display: block; width: 100%; text-align: left; font-family: inherit; padding: 10px 12px; border: 0; border-radius: 9px; background: none; color: var(--tx-hi); font-size: 13.5px; font-weight: 600; cursor: pointer; }@media (hover: hover) {.social-menu-item:hover { background: var(--surface2); } } .social-menu-item.peligro { color: #ef4444; } .social-corazon { position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; pointer-events: none; z-index: 5; background: var(--like); -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-4.9-8-10.5A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 8 3.5C20 16.1 12 21 12 21z'/%3E%3C/svg%3E"); mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-4.9-8-10.5A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 8 3.5C20 16.1 12 21 12 21z'/%3E%3C/svg%3E"); opacity: 0; transform: scale(.4); } .social-corazon.late { animation: social-corazon .9s cubic-bezier(.2,.8,.3,1) forwards; } @keyframes social-corazon { 0% { opacity: 0; transform: scale(.4); } 22% { opacity: .95; transform: scale(1.12); } 45% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } } @media (prefers-reduced-motion: reduce) { .social-corazon.late { animation-duration: .01ms; } } .social-full { width: 100%; max-width: 560px; height: 100%; align-self: stretch; display: flex; flex-direction: column; background: var(--bg, var(--surface)); padding-top: var(--zona-arriba); padding-bottom: var(--zona-abajo); animation: sheetUp .22s ease; } .social-full-top { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 10px 12px; border-bottom: 1px solid var(--border-lo); } .social-full-titulo { flex: 1 1 auto; font-size: 15px; font-weight: 700; color: var(--tx-hi); text-align: center; } .social-full-x { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: none; border: 0; cursor: pointer; color: var(--tx-2); }@media (hover: hover) {.social-full-x:hover { background: var(--surface2); color: var(--tx-hi); } } .social-full-top > .prof-action-btn { flex: none; min-height: 34px; padding: 0 16px; border-radius: 999px; font-size: 13.5px; } .social-full-cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; overflow-y: auto; padding: 14px 16px 0; } .social-full-quien { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .social-full-cara { flex: 0 0 auto; display: block; width: 40px; height: 40px; } .social-full-quien-txt { min-width: 0; } .social-full-priv { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tx-3); } .social-full-texto { flex: 1 1 auto; width: 100%; min-height: 160px; margin-top: 12px; background: none; border: 0; outline: none; resize: none; color: var(--tx); font-family: inherit; font-size: 17px; line-height: 1.5; } .social-full-texto::placeholder { color: var(--tx-3); } .social-full-texto:focus-visible { outline: none; } .social-full-pie { flex: 0 0 auto; border-top: 1px solid var(--border-lo); padding-top: 10px; } .social-full-pie-cab { display: flex; align-items: baseline; justify-content: space-between; padding: 0 16px 8px; } .social-full-etiqueta { font-size: 12px; font-weight: 700; color: var(--tx-3); text-transform: uppercase; letter-spacing: .04em; } .social-full-cuenta { font-size: 12px; color: var(--tx-3); font-variant-numeric: tabular-nums; } .social-full-cuenta.cerca { color: var(--tx-hi); font-weight: 700; } .social-full-nota { padding: 4px 16px 12px; font-size: 11.5px; color: var(--tx-3); } #social-composer-cat .sk-estado { padding: 12px 16px 16px; } #social-composer-cat .sk-accion { margin-top: 8px; } .pp-name{font-size:19px;font-weight:750;letter-spacing:-0.02em;color:var(--tx-hi);line-height:1.15} .pp-bio{font-size:13.5px;line-height:1.5;color:var(--tx);margin:2px 0 15px;white-space:pre-wrap;word-break:break-word} .mvpc-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 8px 11px;background:var(--surface2);border:1px solid var(--border);border-radius:15px;cursor:pointer;transition:transform .12s ease} .mvpc-card:active{transform:scale(.97)} .groups-count-badge { background: var(--accent); color: #fff; border-radius: 99px; font-size: 10px; font-weight: 700; padding: 1px 6px; min-width: 18px; text-align: center; } .slide-panel { position: absolute; inset: 0; background: rgba(12,12,14,0.88); display: flex; flex-direction: column; z-index: 50; animation: slideInRight .22s ease; } .slide-panel.hidden { display: none !important; } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .slide-panel-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--surface); } .slide-panel-body { flex: 1 1 auto; min-height: 0; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 32px; } .slide-back-btn { width: 36px; height: 36px; flex-shrink: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: var(--r); cursor: pointer; color: var(--tx-2); transition: color .12s; -webkit-tap-highlight-color: transparent; }@media (hover: hover) {.slide-back-btn:hover { color: var(--tx-hi); } } .slide-back-btn:active { transform: scale(.93); } .create-group-section { margin-bottom: 16px; } .create-group-section-label { font-size: 11px; font-weight: 600; color: var(--tx-3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; } .photo-upload-circle { width: 72px; height: 72px; border-radius: 50%; background: var(--surface2); border: 2px dashed var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; gap: 4px; }@media (hover: hover) {.photo-upload-circle:hover { border-color: rgba(255,255,255,0.3); background: var(--surface); } } .invite-section { border-radius: var(--r-xl); padding: 16px; margin-bottom: 16px; } .invite-section:last-child { margin-bottom: 0; } .invite-link-box { display: flex; align-items: center; gap: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 10px; } .share-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; } .share-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 6px; font-size: 11px; font-weight: 500; color: var(--tx-2); cursor: pointer; transition: all .15s; font-family: inherit; }@media (hover: hover) {.share-btn:hover { background: var(--surface); border-color: rgba(255,255,255,0.2); color: var(--tx-hi); } } .friend-result-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-lo); } .friend-result-row:last-child { border-bottom: none; } .gametag-chip { font-size: 11px; font-weight: 500; color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-ring); border-radius: 6px; padding: 2px 6px; } .pod-platform { position: relative; display: flex; align-items: center; justify-content: center; } .pod-rank-num { font-family: 'Inter', sans-serif; font-weight: 800; line-height: 1; font-size: 26px; text-shadow: 0 1px 2px rgba(0,0,0,0.35); } .pod-platform-1 { background: linear-gradient(160deg, #FFE066 0%, #FFC93C 45%, #E0A219 100%); border-color: #E0A219; } .pod-platform-2 { background: linear-gradient(160deg, #F4F6F9 0%, #CFD6DE 45%, #A7B0BC 100%); border-color: #A7B0BC; } .pod-platform-3 { background: linear-gradient(160deg, #F0B27A 0%, #D98E4E 45%, #B5702F 100%); border-color: #B5702F; } .pod-rank-num-1 { color: #8A5A00; } .pod-rank-num-2 { color: #5C636B; } .pod-rank-num-3 { color: #6B3F1C; } .pod-av-1 { box-shadow: 0 0 0 3px #FFC93C, 0 4px 14px rgba(255,201,60,0.4) !important; } .pod-av-2 { box-shadow: 0 0 0 3px #CFD6DE !important; } .pod-av-3 { box-shadow: 0 0 0 3px #D98E4E !important; } @media (max-width: 600px) { .container { padding: 0 16px; } } .duo-flame { width: 48px; height: 48px; position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; filter: drop-shadow(0 2px 8px rgba(255,140,0,0.5)); transition: transform .15s ease; }@media (hover: hover) {.duo-flame:hover { transform: scale(1.08); } } .duo-flame:active { transform: scale(0.94); } .duo-flame svg { overflow: visible; } .flame-outer { animation: flameFlicker 2.6s ease-in-out infinite; transform-origin: 50px 110px; transform-box: fill-box; } .flame-inner { animation: flameFlickerInner 1.7s ease-in-out infinite; transform-origin: 56px 106px; transform-box: fill-box; } @keyframes flameFlicker { 0%,100% { transform: scaleY(1) scaleX(1) translateX(0) rotate(0deg); } 25% { transform: scaleY(1.05) scaleX(0.97) translateX(-0.6px) rotate(-0.6deg); } 50% { transform: scaleY(0.97) scaleX(1.03) translateX(0.6px) rotate(0.5deg); } 75% { transform: scaleY(1.03) scaleX(0.99) translateX(-0.3px) rotate(-0.3deg); } } @keyframes flameFlickerInner { 0%,100% { transform: scaleY(1) scaleX(1) translateY(0); opacity: 1; } 30% { transform: scaleY(1.07) scaleX(0.95) translateY(-1px); opacity: 0.95; } 60% { transform: scaleY(0.95) scaleX(1.04) translateY(0.5px); opacity: 1; } } .duo-flame.ignite { animation: flameIgnite .6s cubic-bezier(.34,1.56,.64,1); } @keyframes flameIgnite { 0% { transform: scale(1); filter: drop-shadow(0 2px 6px rgba(255,120,0,0.45)) brightness(1); } 30% { transform: scale(1.45) translateY(-4px); filter: drop-shadow(0 0 18px rgba(255,180,0,0.9)) brightness(1.5); } 60% { transform: scale(1.2) translateY(-1px); filter: drop-shadow(0 0 12px rgba(255,150,0,0.7)) brightness(1.25); } 100% { transform: scale(1); filter: drop-shadow(0 2px 6px rgba(255,120,0,0.45)) brightness(1); } } .duo-flame.ignite .flame-inner { filter: brightness(1.25) saturate(1.1); } .duo-flame.ignite .flame-outer { filter: brightness(1.12); } .flame-spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #FFD000; pointer-events: none; z-index: 5; box-shadow: 0 0 6px rgba(255,200,0,0.9); } .mvp-coin { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; background-image: var(--mvp-coin-img); background-size: contain; background-position: center; background-repeat: no-repeat; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)); display: flex; align-items: center; justify-content: center; position: relative; } .mvp-coin-text { display: none; } .coin-flyer { position: fixed; z-index: 99999; pointer-events: none; border-radius: 50%; background-image: var(--mvp-coin-img); background-size: contain; background-position: center; background-repeat: no-repeat; filter: drop-shadow(0 8px 24px rgba(0,0,0,.5)); } .coin-flyer-text { display: none; } @keyframes sk-brillo { from { background-position: -140% 0; } to { background-position: 240% 0; } } .sk-b { position: relative; border-radius: 6px; background-color: rgba(255,255,255,.055); background-image: linear-gradient( 100deg, rgba(255,255,255,0) 22%, rgba(255,255,255,.075) 48%, rgba(255,255,255,0) 74% ); background-size: 220% 100%; background-repeat: no-repeat; animation: sk-brillo 1.45s ease-in-out infinite; } .sk-b + .sk-b { margin-top: 7px; } .sk-wrap { display: block; } .sk-fila { display: flex; align-items: center; gap: 11px; padding: 10px 0; } .sk-usuario { padding: 11px 14px; } .sk-post { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 10px; } .sk-social { margin: 0 12px 10px; padding: 13px 15px 10px; border-radius: 18px; background: var(--cristal-publicacion); border: 1px solid rgba(255,255,255,.085); } .sk-social .sk-fila { padding: 0; } .sk-social-texto { margin: 10px 0; } .sk-companion { padding: 18px 14px 14px; border-radius: var(--r-xl); background: var(--surface2); box-shadow: var(--shadow-xs); display: flex; flex-direction: column; align-items: center; gap: 0; } .sk-companion .sk-b:nth-child(1) { margin-bottom: 12px; } .sk-companion .sk-b:nth-child(2) { margin-bottom: 4px; } .sk-companion .sk-b:nth-child(3) { margin-bottom: 12px; } .sk-post .sk-fila { padding: 0; } .sk-post-foto { width: 100%; aspect-ratio: 4 / 5; border-radius: 14px; background-color: rgba(255,255,255,.055); background-image: linear-gradient(100deg, rgba(255,255,255,0) 22%, rgba(255,255,255,.075) 48%, rgba(255,255,255,0) 74%); background-size: 220% 100%; background-repeat: no-repeat; animation: sk-brillo 1.45s ease-in-out infinite; } .sk-perfil { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 26px 16px; } .sk-perfil .sk-b + .sk-b { margin-top: 0; } .sk-estado { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 34px 22px; text-align: center; } .sk-estado-icono { width: 30px; height: 30px; color: var(--tx-3); } .sk-estado-titulo { font-size: 13.5px; font-weight: 650; color: var(--tx-2); } .sk-estado-texto { font-size: 12px; color: var(--tx-3); line-height: 1.5; max-width: 260px; } .sk-accion { margin-top: 10px; padding: 8px 18px; background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-ring); border-radius: 99px; font-size: 12.5px; font-weight: 650; font-family: inherit; cursor: pointer; }@media (hover: hover) {.sk-accion:hover { background: var(--accent-ring); } } .sr-solo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .sk-b, .sk-post-foto { animation: none; background-image: none; } } .feed-cargando-mas { display: flex; align-items: center; justify-content: center; gap: 5px; height: 28px; margin: 2px 0 10px; } .feed-cargando-mas.hidden { display: none; } .feed-cargando-mas .fcm-p { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .28); animation: feed-mas-latido 1.05s ease-in-out infinite; } .feed-cargando-mas .fcm-p + .fcm-p { animation-delay: .14s; } .feed-cargando-mas .fcm-p + .fcm-p + .fcm-p { animation-delay: .28s; } @keyframes feed-mas-latido { 0%, 80%, 100% { opacity: .28; transform: scale(.82); } 40% { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .feed-cargando-mas .fcm-p { animation: none; opacity: .55; } } :root { --bg: #08080c; --surface: #0f0f16; --surface2: #16161f; --border: #222230; --border-lo: #1a1a24; --tx-hi: #f5f5f7; --tx: #c8c8d4; --tx-2: #6e6e80; --tx-3: #48485a; --accent: #e07c00; --accent-hi: #f59e0b; --accent-lo: rgba(224,124,0,0.16); --accent-dim: rgba(224,124,0,0.09); --accent-ring:rgba(224,124,0,0.28); --shadow-xs: 0 1px 3px rgba(0,0,0,.25), 0 0 0 0.5px rgba(255,255,255,.03); --shadow-sm: 0 2px 8px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.2), 0 0 0 0.5px rgba(255,255,255,.04); --shadow: 0 8px 20px rgba(0,0,0,.42), 0 3px 6px rgba(0,0,0,.22); --shadow-md: 0 16px 36px rgba(0,0,0,.48), 0 6px 12px rgba(0,0,0,.24); --shadow-lg: 0 28px 56px rgba(0,0,0,.55), 0 10px 20px rgba(0,0,0,.28); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --r-sm: 7px; --r: 10px; --r-md: 12px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 22px; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; } .app-topbar { background: rgba(10,10,13,0.82); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-bottom: 1px solid rgba(255,255,255,0.06); box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 2px 12px rgba(0,0,0,0.3); height: 56px; padding: 0 18px; } .app-logo { font-size: 15px; font-weight: 800; letter-spacing: -0.05em; } .coin-chip { gap: 6px; font-size: 13.5px; font-weight: 700; letter-spacing: -0.02em; transition: transform 0.18s var(--ease-out-quart); } .coin-chip:active { transform: scale(0.96); } .icon-btn { border-radius: 10px; width: 36px; height: 36px; transition: all 0.16s var(--ease-out-quart); }@media (hover: hover) {.icon-btn:hover { background: rgba(255,255,255,0.07); color: var(--tx-hi); } } .icon-btn:active { transform: scale(0.9); } .av-btn { background: linear-gradient(135deg, var(--surface2), var(--surface)); border: 1.5px solid rgba(255,255,255,0.1); box-shadow: 0 1px 4px rgba(0,0,0,0.35), 0 0 0 0.5px rgba(255,255,255,0.04) inset; font-size: 13.5px; font-weight: 700; transition: all 0.18s var(--ease-out-quart); }@media (hover: hover) {.av-btn:hover { border-color: rgba(255,255,255,0.2); box-shadow: 0 3px 10px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(255,255,255,0.07) inset; } } .notif-badge { width: 8px; height: 8px; top: 3px; right: 3px; border: 2px solid var(--bg); box-shadow: 0 0 6px rgba(220,38,38,0.6); } .app-bottomnav { position: relative; z-index: 20; flex-shrink: 0; height: 0; padding: 0; border: none; background: transparent; pointer-events: none; } .groups-count-badge { background: linear-gradient(135deg, var(--accent), #b45309); box-shadow: 0 1px 4px rgba(224,124,0,0.45); border-radius: 99px; font-size: 10px; font-weight: 800; padding: 1px 7px; min-width: 19px; } .feed-post { border-bottom: 1px solid rgba(255,255,255,0.05); background: transparent; transition: background 0.15s; } .feed-post:last-child { border-bottom: none; } .post-time { font-size: 11px; color: var(--tx-3); font-variant-numeric: tabular-nums; } .post-caption { padding: 10px 18px 10px; font-size: 13.5px; line-height: 1.55; color: var(--tx); } .glass-card { background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 60%, rgba(255,255,255,0.04) 100% ); border: 1px solid rgba(255,255,255,0.09); box-shadow: 0 4px 20px rgba(0,0,0,0.38), 0 1px 0 rgba(255,255,255,0.07) inset; transition: all 0.2s var(--ease-out-quart); }@media (hover: hover) {.glass-card:hover { border-color: rgba(255,255,255,0.14); box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.09) inset; transform: translateY(-1px); } } .glass-card:active { transform: scale(0.99) translateY(0); } .btn { border-radius: var(--r-md); font-weight: 600; letter-spacing: -0.01em; transition: all 0.18s var(--ease-out-quart); } .btn:active { transform: scale(0.97); } .btn-primary { background: linear-gradient(135deg, #e07c00 0%, #b45309 100%); box-shadow: 0 3px 12px rgba(224,124,0,0.38), 0 1px 0 rgba(255,255,255,0.16) inset; border: 1px solid rgba(255,255,255,0.12); }@media (hover: hover) {.btn-primary:hover { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); box-shadow: 0 5px 18px rgba(224,124,0,0.5), 0 1px 0 rgba(255,255,255,0.2) inset; transform: translateY(-0.5px); } } .btn-secondary { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 1px 4px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.05) inset; }@media (hover: hover) {.btn-secondary:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.22); transform: translateY(-0.5px); } } .btn-ghost { border-radius: var(--r); transition: all 0.16s var(--ease-out-quart); }@media (hover: hover) {.btn-ghost:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.1); } } .input { background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 10px 14px; font-size: 14px; color: var(--tx-hi); transition: all 0.18s var(--ease-out-quart); box-shadow: 0 1px 3px rgba(0,0,0,0.15) inset; } .input:focus { background: rgba(255,255,255,0.06); border-color: rgba(224,124,0,0.4); box-shadow: 0 0 0 3px rgba(224,124,0,0.12), 0 1px 3px rgba(0,0,0,0.15) inset; outline: none; } .input::placeholder { color: var(--tx-3); } .badge { font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em; padding: 3px 8px; border-radius: 8px; } .toast { background: rgba(18,18,24,0.96); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 11px 18px; font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(255,255,255,0.06); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .toast.warning { background: rgba(45,22,3,0.96); border-color: rgba(217,119,6,0.3); color: #fcd34d; } .toast.error { background: rgba(45,10,10,0.96); border-color: rgba(220,38,38,0.25); color: #fca5a5; } .modal-sheet { background: linear-gradient(160deg, rgba(20,20,28,0.95) 0%, rgba(12,12,18,0.98) 100%); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255,255,255,0.09); border-top: 1px solid rgba(255,255,255,0.13); border-radius: 22px 22px 0 0; box-shadow: 0 -8px 48px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.04); } @keyframes sheetUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-header { background: transparent; padding: 20px 22px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); } .modal-sheet::before { content: ''; display: block; width: 36px; height: 4px; background: rgba(255,255,255,0.18); border-radius: 99px; margin: 12px auto -8px; } .shop-card { background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.04) 100% ); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; box-shadow: 0 4px 16px rgba(0,0,0,0.32), 0 1px 0 rgba(255,255,255,0.06) inset; transition: all 0.2s var(--ease-out-quart); }@media (hover: hover) {.shop-card:hover { border-color: rgba(255,255,255,0.16); box-shadow: 0 8px 26px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.09) inset; transform: translateY(-2px); } } .shop-card:active { transform: scale(0.98) translateY(0); } .shop-card.owned { background: linear-gradient(160deg, rgba(22,163,74,0.08) 0%, rgba(22,163,74,0.03) 100%); border-color: rgba(22,163,74,0.2); } .profile-top { padding: 24px 20px 20px; } .mascot-card { background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.04) 100% ); border: 1px solid rgba(255,255,255,0.09); border-radius: 22px; box-shadow: 0 6px 24px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.07) inset; } .focus-overlay { background: radial-gradient(ellipse at 50% 30%, rgba(124,58,237,0.12) 0%, rgba(10,10,13,0.98) 70%); } .notif-panel { background: linear-gradient(160deg, rgba(20,20,28,0.96) 0%, rgba(12,12,18,0.99) 100%); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255,255,255,0.09); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.04); top: 62px; }@media (hover: hover) {.notif-item:hover { background: rgba(255,255,255,0.04); border-radius: 8px; } } .notif-dot { background: var(--accent); box-shadow: 0 0 6px rgba(224,124,0,0.5); } .dropdown { background: linear-gradient(160deg, rgba(20,20,28,0.96) 0%, rgba(12,12,18,0.99) 100%); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 0.5px rgba(255,255,255,0.04); } .dd-item { border-radius: 8px; font-size: 13.5px; }@media (hover: hover) {.dd-item:hover { background: rgba(255,255,255,0.06); } } .panel { transition: opacity 0.18s var(--ease-out-quart); } .settings-row { transition: background 0.15s var(--ease-out-quart); } @media (hover: hover) { .settings-row:hover { background: rgba(255,255,255,0.03); border-radius: 10px; } } .settings-row-icon { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .habit-choice { border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03); transition: all 0.16s var(--ease-out-quart); }@media (hover: hover) {.habit-choice:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); transform: translateY(-0.5px); } } .habit-choice.selected { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .clan-disc-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); transition: all 0.18s var(--ease-out-quart); }@media (hover: hover) {.clan-disc-card:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); box-shadow: 0 4px 16px rgba(0,0,0,0.3); } } .clan-disc-join { border-radius: 10px; font-weight: 700; font-size: 12px; transition: all 0.18s var(--ease-out-quart); } .coin-pack { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; transition: all 0.18s var(--ease-out-quart); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }@media (hover: hover) {.coin-pack:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); } } .coin-pack.best { background: linear-gradient(135deg, rgba(224,124,0,0.1) 0%, rgba(224,124,0,0.04) 100%); border-color: rgba(224,124,0,0.25); box-shadow: 0 3px 14px rgba(224,124,0,0.15); } .evo-tl-item { border-radius: 16px; transition: all 0.2s var(--ease-out-quart); box-shadow: 0 2px 10px rgba(0,0,0,0.22); }@media (hover: hover) {.evo-tl-item:hover { transform: translateX(2px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); } } .duo-flame { filter: drop-shadow(0 3px 12px rgba(255,120,0,0.55)); }@media (hover: hover) {.duo-flame:hover { transform: scale(1.1); } } *:focus-visible { outline: 2px solid rgba(224,124,0,0.7); outline-offset: 2px; border-radius: var(--r); } ::selection { background: rgba(224,124,0,0.25); color: var(--tx-hi); } body { background: radial-gradient(1100px 520px at 85% -10%, rgba(224,124,0,0.085) 0%, transparent 60%), radial-gradient(900px 640px at -15% 108%, rgba(109,40,217,0.10) 0%, transparent 55%), radial-gradient(700px 420px at 50% 45%, rgba(255,255,255,0.018) 0%, transparent 70%), var(--bg); background-attachment: fixed; } #app { background: transparent; } .app-panels { background: transparent; } .card, .glass-card, .clan-disc-card, .shop-card, .coin-pack, .auth-card { background: linear-gradient(160deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.018) 55%, rgba(255,255,255,0.035) 100%); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid rgba(255,255,255,0.09); box-shadow: 0 12px 32px rgba(0,0,0,0.42), 0 2px 6px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.08) inset; position: relative; } .card::after, .glass-card::after, .clan-disc-card::after, .shop-card::after, .coin-pack::after, .auth-card::after { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent); pointer-events: none; } .btn-primary { background: linear-gradient(160deg, #f59e0b 0%, #e07c00 45%, #b45309 100%); border: 1px solid rgba(255,255,255,0.18); color: #16100a; text-shadow: 0 1px 0 rgba(255,255,255,0.25); box-shadow: 0 6px 20px rgba(224,124,0,0.38), 0 2px 6px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.35) inset; transition: all 0.2s var(--ease-out-quart); }@media (hover: hover) {.btn-primary:hover { background: linear-gradient(160deg, #fbbf24 0%, #f59e0b 45%, #d97706 100%); box-shadow: 0 10px 30px rgba(224,124,0,0.5), 0 3px 8px rgba(0,0,0,0.32), 0 1px 0 rgba(255,255,255,0.4) inset; transform: translateY(-1px); } } .btn-primary:active { transform: translateY(0) scale(0.97); box-shadow: 0 3px 10px rgba(224,124,0,0.3); } .duo-flame { filter: drop-shadow(0 4px 14px rgba(0,0,0,0.4)); } .duo-flame::after { content: ''; position: absolute; inset: -40%; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(closest-side, rgba(255,150,10,0.55) 0%, rgba(255,110,0,0.28) 45%, rgba(255,100,0,0) 78%); animation: flameGlowPulse 2.8s ease-in-out infinite; will-change: opacity, transform; } .duo-flame svg { position: relative; z-index: 1; } @keyframes flameGlowPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.78; transform: scale(1.16); } } @media (prefers-reduced-motion: reduce) { .duo-flame::after { animation: none; } } .app-topbar { background: linear-gradient(180deg, rgba(13,13,18,0.92) 0%, rgba(10,10,14,0.85) 100%); border-bottom: 1px solid rgba(255,255,255,0.08); } .feed-post { position: relative; } .input:focus { border-color: rgba(224,124,0,0.55); box-shadow: 0 0 0 3px rgba(224,124,0,0.16), 0 0 14px rgba(224,124,0,0.12); background: rgba(255,255,255,0.045); } .modal-sheet { background: linear-gradient(180deg, rgba(20,20,28,0.94) 0%, rgba(14,14,20,0.96) 100%); backdrop-filter: blur(30px) saturate(170%); -webkit-backdrop-filter: blur(30px) saturate(170%); border: 1px solid rgba(255,255,255,0.10); border-bottom: none; box-shadow: 0 -18px 60px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.09) inset; } h1, h2, .panel-title { letter-spacing: -0.035em; font-weight: 800; } .streak-count { background: linear-gradient(180deg, #fff 20%, #f4c98a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 6px rgba(224,124,0,0.25)); } ::selection { background: rgba(224,124,0,0.35); color: #fff; } #onboarding { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: var(--bg); --ob-arte: clamp(150px, min(64vw, 36vh), 300px); --ob-curva: cubic-bezier(.22, 1, .36, 1); --ob-tinta-2: var(--gray-400); padding: var(--zona-arriba) var(--safe-area-inset-right, 0px) var(--zona-abajo) var(--safe-area-inset-left, 0px); padding-bottom: max(var(--zona-abajo), var(--kb, 0px)); overflow: hidden; } #onboarding.hidden { display: none; } body.ob-abierto { overflow: hidden; } .ob-cuerpo { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; } .ob-paso { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; padding: clamp(28px, 7vh, 72px) 0 clamp(18px, 3.4vh, 32px); } .ob-t { margin: 0; padding: 0 24px; font-size: clamp(26px, 7.6vw, 32px); font-weight: 780; letter-spacing: -.035em; line-height: 1.12; color: var(--tx-hi); } .ob-s { margin: 6px 0 0; padding: 0 24px; font-size: 15px; line-height: 1.5; color: var(--ob-tinta-2); } .ob-escena { flex: 1 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 0; } .ob-carrusel { display: flex; align-items: center; width: 100%; max-width: 640px; padding: 14px 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); } .ob-carrusel::-webkit-scrollbar { display: none; } .ob-carrusel::before, .ob-carrusel::after { content: ''; flex: 0 0 calc(50% - var(--ob-arte) / 2); } .ob-carrusel.ob-lista { scroll-behavior: smooth; } .ob-carta { position: relative; flex: 0 0 var(--ob-arte); width: var(--ob-arte); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; opacity: .55; transform: scale(.6); transition: transform .5s var(--ob-curva), opacity .5s ease; -webkit-tap-highlight-color: transparent; } .ob-carta + .ob-carta { margin-left: calc(var(--ob-arte) * -.2); } .ob-carta.ob-sel { opacity: 1; transform: none; } .ob-carta:focus-visible { outline: none; } .ob-carta:focus-visible .ob-carta-img { outline: 2px solid rgba(255,255,255,.7); outline-offset: 6px; border-radius: 50%; } .ob-carta::before { content: ''; position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.13) 0%, rgba(255,255,255,.045) 55%, rgba(255,255,255,0) 100%); opacity: 0; transition: opacity .5s ease; pointer-events: none; } .ob-carta.ob-sel::before { opacity: 1; } .ob-carta-img { position: relative; display: block; width: 100%; height: 100%; } .ob-carta-img img { filter: drop-shadow(0 18px 22px rgba(0,0,0,.5)); } .ob-hueco { cursor: default; background: radial-gradient(closest-side, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 100%); border-radius: 50%; } .ob-ficha { position: relative; width: 100%; max-width: 360px; height: 60px; margin-top: 8px; } .ob-ficha-item { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity .16s ease, translate .16s ease, visibility 0s linear .16s; } .ob-ficha-item.ob-sel { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .3s ease .12s, translate .3s var(--ob-curva) .12s, visibility 0s; } .ob-ficha-n { margin: 0; font-size: 24px; font-weight: 780; letter-spacing: -.02em; line-height: 1.1; color: var(--tx-hi); } .ob-ficha-r { margin: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--ob-tinta-2); } .ob-ficha-r::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ob-rareza, var(--ob-tinta-2)); } .ob-puntos { display: flex; gap: 6px; margin-top: 20px; } .ob-punto { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); transition: width .35s var(--ob-curva), background .35s ease; } .ob-punto.ob-sel { width: 18px; background: rgba(255,255,255,.92); } .ob-heroe { position: relative; flex: 1 1 0; min-height: 96px; width: 100%; margin: 12px 0 18px; } .ob-heroe-arte { position: absolute; inset: 0; margin: auto; height: min(100%, var(--ob-arte)); aspect-ratio: 1 / 1; } .ob-heroe-arte::before { content: ''; position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.13) 0%, rgba(255,255,255,.045) 55%, rgba(255,255,255,0) 100%); pointer-events: none; } .ob-heroe-arte img { position: relative; filter: drop-shadow(0 18px 22px rgba(0,0,0,.5)); } .ob-campo { width: 100%; max-width: 440px; padding: 0 24px; } .ob-input { display: block; width: 100%; text-align: center; font-size: 16px; font-weight: 650; letter-spacing: .01em; padding: 17px 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; color: var(--tx-hi); caret-color: #fff; outline: none; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; } .ob-input::placeholder { color: var(--gray-500); } .ob-input:focus { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.08); box-shadow: 0 0 0 4px rgba(255,255,255,.05); } .ob-error { display: none; font-size: 13px; color: #f87171; margin-top: 10px; text-align: center; } .ob-error.on { display: block; } .ob-acciones { width: 100%; max-width: 440px; padding: 14px 24px 0; } .ob-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 0 22px; font-size: 16px; line-height: 1.2; transition: opacity .2s ease; } .ob-btn:disabled { opacity: .5; cursor: default; } #onboarding.ob-ocupado .ob-cuerpo { pointer-events: none; } .ob-paso-aviso { justify-content: center; gap: 22px; } .ob-paso-aviso .ob-acciones { max-width: 360px; padding-top: 0; } @keyframes obEntra { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } } @keyframes obEntraCarta { from { opacity: 0; translate: 0 20px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } } .ob-cuerpo .ob-t, .ob-cuerpo .ob-s, .ob-cuerpo .ob-ficha, .ob-cuerpo .ob-puntos, .ob-cuerpo .ob-heroe, .ob-cuerpo .ob-campo, .ob-cuerpo .ob-acciones, .ob-cuerpo .ob-carta-img { opacity: 0; } .ob-cuerpo.ob-entra .ob-t { animation: obEntra .55s var(--ob-curva) .04s both; } .ob-cuerpo.ob-entra .ob-heroe { animation: obEntra .6s var(--ob-curva) .10s both; } .ob-cuerpo.ob-entra .ob-ficha { animation: obEntra .55s var(--ob-curva) .22s both; } .ob-cuerpo.ob-entra .ob-s { animation: obEntra .55s var(--ob-curva) .28s both; } .ob-cuerpo.ob-entra .ob-puntos { animation: obEntra .55s var(--ob-curva) .32s both; } .ob-cuerpo.ob-entra .ob-campo { animation: obEntra .55s var(--ob-curva) .18s both; } .ob-cuerpo.ob-entra .ob-acciones { animation: obEntra .55s var(--ob-curva) .36s both; } .ob-cuerpo.ob-entra .ob-carta-img { animation: obEntraCarta .58s cubic-bezier(.22,1,.3,1) calc(.10s + var(--ob-i, 0) * .07s) both; } @media (max-height: 640px) { .ob-paso { padding-top: 22px; padding-bottom: 14px; } .ob-t { font-size: 24px; } .ob-ficha { height: 54px; margin-top: 4px; } .ob-ficha-n { font-size: 21px; } .ob-puntos { margin-top: 14px; } .ob-btn { min-height: 50px; } } body.teclado-abierto .ob-paso-nombre { padding-top: 16px; } body.teclado-abierto .ob-paso-nombre .ob-t { font-size: 22px; } @media (min-width: 720px) { .ob-t { font-size: 34px; } } #tutorial { position: fixed; inset: 0; z-index: 700; --tut-x: 50vw; --tut-y: 100vh; --tut-lado: 0px; --tut-apoyo: 70vh; --tut-curva: cubic-bezier(.22, 1, .36, 1); -webkit-tap-highlight-color: transparent; } .tut-foco { position: fixed; left: 0; top: 0; width: var(--tut-lado); height: var(--tut-lado); transform: translate(var(--tut-x), var(--tut-y)); border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255,255,255,.62), 0 0 26px 6px rgba(255,255,255,.14), 0 0 0 200vmax rgba(0,0,0,.72); transition: transform .5s var(--tut-curva), width .5s var(--tut-curva), height .5s var(--tut-curva); pointer-events: none; animation: tutAparece .35s ease both; } .tut-tarjeta { position: fixed; left: 16px; right: 16px; bottom: calc(100% - var(--tut-apoyo)); max-width: 360px; margin: 0 auto; padding: 20px 20px 14px; border-radius: 24px; background: rgba(24, 24, 28, .86); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 24px 60px -14px rgba(0,0,0,.75); text-align: left; transition: bottom .45s var(--tut-curva); animation: tutSube .5s var(--tut-curva) .08s both; } #tutorial.tut-debajo .tut-tarjeta { bottom: auto; top: var(--tut-apoyo); } .tut-pasos { display: grid; } .tut-paso { grid-area: 1 / 1; opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity .25s ease, translate .25s var(--tut-curva), visibility 0s linear .25s; } .tut-paso.tut-activo { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .32s ease .06s, translate .32s var(--tut-curva) .06s, visibility 0s; } .tut-t { margin: 0; font-size: 18px; font-weight: 750; letter-spacing: -.02em; line-height: 1.25; color: var(--tx-hi); } .tut-s { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--gray-400); } .tut-nota { display: flex; align-items: center; gap: 9px; margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--tx-hi); } .tut-nota [data-lucide], .tut-nota svg { width: 16px; height: 16px; flex-shrink: 0; } .tut-pie { display: flex; align-items: center; gap: 10px; margin-top: 16px; } .tut-puntos { flex: 1; display: flex; gap: 5px; } .tut-punto { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); transition: width .35s var(--tut-curva), background .35s ease; } .tut-punto.tut-activo { width: 16px; background: rgba(255,255,255,.92); } .tut-saltar { min-height: 44px; padding: 0 10px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--gray-400); -webkit-tap-highlight-color: transparent; } .tut-saltar:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; border-radius: 10px; } .tut-sigue { min-height: 44px; padding: 0 20px; font-size: 14px; } .tut-sigue .tut-fin { display: none; } #tutorial.tut-ultimo .tut-sigue .tut-sig { display: none; } #tutorial.tut-ultimo .tut-sigue .tut-fin { display: inline; } #tutorial.tut-ultimo .tut-saltar { visibility: hidden; } @keyframes tutAparece { from { opacity: 0; } to { opacity: 1; } } @keyframes tutSube { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } } @media (prefers-reduced-motion: reduce) { .ob-cuerpo.ob-entra .ob-t, .ob-cuerpo.ob-entra .ob-s, .ob-cuerpo.ob-entra .ob-ficha, .ob-cuerpo.ob-entra .ob-puntos, .ob-cuerpo.ob-entra .ob-heroe, .ob-cuerpo.ob-entra .ob-campo, .ob-cuerpo.ob-entra .ob-acciones, .ob-cuerpo.ob-entra .ob-carta-img { animation: obAparece .01s linear both; } .ob-carrusel.ob-lista { scroll-behavior: auto; } .ob-carta, .ob-carta::before, .ob-ficha-item, .ob-punto, .ob-btn, .ob-input { transition: none; } .tut-foco, .tut-tarjeta, .tut-paso, .tut-punto { transition: none; } .tut-foco, .tut-tarjeta { animation: none; } } @keyframes obAparece { from { opacity: 0; } to { opacity: 1; } } #conexion-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 14px; padding-top: calc(6px + env(safe-area-inset-top, 0px)); background: var(--gray-800, #27272a); color: var(--gray-100, #f4f4f5); font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); transform: translateY(-100%); transition: transform .22s ease; } #conexion-bar.visible { transform: translateY(0); } #conexion-bar.restablecida { background: var(--green, #16a34a); color: #f0fdf4; }