/* ============================================================ DESIGN SYSTEM Un solo lugar con todos los tamaños, colores y espaciados. index.html y admin.html usan el tema por defecto (dorado, redondeado). sin-recupero.html agrega data-theme="sinrecupero" al y hereda los mismos componentes con otra paleta y esquinas cuadradas. ============================================================ */ :root{ /* marca fija (no cambia con el tema, se usa para linkear entre páginas) */ --brand-gold:#e6b325; --brand-gold-dark:#b5860f; --brand-red:#ff3b3b; --brand-red-dark:#8f0000; --brand-telegram:#2AABEE; --brand-telegram-dark:#229ED9; /* escala de espaciado */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; /* escala de radios (tema por defecto = redondeado) */ --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --radius-pill:999px; /* tipografía */ --font-sans:'Inter', 'Segoe UI', Arial, sans-serif; --fs-display:clamp(2.4rem, 7vw, 4.4rem); --fs-h2:clamp(1.3rem, 3.5vw, 2rem); --fs-subtitle:clamp(0.95rem, 2.2vw, 1.2rem); --fs-body:0.95rem; --fs-small:0.82rem; --fs-xs:0.72rem; /* paleta neutra */ --bg:#0b0d12; --surface:#171a24; --surface-2:#0e1017; --border:#2a2f3d; --text:#eef0f5; --muted:#8b93a7; --success:#2ecc71; --danger:#c0392b; --danger-dark:#7f1d0f; /* acento del tema (tema por defecto = dorado / Distribución) */ --accent:var(--brand-gold); --accent-dark:var(--brand-gold-dark); --accent-ink:#1a1200; --bg-glow:rgba(230,179,37,0.08); } /* --- Tema "Sin Recupero": misma estructura, otra piel --- */ [data-theme="sinrecupero"]{ --bg:#050505; --surface:#141414; --surface-2:#0a0a0a; --border:#3a3a3a; --accent:var(--brand-red); --accent-dark:var(--brand-red-dark); --accent-ink:#ffffff; --bg-glow:rgba(255,59,59,0.08); --radius-sm:0px; --radius-md:0px; --radius-lg:0px; --radius-pill:0px; } *{ box-sizing:border-box; } body{ margin:0; min-height:100vh; background:radial-gradient(circle at top, var(--bg-glow) 0%, var(--bg) 60%), var(--bg); color:var(--text); font-family:var(--font-sans); /* deja lugar al footer fijo (botón de Telegram) para que no tape la última fila */ padding-bottom:calc(var(--space-8) * 2); } /* ---------- Fondo decorativo: ruletas SVG (generadas por decor.js) ---------- */ .bg-decor{ position:fixed; inset:0; overflow:hidden; z-index:-1; pointer-events:none; } .wheel{ position:absolute; aspect-ratio:1; opacity:0.11; } .wheel::before{ content:""; position:absolute; inset:-25%; border-radius:50%; background:radial-gradient(circle, var(--bg-glow) 0%, transparent 60%); } .wheel svg{ position:relative; width:100%; height:100%; display:block; filter:drop-shadow(0 0 30px rgba(0,0,0,0.6)); } .wheel .spin, .wheel .ball{ transform-box:view-box; transform-origin:50% 50%; } /* Ciclo de ruleta real: se lanza rápido, desacelera, se detiene y vuelve a lanzarse. La rueda y la bola giran en sentidos opuestos, como en la mesa. */ .wheel .spin{ animation:wheel-cycle 16s cubic-bezier(0.12, 0.65, 0.18, 1) infinite; } .wheel .ball{ animation:ball-cycle 16s cubic-bezier(0.08, 0.7, 0.12, 1) infinite; } .wheel.w1{ width:min(72vw, 680px); top:-20%; right:-16%; } .wheel.w2{ width:min(42vw, 380px); bottom:-14%; left:-12%; opacity:0.08; } .wheel.w2 .spin{ animation-duration:19s; animation-delay:-7s; animation-direction:reverse; } .wheel.w2 .ball{ animation-duration:19s; animation-delay:-7s; animation-direction:reverse; } @keyframes wheel-cycle{ 0% { transform:rotate(0deg); } 82% { transform:rotate(1080deg); } 100% { transform:rotate(1080deg); } } @keyframes ball-cycle{ 0% { transform:rotate(0deg); } 74% { transform:rotate(-2160deg); } 100% { transform:rotate(-2160deg); } } .particles{ position:absolute; inset:0; width:100%; height:100%; } /* ---------- Header ---------- */ header{ text-align:center; padding:var(--space-7) var(--space-4) var(--space-4); } .title{ font-size:var(--fs-display); font-weight:900; letter-spacing:2px; margin:0; color:var(--accent); text-shadow:0 0 24px var(--bg-glow), 0 4px 0 rgba(0,0,0,0.5); text-transform:uppercase; } .subtitle{ font-size:var(--fs-subtitle); color:var(--text); letter-spacing:1.5px; text-transform:uppercase; margin:var(--space-3) 0 0; opacity:0.85; } /* ---------- Tabs de navegación entre páginas ---------- */ .tabs{ display:flex; justify-content:center; gap:var(--space-3); margin-top:var(--space-5); flex-wrap:wrap; padding:0 var(--space-4); } .tab{ display:inline-block; padding:var(--space-3) var(--space-6); border-radius:var(--radius-pill); font-weight:800; letter-spacing:1.5px; text-transform:uppercase; font-size:var(--fs-small); text-decoration:none; border:2px solid transparent; line-height:1.2; } .tab.active{ background:linear-gradient(135deg, var(--accent), var(--accent-dark)); color:var(--accent-ink); box-shadow:0 4px 15px var(--bg-glow); } .tab.alt-gold{ background:#000; color:var(--brand-gold); border-color:var(--brand-gold); } .tab.alt-gold:hover{ background:var(--brand-gold); color:#1a1200; } .tab.alt-red{ background:#000; color:var(--brand-red); border-color:var(--brand-red); } .tab.alt-red:hover{ background:var(--brand-red); color:#1a0000; } /* ---------- Texto de sección ---------- */ .section-title{ text-align:center; font-size:var(--fs-h2); color:var(--accent); text-transform:uppercase; letter-spacing:3px; margin:var(--space-7) 0 var(--space-2); font-weight:800; } .disclaimer{ text-align:center; color:var(--muted); font-size:var(--fs-small); max-width:640px; margin:var(--space-6) auto; padding:0 var(--space-4); line-height:1.5; } /* ---------- Grilla de tarjetas ---------- */ .grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:var(--space-5); max-width:1300px; margin:0 auto; padding:0 var(--space-4); } .card{ background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--accent); border-radius:var(--radius-lg); padding:var(--space-4); display:flex; flex-direction:column; align-items:center; text-align:center; } .logo-box{ width:100%; aspect-ratio:1.6/1; border:2px dashed var(--border); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; background:var(--surface-2); overflow:hidden; margin-bottom:var(--space-3); } .logo-box img{ width:100%; height:100%; object-fit:contain; } .logo-box .placeholder{ color:var(--muted); font-size:var(--fs-small); padding:var(--space-2); } .site-name{ font-weight:700; font-size:1.05rem; margin-bottom:var(--space-3); color:var(--text); } .percent{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--space-2) var(--space-3); width:100%; font-weight:700; color:var(--success); font-size:var(--fs-body); min-height:1.4em; } .percent:empty:before{ content:"—"; color:var(--muted); font-weight:400; } .percent-label{ font-size:var(--fs-xs); color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-top:var(--space-2); margin-bottom:var(--space-3); } .link-row{ display:flex; gap:var(--space-2); width:100%; } .link-btn{ flex:1; display:block; text-align:center; padding:var(--space-2) var(--space-1); border-radius:var(--radius-sm); font-size:var(--fs-xs); font-weight:700; text-decoration:none; text-transform:uppercase; letter-spacing:0.5px; border:1px solid transparent; } .link-btn.player{ background:rgba(46,204,113,0.12); color:var(--success); border-color:rgba(46,204,113,0.4); } .link-btn.admin{ background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 40%, transparent); } .link-btn.disabled{ background:var(--surface-2); color:var(--muted); border-color:var(--border); pointer-events:none; } .empty-msg{ grid-column:1 / -1; text-align:center; color:var(--muted); padding:var(--space-7); } /* ---------- Footer / Telegram ---------- */ footer{ position:fixed; bottom:0; left:0; width:100%; background:linear-gradient(to top, var(--bg) 70%, transparent); padding:var(--space-5) 0 var(--space-6); text-align:center; z-index:50; } .telegram-btn{ display:inline-flex; align-items:center; gap:var(--space-2); background:linear-gradient(135deg, var(--brand-telegram), var(--brand-telegram-dark)); color:#fff; text-decoration:none; font-weight:700; padding:var(--space-3) var(--space-6); border-radius:var(--radius-pill); font-size:1rem; box-shadow:0 6px 20px rgba(34,158,217,0.4); } .telegram-btn svg{ width:22px; height:22px; fill:#fff; } .admin-link{ position:fixed; top:var(--space-2); right:var(--space-2); font-size:var(--fs-xs); color:var(--muted); text-decoration:none; opacity:0.4; } .admin-link:hover{ opacity:1; } /* ============================================================ PANEL DE ADMIN (usa el mismo sistema, tema por defecto) ============================================================ */ .admin-h1{ text-align:center; font-size:var(--fs-h2); color:var(--accent); text-transform:uppercase; letter-spacing:2px; margin:0 0 var(--space-6); font-weight:800; } #loginBox{ max-width:340px; margin:var(--space-8) auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-6); } #loginBox input{ width:100%; padding:var(--space-3) var(--space-3); margin-bottom:var(--space-3); border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-family:var(--font-sans); font-size:var(--fs-body); } #loginBox button{ width:100%; } #loginError{ color:var(--danger); font-size:var(--fs-small); margin-top:var(--space-1); min-height:1em; } button{ background:linear-gradient(135deg, var(--accent), var(--accent-dark)); color:var(--accent-ink); border:none; padding:var(--space-3) var(--space-4); border-radius:var(--radius-sm); font-weight:700; font-size:var(--fs-small); font-family:var(--font-sans); cursor:pointer; } button.danger{ background:linear-gradient(135deg, var(--danger), var(--danger-dark)); color:#fff; } button.secondary{ background:var(--surface-2); color:var(--text); border:1px solid var(--border); } #panel{ display:none; max-width:1100px; margin:0 auto; } .topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-5); flex-wrap:wrap; gap:var(--space-3); } .topbar-user{ color:var(--muted); font-size:var(--fs-small); } .topbar-actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; } .collection-tabs{ display:flex; gap:var(--space-3); margin-bottom:var(--space-5); } .collection-tabs button{ background:var(--surface-2); color:var(--muted); border:1px solid var(--border); } .collection-tabs button.active{ background:linear-gradient(135deg, var(--accent), var(--accent-dark)); color:var(--accent-ink); border-color:transparent; } .config-card, .site-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-4); margin-bottom:var(--space-4); display:flex; gap:var(--space-4); align-items:center; flex-wrap:wrap; } .config-card label{ min-width:140px; font-size:var(--fs-body); } .config-card input{ flex:1; min-width:200px; padding:var(--space-3) var(--space-3); border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-family:var(--font-sans); font-size:var(--fs-body); } .site-card .logo-box{ width:110px; height:70px; aspect-ratio:unset; margin-bottom:0; cursor:pointer; flex-shrink:0; } .site-card .logo-box span{ color:var(--muted); font-size:var(--fs-xs); text-align:center; padding:var(--space-1); } .site-card .fields{ flex:1; display:flex; flex-direction:column; gap:var(--space-2); min-width:260px; } .site-card .fields .row{ display:flex; gap:var(--space-2); flex-wrap:wrap; } .site-card .fields input{ padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-family:var(--font-sans); font-size:var(--fs-small); } .site-card .fields input.name{ flex:1.5; min-width:150px; font-weight:700; font-size:var(--fs-body); } .site-card .fields input.percent{ flex:1; min-width:140px; color:var(--success); font-weight:700; } .site-card .fields input.order{ width:70px; } .site-card .fields input.playerUrl, .site-card .fields input.adminUrl{ flex:1; min-width:200px; } .site-card .actions{ display:flex; gap:var(--space-2); align-self:flex-start; align-items:center; } .click-stats{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); font-size:var(--fs-xs); color:var(--muted); margin-top:var(--space-1); } .click-stats strong{ color:var(--text); } .click-stats button{ padding:var(--space-1) var(--space-2); font-size:var(--fs-xs); } .saved-flag{ font-size:var(--fs-xs); color:var(--success); opacity:0; transition:opacity 0.3s; white-space:nowrap; } .saved-flag.show{ opacity:1; } #addBtn{ margin-bottom:var(--space-5); }