/* ========================================================================== MACRO REBORN — INICIO Paleta y tipografía alineadas a la identidad ya usada en comunidad.css / chat.css / amigos.css (slate oscuro + dorado #f0b429), llevada a un tratamiento más elaborado propio del landing. SISTEMA DE TEMAS ----------------- Todo el sitio se pinta a partir de estas variables. El modo oscuro es el predeterminado (:root) y queda exactamente igual que siempre. El modo claro se activa agregando data-tema="claro" en (lo hace js/tema.js) y solo redefine el VALOR de las mismas variables: como el resto de los archivos CSS ya consume estos tokens con var(...), el modo claro se propaga solo a navbar, tarjetas, botones, formularios, comentarios, chat, noticias, etc. sin tener que duplicar reglas. ========================================================================== */ :root { /* Fondos — paleta púrpura de comunidad-ranking.css, ahora global */ --bg-deep: #0c0616; --bg-base: #150a28; --bg-panel: #241145; --bg-panel-alt: #2f1a5c; --line: #3d2166; --line-hover: #55348f; --navbar-bg: rgba(21, 10, 40, 0.92); /* Acentos */ --gold: #f0b429; --gold-bright: #ffd666; --gold-deep: #a8710f; --cyan: #38bdf8; --green: #35d488; --accent: #7c3aed; --accent-color: #8b5cf6; --accent-soft: #c084fc; --text-on-accent: #241804; /* Texto */ --text-main: #f4f1fb; --text-muted: #b6a9d6; --text-secondary: #d8cff0; --text-placeholder: #8b7fb0; /* Estados */ --danger: #ff6b6b; --danger-light: #fca5a5; --success-light: #86efac; --warning-bg: rgba(240, 180, 41, 0.12); --success-bg: rgba(53, 212, 136, 0.12); --danger-bg: rgba(255, 107, 107, 0.12); /* Estados interactivos */ --control-bg: rgba(255, 255, 255, 0.05); --control-hover: rgba(255, 255, 255, 0.10); --control-border: rgba(255, 255, 255, 0.10); --focus-ring: rgba(56, 189, 248, 0.22); /* Podio (ranking) */ --podio-plata: #dbe3ee; --podio-bronce: #e3a374; /* Sombras */ --sombra-suave: 0 14px 30px rgba(0, 0, 0, 0.45); --chip-bg: rgba(36, 17, 69, 0.6); --font-display: 'Orbitron', 'Arial Narrow', Arial, sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --notch: 14px; /* ---- Look "clásico" (mismos tokens que usan css/perfil.css, css/usuario.css y css/insignias.css) expuestos acá a nivel global para que TODAS las páginas del sitio -no solo perfil/usuario- puedan usar paneles, cabeceras y chapas con el mismo estilo. ---- */ --clasico-fuente: Verdana, Geneva, Tahoma, sans-serif; --clasico-borde: #6d3fd1; --clasico-radio: 10px; --clasico-plate: linear-gradient(180deg, #5b3aa0 0%, #2a1150 100%); --clasico-header: linear-gradient(180deg, #2f1a5c 0%, #241145 100%); --clasico-avatar-fondo: linear-gradient(180deg, #1f0f3d 0%, #0c0616 100%); } /* ---- Modo claro ---- Mismas variables, valores pensados para fondo claro: fondo principal gris muy suave, tarjetas blancas, texto oscuro y los mismos acentos dorado/celeste/verde de siempre pero ajustados para tener buen contraste sobre blanco. */ /* ========================================================================== PALETAS DE PERSONALIZACIÓN — inspiradas en el concepto ThemeContext de Morpho No reemplazan el sistema oscuro/claro: solo cambian acentos y líneas. ========================================================================== */ html[data-paleta="neon"] { --warning-bg:rgba(34,211,238,.12); --success-bg:rgba(52,211,153,.12); --danger-bg:rgba(248,113,113,.12); --control-bg:rgba(255,255,255,.045); --control-hover:rgba(255,255,255,.10); --control-border:rgba(34,211,238,.16); --focus-ring:rgba(34,211,238,.25); --gold: #67e8f9; --gold-bright: #a5f3fc; --gold-deep: #0891b2; --cyan: #22d3ee; --green: #34d399; --line-hover: #0ea5e9; } html[data-paleta="arcade"] { --warning-bg:rgba(251,113,133,.12); --success-bg:rgba(132,204,22,.12); --danger-bg:rgba(244,63,94,.13); --control-bg:rgba(255,255,255,.045); --control-hover:rgba(255,255,255,.10); --control-border:rgba(251,113,133,.16); --focus-ring:rgba(244,63,94,.25); --gold: #fb7185; --gold-bright: #fda4af; --gold-deep: #be123c; --cyan: #f59e0b; --green: #84cc16; --line-hover: #e11d48; } html[data-paleta="clasica"] { --warning-bg:rgba(217,169,40,.12); --success-bg:rgba(74,222,128,.12); --danger-bg:rgba(239,68,68,.12); --control-bg:rgba(255,255,255,.045); --control-hover:rgba(255,255,255,.10); --control-border:rgba(217,169,40,.16); --focus-ring:rgba(217,169,40,.22); --gold: #f0b429; --gold-bright: #ffe08a; --gold-deep: #a8710f; --cyan: #60a5fa; --green: #4ade80; --line-hover: #b7791f; } /* ========================================================================== PRESETS COMPLETOS DE PALETA La paleta ya no cambia únicamente el acento: cada preset define un conjunto coherente de fondo, panel, bordes, navbar y colores de estado. Las variantes claras mantienen el mismo carácter visual sobre fondos luminosos. ========================================================================== */ html[data-paleta="macro"] { --warning-bg:rgba(240,180,41,.12); --success-bg:rgba(53,212,136,.12); --danger-bg:rgba(255,107,107,.12); --control-bg:rgba(255,255,255,.05); --control-hover:rgba(255,255,255,.10); --control-border:rgba(255,255,255,.10); --focus-ring:rgba(56,189,248,.22); --bg-deep:#0c0616; --bg-base:#150a28; --bg-panel:#241145; --bg-panel-alt:#2f1a5c; --line:#3d2166; --line-hover:#55348f; --navbar-bg:rgba(21,10,40,.92); --gold:#f0b429; --gold-bright:#ffd666; --gold-deep:#a8710f; --cyan:#38bdf8; --green:#35d488; --accent:#7c3aed; --accent-color:#8b5cf6; --accent-soft:#c084fc; --chip-bg:rgba(36,17,69,.6); } html[data-paleta="neon"] { --bg-deep:#061219; --bg-base:#091b25; --bg-panel:#0d2935; --bg-panel-alt:#123a49; --line:#18566a; --line-hover:#22d3ee; --navbar-bg:rgba(9,27,37,.93); --gold:#22d3ee; --gold-bright:#a5f3fc; --gold-deep:#0891b2; --cyan:#38bdf8; --green:#34d399; --accent:#06b6d4; --accent-color:#22d3ee; --accent-soft:#a5f3fc; --chip-bg:rgba(13,41,53,.72); } html[data-paleta="arcade"] { --bg-deep:#1a0711; --bg-base:#260b18; --bg-panel:#3a1224; --bg-panel-alt:#4a1a2e; --line:#702344; --line-hover:#e11d48; --navbar-bg:rgba(38,11,24,.93); --gold:#fb7185; --gold-bright:#fda4af; --gold-deep:#be123c; --cyan:#f59e0b; --green:#84cc16; --accent:#f43f5e; --accent-color:#fb7185; --accent-soft:#fda4af; --chip-bg:rgba(58,18,36,.72); } html[data-paleta="clasica"] { --bg-deep:#0b111d; --bg-base:#121b2b; --bg-panel:#1b2940; --bg-panel-alt:#243653; --line:#365274; --line-hover:#c38a1a; --navbar-bg:rgba(18,27,43,.94); --gold:#d9a928; --gold-bright:#ffe08a; --gold-deep:#9a6b12; --cyan:#60a5fa; --green:#4ade80; --accent:#d9a928; --accent-color:#f0b429; --accent-soft:#ffe08a; --chip-bg:rgba(27,41,64,.72); } html[data-tema="claro"] { /* Variante clara de la misma identidad púrpura: fondo lavanda muy claro, paneles blancos, texto violeta oscuro. Así el botón de tema vuelve a tener efecto visible mientras se mantiene la paleta de comunidad-ranking (en vez de volver al celeste/gris original). */ --bg-deep: #ece7f5; --bg-base: #f6f3fb; --bg-panel: #ffffff; --bg-panel-alt: #f1ecfa; --line: #ddd0f0; --line-hover: #c7b3e8; --navbar-bg: rgba(255, 255, 255, 0.92); --gold: #92600a; --gold-bright: #b8790d; --gold-deep: #7a5108; --cyan: #0284c7; --green: #15803d; --text-main: #241145; --text-muted: #6d5a94; --text-secondary: #4a3a72; --text-placeholder: #9484b8; --danger: #dc2626; --danger-light: #b91c1c; --success-light: #15803d; --podio-plata: #7c6a9c; --podio-bronce: #b45309; --sombra-suave: 0 10px 26px rgba(60, 30, 90, 0.12); --chip-bg: rgba(255, 255, 255, 0.75); --control-bg: rgba(36, 17, 69, 0.05); --control-hover: rgba(36, 17, 69, 0.09); --control-border: rgba(36, 17, 69, 0.12); --focus-ring: rgba(2, 132, 199, 0.20); --warning-bg: rgba(240, 180, 41, 0.12); --success-bg: rgba(21, 128, 61, 0.12); --danger-bg: rgba(220, 38, 38, 0.10); --clasico-borde: #8b5cf6; --clasico-plate: linear-gradient(180deg, #8b6fd1 0%, #5b3aa0 100%); --clasico-header: linear-gradient(180deg, #f3eefb 0%, #e0d3f7 100%); --clasico-avatar-fondo: linear-gradient(180deg, #ede4fa 0%, #c9adf0 100%); } /* Variantes claras de cada preset: mantienen contraste y personalidad. */ html[data-tema="claro"][data-paleta="macro"] { --bg-deep:#ece7f5; --bg-base:#f6f3fb; --bg-panel:#fff; --bg-panel-alt:#f1ecfa; --line:#ddd0f0; --line-hover:#c7b3e8; --navbar-bg:rgba(255,255,255,.92); --gold:#92600a; --gold-bright:#b8790d; --gold-deep:#7a5108; --cyan:#0284c7; --green:#15803d; --text-main:#241145; --text-muted:#6d5a94; --text-secondary:#4a3a72; --text-placeholder:#9484b8; --accent:#7c3aed; --accent-color:#8b5cf6; --accent-soft:#c084fc; --chip-bg:rgba(255,255,255,.75); --control-bg:rgba(36,17,69,.05); --control-hover:rgba(36,17,69,.09); --control-border:rgba(36,17,69,.12); --focus-ring:rgba(2,132,199,.20); --warning-bg:rgba(240,180,41,.12); --success-bg:rgba(21,128,61,.10); --danger-bg:rgba(220,38,38,.10); } html[data-tema="claro"][data-paleta="neon"] { --bg-deep:#e5f8fc; --bg-base:#f2fbfd; --bg-panel:#fff; --bg-panel-alt:#e8f8fb; --line:#bde8f2; --line-hover:#67d8eb; --navbar-bg:rgba(255,255,255,.94); --gold:#0e7490; --gold-bright:#0369a1; --gold-deep:#155e75; --cyan:#0284c7; --green:#047857; --text-main:#0c2630; --text-muted:#4c7180; --text-secondary:#274856; --text-placeholder:#6f8f9a; --accent:#0891b2; --accent-color:#06b6d4; --accent-soft:#a5f3fc; --chip-bg:rgba(232,248,251,.9); --control-bg:rgba(12,38,48,.04); --control-hover:rgba(12,38,48,.08); --control-border:rgba(8,145,178,.14); --focus-ring:rgba(2,132,199,.20); --warning-bg:rgba(240,180,41,.12); --success-bg:rgba(21,128,61,.10); --danger-bg:rgba(220,38,38,.10); } html[data-tema="claro"][data-paleta="arcade"] { --bg-deep:#fff0f4; --bg-base:#fff7f9; --bg-panel:#fff; --bg-panel-alt:#fff0f3; --line:#f0c3cf; --line-hover:#f08aa2; --navbar-bg:rgba(255,255,255,.94); --gold:#be123c; --gold-bright:#be123c; --gold-deep:#9f1239; --cyan:#b45309; --green:#4d7c0f; --text-main:#3c1220; --text-muted:#7c4b59; --text-secondary:#5b2a38; --text-placeholder:#9a6976; --accent:#e11d48; --accent-color:#f43f5e; --accent-soft:#fda4af; --chip-bg:rgba(255,240,243,.88); --control-bg:rgba(60,18,32,.04); --control-hover:rgba(60,18,32,.08); --control-border:rgba(225,29,72,.14); --focus-ring:rgba(225,29,72,.20); --warning-bg:rgba(240,180,41,.12); --success-bg:rgba(21,128,61,.10); --danger-bg:rgba(220,38,38,.10); } html[data-tema="claro"][data-paleta="clasica"] { --bg-deep:#edf2f8; --bg-base:#f6f8fb; --bg-panel:#fff; --bg-panel-alt:#eef3f8; --line:#cfdae7; --line-hover:#b38a30; --navbar-bg:rgba(255,255,255,.94); --gold:#8a650e; --gold-bright:#a87810; --gold-deep:#70510b; --cyan:#2563eb; --green:#15803d; --text-main:#172033; --text-muted:#5e6b7d; --text-secondary:#334155; --text-placeholder:#7b8795; --accent:#a87810; --accent-color:#c08c1d; --chip-bg:rgba(238,243,248,.9); --control-bg:rgba(23,32,51,.04); --control-hover:rgba(23,32,51,.08); --control-border:rgba(23,32,51,.12); --focus-ring:rgba(37,99,235,.20); --warning-bg:rgba(240,180,41,.12); --success-bg:rgba(21,128,61,.10); --danger-bg:rgba(220,38,38,.10); } /* Transición suave al alternar entre modo oscuro y claro */ html { transition: background-color 0.25s ease; } .mr-root, .mr-root *, .aviso-suspension, .navbar { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } /* ---- reset local (no toca body global de style.css porque no se incluye) ---- */ .mr-root * { box-sizing: border-box; } .mr-root { background: var(--bg-base); color: var(--text-main); font-family: var(--font-body); line-height: 1.5; overflow-x: hidden; } .mr-root a { color: inherit; text-decoration: none; } .mr-root img { max-width: 100%; display: block; } .mr-root ::selection { background: var(--gold); color: #1a1204; } /* Panel con esquinas cortadas (detalle "cartucho" que se repite como firma visual) */ .mr-notched { clip-path: polygon( var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch) ); } @media (prefers-reduced-motion: reduce) { .mr-root * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ========================================================================== AVISO DE CUENTA SUSPENDIDA Se inyecta desde js/motor/permisos.js arriba de todo el contenido. ========================================================================== */ .aviso-suspension { position: sticky; top: 0; z-index: 999; background: #3a0f14; color: #ffb4b4; border-bottom: 1px solid #7a1f27; font-family: var(--font-body); font-weight: 700; font-size: 14px; text-align: center; padding: 10px 16px; } /* ========================================================================== NAVBAR ========================================================================== */ .navbar { background: var(--navbar-bg); backdrop-filter: blur(8px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 32px; border-bottom: 2px solid var(--gold); position: sticky; top: 0; z-index: 200; } .nav-logo { display: flex; align-items: center; gap: 10px; color: var(--gold); font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; } .nav-logo img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(240, 180, 41, 0.6)); } /* ---- Botón "Comunidad" (pastilla violeta, igual que la referencia) ---- */ .nav-boton-comunidad { flex-shrink: 0; background: linear-gradient(135deg, #9333ea, #7e22ce); color: #fff; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; padding: 9px 16px; border-radius: 999px; white-space: nowrap; transition: transform 0.15s ease, box-shadow 0.15s ease; } .nav-boton-comunidad:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(147, 51, 234, 0.4); } /* ---- Fila superior derecha: sesión / monedas / ayuda ---- */ /* .nav-links queda casi vacío en el HTML: navbar.js inyecta acá adentro la campanita + monedas + ayuda + usuario (o Entrar/Registrarse). */ .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; margin-left: auto; } .nav-links a { color: var(--text-secondary); font-size: 13.5px; font-weight: 600; padding: 8px 12px; border-radius: 8px; transition: color 0.15s ease, background 0.15s ease; } .nav-links a:hover { color: var(--gold-bright); background: var(--bg-panel-alt); } /* Links inyectados dinámicamente por navbar.js (login/registro o perfil/notif/logout) */ .nav-links a.sesion-extra { border: 1px solid var(--line); } .nav-links a.sesion-extra:hover { border-color: var(--gold); } /* Monedas (🪙) — mismo saldo que se gasta en el Centro de avatares */ .nav-monedas { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 800; font-size: 12.5px; color: var(--gold-bright); background: rgba(240, 180, 41, 0.1); border: 1px solid rgba(240, 180, 41, 0.3); border-radius: 999px; padding: 7px 12px; white-space: nowrap; } /* Botón de ayuda (❔) */ .nav-ayuda { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); color: var(--text-secondary); font-weight: 800; font-size: 13px; flex-shrink: 0; } .nav-ayuda:hover { border-color: var(--gold); color: var(--gold-bright); background: var(--bg-panel-alt); } /* ---- "Usuario temporal" (invitado): abre un login rápido desplegable, mismo patrón que la campanita de notificaciones. ---- */ .user-guest-wrap { position: relative; display: inline-flex; } .user-guest-boton { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px 5px 5px; font: inherit; cursor: pointer; color: var(--text-main); transition: border-color 0.15s ease, background 0.15s ease; } .user-guest-boton:hover { border-color: var(--gold); background: var(--bg-panel-alt); } .user-guest-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-panel-alt); border: 1px solid var(--line); font-size: 15px; flex-shrink: 0; } .user-guest-badge { position: absolute; bottom: -3px; left: -3px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--green); color: #06280f; font-size: 9.5px; font-weight: 800; line-height: 15px; text-align: center; border: 2px solid var(--navbar-bg); } .user-guest-nombre { font-size: 13px; font-weight: 700; white-space: nowrap; } .user-guest-dropdown { position: absolute; top: calc(100% + 10px); right: 0; width: 260px; max-width: 88vw; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sombra-suave); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 200; overflow: hidden; text-align: left; } .user-guest-dropdown.abierto { opacity: 1; transform: translateY(0); pointer-events: auto; } .user-guest-dropdown-header { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--text-main); } .user-guest-form { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; } .user-guest-input { width: 100%; box-sizing: border-box; background: var(--bg-panel-alt); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; color: var(--text-main); font-family: var(--font-body); font-size: 13px; outline: none; transition: border-color 0.15s ease; } .user-guest-input::placeholder { color: var(--text-placeholder); } .user-guest-input:focus { border-color: var(--gold); } .user-guest-mensaje { display: none; font-size: 12px; font-weight: 600; padding: 2px 2px 0; } .user-guest-mensaje.visible { display: block; } .user-guest-mensaje.error { color: var(--danger); } .user-guest-mensaje.exito { color: var(--success-light); } .user-guest-login-boton { align-self: flex-start; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #1a1204; font-weight: 800; font-size: 12.5px; border: none; border-radius: 999px; padding: 8px 20px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; } .user-guest-login-boton:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(240, 180, 41, 0.35); } .user-guest-login-boton:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; } .user-guest-dropdown-footer { padding: 10px 14px; text-align: center; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-secondary); } .user-guest-dropdown-footer a { font-weight: 700; color: var(--gold-bright); } .user-guest-dropdown-footer a:hover { text-decoration: underline; } /* ---- Menú de usuario logueado: mismo desplegable de "Usuario temporal", pero con los accesos a las secciones del perfil en vez del login. ---- */ .user-menu-lista { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; } .user-menu-lista a { display: block; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--text-main); border-bottom: 1px solid var(--line); transition: background 0.15s ease, color 0.15s ease; } .user-menu-lista a:last-child { border-bottom: none; } .user-menu-lista a:hover { background: var(--bg-panel-alt); color: var(--gold-bright); } /* ---- Fila inferior: categorías / navegación del sitio ---- */ /* Barra ancha tipo "menú de secciones", con la sección activa resaltada en naranja (misma idea que la referencia). */ .nav-categorias { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 4px; background: var(--bg-panel-alt); border: 1px solid var(--line); border-radius: 10px; padding: 6px; margin-top: 2px; } .nav-categorias a { color: var(--text-secondary); font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 7px; white-space: nowrap; transition: color 0.15s ease, background 0.15s ease; } .nav-categorias a:hover { color: var(--text-main); background: var(--bg-panel); } .nav-categorias a.activa-nav { background: linear-gradient(135deg, #fb923c, #ea580c); color: #fff; } .nav-categorias a.activa-nav:hover { color: #fff; background: linear-gradient(135deg, #fb923c, #ea580c); } /* ========================================================================== MENÚ HAMBURGUESA (navbar en pantallas chicas) El botón lo inyecta js/nav-toggle.js (mismo patrón que navbar.js / tema.js: agrega markup en runtime sin tocar el HTML de cada página). En desktop queda oculto y el navbar se ve exactamente como siempre. ========================================================================== */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; background: var(--bg-panel-alt); border: 1px solid var(--line); border-radius: 8px; color: var(--text-main); cursor: pointer; padding: 0; } .nav-toggle:hover { border-color: var(--gold); } .nav-toggle-barra { position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 2px; } .nav-toggle-barra::before, .nav-toggle-barra::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-toggle-barra::before { top: -6px; } .nav-toggle-barra::after { top: 6px; } .nav-toggle[aria-expanded="true"] .nav-toggle-barra { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle-barra::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-barra::after { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 768px) { .navbar { padding: 12px 16px; } .nav-toggle { display: inline-flex; order: 2; } .nav-logo { order: 1; } .nav-boton-comunidad { order: 2; } .nav-buscador { order: 3; flex: 1 1 100%; } /* El panel de links + categorías pasa a ser un desplegable a todo lo ancho, oculto hasta que se toca el botón hamburguesa. Los dos quedan dentro del mismo desplegable (js/nav-toggle.js togglea ambos a la vez), uno arriba del otro. */ .nav-links, .nav-categorias { order: 5; display: none; width: 100%; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px; margin-top: 0; } .nav-links { order: 5; margin-top: 10px; max-height: none; } .nav-categorias { order: 6; margin-top: 6px; } .nav-links.nav-abierto, .nav-categorias.nav-abierto { display: flex; } .nav-links a, .nav-categorias a, .nav-links button.boton-tema { width: 100%; box-sizing: border-box; text-align: left; justify-content: flex-start; padding: 13px 14px; font-size: 15px; border-radius: 8px; } .nav-categorias a.activa-nav { background: linear-gradient(135deg, #fb923c, #ea580c); } /* El botón de tema (sol/luna) se ve como un ítem más de la lista, con su etiqueta (misma que ya trae en aria-label) en vez de quedar como un círculo suelto. */ .nav-links button.boton-tema { display: flex; align-items: center; gap: 10px; height: auto; margin: 2px 0 0; } .nav-links button.boton-tema::after { content: attr(aria-label); font-size: 14px; font-weight: 600; color: var(--text-secondary); } /* "Usuario temporal" dentro del desplegable hamburguesa: el botón pasa a ocupar todo el ancho como el resto de los ítems, y su propio desplegable de login se despliega hacia abajo en vez de flotar. */ .user-guest-wrap { width: 100%; } .user-guest-boton { width: 100%; justify-content: flex-start; padding: 10px 14px; border-radius: 8px; } .user-guest-dropdown { position: static; width: 100%; max-width: 100%; margin-top: 8px; opacity: 1; transform: none; pointer-events: none; max-height: 0; border: none; box-shadow: none; transition: max-height 0.2s ease; } .user-guest-dropdown.abierto { pointer-events: auto; max-height: 400px; border: 1px solid var(--line); } } /* ========================================================================== HERO ========================================================================== */ .hero { position: relative; min-height: calc(100vh - 70px); display: flex; align-items: center; justify-content: center; padding: 60px 24px 80px; overflow: hidden; background: radial-gradient(ellipse 900px 500px at 50% -10%, rgba(240, 180, 41, 0.16), transparent 60%), radial-gradient(ellipse 700px 500px at 85% 100%, rgba(56, 189, 248, 0.08), transparent 60%), linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-base) 55%, var(--bg-base) 100%); } /* Fondo tipo "grid" de arcade + scanlines, puramente decorativo */ .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(240, 180, 41, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(240, 180, 41, 0.05) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black 40%, transparent 90%); pointer-events: none; } .hero::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( 180deg, rgba(0, 0, 0, 0.12) 0px, rgba(0, 0, 0, 0.12) 1px, transparent 2px, transparent 4px ); opacity: 0.35; pointer-events: none; } .orbe { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; pointer-events: none; animation: flotar 12s ease-in-out infinite; } .orbe-1 { width: 320px; height: 320px; background: var(--gold); top: -60px; left: -80px; animation-delay: 0s; } .orbe-2 { width: 260px; height: 260px; background: var(--cyan); bottom: -60px; right: -60px; animation-delay: -4s; } .orbe-3 { width: 180px; height: 180px; background: var(--gold-deep); top: 40%; right: 8%; opacity: 0.3; animation-delay: -8s; } @keyframes flotar { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(20px, -25px) scale(1.08); } } .hero-contenido { position: relative; z-index: 2; max-width: 780px; text-align: center; display: flex; flex-direction: column; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-bright); background: rgba(240, 180, 41, 0.08); border: 1px solid rgba(240, 180, 41, 0.35); padding: 8px 16px; border-radius: 999px; margin-bottom: 28px; } .eyebrow .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: parpadeo 2s ease-in-out infinite; } @keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .logo-wrapper { width: 108px; height: 108px; margin-bottom: 22px; filter: drop-shadow(0 0 24px rgba(240, 180, 41, 0.45)); animation: subir 4.5s ease-in-out infinite; } @keyframes subir { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } #logo { width: 100%; height: 100%; object-fit: contain; } .titulo-principal { font-family: var(--font-display); font-size: clamp(38px, 7vw, 68px); font-weight: 900; letter-spacing: 1px; margin: 0; background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 40px rgba(240, 180, 41, 0.25); } .subtitulo { color: var(--cyan); font-size: 17px; letter-spacing: 3px; text-transform: uppercase; margin: 14px 0 0; font-weight: 600; } .descripcion { color: var(--text-muted); font-size: 17px; max-width: 520px; margin: 20px 0 0; } /* ---- Bienvenida dinámica (invitado / usuario con sesión) ---- */ .bienvenida-usuario { margin-top: 30px; display: flex; align-items: center; gap: 14px; background: var(--bg-panel); border: 2px solid var(--clasico-borde); border-left: 4px solid var(--gold); padding: 14px 20px; border-radius: var(--clasico-radio); } .bienvenida-usuario .avatar-mini { width: 44px; height: 44px; /* Antes era un círculo (border-radius:50%). Ahora usa el mismo marco cuadrado ornamentado con destellos en las esquinas que el resto de los avatares del sitio. */ border-radius: 8px; border: 2px solid var(--gold); box-shadow: inset 0 0 0 2px var(--gold-deep); object-fit: cover; background: var(--bg-panel-alt); /* FIX: ahora es un
(contenedor de las capas del avatar real, ver avatarMiniaturaHTML en js/core.js) en vez de un suelto, así que necesita position:relative + overflow:hidden para que las capas absolutas queden recortadas dentro del cuadrado. */ position: relative; overflow: hidden; flex-shrink: 0; } .bienvenida-usuario .avatar-mini::before, .bienvenida-usuario .avatar-mini::after { content: ""; position: absolute; width: 12px; height: 12px; background: radial-gradient(circle at 35% 35%, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%); clip-path: polygon(50% 0%, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0% 50%, 39% 38%); filter: drop-shadow(0 0 2px rgba(240, 180, 41, .8)); pointer-events: none; z-index: 2; } .bienvenida-usuario .avatar-mini::before { top: 1px; left: 1px; } .bienvenida-usuario .avatar-mini::after { bottom: 1px; right: 1px; } .bienvenida-usuario .texto b { color: var(--gold-bright); } .bienvenida-usuario .texto span { display: block; color: var(--text-muted); font-size: 13px; margin-top: 2px; } .menu-inicio { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; } .boton { font-family: var(--font-body); font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; display: inline-flex; align-items: center; gap: 8px; } .boton-primario { background: linear-gradient(135deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep)); color: var(--text-on-accent); box-shadow: 0 6px 20px rgba(240, 180, 41, 0.28); } .boton-primario:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(240, 180, 41, 0.4); } .boton-secundario { background: var(--bg-panel); color: var(--text-main); border-color: var(--line); } .boton-secundario:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-2px); } .estado-servidor { margin-top: 30px; display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-size: 13.5px; font-weight: 600; letter-spacing: 0.3px; } .estado-servidor .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); } .scroll-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: var(--text-muted); font-size: 22px; opacity: 0.6; animation: rebote 1.8s ease-in-out infinite; } @keyframes rebote { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* ========================================================================== ACCESOS RÁPIDOS ========================================================================== */ .accesos { position: relative; z-index: 2; max-width: 1100px; margin: -46px auto 0; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; } .acceso-card { background: var(--bg-panel); border: 2px solid var(--clasico-borde); padding: 20px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .acceso-card .icono { font-size: 26px; } .acceso-card span { font-size: 13px; font-weight: 700; color: var(--text-main); } .acceso-card:hover { transform: translateY(-4px); border-color: var(--gold); background: var(--bg-panel-alt); } .acceso-card, .card-ofrece { border-radius: var(--clasico-radio); } /* ========================================================================== SECCIÓN "QUÉ OFRECE" ========================================================================== */ .seccion { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 90px 24px 40px; } .seccion-cabecera { text-align: center; max-width: 640px; margin: 0 auto 48px; } .seccion-eyebrow { font-family: var(--font-display); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); } .seccion-cabecera h2 { font-family: var(--font-display); font-size: clamp(24px, 4vw, 32px); margin: 12px 0 14px; color: var(--text-main); } .seccion-cabecera p { color: var(--text-muted); font-size: 15.5px; } .grid-ofrece { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; } .card-ofrece { background: linear-gradient(180deg, var(--bg-panel), var(--bg-base)); border: 2px solid var(--clasico-borde); padding: 26px 24px; position: relative; transition: transform 0.2s ease, border-color 0.2s ease; } .card-ofrece:hover { transform: translateY(-5px); border-color: var(--gold-deep); } .card-ofrece .icono { font-size: 30px; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 12px; background: rgba(240, 180, 41, 0.1); border: 1px solid rgba(240, 180, 41, 0.25); margin-bottom: 16px; } .card-ofrece h3 { font-size: 17px; margin: 0 0 8px; color: var(--gold-bright); font-family: var(--clasico-fuente); } .card-ofrece p { font-size: 14px; color: var(--text-muted); margin: 0; } /* ========================================================================== BANDA NOSTALGIA ========================================================================== */ .banda-nostalgia { position: relative; z-index: 1; margin: 90px 0 0; padding: 34px 24px; text-align: center; background: var(--bg-panel); border-top: 2px solid var(--clasico-borde); border-bottom: 2px solid var(--clasico-borde); } .banda-nostalgia p { font-family: var(--font-display); font-size: 13px; letter-spacing: 1.5px; color: var(--text-muted); text-transform: uppercase; } .banda-nostalgia p b { color: var(--gold); } /* ========================================================================== FOOTER ========================================================================== */ .pie-footer { position: relative; z-index: 1; background: var(--bg-deep); border-top: 2px solid var(--gold); padding: 56px 24px 24px; } .pie-contenido { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } .pie-marca { display: flex; flex-direction: column; gap: 10px; } .pie-marca .nav-logo { font-size: 20px; } .pie-marca p { color: var(--text-muted); font-size: 13.5px; max-width: 260px; } .pie-columna h4 { font-family: var(--font-display); font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; } .pie-columna a { display: block; color: var(--text-muted); font-size: 14px; margin-bottom: 10px; transition: color 0.15s ease; width: fit-content; } .pie-columna a:hover { color: var(--gold-bright); } .pie-inferior { max-width: 1100px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--text-muted); font-size: 13px; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 900px) { .pie-contenido { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .hero { padding: 44px 18px 70px; } .titulo-principal { font-size: clamp(32px, 10vw, 44px); } .bienvenida-usuario { flex-direction: column; text-align: center; } .accesos { grid-template-columns: repeat(3, 1fr); margin-top: -30px; } .seccion { padding: 60px 18px 30px; } } @media (max-width: 480px) { .accesos { grid-template-columns: repeat(2, 1fr); } .menu-inicio { flex-direction: column; width: 100%; } .boton { width: 100%; justify-content: center; } .pie-contenido { grid-template-columns: 1fr; } } /* ========================================================================== PORTADAS DE JUEGOS (imagen real en vez de emoji) Se comparte entre catálogo, destacados, favoritos, últimos jugados y ficha de juego. Cada página sigue definiendo tamaño/marco de .juego-imagen / .juego-grande en su propio CSS (juegos.css, perfil.css, juego.css); acá solo se resuelve cómo encaja la imagen (o el placeholder) adentro de ese marco. ========================================================================== */ .juego-imagen, .juego-grande { overflow: hidden; } .juego-imagen img, .juego-grande img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } /* Estado cuando falta la imagen de un juego o no llega a cargar */ .placeholder-juego { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); background: repeating-linear-gradient( 135deg, rgba(240, 180, 41, 0.05), rgba(240, 180, 41, 0.05) 10px, transparent 10px, transparent 20px ); } .placeholder-juego span { opacity: 0.5; } /* ========================================================================== BOTON DE LIKE (comentarios de perfil, chat, reseñas) Vive acá (en vez de en un css por página) porque se usa en varias: perfil.html, usuario.html, chat.html y juego.html. ========================================================================== */ .boton-like { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-panel-alt); color: var(--cyan); border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px; font-size: 13px; font-weight: bold; cursor: pointer; } .boton-like:hover { background: var(--bg-panel); border-color: var(--cyan); } .boton-like:active { transform: scale(0.95); } .boton-like.like-activo { background: rgba(248, 113, 113, 0.14); color: var(--danger); border-color: var(--danger); } .like-icono { font-size: 14px; } .like-contador { min-width: 10px; text-align: left; } /* ========================================================================== BOTON DE TEMA (sol / luna) — inyectado por js/tema.js en el navbar ========================================================================== */ .boton-tema { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 4px; background: var(--bg-panel-alt); color: var(--text-main); border: 1px solid var(--line); border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; } .boton-tema:hover { border-color: var(--gold); background: var(--bg-panel); transform: translateY(-1px); } .boton-tema:active { transform: scale(0.92); } /* Páginas sin navbar (login / registro): el botón queda flotando */ .boton-tema-flotante { position: fixed; top: 18px; right: 18px; z-index: 500; box-shadow: var(--sombra-suave); } /* ============================================================================ PORTAL HOME — nueva portada orientada a descubrir juegos ============================================================================ */ .portal-home-header { position: relative; overflow: hidden; min-height: 390px; display: flex; align-items: center; justify-content: center; padding: 64px 22px 58px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 50% 0%, rgba(240,180,41,.18), transparent 38%), radial-gradient(circle at 15% 80%, rgba(56,189,248,.10), transparent 28%), linear-gradient(180deg, var(--bg-deep), var(--bg-base)); } .portal-home-grid { position:absolute; inset:0; opacity:.35; pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:42px 42px; mask-image: radial-gradient(circle at 50% 20%, black, transparent 82%); } .portal-home-glow { position:absolute; width:260px; height:260px; border-radius:50%; filter:blur(60px); opacity:.18; pointer-events:none; } .portal-home-glow-1 { background:var(--gold); left:-100px; bottom:-130px; } .portal-home-glow-2 { background:var(--cyan); right:-90px; top:-110px; } .portal-home-contenido { position:relative; z-index:1; width:min(900px,100%); text-align:center; } .portal-home-titulo { margin:14px 0 10px; font-family:var(--font-display); font-size:clamp(34px,6vw,62px); line-height:1.05; color:var(--text-main); } .portal-home-subtitulo { max-width:680px; margin:0 auto; color:var(--text-muted); font-size:16px; } .portal-home-busqueda { display:flex; align-items:center; gap:10px; max-width:760px; margin:26px auto 14px; padding:7px 8px 7px 16px; background:var(--bg-panel); border:2px solid var(--clasico-borde); border-radius:14px; box-shadow:0 18px 45px rgba(0,0,0,.28); } .portal-home-busqueda:focus-within { border-color:var(--gold); box-shadow:0 0 0 4px rgba(240,180,41,.12), 0 18px 45px rgba(0,0,0,.28); } .portal-home-busqueda input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text-main); font:600 15px var(--font-body); } .portal-home-busqueda input::placeholder { color:var(--text-placeholder); } .portal-home-busqueda button { border:0; border-radius:10px; padding:12px 18px; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#251902; font-weight:800; cursor:pointer; } .portal-home-accesos { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; } .portal-home-accesos a { padding:8px 12px; border:1px solid var(--line); background:rgba(36,17,69,.7); border-radius:999px; color:var(--text-secondary); font-size:12.5px; font-weight:700; } .portal-home-accesos a:hover { border-color:var(--gold); color:var(--text-main); transform:translateY(-1px); } .portal-home-main { max-width:1240px; margin:0 auto; padding:8px 18px 70px; } .portal-seccion { padding:42px 0 0; } .portal-seccion[hidden] { display:none !important; } .portal-seccion-header { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:18px; } .portal-seccion-header h2 { margin:2px 0 0; font-family:var(--font-display); font-size:clamp(20px,3vw,28px); color:var(--text-main); } .portal-seccion-header a { color:var(--gold-bright); font-size:13px; font-weight:800; white-space:nowrap; } .portal-kicker { color:var(--text-muted); font-size:10px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; } .portal-catalogo-total { color:var(--text-muted); font-size:12px; } .portal-catalogo-total b { color:var(--gold-bright); } .portal-juego-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; } .portal-juego-grid-feature { grid-template-columns:repeat(6,minmax(0,1fr)); } .portal-juego-card { min-width:0; } .portal-juego-link { display:block; overflow:hidden; background:linear-gradient(180deg,var(--bg-panel),var(--bg-base)); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.18); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; } .portal-juego-link:hover { transform:translateY(-4px); border-color:var(--gold); box-shadow:0 16px 30px rgba(0,0,0,.3); } .portal-juego-imagen { position:relative; aspect-ratio:16/10; overflow:hidden; background:radial-gradient(circle,var(--bg-panel-alt),var(--bg-deep)); } .portal-juego-imagen img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; } .portal-juego-link:hover .portal-juego-imagen img { transform:scale(1.05); } .portal-juego-badge { position:absolute; top:7px; left:7px; max-width:calc(100% - 14px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:4px 7px; border-radius:999px; background:rgba(8,4,20,.76); border:1px solid rgba(255,255,255,.12); color:var(--gold-bright); font-size:9px; font-weight:800; } .portal-juego-overlay { position:absolute; inset:auto 8px 8px; display:flex; justify-content:center; opacity:0; transform:translateY(4px); transition:.18s ease; } .portal-juego-overlay span { padding:8px 18px; border-radius:999px; background:var(--gold); color:var(--text-on-accent); font-size:11px; font-weight:900; } .portal-juego-link:hover .portal-juego-overlay { opacity:1; transform:translateY(0); } .portal-juego-info { padding:10px 11px 11px; } .portal-juego-info h3 { margin:0 0 4px; color:var(--text-main); font-size:13px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .portal-juego-meta { color:var(--text-muted); font-size:10.5px; } .portal-vacio { grid-column:1/-1; padding:26px; text-align:center; border:1px dashed var(--line); border-radius:12px; color:var(--text-muted); } .portal-categorias-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } .portal-categoria-card { display:flex; align-items:center; gap:10px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--bg-panel); } .portal-categoria-card:hover { border-color:var(--gold); transform:translateY(-2px); } .portal-categoria-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:var(--bg-panel-alt); font-size:18px; } .portal-categoria-card strong { display:block; color:var(--text-main); font-size:13px; } .portal-categoria-card small { color:var(--text-muted); font-size:10px; } .portal-home-community { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:48px; padding:24px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg,var(--bg-panel),var(--bg-panel-alt)); } .portal-home-community h2 { margin:3px 0 4px; font-family:var(--font-display); font-size:22px; } .portal-home-community p { margin:0; color:var(--text-muted); font-size:13px; max-width:650px; } .portal-community-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; } .portal-community-actions a { padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg-base); color:var(--text-secondary); font-size:12px; font-weight:800; } .portal-community-actions a:hover { border-color:var(--gold); color:var(--gold-bright); } @media (max-width:1050px){ .portal-juego-grid,.portal-juego-grid-feature{grid-template-columns:repeat(3,minmax(0,1fr));} .portal-categorias-grid{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:680px){ .portal-home-header{min-height:340px;padding:46px 16px 40px;} .portal-home-busqueda{padding-left:12px;} .portal-home-busqueda button{padding:11px 13px;} .portal-juego-grid,.portal-juego-grid-feature{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} .portal-seccion-header{align-items:flex-start;} .portal-home-community{flex-direction:column;align-items:flex-start;} .portal-community-actions{justify-content:flex-start;} } @media (max-width:430px){ .portal-categorias-grid{grid-template-columns:1fr;} .portal-home-subtitulo{font-size:14px;} .portal-home-titulo{font-size:34px;} } /* ============================================================================ PORTAL HOME 2.0 — ampliación segura sobre los estilos existentes ============================================================================ */ .portal-seccion-personal { margin-top: 4px; } .portal-dashboard-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr); gap:14px; } .portal-dashboard-card { background:linear-gradient(145deg,var(--bg-panel),var(--bg-base)); border:1px solid var(--line); border-radius:16px; padding:18px; min-width:0; box-shadow:0 12px 28px rgba(0,0,0,.18); } .portal-dashboard-card:hover { border-color:var(--line-hover); } .portal-profile-line { display:flex; align-items:center; gap:14px; } .portal-dashboard-avatar { position:relative; width:58px; height:58px; flex:0 0 58px; display:grid; place-items:center; border-radius:15px; background:var(--bg-panel-alt); border:1px solid var(--line); overflow:hidden; } .portal-dashboard-avatar img,.portal-dashboard-avatar .avatar-compuesto { width:100%; height:100%; object-fit:cover; } .portal-dashboard-card h3 { margin:0; font-family:var(--font-display); font-size:18px; color:var(--text-main); } .portal-dashboard-card p { margin:2px 0 0; color:var(--text-muted); font-size:12px; } .portal-xp-track { height:9px; margin:17px 0 5px; border-radius:999px; overflow:hidden; background:var(--bg-deep); border:1px solid var(--line); } .portal-xp-track span { display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--gold)); border-radius:inherit; } .portal-xp-label { display:flex; justify-content:space-between; gap:10px; color:var(--text-muted); font-size:10px; } .portal-stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; } .portal-stat-row span { padding:10px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.02); text-align:center; } .portal-stat-row b { display:block; color:var(--gold-bright); font-size:12px; } .portal-stat-row small { display:block; margin-top:2px; color:var(--text-muted); font-size:9px; } .portal-dashboard-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .portal-dashboard-actions a { padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg-base); color:var(--text-secondary); font-size:11px; font-weight:800; } .portal-dashboard-actions a:hover { border-color:var(--gold); color:var(--gold-bright); } .portal-dashboard-card-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; } .portal-dashboard-card-head a { color:var(--gold-bright); font-size:11px; font-weight:800; } .portal-amigos-mini-list { display:grid; gap:8px; } .portal-amigo-mini { display:flex; align-items:center; gap:10px; padding:9px; border:1px solid var(--line); border-radius:11px; background:var(--bg-base); } .portal-amigo-mini:hover { border-color:var(--gold); transform:translateY(-1px); } .portal-amigo-avatar { position:relative; width:35px; height:35px; flex:0 0 35px; display:grid; place-items:center; overflow:hidden; border-radius:50%; background:var(--bg-panel-alt); border:1px solid var(--line); } .portal-amigo-avatar img,.portal-amigo-avatar .avatar-compuesto { width:100%; height:100%; object-fit:cover; } .portal-amigo-mini b { display:block; color:var(--text-main); font-size:11px; } .portal-amigo-mini small { display:block; color:var(--text-muted); font-size:9px; margin-top:1px; } @media (max-width:900px){ .portal-dashboard-grid{grid-template-columns:1fr;} } @media (max-width:560px){ .portal-stat-row{grid-template-columns:repeat(2,1fr);} .portal-dashboard-card{padding:14px;} } /* ==========================================================================\n MACROREBORN - NAVBAR RETRO / ESTILO MACROJUEGOS\n Capa visual global. Conserva el logo y los enlaces del proyecto.\n ========================================================================== */\n .navbar, body.mr-root .navbar, body.macro-consolidado .navbar { --retro-top: #080d1b; --retro-mid: #182a73; --retro-bottom: #2d087f; --retro-blue: #405cd6; --retro-blue-dark: #1f2f82; --retro-orange: #f47b20; --retro-orange-dark: #ce5d0f; --retro-text: #f8f9ff; --retro-muted: #d8dcf8; width: 100%; min-height: 72px; margin: 0; padding: 0 12px; display: grid !important; grid-template-columns: auto auto minmax(170px, 420px) minmax(0, 1fr); grid-template-rows: 41px 31px; grid-template-areas: "logo community search actions" "categories categories categories categories"; align-items: stretch; gap: 0 10px; position: sticky; top: 0; z-index: 5000; overflow: visible; background: linear-gradient(180deg, #070b17 0%, #0d1325 100%) !important; border: 0 !important; border-bottom: 1px solid #131c39 !important; box-shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 7px 18px rgba(0,0,0,.35); backdrop-filter: none; } .navbar .nav-logo { grid-area: logo; align-self: center; justify-self: start; display: flex !important; align-items: center; gap: 0; width: 136px; height: 41px; padding: 0; color: transparent !important; font-size: 0 !important; line-height: 0; overflow: hidden; white-space: nowrap; } .navbar .nav-logo img { width: 43px !important; height: 43px !important; max-width: none !important; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); } .navbar .nav-boton-comunidad { grid-area: community; align-self: center; justify-self: start; display: inline-flex !important; align-items: center; justify-content: center; height: 24px; min-width: 94px; padding: 0 13px !important; margin: 0; border-radius: 2px !important; border: 1px solid #aa2fff; background: linear-gradient(#be3df2, #8d13c8) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 0 rgba(0,0,0,.6); font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .15px; white-space: nowrap; } .navbar .nav-boton-comunidad:hover { transform: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 1px 0 rgba(0,0,0,.65), 0 0 0 1px rgba(202,83,255,.35); } .navbar .nav-retro-busqueda { grid-area: search; align-self: center; display: flex; min-width: 0; height: 25px; margin: 0; padding: 0; border: 0; } .navbar .nav-retro-busqueda input { min-width: 0; width: 100%; height: 25px; padding: 0 10px; border: 1px solid #6c7082; border-right: 0; border-radius: 2px 0 0 2px; outline: none; background: #f6f6f8; color: #20232d; font-family: Arial, Helvetica, sans-serif; font-size: 12px; box-sizing: border-box; } .navbar .nav-retro-busqueda input::placeholder { color: #777d8c; } .navbar .nav-retro-busqueda input:focus { border-color: #8d93a8; box-shadow: 0 0 0 1px rgba(110,112,160,.25); } .navbar .nav-retro-busqueda button { width: 45px; height: 25px; padding: 0; border: 1px solid #9a5720; border-radius: 0 2px 2px 0; background: linear-gradient(#ff953e, #e36a13); color: #fff; font-size: 14px; line-height: 23px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); } .navbar .nav-retro-busqueda button:hover { filter: brightness(1.08); } .navbar .nav-links { grid-area: actions; justify-self: end; align-self: center; display: flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: flex-end; gap: 7px !important; min-width: 0; margin: 0 !important; padding: 0 !important; } .navbar .nav-links > a:not(.sesion-extra) { display: none; } .navbar .nav-links .sesion-extra { border: 0 !important; border-radius: 2px !important; background: transparent !important; color: var(--retro-text) !important; box-shadow: none !important; } .navbar .nav-monedas { display: inline-flex !important; align-items: center; height: 24px; padding: 0 8px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #f0d45d !important; font-family: Arial, Helvetica, sans-serif; font-size: 12px !important; font-weight: 700 !important; white-space: nowrap; } .navbar .nav-monedas::first-letter { color: #f6cd4b; } .navbar .nav-ayuda { width: 25px !important; height: 25px !important; padding: 0 !important; border-radius: 2px !important; border: 1px solid #7a8190 !important; background: linear-gradient(#eceff3, #c9cdd5) !important; color: #424754 !important; font-family: Arial, Helvetica, sans-serif; font-size: 15px !important; line-height: 23px; } .navbar .nav-ayuda:hover { background: linear-gradient(#ffffff, #dfe3e8) !important; color: #252b38 !important; } .navbar .notif-bell-boton { width: 25px; height: 25px; padding: 0 !important; border: 1px solid #596176 !important; border-radius: 2px !important; background: #202940 !important; color: #f4f5f9 !important; font-size: 13px !important; } .navbar .notif-bell-boton:hover { background: #2a3554 !important; } .navbar .user-guest-wrap { position: relative; display: inline-flex; } .navbar .user-guest-boton { height: 33px; min-width: 154px; max-width: 220px; padding: 0 8px 0 3px !important; gap: 7px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #fff !important; box-shadow: none !important; text-align: left; } .navbar .user-guest-boton:hover { border: 0 !important; background: rgba(255,255,255,.03) !important; } .navbar .user-guest-avatar { width: 25px !important; height: 25px !important; border-radius: 2px !important; border: 1px solid #727989 !important; background: linear-gradient(#e9edf2, #c4c9d1) !important; color: transparent !important; font-size: 0 !important; flex: 0 0 25px; position: relative; } .navbar .user-guest-avatar::before { content: "?"; color: #575d68; font: 700 16px/23px Arial, Helvetica, sans-serif; } .navbar .user-guest-badge { bottom: -4px !important; right: -4px !important; left: auto !important; min-width: 15px !important; height: 15px !important; padding: 0 !important; border: 1px solid #1b6735 !important; border-radius: 2px !important; background: #54d36f !important; color: #082611 !important; font: 800 10px/13px Arial, Helvetica, sans-serif !important; } .navbar .user-guest-nombre { position: relative; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f5f6fb !important; font: 700 12px/14px Arial, Helvetica, sans-serif !important; padding-top: 10px; } .navbar .user-guest-nombre::before { content: "Entrar con tu cuenta"; position: absolute; left: 0; top: 0; color: #f1c73b; font: 700 11px/11px Arial, Helvetica, sans-serif; } .navbar .nav-app-grid { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; position: relative; color: transparent !important; border-radius: 2px; } .navbar .nav-app-grid::before { content: ""; width: 15px; height: 15px; display: block; background: radial-gradient(circle, #eef1f8 2px, transparent 2.5px) 0 0/6px 6px; opacity: .9; } .navbar .nav-app-grid:hover { background: rgba(255,255,255,.06); } .navbar .nav-categorias { grid-area: categories; flex: none !important; width: 100%; min-width: 0; min-height: 31px; margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: stretch; gap: 0 !important; overflow-x: auto; overflow-y: hidden; border: 0 !important; border-radius: 0 !important; background: linear-gradient(180deg, #34499f 0%, #1f2e78 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.34); scrollbar-width: thin; scrollbar-color: #6274c7 transparent; } .navbar .nav-categorias::-webkit-scrollbar { height: 4px; } .navbar .nav-categorias::-webkit-scrollbar-thumb { background: #6677c6; } .navbar .nav-categorias a { flex: 0 0 auto; height: 31px; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; padding: 0 13px !important; border-right: 1px solid rgba(15,26,75,.7); border-radius: 0 !important; color: #f3f5ff !important; background: transparent !important; font: 700 12px/31px Arial, Helvetica, sans-serif !important; white-space: nowrap; box-shadow: none !important; text-shadow: 0 1px 1px rgba(0,0,0,.3); } .navbar .nav-categorias a:first-child { border-left: 0; } .navbar .nav-categorias a:hover { color: #fff !important; background: rgba(73,95,184,.42) !important; } .navbar .nav-categorias a.activa-nav, .navbar .nav-categorias a.nav-retro-todos { background: linear-gradient(180deg, #ff963c 0%, #e76913 100%) !important; color: #fff !important; border-right-color: #a9450c; } .navbar .nav-categorias a.activa-nav:hover, .navbar .nav-categorias a.nav-retro-todos:hover { background: linear-gradient(180deg, #ffa44f 0%, #ed741d 100%) !important; } .navbar .nav-categorias a.nav-retro-todos { font-weight: 800 !important; } /* Dropdowns: mantenerlos por encima de la barra inferior. */ .navbar .user-guest-dropdown, .navbar .notif-dropdown { z-index: 6000 !important; } /* En páginas con modo claro la barra sigue pareciendo la referencia. */ html[data-tema="claro"] .navbar, html[data-tema="claro"] nav.navbar { background: linear-gradient(180deg, #070b17 0%, #0d1325 100%) !important; border-bottom-color: #131c39 !important; } html[data-tema="claro"] .navbar .nav-categorias { background: linear-gradient(180deg, #34499f 0%, #1f2e78 100%) !important; } html[data-tema="claro"] .navbar .nav-categorias a { color: #f3f5ff !important; } @media (max-width: 900px) { .navbar { grid-template-columns: auto auto minmax(120px,1fr) auto; padding: 0 8px; } .navbar .nav-logo { width: 72px; } .navbar .nav-boton-comunidad { min-width: 82px; padding: 0 8px !important; } .navbar .nav-monedas { display: none !important; } .navbar .user-guest-boton { min-width: 132px; } } @media (max-width: 650px) { .navbar { min-height: 74px; grid-template-columns: auto auto 1fr auto; grid-template-rows: 43px 31px; gap: 0 6px; } .navbar .nav-logo { width: 54px; } .navbar .nav-logo img { width: 40px !important; height: 40px !important; } .navbar .nav-boton-comunidad { min-width: 76px; font-size: 11px !important; } .navbar .nav-retro-busqueda { min-width: 90px; } .navbar .nav-retro-busqueda input { font-size: 11px; } .navbar .nav-retro-busqueda button { width: 35px; } .navbar .user-guest-nombre::before { display: none; } .navbar .user-guest-nombre { padding-top: 0; } .navbar .user-guest-boton { min-width: 28px; width: 28px; padding: 0 !important; } .navbar .user-guest-nombre { display: none; } .navbar .nav-ayuda { display: none !important; } } /* ======================================================================== NAVBAR - WORDMARK MACROREBORN BASADO EN LA REFERENCIA MACROJUEGOS Sustituye únicamente el branding visual del extremo izquierdo. ======================================================================== */ .navbar .nav-logo { width: 169px !important; height: 64px !important; min-width: 169px !important; grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: start !important; justify-self: start !important; display: block !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: transparent url('../imagenes/navbar-macroreborn.png') no-repeat left top !important; background-size: 169px 64px !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; text-indent: -9999px !important; z-index: 20 !important; } .navbar .nav-logo img, .navbar .nav-logo::before, .navbar .nav-logo::after { display: none !important; content: none !important; } .navbar .nav-categorias { padding-left: 169px !important; } @media (max-width: 900px) { .navbar .nav-logo { width: 148px !important; min-width: 148px !important; height: 56px !important; background-size: 148px 56px !important; } .navbar .nav-categorias { padding-left: 148px !important; } } @media (max-width: 560px) { .navbar .nav-logo { width: 118px !important; min-width: 118px !important; height: 45px !important; background-size: 118px 45px !important; } .navbar .nav-categorias { padding-left: 118px !important; } }