/* ================================================================ NAVBAR — Referencia visual MacroJuegos ---------------------------------------------------------------- Este archivo es SOLO CSS. No toca JS, API, sesión ni Neon. Cargarlo al final del , DESPUÉS de theme-canonical.css. ================================================================ */ /* ================================================================ 0. FIX ESTRUCTURAL MÓVIL — la navbar pierde el flex en mobile ---------------------------------------------------------------- css/inicio.css trae una capa vieja ("NAVBAR RETRO / ESTILO MACROJUEGOS") que fuerza `.navbar { display: grid !important; }` con columnas fijas pensadas para escritorio, sin ningún @media que las adapte a pantallas chicas. Como esta hoja se carga después, reafirmamos acá el flex SOLO en mobile: así vuelven a funcionar el order/flex-wrap de abajo (que ya estaban escritos para flex) y el toggle deja de quedar cortado fuera de pantalla. No toca nada del layout de escritorio (ese grid queda intacto). */ @media (max-width: 768px) { body.macro-consolidado .navbar, body.mr-root .navbar, .navbar { display: flex !important; } } /* ================================================================ 1. TOP BAR — fondo, estructura y espaciado ================================================================ */ .navbar { background: linear-gradient(180deg, #1e0c3a 0%, #150a28 100%); border-bottom: 1px solid #3a1f70; padding: 0 28px; /* sin padding vertical: cada hijo lo maneja */ gap: 0 12px; flex-wrap: wrap; align-items: stretch; /* hijos se estiran en altura */ } /* Espaciado interno de los ítems de la fila principal */ .nav-logo, .nav-boton-comunidad { padding-top: 11px; padding-bottom: 11px; align-self: center; } /* ================================================================ 2. LOGO ================================================================ */ .nav-logo { color: #f4f1fb; font-family: var(--font-display); font-size: 18px; letter-spacing: 0.3px; gap: 10px; } .nav-logo img { width: 34px; height: 34px; filter: drop-shadow(0 0 6px rgba(200, 160, 255, 0.45)); } /* ================================================================ 3. BOTÓN "COMUNIDAD" → pink/magenta (referencia MacroJuegos) ================================================================ */ .nav-boton-comunidad { background: linear-gradient(135deg, #e91e8c 0%, #c2185b 100%) !important; color: #fff !important; font-size: 12px; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; padding: 8px 18px; border-radius: 999px; box-shadow: 0 2px 14px rgba(233, 30, 140, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; } .nav-boton-comunidad:hover { background: linear-gradient(135deg, #f525a0 0%, #d81b60 100%) !important; box-shadow: 0 4px 20px rgba(233, 30, 140, 0.55) !important; transform: translateY(-1px); } /* ================================================================ 4. BUSCADOR (inyectado por buscador.js) ================================================================ */ .nav-buscador { flex: 1; max-width: 300px; position: relative; align-self: center; padding: 11px 0; } /* Caja de búsqueda: campo + botón */ .buscador-caja { display: flex; align-items: center; height: 34px; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px; overflow: hidden; transition: border-color 0.15s ease, background 0.15s ease; } .buscador-caja:focus-within { border-color: rgba(255, 255, 255, 0.30); background: rgba(255, 255, 255, 0.13); } /* Ícono lupa (izquierda del input) */ .buscador-icono { flex-shrink: 0; padding: 0 6px 0 10px; color: rgba(200, 180, 255, 0.40); font-size: 12px; line-height: 1; pointer-events: none; } /* Campo de texto */ .buscador-input { flex: 1 1 0; min-width: 0; background: transparent !important; border: none !important; outline: none !important; color: #f4f1fb !important; font-family: var(--font-body); font-size: 13px; padding: 0 6px !important; height: 100%; } .buscador-input::placeholder { color: rgba(200, 180, 255, 0.38) !important; } /* Botón naranja de búsqueda (referencia: MacroJuegos) */ .buscador-submit { flex-shrink: 0; width: 42px; height: 100%; background: #f97316 !important; border: none !important; border-radius: 0 !important; cursor: pointer; color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; } /* El