/* CINTA SUPERIOR DEL LOBBY, copiada de assets/portada/portada.css (reglas #pt .pt-hdr...). La foto de la cinta (header.webp) y el logo estan en modules/launchpad/img/. */ #pt{ background:#000; --bg:#000000; --bg2:#050709; --lift:#0e1319; --surf:#12161c; --line:#1c232b; --line2:#29313b; --gold:#E8B84B; --gold-hi:#f4d089; --gold-md:#cf9f2e; --gold-lo:#8f6a1a; --on-gold:#241900; --ink:#eaecef; --ink2:#a7b0bb; --ink3:#79838f; --ink4:#565f6b; --up:#2ebd85; --down:#f6465d; --disp:"Chakra Petch",system-ui,sans-serif; --sans:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --max:1200px; --gut:clamp(18px,3.4vw,44px); font-family:var(--sans); font-size:15px; line-height:1.62; color:var(--ink); } body{overflow-x:hidden} #pt a{color:inherit;text-decoration:none} #pt .pt-hdr button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} /* solo cabecera: antes pisaba los botones del panel de listado */ #pt img, #pt svg{display:block;max-width:100%} #pt :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:5px} #pt .pt-hdr{ position:sticky;top:0;z-index:100; transition:transform .3s cubic-bezier(.22,.85,.3,1); display:flex;align-items:center;height:58px; background:#07090c;border-bottom:1px solid #1a2029; } #pt .pt-hdr::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:url('./img/header.webp'); background-size:cover;background-position:center; opacity:1; } #pt .pt-hdr__in{position:relative;z-index:2} #pt .pt-nav__b, #pt .pt-logo{flex:0 0 auto;display:flex;align-items:center;text-shadow:0 1px 4px rgba(0,0,0,.9)} #pt .pt-hdr.pt-stuck{border-bottom-color:#232b36} #pt .pt-hdr.pt-oculta{transform:translateY(-100%)} #pt .pt-hdr__in{display:flex;align-items:center;gap:0;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)} #pt .pt-logo img{height:40px;width:auto} #pt .pt-nav{display:flex;align-items:center;gap:2px;flex:0 1 auto;margin-left:14px} #pt .pt-nav__i{position:relative} #pt .pt-nav__b{display:flex;align-items:center;gap:5px;font-size:13.5px;font-weight:500;color:var(--ink2);padding:8px 11px;border-radius:8px;transition:color .15s,background .15s} #pt .pt-nav__b:hover{color:var(--ink);background:rgba(255,255,255,.045)} #pt .pt-nav__b svg{width:10px;height:10px;opacity:.55;transition:transform .2s} #pt .pt-nav__i:hover .pt-nav__b svg{transform:rotate(180deg)} #pt .pt-menu{ position:absolute;top:calc(100% + 8px);left:0;z-index:300;min-width:236px;padding:7px; background:var(--surf);border:1px solid var(--line2);border-radius:12px; box-shadow:0 20px 44px rgba(0,0,0,.6); opacity:0;visibility:hidden;transform:translateY(-5px); transition:opacity .17s,transform .17s,visibility .17s; } #pt .pt-nav__i:hover .pt-menu, #pt .pt-nav__i:focus-within .pt-menu{opacity:1;visibility:visible;transform:none} #pt .pt-menu a{display:block;padding:9px 11px;border-radius:8px;transition:background .14s} #pt .pt-menu a:hover{background:rgba(232,184,75,.07)} #pt .pt-menu b{display:block;font-size:13.5px;font-weight:600} #pt .pt-menu span{display:block;font-size:12px;line-height:1.42;color:var(--ink3);margin-top:1px} #pt .pt-hdr__a{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto} /* ---- Pagina del launchpad ---- */ /* En el lobby el contenido de la cinta va en una banda centrada de 1200px. Aqui la cinta ocupa TODO el ancho: 'Back' pegado a la esquina izquierda, la capsula de wallet pegada a la derecha, y el menu con sitio de sobra (sin partir 'Wallet Shield'). */ #pt .pt-hdr__in{max-width:none;padding:0 14px} #pt .pt-nav__b{white-space:nowrap} #pt-chispas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;display:block} /* Fondo propio del launchpad: modules/launchpad/img/fondo-launchpad.webp (la sube el usuario). Hasta que exista, degradado oscuro. Encima, un velo suave para que las tarjetas se lean sobre cualquier foto. */ #pt{min-height:100vh;background:#000;position:relative} #pt .sw-fondo{position:fixed;inset:0;z-index:0;pointer-events:none;background:#000 url('./img/fondo-launchpad.webp') center/cover no-repeat;} #pt .sw-fondo::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(0,0,0,.15),rgba(0,0,0,.58) 70%)} /* velo mas suave */ #pt .pt-hdr{z-index:100} #colmena-app{position:relative;z-index:5;min-height:calc(100vh - 58px)} /* Back (izquierda) y capsula de wallet (derecha), con el mismo estilo de ficha del lobby */ #pt .sw-back{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 9px;border-radius:9px; font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink2);background:rgba(255,255,255,.05); border:1px solid var(--line2);text-shadow:0 1px 4px rgba(0,0,0,.9);margin-right:26px;white-space:nowrap} #pt .sw-back:hover{border-color:var(--gold-lo);color:var(--gold)} #pt .sw-back svg{width:12px;height:12px} @media(max-width:760px){ #pt .pt-nav{display:none} #pt .sw-back{padding:0 10px 0 8px} } @media(max-width:380px){ #pt .pt-logo img{height:28px} #pt .sw-back{margin-right:8px;padding:0 8px 0 6px} } /* Telefono: con el icono de perfil, la cinta se encoge para que la capsula de la wallet no se corte. */ @media(max-width:460px){ #pt .sw-back{margin-right:8px;padding:0 8px 0 6px;font-size:0;gap:0} #pt .sw-back svg{width:14px;height:14px} #pt .pt-logo img{height:30px} } @media(max-width:340px){ #pt .sw-back{flex:0 0 32px;min-width:32px;justify-content:center;padding:0;margin-right:6px} #pt .pt-logo img{height:24px} } /* Esquina derecha CALCADA del lobby (assets/portada/portada.css, reglas #pt .pt-wbox): perfil, capsula de la wallet (logo + 4 letras + flecha) y Contracts. */ #pt .pt-hdr__a{display:flex;align-items:center;gap:6px} #pt .pt-hdr__a .dir{ display:inline-flex !important;align-items:center;gap:7px; height:36px;box-sizing:border-box;white-space:nowrap; font-family:var(--mono);font-size:12px;font-weight:600; color:var(--ink2);background:rgba(255,255,255,.05); border:1px solid var(--line2);border-radius:9px;padding:0 12px; max-width:none;overflow:visible;cursor:pointer;margin:0; } #pt .pt-hdr__a .dir:hover{border-color:var(--gold-lo);color:var(--gold)} #pt .pt-hdr__a .dir.dir-con{font-family:var(--sans);font-weight:600;font-size:13px;color:var(--ink)} #pt .pt-hdr__a .dir-logo{width:16px;height:16px;flex:0 0 auto;border-radius:4px;object-fit:contain;display:block} #pt .pt-hdr__a .dir-punto{width:8px;height:8px;border-radius:50%;background:#2ebd85;box-shadow:0 0 8px #2ebd85;flex:0 0 auto} #pt .pt-hdr__a .dir-tx{font-family:var(--mono);font-size:12px;letter-spacing:.5px;font-weight:700;line-height:1} #pt .pt-hdr__a .dir-ch{ width:7px;height:7px;flex:0 0 auto;margin-left:1px;opacity:.65; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); } #pt .pt-hdr__a .c-perfil{ display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; width:36px;height:36px;border:1px solid var(--line2);border-radius:9px; color:var(--ink2);background:none;cursor:pointer; transition:color .16s,border-color .16s,background .16s; } #pt .pt-hdr__a .c-perfil svg{width:15px;height:15px} #pt .pt-hdr__a .c-perfil:hover{color:var(--gold);border-color:var(--gold-lo);background:rgba(232,184,75,.07)} #pt .pt-hdr__a .c-contratos{display:inline-flex;align-items:center;height:36px;margin-left:4px;padding:0 15px;border:1px solid #E8B84B;border-radius:9px;color:#E8B84B;background:rgba(232,184,75,.08);font-family:'Chakra Petch',system-ui,sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.3px;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.9)} #pt .pt-hdr__a .c-contratos:hover{background:rgba(232,184,75,.16)} @media(max-width:560px){#pt .pt-hdr__a .c-contratos{display:none}} #wsel{position:fixed;inset:0;z-index:9800} #wsel .wsel-bg{position:absolute;inset:0} #wsel .wsel-p{position:absolute;width:250px;max-width:calc(100vw - 20px);background:linear-gradient(180deg,#161b22,#0b0e12);border:1px solid var(--gold-md);border-radius:16px;padding:9px;box-shadow:0 22px 60px rgba(0,0,0,.72);animation:wselIn .14s ease both} @keyframes wselIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} #wsel .wsel-t{font-family:var(--mono);font-size:9.5px;color:var(--ink3);text-transform:uppercase;letter-spacing:.9px;padding:6px 9px 10px} #wsel .wsel-b{width:100%;display:flex;align-items:center;gap:10px;padding:11px;margin-bottom:6px;border-radius:11px;border:1px solid transparent;background:transparent;color:var(--ink);font-family:var(--sans);font-weight:700;font-size:14px;cursor:pointer;text-align:left;min-height:46px} #wsel .wsel-b:last-child{margin-bottom:0} #wsel .wsel-b:hover{background:rgba(255,255,255,.06);border-color:var(--line2)} #wsel .wsel-b.on{background:rgba(232,184,75,.1);border-color:rgba(232,184,75,.4)} #wsel .wsel-b img,#wsel .wsel-i{width:22px;height:22px;border-radius:6px;flex:0 0 auto;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--ink2)} #wsel .wsel-ok{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:#2ebd85} #wsel .wsel-v{font-size:12px;color:var(--ink3);padding:4px 9px 6px;line-height:1.45} @media(max-width:460px){#pt .pt-hdr__a .c-perfil{width:32px;height:32px}#pt .pt-hdr__a .dir{padding:0 9px;gap:6px}} /* La cinta lleva un item mas (Terminal). Para que los 11 quepan sin montarse ni empujar la esquina derecha fuera de la pantalla, se compacta por tramos y, en anchos intermedios, la nav se desliza en horizontal dentro de su hueco (sin barra visible) en vez de desbordar la pagina. */ @media(max-width:1340px){#pt .pt-nav__b{font-size:12.5px;padding:8px 8px}} @media(max-width:1200px){#pt .pt-nav{margin-left:8px}#pt .pt-nav__b{font-size:12px;padding:7px 6px;gap:4px}#pt .pt-logo img{width:124px;height:auto}} @media(max-width:1120px) and (min-width:761px){ #pt .pt-nav{flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)} #pt .pt-nav::-webkit-scrollbar{display:none} #pt .pt-hdr__a{flex:0 0 auto} } /* "Tools" es un