/* AllTime IoT · Main CSS */ :root { --bg:#04080d; --surface:#080f18; --surface2:#0c1824; --surface3:#111f2e; --green:#00ff88; --green2:#00cc6a; --gdim:rgba(0,255,136,.12); --blue:#00c8ff; --blue2:#0088cc; --bdim:rgba(0,200,255,.1); --gold:#ffd700; --amber:#ffaa00; --red:#ff4466; --purple:#b06aff; --text:#cde0f0; --text2:#9fb6cc; --text3:#6f8aa2; /* ⭐ REGLA de legibilidad: los grises deben LEERSE sobre el fondo oscuro. --text3 subió de #3a5a75 (muy tenue, ilegible) a #6f8aa2. NO bajar de ~#6a83; para texto realmente secundario usar opacidad, nunca un gris más oscuro que --text3. */ --border:rgba(0,200,255,.1); --border2:rgba(0,255,136,.15); --FD:'Orbitron',monospace; --FM:'JetBrains Mono',monospace; --FC:'Source Code Pro','Consolas','Menlo',monospace; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{width:100%;height:100%;overflow:hidden} body{background:var(--bg);color:var(--text);font-family:var(--FD);cursor:none;user-select:none} /* CURSOR — z-index máximo para que NUNCA quede oculto bajo ningún modal/overlay */ .CD,.CR{position:fixed;pointer-events:none;z-index:2147483647;transform:translate(-50%,-50%);left:-50px;top:-50px;opacity:0;transition:opacity .3s} .CD{width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 8px var(--green),0 0 20px rgba(0,255,136,.4)} .CR{width:28px;height:28px;border:1px solid rgba(0,255,136,.35);border-radius:50%;transition:width .2s,height .2s,opacity .3s} /* CANVAS */ #bgC{position:fixed;inset:0;z-index:0;opacity:.65} .SL{position:fixed;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.03) 3px,rgba(0,0,0,.03) 4px)} /* SCREENS */ .SCR{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .5s ease;overflow:visible} .SCR.active{opacity:1;pointer-events:all;visibility:visible} .SCR.scroll-y{overflow-y:auto;align-items:flex-start} /* 🔴 2026-08-17 · El panel docente empieza DEBAJO de la barra superior. `.SCR` es `position:fixed; inset:0`, o sea arranca en y=0, y la barra (.TNV) es fija y la tapa. Mientras no hay scroll no se nota, pero este panel es mas alto que la pantalla: en cuanto se desplaza un poco, su cabecera se mete bajo la barra y "Mis Aulas" y el boton NEXO salen cortados. Reiniciar el scroll no basta —cualquier focus o repintado vuelve a moverlo—; lo que hay que hacer es que el area con scroll NO empiece debajo de la barra. En movil (<=900px) `.SCR` pasa a `position:relative` y el desplazamiento lo lleva la pagina, asi que ahi no aplica. */ #sTeacher{top:var(--nav-h,56px)} /* 🔴 2026-09-08 · «El boton del nexo y de institucion se pierde, hasta el titulo de Mis Aulas». Carlos, en pantalla pequenia. El 17-ago se arreglo MEDIO problema: `#sTeacher{top:var(--nav-h)}` hace que el area con scroll empiece debajo de la barra, asi que la cabecera ya no se mete DEBAJO de ella. Pero sigue estando arriba del todo DENTRO de esa area: en cuanto el panel se desplaza —y con un docente con aulas se desplaza siempre— la cabecera se va por arriba y con ella las dos unicas salidas. > Poner la unica salida en la parte que se va con el scroll es lo mismo que > no ponerla: esta ahi hasta el momento en que hace falta. El 17-ago se intento `position:sticky` y se abandono porque «tapaba el contador de cupos». Tapaba porque la cabecera era de dos lineas y no tenia fondo: el contenido se veia a traves. Ahora es de una linea y lleva fondo solido, y las capturas a 1400/1177/900/700/420 con el panel desplazado lo comprueban. */ .tch-head{position:sticky;top:0;z-index:6;background:var(--bg,#04080d); padding:10px 0 12px;margin-bottom:4px;border-bottom:1px solid var(--border)} /* En movil el scroll lo lleva la PAGINA y la barra sigue fija encima, asi que la cabecera tiene que pegarse por debajo de ella, no en y=0. */ @media (max-width:900px){ .tch-head{top:var(--nav-h,56px)} } /* El boton NEXO del panel docente respira, para que se vea que esta ahi: es la unica salida hacia el curso y pasaba completamente desapercibido. */ .tnx-glow{transition:all .25s;box-shadow:0 0 0 0 rgba(0,255,136,.45);animation:_tnxPulse 2.8s ease-in-out infinite} .tnx-glow:hover{background:rgba(0,255,136,.18)!important;border-color:var(--green)!important;box-shadow:0 0 18px rgba(0,255,136,.35)!important;animation:none} @keyframes _tnxPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,255,136,.35)}50%{box-shadow:0 0 14px 2px rgba(0,255,136,.18)}} /* NAV */ /* 🔴 2026-09-08 · LA BARRA SE RECORTABA POR LA DERECHA. Medido en Chromium con este mismo CSS: a 700px de ancho se salían 107px fuera de la pantalla; a 420px, 353px — o sea `.NR` entera empezaba en x=441 con la ventana en 420. Y no era scroll: `scrollWidth === innerWidth`, así que lo que sobraba quedaba RECORTADO, no alcanzable. Se perdían MI RED, AULAS, el avatar y el botón de salir. Causa: `display:flex` sin `flex-wrap`. Los hijos no caben y se desbordan. > Un boton que no cabe no se encoge: se sale de la pantalla y deja de existir. Ahora la barra ENVUELVE. Como al envolver crece, su altura ya no es 56px fijos y las secciones que empiezan debajo la leen de `--nav-h` (la pone `_atMedirNav()` en app.js con un ResizeObserver). */ .TNV{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;column-gap:0;row-gap:10px;flex-wrap:wrap;padding:14px 36px;background:rgba(4,8,13,.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);opacity:0;pointer-events:none;transition:opacity .4s} .TNV.vis{opacity:1;pointer-events:all} .NL{font-family:var(--FD);font-size:13px;color:var(--green);letter-spacing:3px;flex-wrap:wrap;row-gap:8px;min-width:0} .NL span{color:var(--blue)} .NR{display:flex;align-items:center;gap:20px;flex-wrap:wrap;row-gap:8px;justify-content:flex-end} /* Sin `min-width:0` a proposito: con el, `.NR` se dejaba encoger por debajo de su contenido y partia en dos filas a 1177px, donde cabia de sobra (medido: sobraban 36px). Que la barra crezca esta bien; que crezca antes de que haga falta, no. */ .mired-nav{display:none;align-items:center;gap:6px;cursor:pointer;padding:6px 14px;border:1px solid rgba(0,200,255,.4);background:linear-gradient(90deg,rgba(0,200,255,.08),rgba(0,255,136,.05));transition:all .3s;position:relative;overflow:hidden} .mired-nav::after{content:'';position:absolute;inset:-1px;background:linear-gradient(90deg,rgba(0,200,255,.15),rgba(0,255,136,.1),rgba(0,200,255,.15));opacity:0;transition:opacity .3s} .mired-nav:hover{border-color:rgba(0,200,255,.7);box-shadow:0 0 16px rgba(0,200,255,.2),0 0 32px rgba(0,200,255,.08)} .mired-nav:hover::after{opacity:1} .mired-nav-txt{font-family:var(--FD);font-size:9px;letter-spacing:3px;color:var(--blue);font-weight:700;position:relative;z-index:1} @keyframes miredGlow{0%,100%{box-shadow:0 0 8px rgba(0,200,255,.15),0 0 20px rgba(0,200,255,.05)}50%{box-shadow:0 0 14px rgba(0,200,255,.3),0 0 32px rgba(0,200,255,.12)}} .mired-nav.glow{animation:miredGlow 2s ease-in-out infinite} .XP-bar{display:flex;align-items:center;gap:10px;font-family:var(--FM);font-size:13px;color:var(--text3);letter-spacing:1px;font-weight:600} .XP-track{width:80px;height:4px;background:var(--surface2);border:1px solid var(--border);overflow:hidden} .XP-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--blue));transition:width 1s ease} .NU{font-family:var(--FM);font-size:11px;color:var(--text2);display:flex;align-items:center;gap:8px} .ND{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 1.5s infinite} /* DEMO NAV */ .DNV{display:none} .DB{font-family:var(--FM);font-size:9px;letter-spacing:1px;color:var(--text3);background:transparent;border:1px solid transparent;padding:5px 10px;cursor:none;transition:all .2s} .DB:hover{color:var(--blue);border-color:var(--border)} .DB.cur{color:var(--green);border-color:var(--border2)} .DS{color:var(--text3);font-size:9px} /* BUTTONS */ .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--FM);font-size:11px;letter-spacing:2px;text-transform:uppercase;cursor:none;border:none;outline:none;transition:all .25s;padding:13px 26px;position:relative;overflow:hidden} .bP{background:transparent;border:1.5px solid var(--green);color:var(--green)} .bP::before{content:'';position:absolute;inset:0;background:var(--green);transform:translateX(-101%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:0} .bP:hover::before{transform:translateX(0)} .bP:hover{color:var(--bg);box-shadow:0 0 30px rgba(0,255,136,.4)} .bP>*{position:relative;z-index:1} .bB{background:transparent;border:1.5px solid var(--blue);color:var(--blue);font-weight:700;position:relative} .bB::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--blue),#0090d0);transform:translateX(-101%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:0} .bB:hover::before{transform:translateX(0)} .bB:hover{color:var(--bg);box-shadow:0 0 30px rgba(0,200,255,.4)} .bB>*{position:relative;z-index:1} .bG{background:linear-gradient(135deg,var(--gold),var(--amber));color:var(--bg);font-weight:700;border:none} .bG:hover{box-shadow:0 0 40px rgba(255,215,0,.5);transform:translateY(-2px)} .bPU{background:transparent;border:1.5px solid var(--purple);color:var(--purple);font-weight:700;position:relative} .bPU::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--purple),#7c3aed);transform:translateX(-101%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:0} .bPU:hover::before{transform:translateX(0)} .bPU:hover{color:#fff;box-shadow:0 0 30px rgba(176,106,255,.4)} .bPU>*{position:relative;z-index:1} .bA{background:transparent;border:1.5px solid var(--amber);color:var(--amber);font-weight:700;position:relative} .bA::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--amber),var(--gold));transform:translateX(-101%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:0} .bA:hover::before{transform:translateX(0)} .bA:hover{color:var(--bg);box-shadow:0 0 30px rgba(255,170,0,.4)} .bA>*{position:relative;z-index:1} .bR{background:transparent;border:1.5px solid var(--text3);color:var(--text3)} .bR:hover{border-color:var(--text2);color:var(--text2)} /* COMMON */ .TAG{font-family:var(--FM);font-size:10px;letter-spacing:2px;color:var(--green);border:1px solid var(--border2);padding:4px 10px;background:var(--gdim)} .card{background:var(--surface);border:1px solid var(--border);position:relative} .card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--blue),transparent)} .CK{position:absolute;width:12px;height:12px} .CK.tl{top:-1px;left:-1px;border-top:2px solid var(--green);border-left:2px solid var(--green)} .CK.tr{top:-1px;right:-1px;border-top:2px solid var(--green);border-right:2px solid var(--green)} .CK.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--blue);border-left:2px solid var(--blue)} .CK.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--blue);border-right:2px solid var(--blue)} /* CODE */ .CB{background:#040c14;border:1px solid var(--border);padding:16px;font-family:var(--FC);font-size:12px;line-height:1.9;letter-spacing:.3px} .CTB{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)} .CDS{display:flex;gap:5px} .CDT{width:9px;height:9px;border-radius:50%} .CDT.r{background:#ff5f57}.CDT.y{background:#ffbd2e}.CDT.g{background:#28ca41} .CLG{font-size:10px;color:var(--text3);letter-spacing:2px} .CPB{font-family:var(--FM);font-size:10px;color:var(--blue);background:transparent;border:1px solid var(--border);padding:3px 9px;cursor:none;transition:all .2s;letter-spacing:1px} .CPB:hover{border-color:var(--blue)} /* 🔴 2026-08-31 · «el código se ve desordenado» (Carlos). Dos fallos a la vez: 1) El HTML genera `` en MINÚSCULAS y aquí sólo existía `.LN` en mayúsculas. Los selectores de clase distinguen mayúsculas, así que las 1.472 etiquetas de número de línea del proyecto NO tenían ningún estilo: ni ancho, ni alineación, ni color. 2) `.CL` era `display:flex`, así que CADA de color (`kw`, `str`, `fn`…) se convertía en un ítem flex: los espacios literales entre ellos se colapsaban, el `gap:14px` metía aire entre cada token y la línea se partía por donde quería. Por eso `const char* mqtt_user` salía con el `char*` caído a otra fila. > El código se lee por su forma: si el espacio en blanco no se respeta, deja > de ser código y pasa a ser una lista de palabras. Ahora es un bloque con `pre-wrap` (respeta la sangría) y sangría francesa, de modo que una línea larga que se parte queda alineada bajo el código y no bajo el número. */ .CL{display:block;white-space:pre-wrap;padding-left:34px;text-indent:-34px} .CL .ln,.LN{display:inline-block;width:20px;margin-right:14px;color:var(--text3);text-align:right;font-size:10px;text-indent:0;user-select:none;-webkit-user-select:none} .kw{color:#cba6f7}.str{color:#a6e3a1}.fn{color:#89b4fa}.cm{color:#585b70}.num{color:#fab387}.hl{color:var(--green);font-weight:700}.op{color:#89dceb} /* ANIMS */ @keyframes blink{0%,100%{opacity:1}50%{opacity:0}} @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes scaleIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}} @keyframes slideDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,255,136,.4)}50%{box-shadow:0 0 0 12px rgba(0,255,136,0)}} @keyframes pinoutGlow{0%,100%{box-shadow:0 0 8px rgba(0,255,136,.3),inset 0 0 8px rgba(0,255,136,.05)}50%{box-shadow:0 0 20px rgba(0,255,136,.5),0 0 40px rgba(0,255,136,.15),inset 0 0 12px rgba(0,255,136,.08)}} .pinout-btn{width:100%;padding:14px 16px;background:linear-gradient(135deg,rgba(0,255,136,.1),rgba(0,200,255,.08));border:1.5px solid rgba(0,255,136,.4);color:var(--green);font-family:var(--FM);font-size:11px;font-weight:600;letter-spacing:2.5px;cursor:pointer;transition:all .25s;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden;animation:pinoutGlow 2.5s ease-in-out infinite} .pinout-btn::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,255,136,.12),transparent);transition:left .6s} .pinout-btn:hover::before{left:120%} .pinout-btn:hover{background:linear-gradient(135deg,rgba(0,255,136,.2),rgba(0,200,255,.15));border-color:var(--green);transform:translateY(-1px);box-shadow:0 0 30px rgba(0,255,136,.4),0 4px 20px rgba(0,0,0,.3)} .pinout-btn .pb-icon{font-size:16px;filter:drop-shadow(0 0 4px rgba(0,255,136,.6))} .pinout-btn .pb-arrow{opacity:.5;transition:transform .2s} .pinout-btn:hover .pb-arrow{opacity:1;transform:translateX(3px)} .pinout-btn.amber{background:linear-gradient(135deg,rgba(255,170,0,.1),rgba(255,215,0,.06));border-color:rgba(255,170,0,.4);color:var(--amber);animation-name:pinoutGlowAmber} .pinout-btn.amber:hover{background:linear-gradient(135deg,rgba(255,170,0,.2),rgba(255,215,0,.12));border-color:var(--amber);box-shadow:0 0 30px rgba(255,170,0,.4),0 4px 20px rgba(0,0,0,.3)} @keyframes pinoutGlowAmber{0%,100%{box-shadow:0 0 8px rgba(255,170,0,.3),inset 0 0 8px rgba(255,170,0,.05)}50%{box-shadow:0 0 20px rgba(255,170,0,.5),0 0 40px rgba(255,170,0,.15),inset 0 0 12px rgba(255,170,0,.08)}} .pinout-btn.purple{background:linear-gradient(135deg,rgba(176,106,255,.1),rgba(176,106,255,.06));border-color:rgba(176,106,255,.4);color:var(--purple);animation-name:pinoutGlowPurple} .pinout-btn.purple:hover{background:linear-gradient(135deg,rgba(176,106,255,.2),rgba(176,106,255,.12));border-color:var(--purple);box-shadow:0 0 30px rgba(176,106,255,.4),0 4px 20px rgba(0,0,0,.3)} @keyframes pinoutGlowPurple{0%,100%{box-shadow:0 0 8px rgba(176,106,255,.3),inset 0 0 8px rgba(176,106,255,.05)}50%{box-shadow:0 0 20px rgba(176,106,255,.5),0 0 40px rgba(176,106,255,.15),inset 0 0 12px rgba(176,106,255,.08)}} @keyframes wsGlowBlue{0%,100%{box-shadow:0 0 6px rgba(0,200,255,.3),0 0 16px rgba(0,200,255,.1)}50%{box-shadow:0 0 14px rgba(0,200,255,.5),0 0 32px rgba(0,200,255,.2),0 0 48px rgba(0,200,255,.08)}} @keyframes wsGlowGreen{0%,100%{box-shadow:0 0 6px rgba(0,255,136,.3),0 0 16px rgba(0,255,136,.1)}50%{box-shadow:0 0 14px rgba(0,255,136,.5),0 0 32px rgba(0,255,136,.2),0 0 48px rgba(0,255,136,.08)}} .ws-btn-glow-blue{animation:wsGlowBlue 2s ease-in-out infinite;border-color:rgba(0,200,255,.6)!important;background:rgba(0,200,255,.12)!important;color:var(--blue)!important} /* 🔴 2026-09-08 · «¿Que hacemos para incitar al usuario a pulsar PROGRAMAR DISPOSITIVO?» — Carlos. Lo primero que comprobe: ese boton YA brilla (`.ws-btn-glow-blue`, pulso de 2 s). Anadirle mas habria sido subir el volumen de algo que ya sonaba. Lo que pasa se ve en la captura: en ese panel brillan CINCO cosas a la vez —la chapa de «listo para subir», COPIAR, SERIAL, la cabecera de FLASH WEB y el boton— y el boton ademas es azul sobre un panel azul. > El brillo no es una propiedad de un boton: es una diferencia con lo que > tiene al lado. Cuando todo destaca, no destaca nada. Asi que no se sube el suyo: se baja el de los demas, y SOLO mientras le toca a el. `.ws-btn-glow-blue` esta puesta exactamente en esa ventana —se anade al abrir el panel de flasheo y se quita al conectar—, asi que la condicion ya existe y no hace falta ni una linea de JavaScript: `:has()` la lee. Si el navegador no soporta `:has()`, no pasa nada: se queda como estaba hoy. Y el flasheo web ya es solo Chrome/Edge/Opera, que lo soportan. */ .RP:has(.ws-btn-glow-blue) .CPB, .RP:has(.ws-btn-glow-blue) [id^="serialOpenBtn_"]{ opacity:.35;filter:saturate(.5);animation:none!important;box-shadow:none!important; transition:opacity .4s ease,filter .4s ease} /* Al conectar vuelven solos, porque la clase del boton desaparece. */ .ws-btn-glow-green{animation:wsGlowGreen 2s ease-in-out infinite;border-color:rgba(0,255,136,.6)!important;background:rgba(0,255,136,.12)!important;color:var(--green)!important} .signal-glow{animation:signalGlow 1.5s ease-in-out infinite!important;display:inline-flex!important;border-color:var(--green)!important;background:rgba(0,255,136,.15)!important;color:var(--green)!important;font-weight:700;font-size:11px!important;padding:10px 20px!important;letter-spacing:2.5px!important} @keyframes signalGlow{0%,100%{box-shadow:0 0 8px rgba(0,255,136,.4),0 0 20px rgba(0,255,136,.15)}50%{box-shadow:0 0 16px rgba(0,255,136,.6),0 0 36px rgba(0,255,136,.25),0 0 56px rgba(0,255,136,.1)}} .signal-glow-amber{animation:signalGlowAmber 1.5s ease-in-out infinite!important;display:inline-flex!important;border-color:var(--amber)!important;background:rgba(255,170,0,.15)!important;color:var(--amber)!important;font-weight:700;font-size:11px!important;padding:10px 20px!important;letter-spacing:2.5px!important} @keyframes signalGlowAmber{0%,100%{box-shadow:0 0 8px rgba(255,170,0,.4),0 0 20px rgba(255,170,0,.15)}50%{box-shadow:0 0 16px rgba(255,170,0,.6),0 0 36px rgba(255,170,0,.25),0 0 56px rgba(255,170,0,.1)}} @keyframes signalGlowPurple{0%,100%{box-shadow:0 0 8px rgba(176,106,255,.4),0 0 20px rgba(176,106,255,.15)}50%{box-shadow:0 0 16px rgba(176,106,255,.6),0 0 36px rgba(176,106,255,.25),0 0 56px rgba(176,106,255,.1)}} @keyframes pulseA{0%,100%{box-shadow:0 0 0 0 rgba(255,170,0,.4)}50%{box-shadow:0 0 0 12px rgba(255,170,0,0)}} @keyframes volumeGlow{0%,100%{box-shadow:0 0 6px rgba(0,200,255,.2),0 0 12px rgba(0,200,255,.08);border-color:rgba(0,200,255,.3)}50%{box-shadow:0 0 14px rgba(0,200,255,.5),0 0 28px rgba(0,200,255,.2);border-color:rgba(0,200,255,.6)}} @keyframes pulseP{0%,100%{box-shadow:0 0 0 0 rgba(176,106,255,.4)}50%{box-shadow:0 0 0 12px rgba(176,106,255,0)}} @keyframes auraPulse{0%,100%{box-shadow:0 0 8px rgba(0,200,255,.2);transform:scale(1)}50%{box-shadow:0 0 24px rgba(0,200,255,.6);transform:scale(1.15)}} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes gP{0%,100%{text-shadow:0 0 20px rgba(0,255,136,.5)}50%{text-shadow:0 0 50px rgba(0,255,136,.9),0 0 100px rgba(0,255,136,.4)}} @keyframes radarSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes confettiFall{to{transform:translateY(110vh) rotate(720deg);opacity:0}} @keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} } @keyframes nexoGlow{ 0%,100%{box-shadow:0 0 6px rgba(0,200,255,.3),0 0 14px rgba(0,200,255,.1)} 50%{box-shadow:0 0 14px rgba(0,200,255,.6),0 0 28px rgba(0,200,255,.25),0 0 40px rgba(0,200,255,.08)} } @keyframes quizGlow{ 0%,100%{box-shadow:0 0 10px rgba(0,255,136,.3),0 0 25px rgba(0,255,136,.15)} 50%{box-shadow:0 0 22px rgba(0,255,136,.6),0 0 50px rgba(0,255,136,.3),0 0 70px rgba(0,255,136,.1)} } @keyframes quizGlowAmber{ 0%,100%{box-shadow:0 0 10px rgba(255,170,0,.3),0 0 25px rgba(255,170,0,.15)} 50%{box-shadow:0 0 22px rgba(255,170,0,.6),0 0 50px rgba(255,170,0,.3),0 0 70px rgba(255,170,0,.1)} } @keyframes quizGlowPurple{ 0%,100%{box-shadow:0 0 10px rgba(176,106,255,.3),0 0 25px rgba(176,106,255,.15)} 50%{box-shadow:0 0 22px rgba(176,106,255,.6),0 0 50px rgba(176,106,255,.3),0 0 70px rgba(176,106,255,.1)} } @keyframes googleGlow{ 0%,100%{box-shadow:0 0 18px rgba(255,255,255,.25),0 0 40px rgba(66,133,244,.35),0 2px 12px rgba(0,0,0,.4)} 50%{box-shadow:0 0 28px rgba(255,255,255,.45),0 0 60px rgba(66,133,244,.55),0 0 80px rgba(52,168,83,.2),0 4px 20px rgba(0,0,0,.5)} } @keyframes shootingStar{0%{transform:translateX(0) translateY(0);opacity:0}5%{opacity:1}70%{opacity:.6}100%{transform:translateX(var(--sx,300px)) translateY(var(--sy,150px));opacity:0}} @keyframes tooltipBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes tooltipFade{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}} .nexus-tooltip{position:absolute;z-index:50;pointer-events:none;animation:tooltipFade .6s ease both,tooltipBounce 2s ease-in-out .6s infinite} .nexus-tooltip-inner{background:rgba(0,255,136,.12);border:1px solid rgba(0,255,136,.5);padding:8px 16px;font-family:var(--FM);font-size:11px;color:var(--green);letter-spacing:1.5px;white-space:nowrap;position:relative;box-shadow:0 0 20px rgba(0,255,136,.15)} .nexus-tooltip-inner::after{content:'';position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid rgba(0,255,136,.5)} @keyframes shimmer{0%{background-position:-200%}100%{background-position:200%}} @keyframes typeIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}} @keyframes scanBeam{0%{top:-100%}100%{top:200%}} @keyframes tickUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @keyframes cardFlip{0%{opacity:0;transform:rotateY(90deg) scale(.9)}100%{opacity:1;transform:rotateY(0) scale(1)}} @keyframes stripeLoad{0%{width:0}100%{width:100%}} @keyframes checkDraw{0%{stroke-dashoffset:50}100%{stroke-dashoffset:0}} @keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}} @keyframes chartGrow{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}} @keyframes teslaPulse{0%,100%{box-shadow:0 0 8px rgba(176,106,255,.4),0 0 20px rgba(176,106,255,.15)}50%{box-shadow:0 0 20px rgba(176,106,255,.7),0 0 40px rgba(176,106,255,.3),0 0 60px rgba(176,106,255,.1)}} @keyframes relayFlick{0%{transform:scaleY(1)}30%{transform:scaleY(.85)}60%{transform:scaleY(1.08)}100%{transform:scaleY(1)}} @keyframes knobSpin{from{transform:rotate(var(--from,0deg))}to{transform:rotate(var(--to,0deg))}} @keyframes ctrlVerif{0%{box-shadow:0 0 0 0 rgba(176,106,255,.6);background:rgba(176,106,255,.1)}50%{box-shadow:0 0 0 14px rgba(176,106,255,0);background:rgba(176,106,255,.25)}100%{box-shadow:0 0 0 0 rgba(176,106,255,.0);background:rgba(176,106,255,.1)}} /* ── RELAY INDUSTRIAL SWITCH ── */ .relay-wrap{display:flex;flex-direction:column;gap:0;width:100%;background:linear-gradient(135deg,#150808,#0d0505);border:1px solid rgba(255,60,60,.35);position:relative;overflow:hidden;transition:all .4s;border-radius:4px;box-shadow:inset 0 0 40px rgba(255,40,40,.04)} .relay-wrap.on{background:linear-gradient(135deg,#081508,#050d05);border-color:rgba(0,255,136,.5);box-shadow:0 0 30px rgba(0,255,136,.08),inset 0 0 40px rgba(0,255,136,.04)} .relay-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(255,60,60,.6),transparent);transition:all .4s} .relay-wrap.on::before{background:linear-gradient(90deg,transparent,rgba(0,255,136,.6),transparent)} .relay-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 18px;border-bottom:1px solid rgba(255,60,60,.15);transition:border-color .4s} .relay-label{font-family:var(--FM);font-size:10px;color:var(--text3);letter-spacing:2px;display:flex;align-items:center;gap:6px} .relay-status{font-family:var(--FM);font-size:11px;font-weight:700;letter-spacing:2px;transition:all .3s} .relay-status.off{color:#ff5555;font-size:9px;letter-spacing:2px;text-shadow:0 0 8px rgba(255,60,60,.5)} .relay-status.on{color:var(--green);font-size:9px;letter-spacing:2px;text-shadow:0 0 10px rgba(0,255,136,.6)} /* Toggle switch iOS-style */ .relay-switch-body{width:100%;padding:22px 18px;background:transparent;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .3s;position:relative} .relay-switch-body::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(255,80,80,.0),transparent);transition:background .4s;pointer-events:none} .relay-switch-body.on::after{background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(255,80,80,.06),transparent)} .relay-toggle-track{width:58px;height:30px;border-radius:15px;background:#200808;border:1.5px solid rgba(255,60,60,.4);position:relative;transition:all .4s;flex-shrink:0;box-shadow:inset 0 2px 6px rgba(0,0,0,.5)} .relay-switch-body.on .relay-toggle-track{background:#082008;border-color:rgba(0,255,136,.5);box-shadow:inset 0 2px 6px rgba(0,0,0,.3),0 0 20px rgba(0,255,136,.25)} .relay-toggle-thumb{width:22px;height:22px;border-radius:50%;background:linear-gradient(145deg,#884444,#662222);position:absolute;top:3px;left:3px;transition:all .35s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px rgba(255,60,60,.5),0 0 12px rgba(255,40,40,.3)} .relay-switch-body.on .relay-toggle-thumb{left:31px;background:linear-gradient(145deg,#44ff88,#22cc55);box-shadow:0 2px 8px rgba(0,255,136,.5),0 0 16px rgba(0,255,136,.35)} .relay-toggle-label{font-family:var(--FM);font-size:14px;font-weight:700;letter-spacing:3px;color:#ff5555;transition:color .3s;text-shadow:0 0 12px rgba(255,60,60,.4)} .relay-switch-body.on .relay-toggle-label{color:var(--green);text-shadow:0 0 12px rgba(0,255,136,.4)} .relay-info-row{display:flex;gap:0;border-top:1px solid rgba(255,102,102,.08)} .relay-info-cell{flex:1;padding:10px 18px;font-family:var(--FM);font-size:9px;letter-spacing:1.5px;color:var(--text3);border-right:1px solid rgba(255,102,102,.08)} .relay-info-cell:last-child{border-right:none} .relay-info-cell span{display:block;font-size:11px;color:var(--text);margin-top:3px;letter-spacing:.5px} .relay-light{width:8px;height:8px;border-radius:50%;transition:all .3s;flex-shrink:0} .relay-light.off{background:#ff3333;box-shadow:0 0 6px rgba(255,40,40,.6);animation:blink 1.2s infinite} .relay-light.on{background:#00ff88;box-shadow:0 0 8px #00ff88,0 0 18px rgba(0,255,136,.5);animation:none} .relay-terminals{display:none} .relay-terminal{display:none} .relay-lever{display:none} .relay-lever-bar{display:none} .relay-lever-head{display:none} /* ── SERVO KNOB ── */ .servo-wrap{display:flex;flex-direction:column;gap:0;width:100%;background:linear-gradient(135deg,#060e18,#04080f);border:1px solid rgba(0,200,255,.18);position:relative;overflow:hidden;transition:all .4s;border-radius:4px} .servo-wrap.active{border-color:rgba(0,200,255,.5);box-shadow:0 0 30px rgba(0,200,255,.07)} .servo-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,200,255,.45),transparent)} .servo-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 18px;border-bottom:1px solid rgba(0,200,255,.1)} .servo-label{font-family:var(--FM);font-size:10px;color:var(--text3);letter-spacing:2px;display:flex;align-items:center;gap:6px} .servo-angle{font-family:var(--FD);font-size:16px;font-weight:700;color:var(--blue);letter-spacing:1px;text-shadow:0 0 12px rgba(0,200,255,.4)} .servo-knob-area{display:flex;align-items:center;gap:20px;width:100%;padding:20px 18px} .servo-knob-wrap{position:relative;width:100px;height:100px;flex-shrink:0} .servo-knob-track{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#0a1825,#040c14);border:2px solid rgba(0,200,255,.12);box-shadow:inset 0 4px 16px rgba(0,0,0,.7),0 0 0 6px rgba(0,200,255,.03)} .servo-knob-arc{position:absolute;inset:3px;border-radius:50%} .servo-knob-body{position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#203040,#0d1e2e);border:1.5px solid rgba(0,200,255,.35);box-shadow:0 4px 16px rgba(0,0,0,.6),inset 0 1px 3px rgba(255,255,255,.08),0 0 20px rgba(0,200,255,.05);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s} .servo-knob-body:hover{box-shadow:0 4px 16px rgba(0,0,0,.6),inset 0 1px 3px rgba(255,255,255,.08),0 0 24px rgba(0,200,255,.18)} .servo-knob-dot{width:5px;height:5px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px var(--blue),0 0 14px rgba(0,200,255,.4);position:absolute;transition:transform .15s} .servo-range-wrap{flex:1;display:flex;flex-direction:column;gap:10px} .servo-range{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:linear-gradient(90deg,rgba(0,200,255,.8) var(--val,0%),rgba(0,200,255,.1) var(--val,0%));outline:none;cursor:pointer;box-shadow:0 0 8px rgba(0,200,255,.1)} .servo-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#4af,var(--blue));box-shadow:0 0 10px rgba(0,200,255,.6),0 2px 6px rgba(0,0,0,.5);cursor:pointer;border:2px solid rgba(0,200,255,.5);transition:box-shadow .2s} .servo-range::-webkit-slider-thumb:hover{box-shadow:0 0 18px rgba(0,200,255,.8),0 2px 6px rgba(0,0,0,.5)} .servo-ticks{display:flex;justify-content:space-between;font-family:var(--FM);font-size:8px;color:var(--text3);letter-spacing:.5px} .servo-arm-vis{width:100%;height:36px;background:#020a12;border:1px solid rgba(0,200,255,.1);position:relative;overflow:hidden;border-radius:3px;box-shadow:inset 0 2px 8px rgba(0,0,0,.4)} .servo-arm-line{position:absolute;top:50%;left:50%;height:3px;background:linear-gradient(90deg,rgba(0,200,255,.9),rgba(0,200,255,.2));transform-origin:left center;border-radius:2px;width:42%;transition:transform .15s;transform:rotate(0deg);box-shadow:0 0 6px rgba(0,200,255,.4)} .servo-arm-pivot{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;background:var(--blue);transform:translate(-50%,-50%);box-shadow:0 0 10px rgba(0,200,255,.6),0 0 20px rgba(0,200,255,.2)} .servo-arm-pivot{position:absolute;top:50%;left:50%;width:6px;height:6px;background:var(--blue);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 6px rgba(0,200,255,.5)} /* ctrl verify btn glow */ .ctrl-verif-glow{animation:ctrlVerif 1.2s ease-in-out infinite!important;border-color:var(--purple)!important;color:var(--purple)!important;font-weight:700!important} /* ══════════════════════════════════ S1 LANDING ══════════════════════════════════ */ #s1{flex-direction:column} .HG{display:grid;grid-template-columns:1fr 400px;gap:72px;align-items:center;width:100%;max-width:1060px;padding:0 36px} .EBR{font-family:var(--FM);font-size:10px;color:var(--green);letter-spacing:4px;display:flex;align-items:center;gap:10px;margin-bottom:18px;animation:fadeUp .7s ease both} .EBR::before{content:'';width:28px;height:1px;background:var(--green);box-shadow:0 0 8px var(--green)} #s1 h1{font-size:clamp(36px,4.2vw,60px);font-weight:900;line-height:1.1;letter-spacing:-1px;margin-bottom:22px;animation:fadeUp .7s .1s ease both} #s1 h1 .g{color:var(--green);animation:gP 3s ease-in-out infinite} #s1 h1 .b{color:var(--blue)} .sub{font-family:var(--FM);font-size:13px;color:var(--text2);line-height:1.9;margin-bottom:36px;animation:fadeUp .7s .2s ease both;max-width:420px;font-weight:300} .CTR{display:flex;gap:14px;align-items:center;animation:fadeUp .7s .3s ease both} .stats{display:flex;gap:32px;margin-top:44px;padding-top:32px;border-top:1px solid var(--border);animation:fadeUp .7s .4s ease both} .SN{font-family:var(--FD);font-size:22px;color:var(--green);display:block} .SL2{font-family:var(--FM);font-size:9px;color:var(--text3);letter-spacing:2px;margin-top:3px} .LC{background:var(--surface);border:1px solid var(--border);padding:32px;position:relative;animation:float 7s ease-in-out infinite,fadeUp .7s .2s ease both} .LC::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--green),var(--blue))} .LT{font-size:17px;font-weight:700;margin-bottom:4px} .LS{font-family:var(--FM);font-size:10px;color:var(--text2);letter-spacing:1px;margin-bottom:22px} .OB{width:100%;display:flex;align-items:center;gap:11px;background:var(--surface2);border:1px solid var(--border);color:var(--text);font-family:var(--FM);font-size:11px;letter-spacing:1px;padding:12px 15px;cursor:none;margin-bottom:9px;transition:all .2s;text-align:left} .OB:hover{border-color:var(--blue);color:#fff} .OI{width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border-radius:3px} .DL{display:flex;align-items:center;gap:9px;margin:14px 0;font-family:var(--FM);font-size:10px;color:var(--text3);letter-spacing:2px} .DL::before,.DL::after{content:'';flex:1;height:1px;background:var(--border)} .EI{width:100%;background:var(--surface2);border:1px solid var(--border);color:var(--text);font-family:var(--FM);font-size:11px;padding:12px 13px;outline:none;transition:border-color .2s;caret-color:var(--green);margin-bottom:9px} .EI::placeholder,.EI::-webkit-input-placeholder{color:var(--text3)} .EI:focus{border-color:var(--green)} .BS{width:100%;padding:13px;background:linear-gradient(90deg,var(--green),var(--blue));border:none;color:var(--bg);font-family:var(--FD);font-size:11px;font-weight:700;letter-spacing:2px;cursor:none;transition:all .2s} .BS:hover{opacity:.9;box-shadow:0 4px 28px rgba(0,255,136,.35)} .CF{font-family:var(--FM);font-size:10px;color:var(--text3);text-align:center;margin-top:14px;line-height:1.8} .CF a{color:var(--blue)} /* ══════════════════════════════════ S2 ORACLE ══════════════════════════════════ */ #s2{flex-direction:column;padding-top:70px} .OH{text-align:center;margin-bottom:40px;animation:fadeUp .6s ease both} .OH h2{font-size:clamp(24px,2.8vw,40px);font-weight:900;margin-bottom:7px} .OH p{font-family:var(--FM);font-size:12px;color:var(--text2);letter-spacing:1px} /* 🗑 2026-08-31 · Era `repeat(4,1fr)` fijo. Al quitar las dos tarjetas de «proximamente», las dos que quedan se irian a la izquierda con medio hueco vacio a la derecha. `auto-fit` + `justify-content:center` centra las que haya, sean 2 o 4: si manana se soporta otra placa, se anade la tarjeta y la rejilla se acomoda sola — sin tocar el CSS (`regla-un-dato-un-solo-sitio`). */ /* ── El dedo que senala el boton que le toca ────────────────────────────── 2026-08-31 · Al llegar al paso 4 de una mision de Volta hay DOS caminos (programar la placa / usar el celular) y el alumno tiene que elegir sin saber cual es el suyo. Se le pregunta, y en vez de dejarle buscar, **se le senala**. Fuerte a proposito: si el resaltado es timido, no cumple su unica funcion. */ .pv-senala{position:relative;z-index:5;animation:pvSenala 1.15s ease-in-out 6} @keyframes pvSenala{ 0%,100%{box-shadow:0 0 0 0 rgba(0,255,136,.55);transform:scale(1)} 50%{box-shadow:0 0 0 9px rgba(0,255,136,0),0 0 30px rgba(0,255,136,.45);transform:scale(1.015)} } .pv-senala-azul{animation-name:pvSenalaAzul} @keyframes pvSenalaAzul{ 0%,100%{box-shadow:0 0 0 0 rgba(0,200,255,.55);transform:scale(1)} 50%{box-shadow:0 0 0 9px rgba(0,200,255,0),0 0 30px rgba(0,200,255,.45);transform:scale(1.015)} } /* ── MODO PREVIO · avisos «espectaculares» ──────────────────────────────── 2026-08-31 · Carlos: «lo veo demasiado plano», «los botones de empezar no tienen efecto — lo que nos caracteriza es lo espectacular que se ve nuestra plataforma». Tenia razon: hice los avisos con estilos en linea sobrios, y en un producto cuyo argumento visual es el neon, un boton plano **se lee como si fuera de otra aplicacion**. Es la misma leccion del panel del coordinador el 26-ago: copiar el layout no basta, hay que copiar los CODIGOS del sistema (esquinas rectas, gradientes, glows, Orbitron). Va en CSS y no en linea porque los `:hover` y las animaciones **no existen** en un atributo `style`. */ /* \u{1F534} LA FOTO ARRIBA SE COMIA LA PANTALLA (Carlos: «aparece cortada y toca hacer scroll; la idea es que no toque»). Una foto a lo ancho, sobre el titulo, sobre el subtitulo, sobre dos columnas y sobre tres botones: en un portatil de 900px de alto **los botones caian por debajo del borde**, y el boton principal de esta pantalla es precisamente el que hace que el alumno empiece. Un aviso al que hay que desplazarse para encontrar la accion **es un aviso que no cumple su trabajo**. La foto pasa AL LADO del titulo: se recuperan ~200px de alto sin quitar nada de lo que dice. `flex-wrap` + una base flexible hace que en movil vuelva sola a dos filas, sin una media query que alguien tenga que mantener (`regla-un-dato-un-solo-sitio`). Y el alto de la imagen va atado al **viewport**, no a un numero fijo: en una pantalla baja se encoge en vez de empujar los botones fuera. */ .pv-cab{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-bottom:14px} .pv-hero{position:relative;flex:1 1 190px;max-width:250px;text-align:center;overflow:visible} .pv-hero::before{content:'';position:absolute;left:50%;top:50%;width:230px;height:120px;transform:translate(-50%,-50%); background:radial-gradient(ellipse,rgba(0,200,255,.20),transparent 70%);pointer-events:none} .pv-hero img{position:relative;width:100%;max-height:clamp(88px,19vh,180px);object-fit:contain;display:block;margin:0 auto; filter:drop-shadow(0 0 26px rgba(0,200,255,.35));animation:pvFloat 5s ease-in-out infinite} .pv-cab-txt{flex:3 1 300px;min-width:0} @keyframes pvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} .pv-kicker{font-family:var(--FM);font-size:9px;letter-spacing:4px;color:var(--blue);margin-bottom:6px} .pv-h1{font-family:var(--FD);font-weight:900;font-size:clamp(19px,2.2vw,25px);line-height:1.2;margin-bottom:8px; background:linear-gradient(90deg,var(--text),var(--green));-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent} .pv-tag{display:inline-block;font-family:var(--FM);font-size:8px;letter-spacing:3px;color:var(--text3); border:1px solid var(--border);padding:3px 9px;margin-bottom:9px} /* CTA con los codigos de la casa: gradiente neon, brillo que respira y un barrido de luz al pasar por encima. */ .pv-cta{position:relative;overflow:hidden;width:100%;display:flex;align-items:center;justify-content:center;gap:9px; background:linear-gradient(90deg,rgba(0,255,136,.18),rgba(0,200,255,.12));border:1px solid rgba(0,255,136,.55); /* `.btn` de la casa usa --FM: un boton en Orbitron se lee como de otra app. */ color:var(--green);font-family:var(--FM);font-size:12px;font-weight:700;letter-spacing:3px;padding:18px; cursor:pointer;transition:all .25s;animation:pvPulse 2.8s ease-in-out infinite;text-decoration:none} .pv-cta::after{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg); animation:pvSheen 3.4s ease-in-out infinite} .pv-cta:hover{background:linear-gradient(90deg,rgba(0,255,136,.30),rgba(0,200,255,.20)); box-shadow:0 0 26px rgba(0,255,136,.35),0 0 60px rgba(0,255,136,.14);animation:none} @keyframes pvPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,255,136,.30)}50%{box-shadow:0 0 20px 2px rgba(0,255,136,.18)}} @keyframes pvSheen{0%{left:-60%}55%,100%{left:130%}} .pv-btn2{display:flex;align-items:center;justify-content:center;background:transparent; border:1px solid rgba(255,215,0,.45);color:var(--gold);font-family:var(--FM);font-size:11px;letter-spacing:2px; padding:13px;cursor:pointer;transition:all .25s;text-decoration:none} .pv-btn2:hover{background:rgba(255,215,0,.10);box-shadow:0 0 18px rgba(255,215,0,.20);border-color:var(--gold)} /* \u{1F534} «VOLVER AL NEXO» no reaccionaba al pasar el mouse (Carlos). Un boton que no responde al cursor **parece desactivado** \u2014 y este es la unica salida de la pantalla para quien no quiere seguir. Es secundario, no invisible: se ilumina en azul, sin robarle protagonismo al CTA. Vive aqui y no en cada modal porque son TRES los que lo tienen, y tres copias de un estilo se desincronizan a la primera (`regla-un-dato-un-solo-sitio`). */ .pv-volver{width:100%;background:transparent;border:1px solid var(--border);color:var(--text3); font-family:var(--FM);font-size:10px;letter-spacing:2px;padding:11px;cursor:pointer; transition:all .22s} .pv-volver:hover{border-color:var(--blue);color:var(--blue);background:rgba(0,200,255,.07); box-shadow:0 0 16px rgba(0,200,255,.18);letter-spacing:2.6px} .pv-btn3{display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border); color:var(--text3);font-family:var(--FM);font-size:11px;letter-spacing:2px;padding:13px;cursor:pointer;transition:all .25s} .pv-btn3:hover{border-color:var(--blue);color:var(--blue);box-shadow:0 0 16px rgba(0,200,255,.16)} /* ── Perfil («Cuéntanos quién eres») · CAPA DE TAMAÑO ───────────────────── 2026-08-31 · Primero lo pasé a dos columnas y Carlos fue claro: **el diseño estaba bien, el problema era que se veía diminuto** en una pantalla grande. Revertido el reparto; lo que se toca es la ESCALA. Va aquí y no en los `style=` del HTML a propósito: son ~20 tamaños repartidos por el marcado, y cambiarlos uno a uno significa que la próxima vez que haya que ajustarlos hay que volver a cazarlos todos (`regla-un-dato-un-solo-sitio`). Como capa, se afina en un sitio y se quita en un sitio. ⚠ Lleva `!important` porque compite con estilos en línea, que ganan por especificidad. Es la excepción justificada, no una costumbre. */ #sProfile h2{font-size:clamp(24px,3.2vw,36px)!important} #sProfile > div > div:first-child p{font-size:13px!important} /* etiquetas ¿CÓMO TE LLAMAS? / ¿CUÁL ES TU PERFIL? / ¿QUÉ QUIERES CONSTRUIR? */ #sProfile div[style*="font-size:8px"]{font-size:10px!important;letter-spacing:2.5px!important} #sProfile input[type="text"], #sProfile select{font-size:15px!important;padding:15px 16px!important} #sProfile .goal-opt{padding:14px 12px!important} #sProfile .goal-opt span:last-child{font-size:12px!important} #sProfile .goal-opt span:first-child{font-size:20px!important} #sProfile #avatarRing{width:88px!important;height:88px!important} #sProfile #profileCTA{font-size:13px!important;letter-spacing:4px!important;padding:18px!important} #sProfile #customGoalInput{font-size:13px!important} #sProfile #profileHint{font-size:10px!important} .HWG{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,240px));justify-content:center;gap:18px;max-width:860px;width:100%;padding:0 36px} .HWC{background:var(--surface);border:1px solid var(--border);padding:26px 18px;text-align:center;cursor:none;transition:all .3s;position:relative;overflow:hidden;animation:fadeUp .6s ease both} .HWC::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(0,200,255,.06),transparent 70%);opacity:0;transition:opacity .3s} .HWC:hover::before{opacity:1} .HWC:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.4),0 0 20px rgba(0,200,255,.15)} .HWI{font-size:44px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;transition:transform .3s;filter:drop-shadow(0 0 10px rgba(0,200,255,.3))} .HWC:hover .HWI{transform:scale(1.15) rotate(4deg)} .HWN{font-size:13px;font-weight:700;letter-spacing:1px} .HWD{font-family:var(--FM);font-size:10px;color:var(--text3);margin-top:5px;letter-spacing:1px} /* MODALS */ .MOV{position:fixed;inset:0;z-index:500;background:rgba(4,8,13,.92);display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px)} .MOV.open{display:flex} .UM{background:var(--surface);border:1px solid var(--gold);max-width:460px;width:90%;padding:36px;position:relative;animation:modalIn .4s ease;box-shadow:0 0 80px rgba(255,215,0,.12),0 40px 80px rgba(0,0,0,.6)} /* 🛒 2026-08-20 · La ventana de los kits necesita ancho: son tres columnas con el contenido de cada caja, y a 460 px eso es una lista de la compra en fila india. `max-height:92vh` + scroll porque en un portatil de 768 px de alto la tarjeta mas larga no cabe entera — sin esto el boton de comprar del Kit Profesional queda fuera de la pantalla y no hay forma de llegar a el. El ancho REAL lo decide la rejilla (`auto-fit minmax(270px,1fr)`): 1.040 px es el techo, no una imposicion — a 800 px salen dos columnas y a 600 una. */ .UM.wide{max-width:1040px;max-height:92vh;overflow-y:auto;padding:30px 30px 26px} .UM.wide::-webkit-scrollbar{width:8px} .UM.wide::-webkit-scrollbar-thumb{background:rgba(255,215,0,.25)} .UM::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--amber),var(--gold))} /* ══════════════════════════════════ S3 NEXUS ══════════════════════════════════ */ #s3{flex-direction:column;padding-top:70px} .NXT{font-size:clamp(20px,2.4vw,34px);font-weight:900;text-align:center;margin-bottom:6px;animation:fadeUp .6s ease both} .NXS{font-family:var(--FM);font-size:10px;color:var(--text2);text-align:center;letter-spacing:3px;margin-bottom:40px;animation:fadeUp .6s .1s ease both} .SKT{display:flex;align-items:flex-start;gap:0;max-width:960px;width:100%;padding:36px 36px 0;position:relative} .SKN{flex:1;position:relative;z-index:1;cursor:none;display:flex;flex-direction:column;align-items:center;gap:14px;animation:fadeUp .6s ease both;padding-top:30px;pointer-events:auto} .SKCON{flex:0.6;height:2px;margin-top:100px;position:relative;z-index:0} /* ── SPACE MAP NODES ── */ .SNO{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;pointer-events:all;cursor:pointer;z-index:10;animation:planetFloat var(--pf-dur,6s) ease-in-out var(--pf-del,0s) infinite} .SNO-ORB{border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:transform .25s,box-shadow .25s;width:110px;height:110px;overflow:hidden} /* 3D sphere lighting overlay */ .SNO-ORB::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse 55% 45% at 35% 28%,rgba(255,255,255,.22),rgba(255,255,255,.06) 40%,transparent 70%);z-index:2;pointer-events:none} .SNO-ORB::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse 90% 60% at 50% 90%,rgba(0,0,0,.45),rgba(0,0,0,.15) 40%,transparent 65%);z-index:1;pointer-events:none} .SNO-ORB:hover{transform:scale(1.1)} /* Planet reflection/shadow beneath */ .SNO-ORB-SHADOW{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:70px;height:12px;border-radius:50%;background:radial-gradient(ellipse,currentColor,transparent 70%);opacity:.25;filter:blur(4px);pointer-events:none} .SNO-INFO{text-align:center;margin-top:10px;pointer-events:none} .SNO-NAME{font-size:11px;font-weight:700;letter-spacing:1px;margin-bottom:2px} .SNO-DESC{font-family:var(--FM);font-size:8px;color:var(--text3);letter-spacing:1px;line-height:1.5} .SNO-ST{font-family:var(--FM);font-size:8px;letter-spacing:2px;margin-top:5px} @keyframes orbitRing{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes planetFloat{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(var(--pf-y,-8px))}} @keyframes shipTravel{0%{offset-distance:0%}100%{offset-distance:100%}} @keyframes starPulse{0%,100%{opacity:.3}50%{opacity:1}} .NO{width:130px;height:130px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:all .3s;pointer-events:all} .NO.active{background:radial-gradient(circle,rgba(0,255,136,.15),rgba(0,255,136,.03));border:2px solid var(--green);box-shadow:0 0 30px rgba(0,255,136,.3),inset 0 0 30px rgba(0,255,136,.05);animation:pulse 2s ease-in-out infinite} .NO.active:hover{box-shadow:0 0 60px rgba(0,255,136,.5);transform:scale(1.05)} .NO.done{background:radial-gradient(circle,rgba(0,200,255,.15),rgba(0,200,255,.03));border:2px solid var(--blue);box-shadow:0 0 20px rgba(0,200,255,.3)} .NO.locked{background:radial-gradient(circle,rgba(20,35,50,.8),rgba(10,20,30,.5));border:2px solid var(--text3);filter:brightness(.6)} .NO.amberNode{background:radial-gradient(circle,rgba(255,170,0,.12),rgba(255,170,0,.03));border:2px solid var(--amber);box-shadow:0 0 30px rgba(255,170,0,.3);animation:pulseA 2s ease-in-out infinite} .NO.amberNode:hover{box-shadow:0 0 60px rgba(255,170,0,.5);transform:scale(1.05)} /* ── SATELLITE SYSTEM ─────────────────────────── */ /* satellite CSS removed */ /* ── LIVE DATA CARD (under completed nodes) ─── */ /* ── LIVE BADGE on orb ── */ .ORB-BADGE{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;border:2px solid var(--bg);animation:pulse 1.4s ease-in-out infinite;z-index:10;pointer-events:none} /* ── MONITOR BUTTON in Nexo ── */ /* ── MONITOR DRAWER ── */ /* Level Drawer */ #lvlDrawer{position:fixed;top:50%;left:50%;transform:translate(-50%,-44%) scale(.95);width:min(480px,92vw);max-height:80vh;background:var(--surface);z-index:9600;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border2);opacity:0;pointer-events:none;border-radius:2px} #lvlDrawer.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all} #lvlOverlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9599;opacity:0;pointer-events:none;transition:opacity .4s;backdrop-filter:blur(6px)} #lvlOverlay.open{opacity:1;pointer-events:auto} #lvlDrawerInner{overflow-y:auto;display:flex;flex-direction:column} .LVD-HDR{padding:24px 28px 20px;border-bottom:1px solid var(--border);flex-shrink:0;position:relative} .LVD-CLOSE{position:absolute;top:20px;right:20px;width:32px;height:32px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);font-size:14px;transition:all .2s} .LVD-CLOSE:hover{border-color:var(--text);color:var(--text)} .LVD-ICON{font-size:36px;margin-bottom:10px} .LVD-LVL{font-family:var(--FM);font-size:8px;letter-spacing:3px;color:var(--text3);margin-bottom:6px} .LVD-NAME{font-family:var(--FD);font-size:28px;font-weight:900;line-height:1;margin-bottom:4px} .LVD-SUB{font-family:var(--FM);font-size:9px;letter-spacing:2px;color:var(--text3)} .LVD-PROG{margin-top:14px;display:flex;align-items:center;gap:10px} .LVD-PROG-BAR{flex:1;height:3px;background:var(--border);position:relative;overflow:hidden} .LVD-PROG-FILL{position:absolute;inset-y:0;left:0;transition:width .6s ease} .LVD-PROG-TXT{font-family:var(--FM);font-size:8px;letter-spacing:1px;color:var(--text3);white-space:nowrap} .LVD-MISSIONS{padding:20px 28px;display:flex;flex-direction:column;gap:12px;flex:1} .LVD-M{border:1px solid var(--border);padding:16px 18px;transition:all .25s;position:relative;overflow:hidden} .LVD-M.available{cursor:pointer} .LVD-M.available:hover{transform:translateX(4px)} .LVD-M::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px} .LVD-M-TOP{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .LVD-M-NUM{font-family:var(--FM);font-size:7px;letter-spacing:3px;color:var(--text3)} .LVD-M-STATUS{font-family:var(--FM);font-size:7px;letter-spacing:2px;display:flex;align-items:center;gap:5px} .LVD-M-NAME{font-family:var(--FD);font-size:15px;font-weight:700;margin-bottom:4px} .LVD-M-DESC{font-family:var(--FM);font-size:9px;color:var(--text3);line-height:1.6;margin-bottom:10px} .LVD-M-FOOT{display:flex;align-items:center;justify-content:space-between} .LVD-M-XP{font-family:var(--FM);font-size:8px;letter-spacing:1px} .LVD-M-BTN{font-family:var(--FM);font-size:8px;letter-spacing:2px;padding:6px 14px;border:1px solid;cursor:pointer;transition:all .2s;background:transparent} .LVD-LOCKED-MSG{text-align:center;padding:20px;font-family:var(--FM);font-size:9px;color:var(--text3);letter-spacing:2px;border:1px dashed var(--border);line-height:2} .MON-CLOSE:hover{border-color:var(--text);color:var(--text)} .MON-ROW{border:1px solid var(--border);padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden} .MON-ROW:hover{border-color:var(--row-color, var(--green));background:rgba(255,255,255,.02);transform:translateX(3px)} .MON-ROW-TOP{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .MON-ROW-ID{font-family:var(--FM);font-size:8px;letter-spacing:2px;color:var(--text3)} .MON-ROW-STATUS{display:flex;align-items:center;gap:5px;font-family:var(--FM);font-size:8px;letter-spacing:1px} .MON-ROW-DOT{width:6px;height:6px;border-radius:50%;animation:pulse 1.2s ease-in-out infinite} .MON-ROW-NAME{font-family:var(--FD);font-size:15px;font-weight:700;margin-bottom:4px} .MON-ROW-DESC{font-family:var(--FM);font-size:9px;color:var(--text3);letter-spacing:1px;margin-bottom:12px} .MON-METRICS{display:grid;grid-template-columns:1fr 1fr;gap:8px} .MON-METRIC{background:var(--surface2);padding:8px 10px} .MON-METRIC-LBL{font-family:var(--FM);font-size:7px;letter-spacing:2px;color:var(--text3);margin-bottom:3px} .MON-METRIC-VAL{font-family:var(--FD);font-size:18px;font-weight:900;line-height:1} .MON-METRIC-UNIT{font-family:var(--FM);font-size:8px;color:var(--text3)} .MON-SPARK{height:32px;margin-top:10px;position:relative} .MON-SPARK canvas{width:100%;height:100%} .MON-CTA{margin-top:10px;padding:7px;border:1px solid;text-align:center;font-family:var(--FM);font-size:8px;letter-spacing:2px;transition:all .2s;opacity:.7} .MON-ROW:hover .MON-CTA{opacity:1} .MON-EMPTY{padding:40px 20px;text-align:center;color:var(--text3);font-family:var(--FM);font-size:10px;letter-spacing:2px;line-height:2} /* ── LIVE DATA PANEL (modal flotante sobre el Nexo) ───────── */ #livePanel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92);width:min(860px,92vw);max-height:88vh;background:var(--surface);border:1px solid var(--border);z-index:9000;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;display:flex;flex-direction:column;box-shadow:0 0 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04)} #livePanel.open{opacity:1;pointer-events:all;transform:translate(-50%,-50%) scale(1)} .LP-HDR{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0} .LP-CLOSE{background:transparent;border:1px solid var(--border);color:var(--text3);font-family:var(--FM);font-size:10px;padding:6px 12px;cursor:none;letter-spacing:1px;transition:all .2s} .LP-CLOSE:hover{border-color:var(--text2);color:var(--text)} .LP-BODY{display:grid;grid-template-columns:1fr 1fr;flex:1;overflow:hidden} .LP-LEFT{padding:20px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:14px;overflow:hidden} .LP-RIGHT{display:flex;flex-direction:column;overflow:hidden} .LP-LOG{flex:1;padding:12px 20px;overflow-y:auto;font-family:var(--FM,monospace);font-size:11px;line-height:1.8;max-height:340px} .LP-LOG-LINE{opacity:0;animation:logFadeIn .3s ease forwards} @keyframes logFadeIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}} .NI{font-size:34px;position:relative;z-index:3} .NLV{font-family:var(--FM);font-size:9px;color:var(--text3);letter-spacing:2px;margin-top:3px} .LKI{position:absolute;bottom:-4px;right:-4px;font-size:16px} .GSP{position:absolute;top:-4px;right:-4px;font-size:13px;animation:float 2s ease-in-out infinite} .NIF{text-align:center;pointer-events:none} .NNM{font-size:12px;font-weight:700;letter-spacing:1px;margin-bottom:3px} .NDC{font-family:var(--FM);font-size:9px;color:var(--text3);letter-spacing:1px;line-height:1.5} .NST{font-family:var(--FM);font-size:9px;letter-spacing:2px;margin-top:7px} .NST.active{color:var(--green)}.NST.locked{color:var(--text3)}.NST.done{color:var(--blue)}.NST.amber{color:var(--amber)} /* ══════════════════════════════════ S4 BRIEFING (generic) ══════════════════════════════════ */ .BRC{max-width:880px;width:100%;padding:10px 28px 16px;display:flex;flex-direction:column;gap:12px} .CLH{display:flex;align-items:center;gap:10px;animation:fadeUp .5s ease both} .CST{font-family:var(--FD);font-size:12px;letter-spacing:4px;color:var(--red);border:2px solid var(--red);padding:5px 12px;transform:rotate(-3deg);opacity:.8} .CLN{flex:1;height:1px;background:var(--border)} .BRK{background:var(--surface);border:1px solid var(--border);padding:24px;position:relative;overflow:hidden;animation:fadeUp .5s .1s ease both} .BRK::before{content:'';position:absolute;top:0;left:0;right:0;height:2px} .BRK.green-top::before{background:linear-gradient(90deg,var(--green),var(--blue))} .BRK.amber-top::before{background:linear-gradient(90deg,var(--amber),var(--gold))} .BRK.purple-top::before{background:linear-gradient(90deg,var(--purple),var(--blue))} .PRR{display:flex;gap:18px;align-items:flex-start;margin-bottom:16px} .PRT{width:80px;height:95px;flex-shrink:0;background:linear-gradient(135deg,var(--surface2),var(--surface3));border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden} .PRT::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(0,255,136,.02) 4px,rgba(0,255,136,.02) 5px)} .PEM{font-size:50px} .PMT{flex:1} .PNM{font-size:22px;font-weight:900;margin-bottom:4px;letter-spacing:1px} .PYR{font-family:var(--FM);font-size:11px;color:var(--text3);letter-spacing:2px;margin-bottom:8px} .PBI{font-family:var(--FM);font-size:13px;color:var(--text2);line-height:1.7;font-weight:300} .MTX{background:var(--surface2);border-left:3px solid var(--green);padding:18px;font-family:var(--FM);font-size:14px;line-height:1.7;margin-bottom:16px;font-weight:300} .MTX strong{font-weight:700} .MTX.amber-border{border-left-color:var(--amber)} .MTX.purple-border{border-left-color:var(--purple)} .MMT{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap} .MPL{background:var(--surface2);border:1px solid var(--border);padding:9px 14px;font-family:var(--FM);font-size:11px;color:var(--text2);letter-spacing:1px} /* ══════════════════════════════════ S5 WORKSPACE (generic) ══════════════════════════════════ */ .WS{display:grid;grid-template-columns:minmax(340px,42%) 1fr;width:100%;height:100%;gap:0;min-height:0} .OP{background:var(--surface);border-right:1px solid var(--border);padding:24px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:16px} .OP::-webkit-scrollbar{width:3px} .OP::-webkit-scrollbar-thumb{background:var(--border)} .OPH{display:flex;align-items:center;justify-content:space-between} .nexo-back-btn{background:rgba(0,200,255,.06);border:1px solid rgba(0,200,255,.25);color:var(--blue);font-family:var(--FM);font-size:8px;letter-spacing:2px;padding:5px 10px;cursor:pointer;transition:all .2s;flex-shrink:0;margin-right:10px} .nexo-back-btn:hover{background:rgba(0,200,255,.15);border-color:var(--blue)} .nexo-back-btn.amber{border-color:rgba(255,170,0,.25);color:var(--amber);background:rgba(255,170,0,.06)} .nexo-back-btn.amber:hover{background:rgba(255,170,0,.15);border-color:var(--amber)} .nexo-back-btn.purple{border-color:rgba(176,106,255,.25);color:var(--purple);background:rgba(176,106,255,.06)} .nexo-back-btn.purple:hover{background:rgba(176,106,255,.15);border-color:var(--purple)} .OPT{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--green)} .OPC{font-family:var(--FM);font-size:10px;color:var(--text3)} .STP{display:flex;align-items:flex-start;gap:12px;background:var(--surface2);border:1px solid var(--border);padding:14px;transition:all .3s;cursor:pointer} .STP-BTN{display:none;margin-top:10px;background:transparent;border:1px solid var(--amber);color:var(--amber);font-family:var(--FM);font-size:10px;letter-spacing:2px;padding:8px 16px;cursor:none;transition:all .2s} /* ── Accordion: solo el paso activo muestra contenido completo ── */ .STP:not(.active) .STD, .STP:not(.active) .STP-BTN, .STP:not(.active) .WIF, .STP:not(.active) [id^="pinSelector"], .STP:not(.active) [id^="snsRow"], .STP:not(.active) [id^="actRow"], .STP:not(.active) [id^="reuseWifi"], .STP:not(.active) [id^="quizDone_"], .STP:not(.active) [id^="quizBtn_"] { display:none !important; } .QOB{background:transparent;border:1px solid var(--border);color:var(--text2);font-family:var(--FM);font-size:11px;padding:9px 12px;text-align:left;cursor:none;transition:all .2s;width:100%} .STP-BTN:hover{background:var(--amber);color:var(--bg)} /* 🔴 2026-09-08 · Cuando el boton del paso todavia no esta disponible, un clic en la fila decia NADA. La persona no sabia si habia pulsado mal, si la pagina estaba rota o si le faltaba algo por hacer. > Un clic que no puede hacer nada tiene que decir por que; si no, lo que > ensena es que la pantalla no responde. El texto sale de `data-espera` del propio boton, para que cada paso diga lo suyo y no una frase de catalogo. */ .STP-ESPERA{margin-top:8px;font-family:var(--FM);font-size:10px;line-height:1.6;color:var(--amber); border-left:2px solid var(--amber);padding:6px 0 6px 10px;background:rgba(255,170,0,.06)} .STP-ESPERA.parpadea{animation:stpEsperaIn .5s ease-out} /* 2026-09-10 · Cuando el flasheo corta por falta de red, el aviso nombra el paso 03 y ademas LLEVA hasta el. Al llegar hay que poder distinguirlo del resto: llegar a una lista de pasos iguales es no haber llegado. */ .STP-BUSCAME{animation:stpBuscame 2.6s ease-out;position:relative;z-index:2} @keyframes stpBuscame{ 0%,100%{box-shadow:0 0 0 0 rgba(255,170,0,0);border-color:var(--border)} 8%{box-shadow:0 0 0 5px rgba(255,170,0,.30);border-color:var(--amber)} 22%{box-shadow:0 0 0 0 rgba(255,170,0,0);border-color:var(--amber)} 36%{box-shadow:0 0 0 5px rgba(255,170,0,.30);border-color:var(--amber)} 50%{box-shadow:0 0 0 0 rgba(255,170,0,0);border-color:var(--amber)} 64%{box-shadow:0 0 0 5px rgba(255,170,0,.22);border-color:var(--amber)} 80%{box-shadow:0 0 0 0 rgba(255,170,0,0);border-color:rgba(255,170,0,.5)}} @keyframes stpEsperaIn{ 0%{opacity:0;transform:translateX(-6px)} 55%{opacity:1;transform:translateX(2px);background:rgba(255,170,0,.18)} 100%{opacity:1;transform:none}} .STP.active .STP-BTN{display:inline-flex;animation:stepBtnGlow 2s ease-in-out infinite} /* Mission-colored glow for step buttons */ .STP.active .STP-BTN[style*="green"]{animation-name:signalGlow} .STP.active .STP-BTN[style*="blue"]{animation-name:stepBtnGlowBlue} .STP.active .STP-BTN[style*="amber"]{animation-name:signalGlowAmber} .STP.active .STP-BTN[style*="purple"]{animation-name:signalGlowPurple} @keyframes stepBtnGlow{0%,100%{box-shadow:0 0 6px rgba(255,255,255,.1),0 0 14px rgba(255,255,255,.05)}50%{box-shadow:0 0 14px rgba(255,255,255,.2),0 0 30px rgba(255,255,255,.1)}} @keyframes stepBtnGlowBlue{0%,100%{box-shadow:0 0 6px rgba(0,200,255,.3),0 0 14px rgba(0,200,255,.1)}50%{box-shadow:0 0 14px rgba(0,200,255,.5),0 0 30px rgba(0,200,255,.2)}} /* Accordion */ .STP.done{cursor:pointer} .STP:not(.active):not(.done){cursor:not-allowed;opacity:.55;pointer-events:none;padding:10px 14px} .STP.done:hover{border-color:rgba(0,255,136,.4)} .STP-HINT-ROW{display:none} .STP.done .STP-HINT-ROW{display:block} .STP-HINT{font-family:var(--FM);font-size:8px;color:var(--text3);letter-spacing:1px;float:right} .STP.done{border-color:var(--green);background:rgba(0,255,136,.03);padding:10px 14px} .STP.active{border-color:var(--blue);background:rgba(0,200,255,.04)} .SCB{width:18px;height:18px;border:1.5px solid var(--text3);flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;transition:all .2s;cursor:none;font-size:11px} .STP.done .SCB{border-color:var(--green);background:var(--green);color:var(--bg)} .STP.active .SCB{border-color:var(--blue)} .STT{font-family:var(--FM);font-size:11px;letter-spacing:1px;margin-bottom:3px} .STP:not(.active) .STT{margin-bottom:0} .STD{font-family:var(--FM);font-size:11px;color:var(--text2);line-height:1.6;font-weight:300} /* ── Aura Mission Companion — Large Character + Speech Bubble ── */ .aura-companion{display:flex;align-items:flex-end;animation:fadeIn .6s ease both;margin-top:20px;position:relative;min-height:200px} .aura-companion-avatar{flex-shrink:0;position:relative;z-index:2;width:150px;display:flex;flex-direction:column;align-items:center} .aura-companion-avatar img{width:150px;height:180px;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 0 18px rgba(0,200,255,.3)) drop-shadow(0 6px 25px rgba(0,0,0,.5));animation:auraFloat 3s ease-in-out infinite;transition:filter .5s,opacity .5s} .aura-companion-avatar img:not([src]){opacity:0} .aura-companion-avatar img[data-pending]{opacity:0} .aura-companion.amber .aura-companion-avatar img{filter:drop-shadow(0 0 18px rgba(255,170,0,.3)) drop-shadow(0 6px 20px rgba(0,0,0,.4))} .aura-companion.purple .aura-companion-avatar img{filter:drop-shadow(0 0 18px rgba(176,106,255,.3)) drop-shadow(0 6px 20px rgba(0,0,0,.4))} .aura-companion-name{font-family:var(--FM);font-size:8px;letter-spacing:3px;color:rgba(0,200,255,.8);margin-top:4px;text-shadow:0 0 10px rgba(0,200,255,.4)} .aura-companion.amber .aura-companion-name{color:rgba(255,170,0,.8);text-shadow:0 0 10px rgba(255,170,0,.4)} .aura-companion.purple .aura-companion-name{color:rgba(176,106,255,.8);text-shadow:0 0 10px rgba(176,106,255,.4)} .aura-companion-mood{font-family:var(--FM);font-size:7px;letter-spacing:1px;color:var(--text3);transition:all .3s;margin-top:2px} .aura-companion-bubble{position:relative;flex:1;background:linear-gradient(135deg,rgba(0,200,255,.08),rgba(0,200,255,.02));border:1px solid rgba(0,200,255,.3);padding:16px 18px;margin-bottom:80px;margin-left:-8px;backdrop-filter:blur(4px);transition:all .5s;border-radius:2px} .aura-companion-bubble.amber{background:linear-gradient(135deg,rgba(255,170,0,.07),rgba(255,170,0,.02));border-color:rgba(255,170,0,.25)} .aura-companion-bubble.purple{background:linear-gradient(135deg,rgba(176,106,255,.07),rgba(176,106,255,.02));border-color:rgba(176,106,255,.25)} .aura-companion-bubble::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,200,255,.6),transparent)} .aura-companion-bubble.amber::before{background:linear-gradient(90deg,transparent,rgba(255,170,0,.5),transparent)} .aura-companion-bubble.purple::before{background:linear-gradient(90deg,transparent,rgba(176,106,255,.5),transparent)} .aura-companion-arrow{position:absolute;left:-8px;bottom:14px;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:9px solid rgba(0,200,255,.3)} .aura-companion-arrow.amber{border-right-color:rgba(255,170,0,.25)} .aura-companion-arrow.purple{border-right-color:rgba(176,106,255,.25)} .aura-companion-text{font-family:var(--FM);font-size:11px;color:var(--text2);line-height:1.85;letter-spacing:.3px;transition:opacity .4s} /* Happy state — default (green / Volta) */ .aura-companion.happy .aura-companion-avatar img{filter:drop-shadow(0 0 30px rgba(0,255,136,.5)) drop-shadow(0 0 60px rgba(0,255,136,.2)) drop-shadow(0 4px 20px rgba(0,0,0,.4))!important;animation:auraHappy 1s ease-in-out 3} .aura-companion.happy .aura-companion-bubble{border-color:rgba(0,255,136,.5)!important;background:linear-gradient(135deg,rgba(0,255,136,.1),rgba(0,255,136,.02))!important;box-shadow:0 0 30px rgba(0,255,136,.08)} .aura-companion.happy .aura-companion-bubble::before{background:linear-gradient(90deg,transparent,var(--green),transparent)!important} .aura-companion.happy .aura-companion-arrow{border-right-color:rgba(0,255,136,.5)!important} .aura-companion.happy .aura-companion-name{color:var(--green)!important;text-shadow:0 0 12px rgba(0,255,136,.5)!important} .aura-companion.happy .aura-companion-text{color:var(--green)!important} /* Happy state — amber (Morse) */ .aura-companion.amber.happy .aura-companion-avatar img{filter:drop-shadow(0 0 30px rgba(255,170,0,.5)) drop-shadow(0 0 60px rgba(255,170,0,.2)) drop-shadow(0 4px 20px rgba(0,0,0,.4))!important} .aura-companion.amber.happy .aura-companion-bubble{border-color:rgba(255,170,0,.5)!important;background:linear-gradient(135deg,rgba(255,170,0,.1),rgba(255,170,0,.02))!important;box-shadow:0 0 30px rgba(255,170,0,.08)} .aura-companion.amber.happy .aura-companion-bubble::before{background:linear-gradient(90deg,transparent,var(--amber),transparent)!important} .aura-companion.amber.happy .aura-companion-arrow{border-right-color:rgba(255,170,0,.5)!important} .aura-companion.amber.happy .aura-companion-name{color:var(--amber)!important;text-shadow:0 0 12px rgba(255,170,0,.5)!important} .aura-companion.amber.happy .aura-companion-text{color:var(--amber)!important} /* Happy state — purple (Tesla) */ .aura-companion.purple.happy .aura-companion-avatar img{filter:drop-shadow(0 0 30px rgba(176,106,255,.5)) drop-shadow(0 0 60px rgba(176,106,255,.2)) drop-shadow(0 4px 20px rgba(0,0,0,.4))!important} .aura-companion.purple.happy .aura-companion-bubble{border-color:rgba(176,106,255,.5)!important;background:linear-gradient(135deg,rgba(176,106,255,.1),rgba(176,106,255,.02))!important;box-shadow:0 0 30px rgba(176,106,255,.08)} .aura-companion.purple.happy .aura-companion-bubble::before{background:linear-gradient(90deg,transparent,var(--purple),transparent)!important} .aura-companion.purple.happy .aura-companion-arrow{border-right-color:rgba(176,106,255,.5)!important} .aura-companion.purple.happy .aura-companion-name{color:var(--purple)!important;text-shadow:0 0 12px rgba(176,106,255,.5)!important} .aura-companion.purple.happy .aura-companion-text{color:var(--purple)!important} .aura-companion.blue .aura-companion-avatar img{filter:drop-shadow(0 0 18px rgba(0,200,255,.3)) drop-shadow(0 6px 20px rgba(0,0,0,.4))} .aura-companion.blue .aura-companion-name{color:rgba(0,200,255,.85);text-shadow:0 0 10px rgba(0,200,255,.4)} .aura-companion-bubble.blue{background:linear-gradient(135deg,rgba(0,200,255,.08),rgba(0,200,255,.02));border-color:rgba(0,200,255,.3)} .aura-companion-bubble.blue::before{background:linear-gradient(90deg,transparent,rgba(0,200,255,.6),transparent)} .aura-companion-arrow.blue{border-right-color:rgba(0,200,255,.3)} .aura-companion.blue.happy .aura-companion-avatar img{filter:drop-shadow(0 0 30px rgba(0,200,255,.5)) drop-shadow(0 0 60px rgba(0,200,255,.2)) drop-shadow(0 4px 20px rgba(0,0,0,.4))!important} .aura-companion.blue.happy .aura-companion-bubble{border-color:rgba(0,200,255,.5)!important;background:linear-gradient(135deg,rgba(0,200,255,.1),rgba(0,200,255,.02))!important;box-shadow:0 0 30px rgba(0,200,255,.08)} .aura-companion.blue.happy .aura-companion-bubble::before{background:linear-gradient(90deg,transparent,var(--blue),transparent)!important} .aura-companion.blue.happy .aura-companion-arrow{border-right-color:rgba(0,200,255,.5)!important} .aura-companion.blue.happy .aura-companion-name{color:var(--blue)!important;text-shadow:0 0 12px rgba(0,200,255,.5)!important} .aura-companion.blue.happy .aura-companion-text{color:var(--blue)!important} .aura-companion.teal .aura-companion-avatar img{filter:drop-shadow(0 0 18px rgba(0,255,213,.3)) drop-shadow(0 6px 20px rgba(0,0,0,.4))} .aura-companion.teal .aura-companion-name{color:rgba(0,255,213,.85);text-shadow:0 0 10px rgba(0,255,213,.4)} .aura-companion.teal .aura-companion-bubble{background:linear-gradient(135deg,rgba(0,255,213,.08),rgba(0,255,213,.02));border-color:rgba(0,255,213,.3)} .aura-companion.teal .aura-companion-bubble::before{background:linear-gradient(90deg,transparent,rgba(0,255,213,.6),transparent)} .aura-companion.teal .aura-companion-arrow{border-right-color:rgba(0,255,213,.3)} .aura-companion.teal.happy .aura-companion-avatar img{filter:drop-shadow(0 0 30px rgba(0,255,213,.5)) drop-shadow(0 0 60px rgba(0,255,213,.2)) drop-shadow(0 4px 20px rgba(0,0,0,.4))!important} .aura-companion.teal.happy .aura-companion-bubble{border-color:rgba(0,255,213,.5)!important;background:linear-gradient(135deg,rgba(0,255,213,.1),rgba(0,255,213,.02))!important;box-shadow:0 0 30px rgba(0,255,213,.08)} .aura-companion.teal.happy .aura-companion-bubble::before{background:linear-gradient(90deg,transparent,#00ffd5,transparent)!important} .aura-companion.teal.happy .aura-companion-arrow{border-right-color:rgba(0,255,213,.5)!important} .aura-companion.teal.happy .aura-companion-name{color:#00ffd5!important;text-shadow:0 0 12px rgba(0,255,213,.5)!important} .aura-companion.teal.happy .aura-companion-text{color:#00ffd5!important} @keyframes auraFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes auraHappy{0%,100%{transform:translateY(0) scale(1)}25%{transform:translateY(-14px) scale(1.1)}50%{transform:translateY(0) scale(1)}75%{transform:translateY(-8px) scale(1.06)}} .WIF{display:flex;flex-direction:column;gap:7px;margin-top:10px} .WFI{background:var(--surface3);border:1px solid var(--border);color:var(--text);font-family:var(--FM);font-size:11px;padding:9px 11px;outline:none;transition:border-color .2s;caret-color:var(--green);width:100%;box-sizing:border-box} .WFI::placeholder{color:var(--text3)} .WFI:focus{border-color:var(--green)} /* sensor select */ .SNS-ROW{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px} .SNS-OPT{background:var(--surface3);border:1px solid var(--border);padding:10px;cursor:none;transition:all .2s;text-align:center;font-family:var(--FM);font-size:10px;color:var(--text2);letter-spacing:1px} .SNS-OPT:hover{border-color:var(--amber)} .SNS-OPT.sel{border-color:var(--amber);background:rgba(255,170,0,.05);color:var(--amber)} /* actuator select */ .ACT-ROW{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px} .ACT-OPT{background:var(--surface3);border:1px solid var(--border);padding:10px 8px;cursor:none;transition:all .2s;text-align:center;font-family:var(--FM);font-size:10px;color:var(--text2);letter-spacing:1px} .ACT-OPT:hover{border-color:var(--purple)} .ACT-OPT.sel{border-color:var(--purple);background:rgba(176,106,255,.05);color:var(--purple)} /* RIGHT PANELS — fills all remaining space */ .RP{background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;position:relative;overflow-y:auto;overflow-x:hidden;padding:0;width:100%;height:100%} .RP::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(0,200,255,.04),transparent 70%);pointer-events:none} .RPT{font-size:13px;font-weight:700;letter-spacing:4px;color:var(--blue);padding:14px 20px 0;width:100%;box-sizing:border-box} /* Radar — escalado para layout 2 columnas (radar a la izquierda, HUD+log a la derecha) */ .RDR{position:relative;width:min(380px,95%);aspect-ratio:1;max-width:100%} .RSVG{width:100%;height:100%;filter:drop-shadow(0 0 24px rgba(0,200,255,.10))} .RSW{transform-origin:90px 90px;animation:radarSpin 3s linear infinite} .RST{font-family:var(--FM);font-size:11px;letter-spacing:3px;color:var(--amber);animation:blink 1s step-end infinite;text-align:center;margin-top:6px} .HUD{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%} .HC{background:var(--surface2);border:1px solid var(--border);padding:14px 16px;font-family:var(--FM);font-size:10px;color:var(--text3);letter-spacing:1.5px;transition:border-color .25s,background .25s} .HC:hover{border-color:rgba(0,200,255,.35);background:rgba(0,200,255,.03)} .HV{font-family:var(--FD);font-size:22px;color:var(--text2);margin-top:6px;display:block;font-weight:700;letter-spacing:1px} /* Layout 2 columnas en pantallas anchas, stack vertical en mobile */ .radar-2col{flex-wrap:wrap} .radar-2col .radar-col-left,.radar-2col .radar-col-right{min-width:280px} @media (max-width:900px){ .radar-2col{flex-direction:column!important} .radar-2col .radar-col-left,.radar-2col .radar-col-right{width:100%;flex:none} .RDR{width:min(360px,75%)} } /* Sensor chart */ .SCHT{width:100%;display:flex;flex-direction:column} .SCH-TITLE{font-family:var(--FM);font-size:11px;color:var(--text3);letter-spacing:3px;margin-bottom:6px;text-align:center} .SCH-BARS{display:flex;align-items:flex-end;gap:4px;height:120px;min-height:90px;border-bottom:1px solid var(--border)} .SCH-BAR{flex:1;background:linear-gradient(0deg,var(--amber),rgba(255,170,0,.3));min-height:4px;transition:height .5s ease;animation:chartGrow .8s ease both} .SCH-VALS{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px} .SCH-VAL{background:var(--surface2);border:1px solid var(--border);padding:16px 14px;text-align:center} .SCH-NUM{font-family:var(--FD);font-size:32px;margin-top:4px} .SCH-LBL{font-family:var(--FM);font-size:10px;color:var(--text3);letter-spacing:2px} /* Control panel */ .CTRL-PNL{width:100%;display:flex;flex-direction:column;gap:10px} .CTRL-ROW{display:flex;align-items:center;justify-content:space-between;background:var(--surface2);border:1px solid var(--border);padding:14px 16px} .CTRL-LBL{font-family:var(--FM);font-size:11px;color:var(--text2);letter-spacing:1px} .CTRL-ST{font-family:var(--FM);font-size:10px;letter-spacing:1px} .CTRL-ST.on{color:var(--green)}.CTRL-ST.off{color:var(--text3)} .TOG{width:44px;height:24px;border:1px solid var(--border);border-radius:12px;position:relative;cursor:none;transition:all .3s;background:var(--surface3)} .TOG.on{background:rgba(0,255,136,.15);border-color:var(--green)} .TOG-K{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--text3);transition:all .3s} .TOG.on .TOG-K{left:23px;background:var(--green);box-shadow:0 0 8px var(--green)} .SLIDER-ROW{background:var(--surface2);border:1px solid var(--border);padding:14px 16px} .SLIDER{width:100%;appearance:none;height:3px;background:var(--border);outline:none;margin-top:10px;cursor:none} .SLIDER::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:var(--purple);cursor:none;box-shadow:0 0 8px var(--purple)} /* ══════════════════════════════════ AHA screens ══════════════════════════════════ */ .AHAP{max-width:660px;width:100%;padding:0 28px;display:flex;flex-direction:column;align-items:center;gap:14px} .SBG{display:flex;align-items:center;gap:10px;font-family:var(--FM);font-size:10px;letter-spacing:3px;animation:fadeUp .5s ease both} .SDT{width:9px;height:9px;border-radius:50%;animation:pulse 1s infinite} .SDT.g{background:var(--green);box-shadow:0 0 14px var(--green)}.SDT.a{background:var(--amber);box-shadow:0 0 14px var(--amber)} .LVD{background:var(--surface);width:100%;padding:20px 28px;text-align:center;position:relative;animation:fadeUp .5s .1s ease both} .LVL{font-family:var(--FM);font-size:9px;letter-spacing:4px;margin-bottom:6px} .LVV{font-family:var(--FD);font-size:clamp(40px,7vw,64px);font-weight:900;line-height:1;animation:gP 1s ease-in-out infinite} .LVV.green{color:var(--green);border-color:var(--green)}.LVV.amber{color:var(--amber)} .BDG{color:var(--bg);padding:14px 24px;text-align:center;animation:slideDown .5s .3s ease both} .BDG.green{background:linear-gradient(135deg,var(--green),var(--blue))}.BDG.amber{background:linear-gradient(135deg,var(--amber),var(--gold))} .xp-reward{font-family:var(--FD);font-size:22px;font-weight:900;color:var(--xpc,var(--gold));letter-spacing:4px;text-align:center;padding:6px 0;text-shadow:0 0 20px var(--xpc,var(--gold)),0 0 40px var(--xpc,var(--gold));animation:xpPop .6s .5s cubic-bezier(.34,1.56,.64,1) both} @keyframes xpPop{0%{opacity:0;transform:scale(.3) translateY(20px)}100%{opacity:1;transform:scale(1) translateY(0)}} .BET{font-size:22px;margin-bottom:4px} .BTL{font-size:13px;font-weight:900;letter-spacing:2px;margin-bottom:2px} .BSU{font-family:var(--FM);font-size:9px;opacity:.8} .CC{position:fixed;inset:0;pointer-events:none;z-index:999;overflow:hidden} .CP{position:absolute;width:8px;height:12px;top:-20px;animation:confettiFall 3s ease forwards} /* ══════════════════════════════════ ASCENSION ══════════════════════════════════ */ .ASC-C{max-width:880px;width:100%;padding:0 36px} .VH{text-align:center;margin-bottom:40px;animation:fadeUp .6s ease both} .VH h2{font-size:clamp(26px,2.8vw,44px);font-weight:900;margin-bottom:10px} .VH p{font-family:var(--FM);font-size:12px;color:var(--text2);max-width:460px;margin:0 auto;line-height:1.8;font-weight:300} .ASCT{display:flex;align-items:center;gap:0;margin-bottom:32px;animation:fadeUp .6s .2s ease both} .AN{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1} .AO{width:90px;height:90px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px} .AO.done{background:radial-gradient(circle,rgba(0,200,255,.2),rgba(0,200,255,.04));border:2px solid var(--blue);box-shadow:0 0 20px rgba(0,200,255,.3)} .AO.energy{border-color:var(--green);background:radial-gradient(circle,rgba(0,255,136,.2),rgba(0,255,136,.04));box-shadow:0 0 40px rgba(0,255,136,.4)} .AO.amber{border:2px solid var(--amber);background:rgba(255,170,0,.05);box-shadow:0 0 20px rgba(255,170,0,.3);animation:pulseA 2s ease-in-out infinite} .AO.locked{opacity:.35;filter:brightness(.5);border:2px solid var(--text3)} .ACN{flex:1;height:2px;position:relative;top:-8px} .ACN.flow{background:linear-gradient(90deg,var(--green),var(--amber));background-size:200% 100%;animation:shimmer 1.5s linear infinite} .ACN.plain{background:rgba(0,200,255,.15)} .AL{font-size:11px;font-weight:700;letter-spacing:1px;text-align:center} .ASL{font-family:var(--FM);font-size:9px;color:var(--text3);letter-spacing:1px} .NM{background:var(--surface);border:1px solid var(--border);padding:24px;display:flex;align-items:center;gap:20px;animation:fadeUp .6s .3s ease both;position:relative} .NM::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--amber),transparent)} .NMI{font-size:36px;flex-shrink:0} .NMH{font-size:14px;font-weight:700;margin-bottom:4px} .NMP{font-family:var(--FM);font-size:11px;color:var(--text2);line-height:1.7;font-weight:300} /* ══════════════════════════════════ S8 PAYWALL + PAYMENT ══════════════════════════════════ */ #s8{flex-direction:row;padding-top:0;align-items:stretch} .PWC{max-width:600px;width:100%;padding:0 36px;text-align:center;margin:0 auto} .TH{margin-bottom:28px;animation:fadeUp .6s ease both} .TH .LB{font-family:var(--FM);font-size:10px;letter-spacing:4px;color:var(--gold);border:1px solid rgba(255,215,0,.3);padding:4px 12px;display:inline-block;margin-bottom:14px;background:rgba(255,215,0,.05)} .TH h2{font-size:clamp(26px,3vw,42px);font-weight:900;margin-bottom:8px} .TH h2 .gold{color:var(--gold)} .TH p{font-family:var(--FM);font-size:12px;color:var(--text2);line-height:1.8;font-weight:300} .PRC{background:var(--surface);border:1px solid rgba(255,215,0,.3);padding:32px;position:relative;overflow:hidden;box-shadow:0 0 60px rgba(255,215,0,.07);animation:fadeUp .6s .1s ease both} .PRC::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--amber),var(--gold))} .PRB{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,215,0,.06),transparent 60%)} .PCV{position:relative;z-index:1} .PPR{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-bottom:20px} .PPV{font-size:52px;font-weight:900;color:var(--gold)} .PPE{font-family:var(--FM);font-size:13px;color:var(--text3)} .PFF{display:grid;grid-template-columns:1fr 1fr;gap:9px;text-align:left;margin-bottom:24px} .PFI{display:flex;align-items:center;gap:7px;font-family:var(--FM);font-size:11px;color:var(--text);font-weight:300} .PFI::before{content:'⚡';font-size:11px} /* STRIPE-LIKE PAYMENT MODAL */ .PMO{display:none} .PMO.show{display:flex;position:fixed;inset:0;z-index:600;align-items:center;justify-content:center;background:rgba(4,8,13,.94);backdrop-filter:blur(12px)} .PMB{background:#0d1c2a;border:1px solid rgba(255,255,255,.08);max-width:500px;width:92%;position:relative;animation:modalIn .4s ease;box-shadow:0 40px 120px rgba(0,0,0,.8)} .PMB::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--amber))} .PMH{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.06)} .PML{display:flex;align-items:center;gap:10px} .PML-ICO{font-size:20px} .PML-TXT{font-size:13px;font-weight:700;color:var(--text)} .PML-SUB{font-family:var(--FM);font-size:10px;color:var(--text3);letter-spacing:1px} .PML-PRC{font-family:var(--FD);font-size:20px;color:var(--gold)} .PMX{font-size:18px;color:var(--text3);cursor:none;background:none;border:none;padding:4px 8px;transition:color .2s} .PMX:hover{color:var(--text)} .PMF{padding:24px} .PMF-ROW{margin-bottom:16px} .PMF-LBL{font-family:var(--FM);font-size:10px;color:var(--text3);letter-spacing:2px;margin-bottom:6px;display:block} .PMF-IN{width:100%;background:#040c14;border:1px solid rgba(255,255,255,.1);color:var(--text);font-family:var(--FM);font-size:13px;padding:12px 14px;outline:none;transition:border-color .2s;caret-color:var(--gold);letter-spacing:1px} .PMF-IN:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,215,0,.08)} .PMF-IN::placeholder{color:var(--text3);font-size:12px} .PMF-2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .CARD-ROW{display:flex;align-items:center;gap:8px;background:#040c14;border:1px solid rgba(255,255,255,.1);padding:12px 14px;margin-bottom:16px;transition:border-color .2s} .CARD-ROW:focus-within{border-color:var(--gold)} .CARD-ICO{font-size:20px;flex-shrink:0} .CARD-IN{flex:1;background:transparent;border:none;color:var(--text);font-family:var(--FM);font-size:13px;outline:none;letter-spacing:2px;caret-color:var(--gold)} .CARD-IN::placeholder{color:var(--text3);font-size:12px;letter-spacing:1px} .SEC-ROW{display:flex;align-items:center;gap:6px;font-family:var(--FM);font-size:10px;color:var(--text3);letter-spacing:1px;margin-bottom:20px} .SEC-ICO{font-size:12px} .PAY-BTN{width:100%;padding:15px;background:linear-gradient(90deg,var(--gold),var(--amber));border:none;color:var(--bg);font-family:var(--FD);font-size:13px;font-weight:900;letter-spacing:3px;cursor:none;transition:all .2s;position:relative;overflow:hidden} .PAY-BTN:hover{box-shadow:0 4px 30px rgba(255,215,0,.4)} .PAY-BTN.loading{pointer-events:none} .PAY-BTN.loading::after{content:'';position:absolute;bottom:0;left:0;height:3px;background:rgba(255,255,255,.4);animation:stripeLoad 1.8s ease forwards} .PAY-TRUST{display:flex;justify-content:center;gap:16px;margin-top:14px;font-family:var(--FM);font-size:9px;color:var(--text3);letter-spacing:1px} .PAY-TRUST span{display:flex;align-items:center;gap:4px} /* SUCCESS MODAL */ .PSUC{display:none} .PSUC.show{display:flex;position:fixed;inset:0;z-index:700;align-items:center;justify-content:center;background:rgba(4,8,13,.96);backdrop-filter:blur(16px)} .PSB{background:var(--surface);border:1px solid var(--green);max-width:440px;width:92%;padding:40px;text-align:center;animation:modalIn .5s ease;box-shadow:0 0 100px rgba(0,255,136,.15)} .PSB::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--green),var(--blue))} .PSB{position:relative} .PS-CHECK{width:64px;height:64px;margin:0 auto 20px;border:2px solid var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px rgba(0,255,136,.4)} .PS-CHECK svg{animation:checkDraw .6s .3s ease both} .PS-TT{font-size:20px;font-weight:900;color:var(--green);margin-bottom:8px;letter-spacing:2px} .PS-SUB{font-family:var(--FM);font-size:12px;color:var(--text2);line-height:1.8;margin-bottom:20px;font-weight:300} .PS-PERKS{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;text-align:left} .PS-PK{display:flex;align-items:center;gap:10px;font-family:var(--FM);font-size:11px;color:var(--text);animation:tickUp .4s ease both;font-weight:300} .PS-PK::before{content:'✓';color:var(--green);font-weight:700} .PS-PK:nth-child(1){animation-delay:.4s} .PS-PK:nth-child(2){animation-delay:.6s} .PS-PK:nth-child(3){animation-delay:.8s} /* VIP modal */ .VM{display:none} .VM.show{display:flex;position:fixed;inset:0;z-index:600;align-items:center;justify-content:center;background:rgba(4,8,13,.9);backdrop-filter:blur(8px)} .VB{background:var(--surface);border:1px solid var(--green);max-width:440px;width:90%;padding:36px;text-align:center;animation:modalIn .4s ease;box-shadow:0 0 80px rgba(0,255,136,.12);position:relative} .VB::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--green),var(--blue))} /* SCAN EFFECT for cards */ .scan-overlay{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .3s} .scan-beam{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--green),transparent);animation:scanBeam 2s linear infinite;top:-100%} .HWC:hover .scan-overlay{opacity:1} /* Scrollbar */ ::-webkit-scrollbar{width:3px} ::-webkit-scrollbar-track{background:var(--surface)} ::-webkit-scrollbar-thumb{background:var(--border)} /* Flash buttons ocultos — auto-flash on port select */ button[data-auto="1"] { display: none !important; } /* Botones "Reutilizar WiFi" eliminados — las credenciales se copian automáticamente */ #reuseWifiM2, #btnReuseWifi, #btnReuseWifiC { display: none !important; } /* Tesla + Feedback CSS */ #feedbackModal *{cursor:default}#feedbackModal button,#feedbackModal .fb-tag,#feedbackModal .fb-radio-opt,#feedbackModal .fb-star,#feedbackModal .fb-num{cursor:pointer}#feedbackModal textarea,#feedbackModal input{cursor:text} .fb-tag{display:inline-flex;align-items:center;font-family:var(--FM);font-size:11px;font-weight:300;letter-spacing:.5px;color:var(--text2);border:1px solid var(--border);padding:6px 12px;cursor:pointer;transition:all .2s;background:transparent;user-select:none} .fb-tag:hover{border-color:rgba(176,106,255,.4);color:var(--purple)} .fb-tag.active{border-color:var(--purple);color:var(--purple);background:rgba(176,106,255,.12);font-weight:300} .fb-radio-opt{display:flex;align-items:center;gap:8px;font-family:var(--FM);font-size:11px;font-weight:300;color:var(--text2);letter-spacing:.5px;padding:8px 12px;border:1px solid var(--border);cursor:pointer;transition:all .2s;user-select:none} .fb-radio-opt:hover{border-color:rgba(176,106,255,.4);color:var(--purple)} .fb-radio-opt.active{border-color:var(--purple);color:var(--purple);background:rgba(176,106,255,.08)} .fb-radio-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--text3);flex-shrink:0;transition:all .2s} .fb-radio-opt.active .fb-radio-dot{background:var(--purple);border-color:var(--purple);box-shadow:0 0 6px rgba(176,106,255,.6)} .fb-num{font-family:var(--FM);font-size:11px;padding:7px 13px;border:1px solid var(--border);cursor:pointer;transition:all .2s;color:var(--text3);user-select:none} .fb-num:hover{border-color:rgba(176,106,255,.4);color:var(--purple)} .fb-num.active{border-color:var(--purple);color:var(--purple);background:rgba(176,106,255,.12);box-shadow:0 0 8px rgba(176,106,255,.3)} /* ═══════════════════════════════ NEXO TOUR OVERLAY ═══════════════════════════════ */ #tourOverlay { position:fixed;inset:0;z-index:8000;pointer-events:none; } /* Spotlight TRANSPARENTE por default — el oscurecimiento lo hace el shadow del highlight. Si no hay target (paso center), se añade .no-target para oscurecer toda la pantalla con background propio. */ #tourSpotlight { position:fixed;inset:0;z-index:8001;pointer-events:all; background:rgba(0,0,0,0);transition:background .4s; } #tourSpotlight.active.no-target { background:rgba(0,0,0,.78); } /* Highlight: el box-shadow gigante crea el "agujero claro" donde está el elemento destacado. El interior del highlight queda transparente, así que el elemento real abajo se ve nítido y resaltado por el border verde + glow. */ #tourHighlight { position:fixed;z-index:8002;pointer-events:none; border:2.5px solid var(--green); box-shadow: 0 0 0 9999px rgba(0,0,0,.78), 0 0 24px rgba(0,255,136,.65), 0 0 60px rgba(0,255,136,.35), inset 0 0 18px rgba(0,255,136,.10); transition:all .45s cubic-bezier(.4,0,.2,1); border-radius:6px; } /* Elemento real destacado: lo elevamos por encima del spotlight para que quede totalmente nítido (sin tinte oscuro residual). */ [data-tour-target] { position:relative !important; z-index:8003 !important; } #tourCard { position:fixed;z-index:8003;pointer-events:all; background:var(--surface);border:1px solid rgba(0,255,136,.4); padding:22px 24px;width:330px; box-shadow:0 0 40px rgba(0,0,0,.6),0 0 20px rgba(0,255,136,.1); animation:fadeUp .3s ease both; } #tourCard::before { content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--green),var(--blue)); } .tour-step-label { font-family:var(--FM);font-size:10px;color:var(--green); letter-spacing:3px;margin-bottom:10px;opacity:.85; } .tour-title { font-family:var(--FD);font-size:17px;color:var(--text); font-weight:700;letter-spacing:1px;margin-bottom:8px; } .tour-desc { font-family:var(--FM);font-size:13px;color:var(--text2); line-height:1.65;margin-bottom:16px; } .tour-dots { display:flex;gap:6px;margin-bottom:14px; } .tour-dot { width:6px;height:6px;border-radius:50%; background:var(--border);transition:all .3s; } .tour-dot.active { background:var(--green);box-shadow:0 0 8px var(--green); } .tour-dot.done { background:rgba(0,255,136,.4); } .tour-btns { display:flex;gap:8px;align-items:center; } .tour-btn-next { flex:1;background:var(--green);color:#04080d; font-family:var(--FM);font-size:12px;letter-spacing:2px; padding:11px 16px;border:none;cursor:pointer; font-weight:700;transition:all .2s; } .tour-btn-next:hover { background:#00cc6a;transform:translateY(-1px); } .tour-btn-skip { background:transparent;border:1px solid var(--border); color:var(--text2);font-family:var(--FM);font-size:11px; letter-spacing:1px;padding:11px 12px;cursor:pointer; transition:all .2s; } .tour-btn-skip:hover { border-color:var(--text2);color:var(--text2); } /* ═══════════════════════════════ MI TALLER — PANEL ACCESO RAPIDO ═══════════════════════════════ */ #workshopDrawer { position:fixed;top:0;right:-420px;width:400px;height:100%; background:var(--surface);border-left:1px solid var(--border2); z-index:9500;transition:right .35s cubic-bezier(.4,0,.2,1); display:flex;flex-direction:column;overflow:hidden; box-shadow:-10px 0 60px rgba(0,0,0,.5); } #workshopDrawer.open { right:0; } #workshopDrawer::before { content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--green),var(--blue)); } .WS-HDR { padding:20px 22px 16px;border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between;flex-shrink:0; } .WS-HDR-L { display:flex;flex-direction:column;gap:3px; } .WS-HDR-TAG { font-family:var(--FM);font-size:8px;color:var(--green);letter-spacing:3px; } .WS-HDR-TITLE { font-family:var(--FD);font-size:18px;font-weight:900;color:var(--text); } .WS-CLOSE { width:32px;height:32px;border:1px solid var(--border); display:flex;align-items:center;justify-content:center; cursor:pointer;color:var(--text3);font-size:14px;transition:all .2s; } .WS-CLOSE:hover { border-color:var(--text);color:var(--text); } .WS-BODY { flex:1;min-height:0;overflow-y:auto;padding:16px 22px 40px;display:flex;flex-direction:column;gap:16px; } .WS-EMPTY { text-align:center;padding:40px 20px; font-family:var(--FM);font-size:10px;color:var(--text3);letter-spacing:2px;line-height:2; } /* Nivel card */ .WS-LEVEL { border:1px solid var(--border);overflow:hidden; flex-shrink:0; } .WS-LEVEL-HDR { display:flex;align-items:center;gap:12px; padding:12px 14px;border-bottom:1px solid var(--border); background:rgba(255,255,255,.02); } .WS-LEVEL-ICON { font-size:22px;flex-shrink:0; } .WS-LEVEL-INFO { flex:1; } .WS-LEVEL-NAME { font-family:var(--FD);font-size:12px;font-weight:700;letter-spacing:1px; } .WS-LEVEL-SUB { font-family:var(--FM);font-size:8px;color:var(--text3);letter-spacing:2px;margin-top:2px; } .WS-LEVEL-BADGE { font-family:var(--FM);font-size:8px;letter-spacing:1px; padding:3px 8px;border:1px solid; } /* Panel de misión */ .WS-MISSION { padding:14px 14px 16px;border-bottom:1px solid var(--border); } .WS-MISSION:last-child { border-bottom:none; } .WS-MISSION-NAME { font-family:var(--FM);font-size:10px;color:var(--text2); letter-spacing:2px;margin-bottom:10px; display:flex;align-items:center;gap:6px; } .WS-MISSION-NAME::before { content:'';display:block;width:6px;height:6px; border-radius:50%;background:var(--color,var(--green)); box-shadow:0 0 6px var(--color,var(--green)); } /* Panel buttons row */ .WS-PANELS { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px; } .WS-PANEL-BTN { flex:1;min-width:80px; background:rgba(0,0,0,.3);border:1px solid var(--border); color:var(--text2);font-family:var(--FM);font-size:9px; letter-spacing:1px;padding:8px 10px;cursor:pointer; transition:all .2s;text-align:center; } .WS-PANEL-BTN:hover { border-color:var(--c,var(--green));color:var(--c,var(--green));background:rgba(0,255,136,.06); } .WS-PANEL-BTN.active { border-color:var(--c,var(--green));color:var(--c,var(--green));background:rgba(0,255,136,.08); } /* Code preview */ .WS-CODE-WRAP { background:#040c14;border:1px solid var(--border); max-height:160px;overflow-y:auto; font-family:var(--FM);font-size:10px;line-height:1.7; padding:10px 12px;position:relative;display:none; } .WS-CODE-WRAP.open { display:block; } .WS-CODE-ACTIONS { display:flex;gap:6px;margin-top:8px; } .WS-CODE-BTN { flex:1;padding:9px;border:1px solid; font-family:var(--FM);font-size:9px;letter-spacing:2px; cursor:pointer;transition:all .2s;background:transparent; display:flex;align-items:center;justify-content:center;gap:6px; } /* Workshop trigger button on Nexo */ #workshopBtn { position:fixed;top:60px;right:24px;z-index:250; background:rgba(4,8,13,.9);border:1px solid rgba(0,255,136,.4); color:var(--green);font-family:var(--FM);font-size:9px; letter-spacing:2px;padding:8px 16px;cursor:pointer; display:none;align-items:center;gap:8px;transition:all .2s; backdrop-filter:blur(8px);pointer-events:all; } #workshopBtn:hover { background:rgba(0,255,136,.1);box-shadow:0 0 20px rgba(0,255,136,.2); } #workshopBtn.visible { display:flex; } /* ═══════════════════════════════════════════════ RESPONSIVE — TABLET & MOBILE ═══════════════════════════════════════════════ */ /* ── Tablet (≤ 900px) ── */ @media (max-width: 900px) { html,body { overflow-y: auto; } .SCR { position: relative; overflow-y: auto; min-height: 100svh; } #sTeacher { top: 0; } .SCR.active { visibility: visible; opacity: 1; pointer-events: all; } /* Cursor personalizado oculto en touch */ .CD, .CR { display: none !important; } body { cursor: auto !important; } button, a, [onclick] { cursor: pointer !important; } /* NAV */ .TNV { padding: 10px 16px; } .NR .XP-bar { display: none; } /* 2026-09-08 - Envolver evita el recorte, pero una barra de tres filas se come media pantalla de movil. Aqui se van los ADORNOS -racha, Plaza, el punto de MQTT, el sello de version- y se quedan las PUERTAS: AULAS, MI AULA, MI RED, el avatar y salir. > Cuando no cabe todo, lo que se quita es lo que informa, no lo que lleva > a algun sitio. `!important` porque app.js los enciende con estilo en linea al iniciar sesion, y un estilo en linea gana a la hoja. */ #streakBadge, #plazaNavBtn, #mqttNavDot, #atVersionBadge { display: none !important; } /* LANDING */ .HG { grid-template-columns: 1fr !important; gap: 32px !important; padding: 24px 20px !important; text-align: center; } .HG h1 { font-size: clamp(28px, 7vw, 52px) !important; } .stats { justify-content: center; } .LC { width: 100% !important; max-width: 400px; margin: 0 auto; } /* ORACLE */ .HWG { grid-template-columns: repeat(2,1fr) !important; padding: 0 20px !important; } /* SPLASH XP — handled in dedicated 1100px query below */ /* BRIEFING MISIONES — responsive */ .BRC { padding: 8px 16px 12px !important; } .BRK { padding: 18px !important; } .PRR { gap: 14px !important; } .PRT { width: 68px !important; height: 82px !important; } .PNM { font-size: 18px !important; } .PBI { font-size: 12px !important; } .MTX { font-size: 13px !important; padding: 14px !important; margin-bottom: 12px !important; } .MMT { gap: 7px !important; margin-bottom: 12px !important; } .MPL { padding: 7px 10px !important; font-size: 10px !important; } /* PROFILE */ #sProfile > div { width: 100% !important; padding: 24px 20px !important; } /* MISIONES: panel split → columna */ .WS { grid-template-columns: 1fr !important; height: auto !important; } .WS > div:first-child { max-height: 50svh; overflow-y: auto; border-right: none !important; border-bottom: 1px solid var(--border); } .RP { min-height: 50svh; } /* XP RANKS table in splash */ #splashXP [style*="grid-template-columns:1.2fr"] { grid-template-columns: 1fr !important; } /* Feedback modal */ .FM { width: 92vw !important; max-height: 90svh !important; overflow-y: auto !important; } .PFF, .PMF-2 { grid-template-columns: 1fr !important; } /* Nexo space map */ #s3 .TNV { display: flex !important; } #spaceMap { touch-action: pan-x pan-y; } } /* ── Splash XP: 2 cols → 1 col on screens ≤ 1100px ── */ @media (max-width: 1100px) { #sSplash > div { grid-template-columns: 1fr !important; overflow-y: auto; } #sSplash > div > div:first-child { border-right: none !important; border-bottom: 1px solid var(--border); padding: 28px 24px !important; } #sSplash > div > div:last-child { padding: 28px 24px !important; min-height: auto !important; } } /* ── Mobile (≤ 600px) ── */ @media (max-width: 600px) { /* NAV simplificado */ .TNV { padding: 8px 12px; } /* A 600px tampoco cabe el selector de placa: se cambia desde el Nexo. */ #boardNavBtn { display: none !important; } .NR { gap: 12px; } .NL { font-size: 11px !important; letter-spacing: 1px !important; } .NU { font-size: 10px !important; } #xpLabel, #xpFill, .XP-track { display: none !important; } /* LANDING */ .HG h1 { font-size: clamp(24px, 8vw, 36px) !important; } .stats { flex-direction: row; gap: 16px; flex-wrap: wrap; justify-content: center; } .SN { font-size: 22px !important; } .LC { padding: 20px 16px !important; } /* ORACLE cards */ .HWG { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; padding: 0 12px !important; } .HWC { padding: 16px 10px !important; } /* SPLASH dos columnas → una col con scroll */ #splashXP [style*="grid-template-columns:1.2fr"] { grid-template-columns: 1fr 1fr !important; } /* Misiones: tabs más pequeños */ .TB { font-size: 8px !important; padding: 8px 6px !important; } /* BRIEFING MISIONES — mobile */ .BRC { padding: 12px 14px 32px !important; } .CLH { flex-wrap: wrap !important; gap: 8px !important; } .CST { font-size: 10px !important; padding: 4px 10px !important; letter-spacing: 2px !important; } .BRK { padding: 18px !important; } .PRR { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 14px !important; } .PRT { width: 80px !important; height: 80px !important; border-radius: 50% !important; } .PNM { font-size: 18px !important; } .PYR { font-size: 10px !important; } .PBI { font-size: 12px !important; line-height: 1.7 !important; } .MTX { font-size: 13px !important; padding: 14px !important; line-height: 1.7 !important; } .MMT { justify-content: center !important; gap: 7px !important; } .MPL { padding: 8px 12px !important; font-size: 10px !important; } /* PROFILE goal grid */ #goalGrid { grid-template-columns: 1fr !important; } /* Modales */ .UM { padding: 20px 16px !important; width: 92vw !important; } .UM.wide { padding: 20px 16px !important; width: 94vw !important; max-height: 90vh !important; } #lvlDrawer { width: 94vw !important; } /* Quiz submit buttons */ [id^="quizSubmit_"] { bottom: 10px !important; } /* Aura widget */ #auraWidget { top: 70px !important; left: 12px !important; } #auraBubble { width: min(280px, 75vw) !important; left: 80px !important; } /* Turing/Upsell */ #s8 { flex-direction: column !important; } #s8 > div { width: 100% !important; } .PRC { padding: 20px 16px !important; } } /* ── Fix touch scrolling on all screens ── */ @media (max-width: 900px) { .SCR.scroll-y { -webkit-overflow-scrolling: touch; } .STP-LIST { -webkit-overflow-scrolling: touch; } .RP { -webkit-overflow-scrolling: touch; } } /* Mi Red CSS */ /* ══ Header de sección unificado (look sci-fi consistente) ══ */ .at-sec-h{display:flex;align-items:center;gap:10px;margin-bottom:10px;width:100%} .at-sec-h .at-sec-bar{width:3px;height:12px;background:linear-gradient(180deg,var(--blue),rgba(0,200,255,.3));border-radius:2px;box-shadow:0 0 8px rgba(0,200,255,.5);flex-shrink:0} .at-sec-h .at-sec-title{font-family:var(--FD);font-size:11px;font-weight:700;color:var(--text);letter-spacing:3px;text-transform:uppercase;flex-shrink:0} .at-sec-h .at-sec-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(0,200,255,.2) 0%,transparent 100%);min-width:12px} .at-sec-h .at-sec-hint{font-family:var(--FM);font-size:9px;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;flex-shrink:0} .at-sec-h.accent-gold .at-sec-bar{background:linear-gradient(180deg,var(--gold),rgba(255,215,0,.3));box-shadow:0 0 8px rgba(255,215,0,.5)} .at-sec-h.accent-gold .at-sec-line{background:linear-gradient(90deg,rgba(255,215,0,.2) 0%,transparent 100%)} .at-sec-h.accent-green .at-sec-bar{background:linear-gradient(180deg,var(--green),rgba(0,255,136,.3));box-shadow:0 0 8px rgba(0,255,136,.5)} .at-sec-h.accent-green .at-sec-line{background:linear-gradient(90deg,rgba(0,255,136,.2) 0%,transparent 100%)} .at-sec-h.accent-amber .at-sec-bar{background:linear-gradient(180deg,var(--amber),rgba(255,170,0,.3));box-shadow:0 0 8px rgba(255,170,0,.5)} .at-sec-h.accent-amber .at-sec-line{background:linear-gradient(90deg,rgba(255,170,0,.2) 0%,transparent 100%)} .at-sec-h.accent-purple .at-sec-bar{background:linear-gradient(180deg,var(--purple,#b794f6),rgba(183,148,246,.3));box-shadow:0 0 8px rgba(183,148,246,.5)} .at-sec-h.accent-purple .at-sec-line{background:linear-gradient(90deg,rgba(183,148,246,.2) 0%,transparent 100%)} .sb-cat-item{flex-shrink:0;width:86px;padding:10px 6px 9px;border:1px solid var(--border);background:linear-gradient(180deg,var(--surface2) 0%,rgba(0,0,0,.15) 100%);cursor:grab;transition:all .25s cubic-bezier(.4,0,.2,1);text-align:center;user-select:none;position:relative;overflow:hidden} .sb-cat-item::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,200,255,.08) 0%,transparent 50%);opacity:0;transition:opacity .25s} .sb-cat-item:hover{border-color:var(--blue);background:rgba(0,200,255,.06);transform:translateY(-3px);box-shadow:0 6px 20px -4px rgba(0,200,255,.25),0 0 0 1px rgba(0,200,255,.15)} .sb-cat-item:hover::before{opacity:1} .sb-cat-item:hover .sb-cn{color:var(--blue);text-shadow:0 0 8px rgba(0,200,255,.4)} .sb-cat-item:active{cursor:grabbing;transform:scale(.95)} .sb-cat-item .sb-ci{font-size:24px;margin-bottom:5px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));position:relative;z-index:1} .sb-cat-item .sb-cn{font-family:var(--FD);font-size:10px;font-weight:600;color:var(--text);letter-spacing:1.2px;text-transform:uppercase;position:relative;z-index:1;transition:color .2s,text-shadow .2s;line-height:1.2} .sb-w{width:240px;border:1px solid var(--border);background:var(--surface);position:absolute;overflow:hidden;z-index:1;transition:box-shadow .2s,border-color .2s;display:flex;flex-direction:column} .sb-w:hover{box-shadow:0 0 20px rgba(0,200,255,.07)} .sb-w.drag{z-index:100;box-shadow:0 0 30px rgba(0,200,255,.2);opacity:.92} /* Widget DEMO del tour: aparece con un fade+scale + pulse de glow para llamar la atención */ .sb-w.sb-tour-demo-pulse{ animation:sbTourDemoIn .55s cubic-bezier(.4,1.4,.5,1) both, sbTourDemoPulse 2.4s ease-in-out 1.2s infinite; } @keyframes sbTourDemoIn{ 0%{opacity:0;transform:scale(.6) translateY(20px)} 60%{opacity:1;transform:scale(1.04) translateY(-3px)} 100%{opacity:1;transform:scale(1) translateY(0)} } @keyframes sbTourDemoPulse{ 0%,100%{box-shadow:0 0 0 rgba(0,200,255,0),0 0 22px rgba(0,200,255,.18)} 50%{box-shadow:0 0 0 6px rgba(0,200,255,.10),0 0 38px rgba(0,200,255,.45),0 0 80px rgba(140,80,255,.20)} } .sb-w::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--wc,var(--blue))} .sb-w-hd{display:flex;align-items:center;gap:8px;padding:9px 12px 8px;border-bottom:1px solid rgba(255,255,255,.06);cursor:grab;user-select:none;flex-shrink:0;min-width:0;background:linear-gradient(180deg,color-mix(in srgb,var(--wc,var(--blue)) 7%,transparent),transparent)} .sb-w-hd:active{cursor:grabbing} .sb-w-hd .sb-w-icon, .sb-w-hd > svg, .sb-w-hd > i{filter:drop-shadow(0 0 4px var(--wc,var(--blue)));flex-shrink:0} /* \u{1F534} `min-height:0` NO ES DECORACION \u2014 es lo que hace que este cuerpo pueda encogerse. Un hijo de flex trae `min-height:auto` de fabrica: **se niega a ser mas bajo que su contenido**. Con la tarjeta a alto fijo, un grafico demasiado alto inflaba el cuerpo por debajo del borde y los botones y la barra del servo quedaban recortados. Peor: `clientHeight` devolvia entonces el alto del CONTENIDO, no el sitio disponible, asi que la medida que calcula el alto del grafico se alimentaba de si misma y nunca convergia. Con `min-height:0` el cuerpo vale lo que le sobra a la tarjeta, y esa medida pasa a ser verdad. (De aqui salia el numero magico que habia antes en el JS: alguien compenso a mano un cuerpo que no encogia.) */ .sb-w-bd{padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;min-height:0;justify-content:safe center} /* ════════════════════════════════════════════════════════════════ ║ HEADER ICONS · pastillas circulares con glow/tooltip nativo ║ ║ Diseño: 22x22px, fondo translúcido, glow halo color-coded ║ ║ Tooltip estilo "chip" desde data-tip (no atributo title nativo) ╚═══════════════════════════════════════════════════════════════*/ .sb-w-x,.sb-w-st{ position:absolute;top:5px; width:22px;height:22px; display:inline-flex;align-items:center;justify-content:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); color:var(--text2); font-size:12px;line-height:1; cursor:pointer;padding:0; opacity:.75; transition:transform .18s cubic-bezier(.4,1.4,.5,1),background .2s,box-shadow .25s,border-color .2s,opacity .2s,color .2s; z-index:5; -webkit-user-select:none;user-select:none; } .sb-w-x{right:6px} .sb-w-st{right:32px} .sb-w-x:hover,.sb-w-st:hover{opacity:1;transform:scale(1.15)} /* 🔬 2026-06-19 · Iconos secundarios (info/datos/alerta) se revelan al pasar el mouse, así el título cabe sin solaparse en widgets pequeños. En táctil (sin hover) quedan visibles siempre (en móvil los widgets son full-width y no estorban). */ @media(hover:hover){ .sb-w-aux{opacity:0;pointer-events:none} .sb-w:hover .sb-w-aux{opacity:.75;pointer-events:auto} .sb-w:hover .sb-w-aux:hover{opacity:1} } .sb-w-x:hover{ background:rgba(255,80,80,.16); border-color:rgba(255,80,80,.55); color:#ff8a8a; box-shadow:0 0 14px rgba(255,80,80,.45),inset 0 0 6px rgba(255,80,80,.15); } .sb-w-st:hover{ background:rgba(0,200,255,.14); border-color:rgba(0,200,255,.55); color:var(--blue); box-shadow:0 0 14px rgba(0,200,255,.45),inset 0 0 6px rgba(0,200,255,.15); } /* Botón de alerta 🔔 (creado inline en mired.js, comparte clase sb-w-st pero con right:58px override inline) */ .sb-w-st[data-icon="alert"]:hover{ background:rgba(255,170,0,.16); border-color:rgba(255,170,0,.6); color:var(--amber); box-shadow:0 0 14px rgba(255,170,0,.5),inset 0 0 6px rgba(255,170,0,.2); } /* Botón de datos 📊 — color morado/data lab (right:84px override inline) */ .sb-w-st[data-icon="data"]:hover{ background:rgba(176,106,255,.16); border-color:rgba(176,106,255,.55); color:#cba8ff; box-shadow:0 0 14px rgba(176,106,255,.45),inset 0 0 6px rgba(176,106,255,.18); } /* Tooltip estilizado — aparece debajo del botón al hover (data-tip) */ .sb-w-x[data-tip],.sb-w-st[data-tip]{position:absolute} .sb-w-x[data-tip]::after,.sb-w-st[data-tip]::after{ content:attr(data-tip); position:absolute; top:calc(100% + 8px); right:0; white-space:nowrap; background:linear-gradient(180deg,rgba(8,18,28,.98) 0%,rgba(4,10,18,.98) 100%); border:1px solid rgba(0,200,255,.35); color:#dff5ff; font-family:var(--FM); font-size:9.5px; letter-spacing:.7px; padding:6px 10px; border-radius:2px; pointer-events:none; opacity:0; transform:translateY(-4px) scale(.92); transform-origin:top right; transition:opacity .18s ease,transform .22s cubic-bezier(.4,1.4,.5,1); box-shadow:0 4px 18px rgba(0,0,0,.55),0 0 12px rgba(0,200,255,.18); z-index:9999; } .sb-w-x[data-tip]::before,.sb-w-st[data-tip]::before{ content:'';position:absolute;top:calc(100% + 2px);right:7px; border:6px solid transparent;border-bottom-color:rgba(0,200,255,.35); pointer-events:none;opacity:0;transition:opacity .18s ease; z-index:9999; } .sb-w-x[data-tip]:hover::after,.sb-w-st[data-tip]:hover::after{ opacity:1;transform:translateY(0) scale(1); transition-delay:.35s; } .sb-w-x[data-tip]:hover::before,.sb-w-st[data-tip]:hover::before{ opacity:1;transition-delay:.35s; } /* Permite que el tooltip "salga" del card cuando se hace hover en un icono. Sin esto el overflow:hidden del .sb-w cortaría el chip flotante. */ .sb-w:has(.sb-w-x:hover, .sb-w-st:hover){overflow:visible} /* Tooltip variantes color: alert (ámbar) y close (rojo) */ .sb-w-x[data-tip]::after{border-color:rgba(255,80,80,.5);box-shadow:0 4px 18px rgba(0,0,0,.55),0 0 12px rgba(255,80,80,.22)} .sb-w-x[data-tip]::before{border-bottom-color:rgba(255,80,80,.5)} .sb-w-st[data-icon="alert"][data-tip]::after{border-color:rgba(255,170,0,.55);box-shadow:0 4px 18px rgba(0,0,0,.55),0 0 12px rgba(255,170,0,.25)} .sb-w-st[data-icon="alert"][data-tip]::before{border-bottom-color:rgba(255,170,0,.55)} .sb-w-st[data-icon="data"][data-tip]::after{border-color:rgba(176,106,255,.55);box-shadow:0 4px 18px rgba(0,0,0,.55),0 0 12px rgba(176,106,255,.28);color:#e6d8ff} .sb-w-st[data-icon="data"][data-tip]::before{border-bottom-color:rgba(176,106,255,.55)} /* 4 visual styles */ .sb-w.s-neon,.sb-w.s-arc,.sb-w.s-knob,.sb-w.s-arm{background:rgba(4,8,13,.97);border-color:var(--wc);box-shadow:0 0 15px color-mix(in srgb,var(--wc) 15%,transparent)} .sb-w.s-neon::before,.sb-w.s-arc::before,.sb-w.s-knob::before,.sb-w.s-arm::before{box-shadow:0 0 10px var(--wc)} .sb-w.s-glass{background:rgba(255,255,255,.03);backdrop-filter:blur(10px);border-color:rgba(255,255,255,.1)} .sb-w.s-glass::before{background:linear-gradient(90deg,transparent,var(--wc),transparent)} .sb-w.s-solid{background:color-mix(in srgb,var(--wc) 6%,#080f18);border-color:color-mix(in srgb,var(--wc) 20%,transparent)} /* shared widget elements */ .sb-tog{width:52px;height:28px;border-radius:14px;background:var(--surface2);border:1px solid var(--border);cursor:pointer;position:relative;transition:all .3s} .sb-tog.on{background:rgba(0,255,136,.18);border-color:var(--green)} .sb-tog-d{width:22px;height:22px;border-radius:50%;background:var(--text3);position:absolute;top:2px;left:2px;transition:all .3s} .sb-tog.on .sb-tog-d{left:26px;background:var(--green);box-shadow:0 0 8px var(--green)} .sb-bulb{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;transition:all .4s;cursor:pointer} .sb-bulb.off{background:var(--surface2);border:2px solid var(--border)} .sb-bulb.on{border:2px solid var(--green);box-shadow:0 0 24px var(--green),0 0 48px rgba(0,255,136,.25),inset 0 0 12px rgba(0,255,136,.1)} .sb-pwr{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;font-size:22px} .sb-gau{width:76px;height:76px;border-radius:50%;border:3px solid var(--border);display:flex;align-items:center;justify-content:center;flex-direction:column} .sb-gv{font-family:var(--FD);font-size:18px;font-weight:700} .sb-gl{font-family:var(--FM);font-size:7px;color:var(--text3);letter-spacing:1px;margin-top:1px} .sb-bn{font-family:var(--FD);font-size:38px;font-weight:900;letter-spacing:2px;text-shadow:0 0 18px currentColor} .sb-bnu{font-family:var(--FM);font-size:10px;color:var(--text3);letter-spacing:2px} .sb-ring{width:76px;height:76px;border-radius:50%;border:3px solid var(--border);position:relative;display:flex;align-items:center;justify-content:center} .sb-ndl{width:2px;height:30px;background:var(--blue);position:absolute;bottom:50%;left:50%;transform-origin:bottom center;border-radius:1px;transition:transform .3s} .sb-bar2{height:8px;background:var(--surface2);border-radius:4px;width:100%;overflow:hidden} .sb-bf{height:100%;border-radius:4px;transition:width .3s} /* Label-only widget (no box) */ .sb-w.sb-lbl{width:auto;min-width:40px;min-height:24px;background:transparent!important;border:1px dashed transparent!important;overflow:visible} .sb-w.sb-lbl::before{display:none} .sb-w.sb-lbl:hover{border-color:rgba(0,200,255,.2)!important} .sb-w.sb-lbl .sb-w-x,.sb-w.sb-lbl .sb-w-st,.sb-w.sb-lbl .sb-w-resize{opacity:0} .sb-w.sb-lbl:hover .sb-w-x,.sb-w.sb-lbl:hover .sb-w-st,.sb-w.sb-lbl:hover .sb-w-resize{opacity:.5} /* ── Título del widget — prominente y editable ── */ .sb-w-name{ font-family:var(--FD); font-size:13px; font-weight:700; color:var(--text); letter-spacing:1.5px; text-transform:uppercase; cursor:text; border:none; background:transparent; outline:none; padding:0; width:100%; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* Gradiente sutil + glow del color del widget */ background:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--wc,var(--blue)) 60%,#cfd4e6) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 0 8px color-mix(in srgb,var(--wc,var(--blue)) 30%,transparent); filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); transition:all .2s ease; } .sb-w-name:hover{ letter-spacing:1.8px; filter:drop-shadow(0 1px 4px color-mix(in srgb,var(--wc,var(--blue)) 50%,transparent)); } .sb-w-name:focus{ -webkit-text-fill-color:var(--blue); background:none; border-bottom:1px dashed var(--blue); text-shadow:0 0 12px var(--blue); } /* Estilos especiales por estilo de widget */ .sb-w.s-neon .sb-w-name{ text-shadow:0 0 10px var(--wc,var(--blue)), 0 0 20px color-mix(in srgb,var(--wc,var(--blue)) 40%,transparent); } .sb-w.s-glass .sb-w-name{ font-weight:600; letter-spacing:2px; } /* Línea decorativa superior más visible */ .sb-w::before{height:3px!important;box-shadow:0 0 8px var(--wc,var(--blue))} /* Resize handle */ .sb-w-resize{position:absolute;bottom:0;right:0;width:14px;height:14px;cursor:nwse-resize;z-index:3;opacity:.3;transition:opacity .2s} .sb-w-resize:hover{opacity:.8} .sb-w-resize::after{content:'';position:absolute;bottom:3px;right:3px;width:6px;height:6px;border-right:2px solid var(--wc,var(--blue));border-bottom:2px solid var(--wc,var(--blue))} /* 2026-10-12 · pantallas táctiles: el asa de tamaño es más grande para el dedo (y la del brazo robot se ve sin «hover») */ @media (hover:none){.sb-w:not(.sb-lbl) .sb-w-resize{width:30px;height:30px;opacity:.75;touch-action:none}.sb-w:not(.sb-lbl) .sb-w-resize::after{width:10px;height:10px;bottom:4px;right:4px}.sb-w.sb-lbl .sb-w-x,.sb-w.sb-lbl .sb-w-st{opacity:.6}} /* el brazo robot, aparte: un navegador sin :has() descarta la regla entera y no debe arrastrar a las demás */ @media (hover:none){.sb-w.sb-lbl:has(.sbbzc-in) .sb-w-resize{width:30px;height:30px;opacity:.75;touch-action:none}.sb-w.sb-lbl:has(.sbbzc-in) .sb-w-resize::after{width:10px;height:10px;bottom:4px;right:4px}} /* los textos sueltos no: su asa caería bajo el ✕. Y en táctil (sin «hover») el ✕ y el 🎨 de los textos SE VEN: invisibles seguían siendo pulsables y un toque en la esquina borraba el texto o el brazo. Quien solo mira no cambia tamaños */ .sb-visor .sb-w-resize{display:none!important} /* ══ ENHANCED MI RED WIDGETS ══ */ /* ── Lucide SVG icon styling ── */ .sb-lucide-icon svg{width:100%;height:100%} .sb-w.s-neon .sb-lucide-icon{opacity:.35;filter:drop-shadow(0 0 6px var(--wc))} .sb-w.s-glass .sb-lucide-icon{opacity:.2} /* ── Enhanced Toggle Switch (Syncfusion-inspired) ── */ .sb-tog{width:56px;height:28px;border-radius:14px;background:linear-gradient(180deg,rgba(20,30,45,1),rgba(12,18,28,1));border:1.5px solid rgba(255,255,255,.06);cursor:pointer;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:inset 0 2px 6px rgba(0,0,0,.5)} .sb-tog.on{background:linear-gradient(180deg,rgba(0,255,136,.18),rgba(0,180,100,.08));border-color:rgba(0,255,136,.4);box-shadow:inset 0 1px 4px rgba(0,0,0,.3),0 0 16px rgba(0,255,136,.12)} .sb-tog-d{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#3a4a5a,#2a3a4a);position:absolute;top:2px;left:2px;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08)} .sb-tog.on .sb-tog-d{left:30px;background:linear-gradient(135deg,#00ff88,#00cc6a);box-shadow:0 0 12px rgba(0,255,136,.6),0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2)} /* ── Enhanced Slider (Syncfusion-inspired) ── */ .sb-w input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;min-width:0;height:6px;margin:5px 0;border-radius:3px;background:linear-gradient(90deg,rgba(0,200,255,.08),rgba(0,200,255,.15));outline:none;transition:background .3s} .sb-w input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--th,linear-gradient(135deg,var(--blue),#0066cc));border:2px solid rgba(255,255,255,.55);cursor:pointer;box-shadow:0 0 8px var(--th,rgba(0,200,255,.5)),0 2px 5px rgba(0,0,0,.35);transition:box-shadow .2s} .sb-w input[type="range"]::-webkit-slider-thumb:hover{box-shadow:0 0 16px var(--th,rgba(0,200,255,.6)),0 2px 8px rgba(0,0,0,.4)} .sb-w input[type="range"]::-webkit-slider-thumb:active{filter:brightness(1.15)} .sb-w input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--th,linear-gradient(135deg,var(--blue),#0066cc));border:2px solid rgba(255,255,255,.55);cursor:pointer;box-shadow:0 0 8px var(--th,rgba(0,200,255,.5))} /* ── Fila de slider RGB / Tira WS2812 · grid robusto (etiqueta · barra · valor) ── El número va en columna fija de 34px → nunca se corta. La barra usa minmax(0,1fr) para encoger sin desbordar. Sirve en escritorio, dashboard y móvil. */ .sb-slrow{display:grid;grid-template-columns:16px minmax(0,1fr) 34px;align-items:center;gap:7px;width:100%} .sb-slrow .sb-sllab{font-family:var(--FD);font-size:11px;text-align:center;line-height:1} .sb-slrow .sb-slval{font-family:var(--FM);font-size:10px;text-align:right;white-space:nowrap;line-height:1} /* ── Neon toggle override (buzzer amber) ── */ .sb-w.s-neon .sb-tog.on{background:linear-gradient(180deg,rgba(0,255,136,.22),rgba(0,180,100,.1));box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 0 20px rgba(0,255,136,.15)} .sb-w.s-neon .sb-tog.on .sb-tog-d{box-shadow:0 0 16px rgba(0,255,136,.7),0 0 30px rgba(0,255,136,.3),inset 0 1px 0 rgba(255,255,255,.3)} /* ── Glass style enhancements ── */ .sb-w.s-glass .sb-tog{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08);backdrop-filter:blur(4px)} .sb-w.s-glass .sb-tog.on{background:rgba(0,255,136,.06);border-color:rgba(0,255,136,.25)} .sb-w.s-glass input[type="range"]{background:rgba(255,255,255,.04)} /* ── Widget body pulse animation on data update ── */ @keyframes sbDataPulse{0%{box-shadow:inset 0 0 0 rgba(0,200,255,0)}50%{box-shadow:inset 0 0 20px rgba(0,200,255,.06)}100%{box-shadow:inset 0 0 0 rgba(0,200,255,0)}} .sb-w-bd.data-flash{animation:sbDataPulse .6s ease-out} /* ── Gauge glow for neon style ── */ .sb-w.s-neon .sb-gau{border-color:color-mix(in srgb,var(--wc) 25%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--wc) 12%,transparent),inset 0 0 8px color-mix(in srgb,var(--wc) 5%,transparent)} .sb-w.s-neon .sb-gv{text-shadow:0 0 12px currentColor} /* ── Enhanced bar fills ── */ .sb-bar2{height:8px;background:rgba(255,255,255,.03);border-radius:4px;width:100%;overflow:hidden;position:relative} .sb-bar2::before{content:'';position:absolute;inset:0;border-radius:4px;border:1px solid rgba(255,255,255,.04)} .sb-bf{height:100%;border-radius:4px;transition:width .4s cubic-bezier(.4,0,.2,1);position:relative} .sb-w.s-neon .sb-bf{box-shadow:0 0 8px currentColor} .sb-w.s-glass .sb-bf{opacity:.8;backdrop-filter:blur(2px)} /* ── Chart widget enhanced states ── */ .sb-w .sb-w-bd canvas{border-radius:4px} .sb-w.s-neon .sb-w-bd canvas{filter:drop-shadow(0 0 4px rgba(0,200,255,.1))} /* ── Power button enhancements ── */ .sb-pwr{transition:all .3s cubic-bezier(.4,0,.2,1)} .sb-pwr:hover{transform:scale(1.05)} .sb-pwr:active{transform:scale(.95)} /* ── Bulb glow enhancements ── */ .sb-bulb{transition:all .4s cubic-bezier(.4,0,.2,1)} .sb-bulb.on{animation:sbBulbGlow 2s ease-in-out infinite alternate} @keyframes sbBulbGlow{0%{box-shadow:0 0 24px var(--green),0 0 48px rgba(0,255,136,.25),inset 0 0 12px rgba(0,255,136,.1)}100%{box-shadow:0 0 32px var(--green),0 0 60px rgba(0,255,136,.35),inset 0 0 16px rgba(0,255,136,.15)}} /* ── Sensor status indicator dot ── */ .sb-w::after{content:'';position:absolute;top:8px;left:8px;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.08);z-index:2;transition:all .4s} .sb-w.sb-live::after{background:var(--green);box-shadow:0 0 6px var(--green)} .sb-w.sb-lbl::after{display:none} /* ── Alert active indicator — pulsing glow when sensor exceeds threshold ── */ @keyframes sbAlertPulse{ 0%,100%{border-color:rgba(255,80,60,.6);box-shadow:0 0 12px rgba(255,80,60,.15),inset 0 0 8px rgba(255,80,60,.03)} 50%{border-color:rgba(255,80,60,.9);box-shadow:0 0 24px rgba(255,80,60,.3),inset 0 0 12px rgba(255,80,60,.06)} } .sb-w.sb-alert-active{animation:sbAlertPulse 1.8s ease-in-out infinite;border-color:rgba(255,80,60,.7)!important} .sb-w.sb-alert-active::before{background:linear-gradient(90deg,rgba(255,80,60,.7),rgba(255,170,0,.7),rgba(255,80,60,.7))!important;box-shadow:0 0 12px rgba(255,80,60,.4)!important} .sb-w.sb-alert-active::after{background:#ff5040!important;box-shadow:0 0 8px #ff5040,0 0 16px rgba(255,80,60,.4)!important;animation:sbAlertDot 1s ease-in-out infinite alternate} @keyframes sbAlertDot{from{opacity:.7;transform:scale(1)}to{opacity:1;transform:scale(1.4)}} @keyframes sbGpsPulse{0%,100%{box-shadow:0 0 4px rgba(255,51,68,.5)}50%{box-shadow:0 0 14px rgba(255,51,68,.9),0 0 28px rgba(255,51,68,.4)}} /* Etiqueta "Tú estás aquí" anclada al marcador GPS · se mueve con él */ .leaflet-tooltip.sb-gps-here{background:rgba(20,10,12,.92);color:#fff;border:1px solid #ff3344;border-radius:6px;padding:3px 9px;font-family:var(--FM,monospace);font-size:10px;font-weight:700;letter-spacing:.5px;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 12px rgba(255,51,68,.45)} .leaflet-tooltip.sb-gps-here.leaflet-tooltip-top:before{border-top-color:#ff3344} .leaflet-tooltip.sb-gps-here.leaflet-tooltip-bottom:before{border-bottom-color:#ff3344} .leaflet-tooltip.sb-gps-here.leaflet-tooltip-left:before{border-left-color:#ff3344} .leaflet-tooltip.sb-gps-here.leaflet-tooltip-right:before{border-right-color:#ff3344} /* Leaflet dark theme overrides for Mi Red */ .sb-w .leaflet-container{background:#1a1a2e!important} /* Filtro inversor SOLO en modo 'std' (convierte OSM claro a oscuro themed). En modo 'dark' (tile provider ya oscuro) o 'sat' (foto satelital) NO se aplica. */ .sb-w[data-tile-style="std"] .leaflet-tile{filter:brightness(.7) contrast(1.1) saturate(.8) hue-rotate(180deg) invert(1)} .sb-w .leaflet-container{width:100%!important;height:100%!important} .sb-w .leaflet-control-attribution{display:none!important} /* Syntax highlighting classes */ .sc{color:var(--text3)} .sp{color:var(--purple)} .sk{color:var(--purple)} .sa{color:var(--amber)} .ss{color:var(--green)} .sf{color:var(--blue)} #sbCircuitSvg svg,#sbCircuitFsSvg svg{max-height:none!important} @media(max-width:768px){ .sb-w{position:relative!important;width:100%!important;left:auto!important;top:auto!important} /* 2026-10-12 · la capa mide 3000 px para el lienzo libre del escritorio; apilados, «100 %» era 3000 px y cada widget (y su asa de tamaño) se salía de la pantalla del móvil */ #sbZoomLayer{width:100%!important;overflow-x:clip} #sbCodePanel{display:none!important} /* Preview de píxeles: una sola fila, sin desbordar, en pantallas estrechas */ .sb-w .sbdots{flex-wrap:nowrap!important;overflow:hidden} } /* ═══════════════════════════════════════════════════ */ /* ═══ DYNAMIC XP — Mini toast, Achievements, Challenges ═══ */ /* ═══════════════════════════════════════════════════ */ /* ── Mini-toast XP (esquina inferior derecha, no invasivo) ── */ .mrxp-mini-toast{ position:fixed;right:20px;z-index:10003; padding:10px 16px;min-width:200px;max-width:320px; background:rgba(4,8,13,.92);border:1px solid rgba(0,255,136,.35); box-shadow:0 0 20px rgba(0,255,136,.12),0 8px 24px rgba(0,0,0,.4); backdrop-filter:blur(10px); opacity:0;transform:translateX(30px); transition:all .4s cubic-bezier(.34,1.56,.64,1); pointer-events:none;display:flex;flex-direction:column;gap:2px } .mrxp-mini-toast.mrxp-mini-show{opacity:1;transform:translateX(0)} .mrxp-mini-toast.mrxp-mini-hide{opacity:0;transform:translateX(30px)} .mrxp-mini-label{font-family:var(--FM);font-size:10px;color:var(--text2);letter-spacing:.5px} .mrxp-mini-xp{font-family:var(--FD);font-size:15px;color:var(--green);letter-spacing:2px;font-weight:700;text-shadow:0 0 10px rgba(0,255,136,.4)} .mrxp-mini-remain{font-family:var(--FM);font-size:8px;color:var(--text3);letter-spacing:1px} /* ── Challenge Widget (dropdown from toolbar) ── */ .mrxp-challenge-widget{ width:100%; background:rgba(4,8,13,.97);border:1px solid rgba(255,215,0,.2); backdrop-filter:blur(12px);box-shadow:0 8px 32px rgba(0,0,0,.5); overflow:hidden;font-family:var(--FM) } .mrxp-cw-header{ display:flex;align-items:center;gap:6px; padding:10px 14px;border-bottom:1px solid rgba(255,215,0,.1); background:linear-gradient(90deg,rgba(255,215,0,.06),transparent) } .mrxp-cw-icon{font-size:13px} .mrxp-cw-title{font-size:9px;color:var(--blue);letter-spacing:2px;font-weight:700} .mrxp-cw-ach{margin-left:auto;font-size:8px;color:var(--gold,#FFD700);letter-spacing:1px;cursor:pointer;transition:color .2s} .mrxp-cw-ach:hover{color:var(--amber);text-decoration:underline} .mrxp-cw-row{ display:flex;align-items:center;gap:8px; padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.03) } .mrxp-cw-row:last-child{border-bottom:none} .mrxp-cw-period{font-size:7px;color:var(--text3);letter-spacing:1.5px;width:40px;flex-shrink:0;text-align:center} .mrxp-cw-detail{flex:1;min-width:0} .mrxp-cw-desc{font-size:9px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mrxp-cw-bar{height:3px;background:rgba(255,255,255,.06);border-radius:2px;margin-top:4px;overflow:hidden} .mrxp-cw-fill{height:100%;border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1);box-shadow:0 0 6px currentColor} .mrxp-cw-status{font-size:9px;color:var(--blue);width:28px;text-align:center;flex-shrink:0} .mrxp-cw-reward{font-size:8px;color:var(--green);width:32px;text-align:right;flex-shrink:0;letter-spacing:.5px} .mrxp-cw-footer{ padding:8px 14px;border-top:1px solid rgba(255,215,0,.08); text-align:center;cursor:pointer;transition:background .2s } .mrxp-cw-footer span{font-size:8px;color:var(--gold,#FFD700);letter-spacing:1.5px;opacity:.6;transition:opacity .2s} .mrxp-cw-footer:hover{background:rgba(255,215,0,.04)} .mrxp-cw-footer:hover span{opacity:1} /* ── Achievement Unlock Modal ── */ .mrxp-ach-overlay{ position:fixed;inset:0;z-index:10005; display:flex;align-items:center;justify-content:center; background:rgba(4,8,13,.85); cursor:default;opacity:0;transition:opacity .4s } .mrxp-ach-overlay.mrxp-ach-show{opacity:1} .mrxp-ach-card{ width:min(340px,88vw);padding:32px 24px;text-align:center; background:linear-gradient(180deg,rgba(10,18,26,1),rgba(4,8,13,1)); border:1px solid rgba(255,215,0,.3); box-shadow:0 0 60px rgba(255,215,0,.1),0 0 120px rgba(255,215,0,.05); position:relative;overflow:hidden; transform:scale(.85);transition:transform .5s cubic-bezier(.34,1.56,.64,1) } .mrxp-ach-show .mrxp-ach-card{transform:scale(1)} .mrxp-ach-confetti{ position:absolute;inset:0; background:radial-gradient(circle at 20% 30%,rgba(255,215,0,.08),transparent 50%), radial-gradient(circle at 80% 70%,rgba(0,200,255,.06),transparent 50%); pointer-events:none;animation:mrxpConfettiPulse 2s ease-in-out infinite } @keyframes mrxpConfettiPulse{ 0%,100%{opacity:.6} 50%{opacity:1} } .mrxp-ach-icon{font-size:48px;margin-bottom:12px;filter:drop-shadow(0 4px 12px rgba(255,215,0,.4));animation:mrxpAchBounce 1s cubic-bezier(.34,1.56,.64,1)} @keyframes mrxpAchBounce{0%{transform:scale(0) rotate(-20deg)}60%{transform:scale(1.15) rotate(5deg)}100%{transform:scale(1) rotate(0)}} .mrxp-ach-badge{font-family:var(--FM);font-size:8px;color:var(--gold,#FFD700);letter-spacing:3px;margin-bottom:8px;text-shadow:0 0 8px rgba(255,215,0,.4)} .mrxp-ach-title{font-family:var(--FD);font-size:20px;color:var(--text);letter-spacing:3px;font-weight:700;margin-bottom:6px} .mrxp-ach-desc{font-family:var(--FM);font-size:11px;color:var(--text3);margin-bottom:16px;line-height:1.5} .mrxp-ach-xp{font-family:var(--FD);font-size:24px;color:var(--green);letter-spacing:3px;font-weight:700;text-shadow:0 0 16px rgba(0,255,136,.4);margin-bottom:20px} .mrxp-ach-btn{ background:linear-gradient(135deg,rgba(255,215,0,.15),rgba(255,215,0,.05)); border:1px solid rgba(255,215,0,.4);color:var(--gold,#FFD700); font-family:var(--FM);font-size:10px;letter-spacing:2px; padding:12px 32px;cursor:pointer;transition:all .2s } .mrxp-ach-btn:hover{background:rgba(255,215,0,.2);box-shadow:0 0 16px rgba(255,215,0,.2)} /* ── Achievement Panel (listado completo) ── */ .mrxp-ach-panel-overlay{ position:fixed;inset:0;z-index:10004; display:flex;align-items:center;justify-content:center; background:rgba(4,8,13,.88); cursor:default } .mrxp-ach-panel-overlay.mrxp-ach-panel-show{opacity:1} .mrxp-ach-panel{ width:min(480px,92vw);max-height:80vh;display:flex;flex-direction:column; background:var(--surface);border:1px solid rgba(255,215,0,.2); box-shadow:0 0 40px rgba(0,0,0,.5);cursor:default } .mrxp-ach-panel-header{ display:flex;align-items:center;gap:8px; padding:14px 18px;border-bottom:1px solid rgba(255,215,0,.15); background:linear-gradient(90deg,rgba(255,215,0,.05),transparent);flex-shrink:0 } .mrxp-ach-panel-title{font-family:var(--FD);font-size:12px;color:var(--gold,#FFD700);letter-spacing:3px} .mrxp-ach-panel-count{font-family:var(--FM);font-size:9px;color:var(--text3);letter-spacing:1px} .mrxp-ach-panel-grid{overflow-y:auto;padding:8px} .mrxp-ach-item{ display:flex;align-items:center;gap:12px; padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.03); opacity:.45;transition:all .2s } .mrxp-ach-item:hover{background:rgba(255,255,255,.02)} .mrxp-ach-item.mrxp-ach-done{opacity:1} .mrxp-ach-item-icon{font-size:24px;flex-shrink:0;width:32px;text-align:center} .mrxp-ach-item.mrxp-ach-done .mrxp-ach-item-icon{filter:drop-shadow(0 2px 6px rgba(255,215,0,.3))} .mrxp-ach-item-info{flex:1;min-width:0} .mrxp-ach-item-title{font-family:var(--FD);font-size:11px;color:var(--text);letter-spacing:1.5px} .mrxp-ach-item.mrxp-ach-done .mrxp-ach-item-title{color:var(--gold,#FFD700)} .mrxp-ach-item-desc{font-family:var(--FM);font-size:9px;color:var(--text3);margin-top:2px} .mrxp-ach-item-xp{font-family:var(--FD);font-size:11px;flex-shrink:0;letter-spacing:1px} .mrxp-ach-item.mrxp-ach-done .mrxp-ach-item-xp{color:var(--green)} .mrxp-ach-item:not(.mrxp-ach-done) .mrxp-ach-item-xp{color:var(--text3)} /* ══════════════════════════════════════════════════════════════════════ CLASSROOM / AULA SYSTEM ══════════════════════════════════════════════════════════════════════ */ .aula-card{background:var(--surface2);border:1px solid var(--border);padding:20px 22px;transition:all .3s;position:relative;overflow:hidden} /* ── Estado: PENDIENTE de activación Pro ── */ .aula-card-pending{border-color:rgba(255,170,0,.25);background:linear-gradient(145deg,rgba(255,170,0,.03),var(--surface2))} .aula-card-pending:hover{border-color:rgba(255,170,0,.5);box-shadow:0 0 20px rgba(255,170,0,.08)} /* ── Estado: PRO ACTIVADO — glow púrpura/cyan animado ── */ .aula-card-pro{ border-color:rgba(176,106,255,.5); background:linear-gradient(145deg,rgba(176,106,255,.08),rgba(0,200,255,.04),var(--surface2)); box-shadow:0 0 24px rgba(176,106,255,.15),inset 0 0 24px rgba(176,106,255,.05); animation:aulaProGlow 3.5s ease-in-out infinite; } .aula-card-pro::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent 0%,#b06aff 30%,#00c8ff 70%,transparent 100%); box-shadow:0 0 12px rgba(176,106,255,.6); animation:aulaProBeam 4s linear infinite; } .aula-card-pro:hover{ border-color:rgba(176,106,255,.8); box-shadow:0 0 36px rgba(176,106,255,.28),inset 0 0 32px rgba(176,106,255,.08); } @keyframes aulaProGlow{ 0%,100%{box-shadow:0 0 24px rgba(176,106,255,.15),inset 0 0 24px rgba(176,106,255,.05)} 50% {box-shadow:0 0 32px rgba(176,106,255,.25),inset 0 0 32px rgba(0,200,255,.07)} } @keyframes aulaProBeam{ 0% {transform:translateX(-100%)} 100%{transform:translateX(100%)} } /* ── Badges de estado ── */ /* ── User Plan Badge · etiqueta del plan al lado del logo ── */ .user-plan-badge{ display:inline-flex;align-items:center;gap:7px; padding:6px 14px; border:1.5px solid;border-radius:20px; font-family:var(--FM,monospace);font-size:10px;font-weight:800; letter-spacing:2px;cursor:pointer; transition:all .3s cubic-bezier(.4,0,.2,1); position:relative;overflow:hidden; user-select:none;white-space:nowrap; vertical-align:middle; text-shadow:0 0 8px currentColor; } .user-plan-badge .upb-icon{font-size:11px;line-height:1;filter:drop-shadow(0 0 4px currentColor)} .user-plan-badge .upb-label{line-height:1} .user-plan-badge:hover{transform:translateY(-1px) scale(1.04)} /* Variantes por plan */ .plan-badge-free{ color:#c8d0e5;border-color:rgba(168,176,197,.5); background:linear-gradient(90deg,rgba(168,176,197,.12),rgba(168,176,197,.06)); box-shadow:0 0 8px rgba(168,176,197,.15); text-shadow:none; } .plan-badge-free:hover{border-color:#00ff88;color:#00ff88;background:rgba(0,255,136,.1);box-shadow:0 0 16px rgba(0,255,136,.3)} .plan-badge-trial{ color:#fff;border-color:#00c8ff; background:linear-gradient(90deg,rgba(0,200,255,.35),rgba(0,255,255,.25)); box-shadow:0 0 18px rgba(0,200,255,.6),inset 0 0 10px rgba(0,200,255,.3); animation:upbTrialPulse 2.4s ease-in-out infinite; text-shadow:0 0 10px #00c8ff; } .plan-badge-pro{ color:#fff;border-color:#00ff88; background:linear-gradient(90deg,rgba(0,255,136,.4),rgba(0,255,200,.25)); box-shadow:0 0 22px rgba(0,255,136,.55),inset 0 0 12px rgba(0,255,136,.3); text-shadow:0 0 10px #00ff88; } .plan-badge-pro:hover{box-shadow:0 0 32px rgba(0,255,136,.85),inset 0 0 16px rgba(0,255,136,.5)} .plan-badge-educator{ color:#fff;border-color:#b06aff; background:linear-gradient(90deg,rgba(176,106,255,.45),rgba(255,80,160,.3)); box-shadow:0 0 24px rgba(176,106,255,.7),inset 0 0 14px rgba(176,106,255,.35),0 0 12px rgba(255,80,160,.4); animation:upbEducatorGlow 3s ease-in-out infinite; text-shadow:0 0 10px #b06aff; } .plan-badge-educator::before{ content:'';position:absolute;top:0;left:-100%;width:100%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent); animation:upbEducatorBeam 3.5s linear infinite; } .plan-badge-aula{ color:#fff;border-color:#00c8ff; background:linear-gradient(90deg,rgba(0,200,255,.4),rgba(0,255,136,.25)); box-shadow:0 0 22px rgba(0,200,255,.6),inset 0 0 12px rgba(0,200,255,.3); text-shadow:0 0 10px #00c8ff; } .plan-badge-corporate{ color:#fff;border-color:#ffaa00; background:linear-gradient(90deg,rgba(255,170,0,.4),rgba(255,100,50,.25)); box-shadow:0 0 22px rgba(255,170,0,.6),inset 0 0 12px rgba(255,170,0,.3); text-shadow:0 0 10px #ffaa00; } .plan-badge-staff{ color:#ff50a0;border-color:rgba(255,80,160,.5); background:linear-gradient(90deg,rgba(255,80,160,.1),rgba(176,106,255,.08)); box-shadow:0 0 18px rgba(255,80,160,.3); animation:upbStaffPulse 1.8s ease-in-out infinite; } @keyframes upbTrialPulse{ 0%,100%{box-shadow:0 0 12px rgba(0,200,255,.2)} 50% {box-shadow:0 0 22px rgba(0,200,255,.45)} } @keyframes upbEducatorGlow{ 0%,100%{box-shadow:0 0 24px rgba(176,106,255,.7),inset 0 0 14px rgba(176,106,255,.35),0 0 12px rgba(255,80,160,.4)} 50% {box-shadow:0 0 36px rgba(176,106,255,.95),inset 0 0 20px rgba(255,80,160,.5),0 0 24px rgba(255,80,160,.7)} } @keyframes upbEducatorBeam{ 0% {left:-100%} 100%{left:100%} } @keyframes upbStaffPulse{ 0%,100%{box-shadow:0 0 18px rgba(255,80,160,.3)} 50% {box-shadow:0 0 28px rgba(255,80,160,.5)} } .aula-state-badge{ display:inline-block;font-family:var(--FM,monospace);font-size:10px;font-weight:700; letter-spacing:1.5px;padding:4px 10px;margin-top:6px;border-radius:4px; border:1px solid;text-transform:uppercase; } .aula-state-pending{ color:#ffaa00;border-color:rgba(255,170,0,.4);background:rgba(255,170,0,.08); } .aula-state-pro{ color:#b06aff;border-color:rgba(176,106,255,.5);background:linear-gradient(90deg,rgba(176,106,255,.15),rgba(0,200,255,.1)); box-shadow:0 0 12px rgba(176,106,255,.3),inset 0 0 8px rgba(176,106,255,.15); animation:aulaBadgePulse 2.2s ease-in-out infinite; } @keyframes aulaBadgePulse{ 0%,100%{box-shadow:0 0 12px rgba(176,106,255,.3),inset 0 0 8px rgba(176,106,255,.15)} 50% {box-shadow:0 0 20px rgba(176,106,255,.5),inset 0 0 12px rgba(176,106,255,.25)} } /* ── Overlay candado para aulas PENDIENTES ── */ .aula-lock-overlay{ position:absolute; /* No cubrir el header — empieza debajo del badge */ inset:64px 0 0 0; background:linear-gradient(180deg,rgba(8,12,24,.55) 0%,rgba(8,12,24,.85) 100%); backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); display:flex;align-items:center;justify-content:center; pointer-events:auto; cursor:not-allowed; border-radius:0; z-index:5; } .aula-lock-content{text-align:center;padding:14px 20px;max-width:80%} .aula-lock-icon{ font-size:34px;margin-bottom:8px; filter:drop-shadow(0 0 12px rgba(255,170,0,.5)); animation:aulaLockPulse 2s ease-in-out infinite; } .aula-lock-text{ font-family:var(--FM,monospace);font-size:11px;font-weight:700; color:#ffaa00;letter-spacing:2px;margin-bottom:6px; } .aula-lock-sub{ font-family:var(--FM,monospace);font-size:9px;color:#a8b0c5; line-height:1.5;letter-spacing:.3px; } @keyframes aulaLockPulse{ 0%,100%{transform:scale(1);filter:drop-shadow(0 0 12px rgba(255,170,0,.5))} 50% {transform:scale(1.08);filter:drop-shadow(0 0 22px rgba(255,170,0,.8))} } /* Estilo de botones deshabilitados en aulas pendientes */ .aula-card-pending .aula-card-actions button[onclick=""], .aula-card-pending .aula-view-btn[onclick=""], .aula-card-pending .aula-card-code[onclick=""]{ cursor:not-allowed; opacity:.45; } .aula-card:hover{border-color:rgba(0,200,255,.3);box-shadow:0 0 20px rgba(0,200,255,.05)} .aula-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .aula-card-name{font-family:var(--FD);font-size:17px;color:var(--text);letter-spacing:1.5px;font-weight:700} .aula-card-code{font-family:var(--FD);font-size:19px;color:var(--blue);letter-spacing:5px;font-weight:900;cursor:pointer;padding:6px 14px;border:1px dashed rgba(0,200,255,.3);background:rgba(0,200,255,.04);transition:all .2s;user-select:all} .aula-card-code:hover{background:rgba(0,200,255,.1);border-color:rgba(0,200,255,.5)} .aula-card-stats{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .aula-card-stats>span{font-family:var(--FM);font-size:11px;color:var(--text2);letter-spacing:.5px} .aula-view-btn{background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.3);color:var(--green);font-family:var(--FD);font-size:9px;font-weight:700;letter-spacing:2px;padding:6px 14px;cursor:pointer;transition:all .2s} .aula-view-btn:hover{background:rgba(0,255,136,.16)} .aula-card-actions{display:flex;gap:10px;border-top:1px solid rgba(255,255,255,.04);padding-top:14px;margin-top:12px} .aula-card-actions button{background:transparent;border:1px solid var(--border);color:var(--text2);font-family:var(--FM);font-size:11px;padding:8px 14px;cursor:pointer;transition:all .2s;letter-spacing:.8px} .aula-card-actions button:hover{border-color:rgba(0,200,255,.3);background:rgba(0,200,255,.04)} /* Student rows in teacher panel */ .aula-student-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.03);transition:background .2s} .aula-student-row:hover{background:rgba(0,255,136,.02)} .aula-student-avatar{width:32px;height:32px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;overflow:hidden} .aula-student-info{flex:1;min-width:0} .aula-student-name{font-family:var(--FM);font-size:12px;color:var(--text);letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .aula-student-meta{font-family:var(--FM);font-size:9px;color:var(--text3);margin-top:2px;letter-spacing:.3px} .aula-student-last{font-family:var(--FM);font-size:9px;color:var(--text3);width:80px;text-align:right;flex-shrink:0} /* ═══════════════════════════════════════════════════════════════ FREE vs PRO · Gating en La Red — Sprint 1.3 ═══════════════════════════════════════════════════════════════ */ /* Widget bloqueado en la paleta (requiere Pro) */ .sb-cat-item.locked{cursor:pointer;opacity:.78;background:linear-gradient(180deg,rgba(255,170,0,.04) 0%,rgba(0,0,0,.25) 100%);border-color:rgba(255,170,0,.22)} .sb-cat-item.locked::before{background:linear-gradient(135deg,rgba(255,170,0,.10) 0%,transparent 60%);opacity:1} .sb-cat-item.locked:hover{transform:translateY(-3px);border-color:rgba(255,170,0,.55);background:rgba(255,170,0,.08);box-shadow:0 6px 20px -4px rgba(255,170,0,.25),0 0 0 1px rgba(255,170,0,.20)} .sb-cat-item.locked:hover .sb-cn{color:var(--amber);text-shadow:0 0 8px rgba(255,170,0,.45)} .sb-cat-item.locked .sb-ci{filter:grayscale(.35) drop-shadow(0 2px 4px rgba(0,0,0,.4))} .sb-cat-item .sb-cat-lock{position:absolute;top:4px;left:4px;font-size:11px;opacity:.92;filter:drop-shadow(0 0 4px rgba(255,170,0,.6));z-index:3;pointer-events:none} .sb-cat-item .sb-cat-pro-badge{position:absolute;bottom:3px;right:3px;font-family:var(--FD);font-size:6px;font-weight:900;letter-spacing:1.6px;color:#0a0f14;background:linear-gradient(135deg,#ffcc33 0%,#ff9900 100%);padding:2px 4px 1px;border-radius:2px;z-index:3;pointer-events:none;box-shadow:0 0 6px rgba(255,170,0,.45)} /* ── Upgrade modal reusable ── */ .upgrade-modal{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .28s cubic-bezier(.25,.46,.45,.94)} .upgrade-modal.open{opacity:1;pointer-events:auto} .upgrade-modal .upgrade-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,200,255,.06) 0%,rgba(4,8,13,.94) 60%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .upgrade-modal .upgrade-card{position:relative;width:min(460px,92vw);max-height:92vh;overflow:auto;background:linear-gradient(180deg,rgba(10,18,28,.96) 0%,rgba(6,11,17,.98) 100%);border:1px solid rgba(0,200,255,.30);box-shadow:0 0 60px rgba(0,200,255,.12),0 0 120px rgba(255,170,0,.04),inset 0 0 40px rgba(0,200,255,.03);transform:translateY(20px) scale(.96);transition:transform .32s cubic-bezier(.34,1.56,.64,1)} .upgrade-modal.open .upgrade-card{transform:translateY(0) scale(1)} .upgrade-modal .upgrade-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(0,200,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,200,255,.05) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;mask-image:radial-gradient(ellipse at center,black 0%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at center,black 0%,transparent 70%)} .upgrade-modal .upgrade-beam{position:absolute;width:180%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,200,255,.5),transparent);pointer-events:none;animation:upgradeBeam 4s ease-in-out infinite} .upgrade-modal .beam-a{top:20%;left:-40%;animation-delay:0s} .upgrade-modal .beam-b{top:64%;left:-40%;background:linear-gradient(90deg,transparent,rgba(255,170,0,.4),transparent);animation-delay:1.5s} @keyframes upgradeBeam{0%,100%{transform:translateX(0);opacity:0}50%{transform:translateX(20%);opacity:1}} .upgrade-modal .upgrade-close{position:absolute;top:12px;right:12px;width:30px;height:30px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--text3);font-size:14px;cursor:pointer;transition:all .2s;z-index:4;font-family:var(--FM);line-height:1} .upgrade-modal .upgrade-close:hover{background:rgba(255,80,80,.1);border-color:rgba(255,80,80,.4);color:rgba(255,100,100,1);transform:rotate(90deg)} .upgrade-modal .upgrade-head{position:relative;padding:30px 28px 20px;text-align:center;border-bottom:1px solid rgba(0,200,255,.12);background:linear-gradient(180deg,rgba(0,200,255,.04) 0%,transparent 100%)} .upgrade-modal .upgrade-icon{font-size:44px;margin-bottom:12px;filter:drop-shadow(0 0 16px rgba(0,200,255,.4));animation:upgradeIconFloat 3s ease-in-out infinite} @keyframes upgradeIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} .upgrade-modal .upgrade-tag{font-family:var(--FD);font-size:9px;color:rgba(0,200,255,.9);letter-spacing:3.5px;margin-bottom:6px;background:linear-gradient(90deg,rgba(0,200,255,.9),rgba(255,170,0,.9));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700} .upgrade-modal .upgrade-title{font-family:var(--FD);font-size:14px;font-weight:900;color:var(--text);letter-spacing:2.5px;line-height:1.3} .upgrade-modal .upgrade-body{padding:22px 28px 26px;position:relative;z-index:2} .upgrade-modal .upgrade-lead{font-family:var(--FM);font-size:11px;color:var(--text2);line-height:1.75;margin-bottom:18px;text-align:center} .upgrade-modal .upgrade-lead strong{font-weight:800} .upgrade-modal .upgrade-benefits{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:rgba(0,200,255,.03);border:1px solid rgba(0,200,255,.14);margin-bottom:18px} .upgrade-modal .upgrade-bli{display:flex;align-items:flex-start;gap:10px;font-family:var(--FM);font-size:10.5px;color:var(--text2);line-height:1.55} .upgrade-modal .upgrade-check{color:var(--green);font-weight:900;flex-shrink:0;font-size:12px;margin-top:1px;filter:drop-shadow(0 0 4px rgba(0,255,136,.5))} .upgrade-modal .upgrade-price{text-align:center;padding:12px 0 4px;margin-bottom:16px;border-top:1px dashed rgba(255,255,255,.05);border-bottom:1px dashed rgba(255,255,255,.05)} .upgrade-modal .upgrade-price-amt{font-family:var(--FD);font-size:38px;font-weight:900;color:var(--green);line-height:1;letter-spacing:1px;filter:drop-shadow(0 0 10px rgba(0,255,136,.25))} .upgrade-modal .upgrade-price-cur{font-size:16px;color:var(--text2);font-weight:700;margin-left:4px} .upgrade-modal .upgrade-price-per{font-family:var(--FM);font-size:12px;color:var(--text3);font-weight:500;letter-spacing:2px;margin-left:2px} .upgrade-modal .upgrade-price-sub{font-family:var(--FM);font-size:9px;color:var(--text3);letter-spacing:2px;margin-top:6px} .upgrade-modal .upgrade-cta-primary{width:100%;padding:14px;background:linear-gradient(90deg,rgba(0,255,136,.14),rgba(0,200,255,.10));border:1px solid rgba(0,255,136,.45);color:var(--green);font-family:var(--FD);font-size:11px;font-weight:800;letter-spacing:3px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;text-transform:uppercase} .upgrade-modal .upgrade-cta-primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transition:left .6s ease} .upgrade-modal .upgrade-cta-primary:hover{background:linear-gradient(90deg,rgba(0,255,136,.22),rgba(0,200,255,.14));border-color:var(--green);box-shadow:0 0 24px rgba(0,255,136,.3),inset 0 0 20px rgba(0,255,136,.05);transform:translateY(-1px)} .upgrade-modal .upgrade-cta-primary:hover::before{left:100%} .upgrade-modal .upgrade-cta-primary:active{transform:translateY(0)} .upgrade-modal .upgrade-cta-ghost{width:100%;margin-top:8px;padding:10px;background:transparent;border:1px solid transparent;color:var(--text3);font-family:var(--FM);font-size:9.5px;letter-spacing:2px;cursor:pointer;transition:all .2s;text-transform:uppercase} .upgrade-modal .upgrade-cta-ghost:hover{color:var(--text2);border-color:rgba(255,255,255,.08)} /* ── Marca de agua en dashboards públicos Free ── */ .public-watermark{position:fixed;bottom:16px;right:16px;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 10px;background:linear-gradient(135deg,rgba(10,18,28,.92) 0%,rgba(6,11,17,.96) 100%);border:1px solid rgba(0,200,255,.28);box-shadow:0 6px 24px rgba(0,0,0,.5),0 0 20px rgba(0,200,255,.12);text-decoration:none;color:var(--text);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:950;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;user-select:none} .public-watermark:hover{border-color:rgba(0,200,255,.55);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 30px rgba(0,200,255,.25)} .public-watermark .pw-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 0% 100%,rgba(0,200,255,.12) 0%,transparent 60%);opacity:.7;transition:opacity .25s} .public-watermark:hover .pw-glow{opacity:1} .public-watermark .pw-logo{font-size:18px;filter:drop-shadow(0 0 6px rgba(0,200,255,.6));position:relative;z-index:1} .public-watermark .pw-txt{position:relative;z-index:1;line-height:1} .public-watermark .pw-line1{font-family:var(--FM);font-size:8px;color:var(--text3);letter-spacing:1.4px;margin-bottom:3px} .public-watermark .pw-line1 strong{color:var(--blue);font-weight:700} .public-watermark .pw-line2{font-family:var(--FD);font-size:10px;color:var(--green);letter-spacing:2px;font-weight:700} .public-watermark .pw-arrow{display:inline-block;transition:transform .25s;margin-left:2px} .public-watermark:hover .pw-arrow{transform:translateX(3px)} @media (max-width: 520px){ .public-watermark{bottom:10px;right:10px;padding:7px 11px 7px 8px} .public-watermark .pw-logo{font-size:16px} .public-watermark .pw-line1{font-size:7.5px} .public-watermark .pw-line2{font-size:9.5px} } /* ═══════════════════════════════════════════════════════════════ FREE vs PRO · Sprint 2 — Reverse Trial Banner + Checkpoints ═══════════════════════════════════════════════════════════════ */ /* ── Banner superior de trial (3 estados) ── Position fixed arriba — empuja TNV y SCR hacia abajo via body.has-trial-banner */ .trial-banner{position:fixed;top:0;left:0;right:0;width:100%;padding:0;border-bottom:1px solid transparent;overflow:hidden;flex-shrink:0;z-index:950;background:rgba(4,8,13,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all .4s cubic-bezier(.25,.46,.45,.94)} /* Empuja todo hacia abajo cuando el banner está visible */ body.has-trial-banner .TNV{top:var(--trial-h,36px)} body.has-trial-banner .SCR{top:var(--trial-h,36px)} body.has-trial-banner #DNV{top:calc(var(--trial-h,36px) + var(--nav-h,56px))} .trial-banner .tb-glow{position:absolute;inset:0;pointer-events:none;opacity:.55} .trial-banner .tb-progress{position:relative;height:2px;width:100%;background:rgba(255,255,255,.04);overflow:hidden} .trial-banner .tb-progress-fill{height:100%;transition:width .6s ease;border-radius:0 2px 2px 0} .trial-banner .tb-content{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:12px;flex-wrap:wrap} .trial-banner .tb-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1} .trial-banner .tb-right{display:flex;align-items:center;gap:8px;flex-shrink:0} .trial-banner .tb-emoji{font-size:18px;flex-shrink:0;filter:drop-shadow(0 0 6px currentColor)} .trial-banner .tb-label{font-family:var(--FM);font-size:11px;color:var(--text);letter-spacing:.4px;line-height:1.4} .trial-banner .tb-label strong{font-weight:700;letter-spacing:.6px} .trial-banner .tb-counter{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:42px;padding:3px 8px;border:1px solid currentColor;background:rgba(0,0,0,.25);border-radius:2px;line-height:1} .trial-banner .tb-counter-num{font-family:var(--FD);font-size:18px;font-weight:900;letter-spacing:0;line-height:1} .trial-banner .tb-counter-lbl{font-family:var(--FM);font-size:6.5px;letter-spacing:1.8px;margin-top:2px;opacity:.85} .trial-banner .tb-cta{font-family:var(--FD);font-size:10px;font-weight:800;letter-spacing:1.8px;padding:7px 14px;border:1px solid currentColor;background:rgba(255,255,255,.06);color:inherit;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);text-transform:uppercase;position:relative;overflow:hidden;white-space:nowrap} .trial-banner .tb-cta::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transition:left .55s ease} .trial-banner .tb-cta:hover{background:rgba(255,255,255,.14);box-shadow:0 0 18px rgba(255,255,255,.18),inset 0 0 12px rgba(255,255,255,.05);transform:translateY(-1px)} .trial-banner .tb-cta:hover::before{left:100%} .trial-banner .tb-close{background:transparent;border:1px solid transparent;color:inherit;font-family:var(--FM);font-size:11px;cursor:pointer;width:24px;height:24px;opacity:.5;transition:all .2s;padding:0;line-height:1} .trial-banner .tb-close:hover{opacity:1;border-color:currentColor;transform:rotate(90deg)} /* Estado ACTIVO (azul) */ .trial-banner-active{color:#5ec8ff;background:linear-gradient(180deg,rgba(0,160,255,.10) 0%,rgba(0,80,160,.05) 100%);border-bottom-color:rgba(0,160,255,.25);box-shadow:0 1px 24px rgba(0,160,255,.06) inset} .trial-banner-active .tb-glow{background:radial-gradient(ellipse at 12% 50%,rgba(0,200,255,.18) 0%,transparent 50%),radial-gradient(ellipse at 88% 50%,rgba(0,140,255,.10) 0%,transparent 50%)} .trial-banner-active .tb-progress-fill{background:linear-gradient(90deg,#00aaff,#5ec8ff);box-shadow:0 0 8px rgba(0,200,255,.6)} .trial-banner-active .tb-counter{color:#5ec8ff;background:rgba(0,40,80,.45)} /* Estado ENDING (ámbar pulse) */ .trial-banner-ending{color:#ffb84d;background:linear-gradient(180deg,rgba(255,160,0,.12) 0%,rgba(180,90,0,.06) 100%);border-bottom-color:rgba(255,160,0,.30);box-shadow:0 1px 24px rgba(255,160,0,.06) inset;animation:tbEndingPulse 3s ease-in-out infinite} @keyframes tbEndingPulse{0%,100%{box-shadow:0 1px 24px rgba(255,160,0,.06) inset}50%{box-shadow:0 1px 32px rgba(255,160,0,.18) inset}} .trial-banner-ending .tb-glow{background:radial-gradient(ellipse at 12% 50%,rgba(255,170,0,.22) 0%,transparent 50%),radial-gradient(ellipse at 88% 50%,rgba(255,90,0,.12) 0%,transparent 50%)} .trial-banner-ending .tb-progress-fill{background:linear-gradient(90deg,#ffaa00,#ffcc55);box-shadow:0 0 10px rgba(255,170,0,.7)} .trial-banner-ending .tb-counter{color:#ffb84d;background:rgba(80,40,0,.5);animation:tbCounterTick 1.5s ease-in-out infinite} @keyframes tbCounterTick{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} /* Estado EXPIRED (naranja) */ .trial-banner-expired{color:#ff7a44;background:linear-gradient(180deg,rgba(255,100,40,.10) 0%,rgba(140,60,20,.06) 100%);border-bottom-color:rgba(255,100,40,.28)} .trial-banner-expired .tb-glow{background:radial-gradient(ellipse at 12% 50%,rgba(255,100,40,.18) 0%,transparent 50%)} @media (max-width: 720px){ .trial-banner .tb-content{padding:7px 12px;gap:8px} .trial-banner .tb-label{font-size:10px} .trial-banner .tb-counter{min-width:36px;padding:2px 6px} .trial-banner .tb-counter-num{font-size:14px} .trial-banner .tb-cta{font-size:8.5px;padding:6px 10px;letter-spacing:1.3px} } @media (max-width: 480px){ .trial-banner .tb-counter{display:none} .trial-banner .tb-emoji{font-size:15px} } /* ── Preview de rango Pro dentro del modal ── */ .upgrade-rank-preview{margin-bottom:18px;border:1px solid var(--rc,var(--blue));background:linear-gradient(135deg,color-mix(in srgb,var(--rc,var(--blue)) 8%,transparent) 0%,transparent 60%);position:relative;overflow:hidden} .upgrade-rank-preview::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--rc,var(--blue));box-shadow:0 0 12px var(--rc,var(--blue))} .upgrade-rank-preview .urp-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid color-mix(in srgb,var(--rc,var(--blue)) 22%,transparent);position:relative} .upgrade-rank-preview .urp-icon{font-size:34px;flex-shrink:0;filter:drop-shadow(0 0 10px currentColor)} .upgrade-rank-preview .urp-tag{font-family:var(--FM);font-size:7.5px;color:var(--text3);letter-spacing:2.5px;font-weight:600;margin-bottom:2px} .upgrade-rank-preview .urp-name{font-family:var(--FD);font-size:18px;font-weight:900;letter-spacing:3px;line-height:1;text-shadow:0 0 12px currentColor} .upgrade-rank-preview .urp-sub{font-family:var(--FM);font-size:8.5px;color:var(--text2);letter-spacing:1.6px;margin-top:3px;text-transform:uppercase} .upgrade-rank-preview .urp-badge{margin-left:auto;font-family:var(--FD);font-size:8px;font-weight:900;letter-spacing:2px;color:#0a0f14;background:linear-gradient(135deg,#ffcc33 0%,#ff9900 100%);padding:4px 8px 3px;flex-shrink:0;box-shadow:0 0 10px rgba(255,170,0,.4)} .upgrade-rank-preview .urp-missions{padding:10px 16px;display:flex;flex-direction:column;gap:8px} .upgrade-rank-preview .urp-mli{display:flex;align-items:center;gap:10px;padding:7px 10px;background:rgba(255,255,255,.02);border-left:2px solid color-mix(in srgb,var(--rc,var(--blue)) 35%,transparent);transition:all .25s} .upgrade-rank-preview .urp-mli:hover{background:rgba(255,255,255,.04);border-left-color:var(--rc,var(--blue))} .upgrade-rank-preview .urp-num{font-family:var(--FD);font-size:11px;font-weight:900;letter-spacing:1px;flex-shrink:0;width:22px;opacity:.8} .upgrade-rank-preview .urp-mname{flex:1;font-family:var(--FM);font-size:10.5px;color:var(--text);font-weight:500;line-height:1.35} .upgrade-rank-preview .urp-mxp{font-family:var(--FD);font-size:9px;font-weight:700;letter-spacing:1px;flex-shrink:0;opacity:.85} .upgrade-rank-preview .urp-foot{padding:9px 16px 12px;text-align:center;font-family:var(--FM);font-size:8.5px;color:var(--text3);letter-spacing:1.8px;border-top:1px dashed rgba(255,255,255,.05)} /* ── Stats grid del checkpoint día 7 ── */ .trial-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px;padding:14px 12px;background:rgba(0,200,255,.04);border:1px solid rgba(0,200,255,.18)} .trial-stat{text-align:center} .trial-stat .trial-stat-n{font-family:var(--FD);font-size:24px;font-weight:900;color:var(--blue);line-height:1;letter-spacing:1px;text-shadow:0 0 10px rgba(0,200,255,.3)} .trial-stat .trial-stat-l{font-family:var(--FM);font-size:7.5px;color:var(--text3);letter-spacing:1.8px;margin-top:6px;font-weight:600} /* ── PIR card 2 columnas · stack en mobile ── */ @media (max-width: 720px){ .pir-card .pir-2col{grid-template-columns:1fr !important;gap:10px !important} .pir-card .pir-2col svg{max-width:180px !important;margin:0 auto} } /* ═══════════════════════════════════════════════════════════════ Sprint 1.3b · Plan badge en toolbar de La Red ═══════════════════════════════════════════════════════════════ */ .sb-plan-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border:1px solid var(--border);background:linear-gradient(135deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.1) 100%);cursor:pointer;user-select:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;font-family:var(--FM)} .sb-plan-badge::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);transition:left .5s ease} .sb-plan-badge:hover::before{left:100%} .sb-plan-badge .sb-plan-icon{font-size:10px;line-height:1;filter:drop-shadow(0 0 4px currentColor)} .sb-plan-badge .sb-plan-counter{font-family:var(--FD);font-size:10px;font-weight:900;letter-spacing:.5px;line-height:1} .sb-plan-badge .sb-plan-label{font-family:var(--FD);font-size:7px;font-weight:800;letter-spacing:1.8px;padding:2px 5px 1px;border-radius:1px;line-height:1} /* Variante FREE · estados verde / ámbar / rojo según uso */ .sb-plan-badge.free.ok{border-color:rgba(0,255,136,.35);color:#5eff9c;background:linear-gradient(135deg,rgba(0,255,136,.06) 0%,rgba(0,0,0,.1) 100%)} .sb-plan-badge.free.ok .sb-plan-label{background:rgba(0,255,136,.12);color:#5eff9c} .sb-plan-badge.free.ok:hover{border-color:var(--green);box-shadow:0 0 10px rgba(0,255,136,.15)} .sb-plan-badge.free.warn{border-color:rgba(255,170,0,.5);color:#ffb84d;background:linear-gradient(135deg,rgba(255,170,0,.08) 0%,rgba(0,0,0,.1) 100%);animation:sbBadgeWarnPulse 2.5s ease-in-out infinite} .sb-plan-badge.free.warn .sb-plan-label{background:rgba(255,170,0,.14);color:#ffb84d} @keyframes sbBadgeWarnPulse{0%,100%{box-shadow:0 0 0 rgba(255,170,0,0)}50%{box-shadow:0 0 12px rgba(255,170,0,.25)}} .sb-plan-badge.free.full{border-color:rgba(255,80,80,.55);color:#ff7a7a;background:linear-gradient(135deg,rgba(255,80,80,.1) 0%,rgba(0,0,0,.15) 100%);animation:sbBadgeFullPulse 1.2s ease-in-out infinite} .sb-plan-badge.free.full .sb-plan-label{background:rgba(255,80,80,.16);color:#ff7a7a} @keyframes sbBadgeFullPulse{0%,100%{box-shadow:0 0 0 rgba(255,80,80,0)}50%{box-shadow:0 0 16px rgba(255,80,80,.35)}} /* Variante PRO · dorado con sheen */ .sb-plan-badge.pro{border-color:rgba(255,204,51,.55);color:#ffcc33;background:linear-gradient(135deg,rgba(255,204,51,.08) 0%,rgba(255,100,0,.04) 100%);box-shadow:0 0 12px rgba(255,170,0,.12)} .sb-plan-badge.pro .sb-plan-counter{font-size:14px;text-shadow:0 0 8px rgba(255,170,0,.5)} .sb-plan-badge.pro .sb-plan-label{background:linear-gradient(135deg,#ffcc33 0%,#ff9900 100%);color:#0a0f14;letter-spacing:2px} .sb-plan-badge.pro:hover{box-shadow:0 0 18px rgba(255,170,0,.25)} /* Variante TRIAL · cyan/morado holográfico (distinto del pro dorado) */ .sb-plan-badge.trial{border-color:rgba(140,220,255,.55);color:#aee5ff;background:linear-gradient(135deg,rgba(140,220,255,.10) 0%,rgba(170,80,255,.06) 100%);box-shadow:0 0 12px rgba(140,220,255,.18);animation:sbBadgeTrialShimmer 4s ease-in-out infinite} .sb-plan-badge.trial .sb-plan-counter{font-size:14px;text-shadow:0 0 8px rgba(140,220,255,.55)} .sb-plan-badge.trial .sb-plan-label{background:linear-gradient(135deg,#8cdcff 0%,#a050ff 100%);color:#0a0f14;letter-spacing:1.4px;font-size:7px} .sb-plan-badge.trial:hover{box-shadow:0 0 22px rgba(170,140,255,.35)} @keyframes sbBadgeTrialShimmer{0%,100%{box-shadow:0 0 12px rgba(140,220,255,.18)}50%{box-shadow:0 0 18px rgba(170,140,255,.30)}} /* ── Aviso "solo Mi Red" en el modal de bienvenida del trial ── */ .mired-trial-welcome .mired-trial-warn{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:18px;background:linear-gradient(135deg,rgba(255,170,0,.08) 0%,rgba(255,100,40,.04) 100%);border:1px solid rgba(255,170,0,.30);position:relative} .mired-trial-welcome .mired-trial-warn::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#ffaa00,#ff5a32);box-shadow:0 0 10px rgba(255,170,0,.5)} .mired-trial-welcome .mtw-icon{font-size:20px;flex-shrink:0;line-height:1;color:var(--amber);filter:drop-shadow(0 0 6px rgba(255,170,0,.5));margin-top:2px} .mired-trial-welcome .mtw-body{flex:1;min-width:0} .mired-trial-welcome .mtw-title{font-family:var(--FD);font-size:10px;color:var(--amber);letter-spacing:1.5px;font-weight:800;margin-bottom:6px;text-transform:uppercase} .mired-trial-welcome .mtw-desc{font-family:var(--FM);font-size:10.5px;color:var(--text2);line-height:1.6} /* ── Caja de oferta del checkpoint día 12 ── */ .trial-offer-box{text-align:center;margin-bottom:18px;padding:18px 16px;background:linear-gradient(180deg,rgba(255,170,0,.08) 0%,rgba(255,100,50,.04) 100%);border:1px solid rgba(255,170,0,.32);position:relative;overflow:hidden} .trial-offer-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#ffaa00,#ff5a32);box-shadow:0 0 14px rgba(255,170,0,.6)} .trial-offer-strike{font-family:var(--FM);font-size:11px;color:var(--text3);letter-spacing:2px;text-decoration:line-through;text-decoration-thickness:1.5px;margin-bottom:6px;opacity:.7} .trial-offer-price{font-family:var(--FD);font-size:42px;font-weight:900;color:var(--amber);line-height:1;letter-spacing:1px;text-shadow:0 0 12px rgba(255,170,0,.35)} .trial-offer-price span{font-family:var(--FD);font-size:18px;color:var(--text2);font-weight:700;letter-spacing:1px} .trial-offer-save{font-family:var(--FM);font-size:9px;color:var(--green);letter-spacing:2px;margin-top:6px;font-weight:700} /* ════════════════════════════════════════════════════════════════ ║ MODAL UPGRADE v2 · Modal Upgrade Redesign (Abril 2026) ║ ║ Toggle anual/mensual + beneficios arriba + founder counter ║ ╚════════════════════════════════════════════════════════════════ */ /* Layout: header ancho arriba + body en 2 columnas (info+rank | pricing) */ .upgrade-modal.v2 .upgrade-card.v2{width:min(1100px,96vw);max-height:96vh;display:flex;flex-direction:column} .upgrade-card.v2 .upgrade-head{padding:24px 36px 18px;text-align:center;background:linear-gradient(180deg,rgba(0,200,255,.07) 0%,transparent 100%);flex-shrink:0} .upgrade-card.v2 .upgrade-icon{font-size:46px;margin-bottom:6px;filter:drop-shadow(0 0 16px rgba(0,200,255,.5))} .upgrade-card.v2 .upgrade-tag{font-family:var(--FM);font-size:11px;color:var(--blue);letter-spacing:3.5px;margin-bottom:6px;font-weight:700} .upgrade-card.v2 .upgrade-title{font-family:var(--FD);font-size:24px;color:var(--text);letter-spacing:2px;line-height:1.2;font-weight:800} .upgrade-card.v2 .upgrade-body{padding:0 38px 24px;display:flex;flex-direction:column;flex:1;overflow:hidden} .upgrade-card.v2 .upgrade-lead{font-family:var(--FM);font-size:14px;color:var(--text2);line-height:1.6;margin:10px 0 16px;text-align:center;flex-shrink:0} /* ── Layout 2 columnas con wrappers explícitos ── */ .upgrade-card.v2 .upgrade-cols{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;flex:1;min-height:0;align-items:stretch} .upgrade-card.v2 .ucol{display:flex;flex-direction:column;gap:12px;justify-content:center;min-width:0} .upgrade-card.v2 .ucol-right{gap:10px} /* La columna derecha tiende a ser "densa" — justificamos al centro vertical */ .upgrade-card.v2 .ucol-left{align-self:stretch} .upgrade-card.v2 .ucol-right{align-self:stretch} /* Quitar márgenes extra dentro de los wrappers (el gap del flex ya cumple) */ .upgrade-card.v2 .ucol > *{margin-top:0!important;margin-bottom:0!important} /* Mini stats-grid (balancea altura columna izquierda) */ .upgrade-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0;padding:14px 10px;background:linear-gradient(135deg,rgba(0,200,255,.04),rgba(180,120,255,.03));border:1px solid rgba(0,200,255,.18)} .ust-cell{text-align:center;padding:6px 4px;border-right:1px solid rgba(255,255,255,.05)} .ust-cell:last-child{border-right:none} .ust-num{font-family:var(--FD);font-size:24px;font-weight:900;color:var(--blue);letter-spacing:.5px;line-height:1;text-shadow:0 0 14px rgba(0,200,255,.4);margin-bottom:5px} .ust-cell:nth-child(2) .ust-num{color:var(--green);text-shadow:0 0 14px rgba(0,255,136,.4)} .ust-cell:nth-child(3) .ust-num{color:var(--gold,#FFD700);text-shadow:0 0 14px rgba(255,170,0,.4)} .ust-lbl{font-family:var(--FM);font-size:10px;color:var(--text2);letter-spacing:1.5px;text-transform:uppercase;line-height:1.3;font-weight:600} /* Lista de beneficios — generosa para modal grande */ .upgrade-card.v2 .benefits-list{margin:0;padding:14px 18px;background:rgba(0,255,136,.04);border:1px solid rgba(0,255,136,.18);list-style:none;display:flex;flex-direction:column;gap:9px} .upgrade-card.v2 .benefits-list li{display:flex;align-items:flex-start;gap:9px;font-family:var(--FM);font-size:12.5px;color:var(--text);line-height:1.5} .upgrade-card.v2 .benefits-list li .upgrade-check{color:var(--green);font-weight:900;flex-shrink:0;margin-top:1px;font-size:13px} /* Rank-preview dentro del modal v2 — más legible */ .upgrade-card.v2 .upgrade-rank-preview{margin:0} .upgrade-card.v2 .upgrade-rank-preview .urp-head{padding:12px 16px;gap:11px} .upgrade-card.v2 .upgrade-rank-preview .urp-icon{font-size:28px} .upgrade-card.v2 .upgrade-rank-preview .urp-name{font-size:16px;letter-spacing:2.5px} .upgrade-card.v2 .upgrade-rank-preview .urp-tag{font-size:8px;letter-spacing:2.5px} .upgrade-card.v2 .upgrade-rank-preview .urp-sub{font-size:8.5px;letter-spacing:1.4px;margin-top:3px} .upgrade-card.v2 .upgrade-rank-preview .urp-badge{font-size:8px;padding:4px 8px 3px} .upgrade-card.v2 .upgrade-rank-preview .urp-missions{padding:9px 16px;gap:6px} .upgrade-card.v2 .upgrade-rank-preview .urp-mli{padding:7px 10px} .upgrade-card.v2 .upgrade-rank-preview .urp-num{font-size:10px;width:20px} .upgrade-card.v2 .upgrade-rank-preview .urp-mname{font-size:11px;line-height:1.35} .upgrade-card.v2 .upgrade-rank-preview .urp-mxp{font-size:9.5px;letter-spacing:.8px} .upgrade-card.v2 .upgrade-rank-preview .urp-foot{padding:8px 16px 10px;font-size:9px;letter-spacing:1.5px} /* Founder counter — proporcional al modal grande */ .founder-counter{margin:0;padding:10px 14px 12px;background:linear-gradient(135deg,rgba(255,170,0,.08),rgba(255,80,200,.05));border:1px solid rgba(255,170,0,.30);display:flex;flex-direction:column;gap:7px} .founder-counter-bar{height:6px;background:rgba(255,255,255,.06);overflow:hidden;border-radius:3px;margin:0} .founder-counter-fill{height:100%;background:linear-gradient(90deg,var(--gold,#FFD700),var(--green));box-shadow:0 0 10px rgba(0,255,136,.5);transition:width .6s cubic-bezier(.4,1.4,.5,1);border-radius:3px} .founder-counter-text{font-family:var(--FM);font-size:11px;color:var(--text2);letter-spacing:.4px;text-align:center;line-height:1.4;margin:0} /* Toggle anual/mensual */ .plan-toggle{display:flex;gap:5px;margin:0;padding:4px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:4px} .plan-opt{flex:1;padding:11px 14px;background:transparent;color:var(--text3);border:none;cursor:pointer;font-family:var(--FM);font-size:12px;font-weight:700;letter-spacing:1.5px;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:3px} .plan-opt:hover{color:var(--text2)} .plan-opt.active{background:linear-gradient(135deg,var(--blue),var(--green));color:#0a0f14;box-shadow:0 2px 12px rgba(0,200,255,.35);font-weight:900} .tag-savings{display:inline-block;padding:2px 8px;background:rgba(0,255,136,.95);color:#0a0f14;font-size:10px;font-weight:900;letter-spacing:1px;border-radius:2px} .plan-opt.active .tag-savings{background:#0a0f14;color:var(--green)} /* Bloque de pricing — precio destacado en modal grande */ .pricing-display{margin:0;text-align:center;padding:10px 6px} .price-main{font-family:var(--FD);font-size:46px;font-weight:900;color:var(--green);line-height:1;letter-spacing:1px;text-shadow:0 0 22px rgba(0,255,136,.35);margin-bottom:6px} .price-main .price-cur{font-family:var(--FM);font-size:14px;color:var(--text2);font-weight:700;margin-left:5px;letter-spacing:1.5px} .price-main .price-per{font-family:var(--FM);font-size:14px;color:var(--text3);font-weight:600;letter-spacing:.6px} .price-billing{font-family:var(--FM);font-size:12px;color:var(--text2);margin-top:5px;line-height:1.5} .price-regular-strike{font-family:var(--FM);font-size:11px;color:var(--text3);margin-top:5px;text-decoration:line-through;text-decoration-color:rgba(255,80,80,.5);text-decoration-thickness:1px} .price-savings-badge{display:inline-block;margin:10px auto 0;padding:6px 14px;background:rgba(0,255,136,.10);border:1px solid rgba(0,255,136,.40);color:var(--green);font-family:var(--FM);font-size:11.5px;letter-spacing:.5px;font-weight:700;border-radius:2px} .price-savings-badge.alt{background:rgba(255,170,0,.08);border-color:rgba(255,170,0,.4);color:var(--amber)} .price-footnote{font-family:var(--FM);font-size:10px;color:var(--text3);margin-top:8px;letter-spacing:.3px} /* Founder perks */ .founder-perks{margin:0;display:flex;flex-direction:column;gap:5px} .founder-perk{font-family:var(--FM);font-size:11px;color:var(--text2);padding:7px 12px;background:rgba(180,120,255,.05);border-left:2px solid rgba(180,120,255,.5);line-height:1.4} .founder-perk strong{color:#dac0ff} /* Trial path */ .upgrade-trial-box{margin:0;padding:14px 16px;background:linear-gradient(135deg,rgba(0,255,136,.08),rgba(0,200,255,.04));border:1px solid rgba(0,255,136,.30);text-align:center} .upgrade-trial-tag{font-family:var(--FM);font-size:10px;color:var(--green);letter-spacing:2.5px;font-weight:800;margin-bottom:4px} .upgrade-trial-title{font-family:var(--FD);font-size:14px;color:var(--text);font-weight:800;letter-spacing:.5px;margin-bottom:4px} .upgrade-trial-sub{font-family:var(--FM);font-size:11px;color:var(--text2);line-height:1.45} /* CTAs */ .upgrade-card.v2 .upgrade-cta-primary{display:block;width:100%;margin:0;padding:14px 16px;background:linear-gradient(90deg,var(--green),var(--blue));border:none;color:#0a0f14;font-family:var(--FD);font-size:13px;font-weight:900;letter-spacing:2.2px;cursor:pointer;transition:all .25s;box-shadow:0 4px 18px rgba(0,255,136,.35),0 0 30px rgba(0,200,255,.18)} .upgrade-card.v2 .upgrade-cta-primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,255,136,.5),0 0 40px rgba(0,200,255,.28)} .upgrade-card.v2 .upgrade-cta-primary.educator{background:linear-gradient(90deg,var(--purple,#b06aff),var(--blue))} .upgrade-card.v2 .upgrade-cta-primary.institutional{background:linear-gradient(90deg,#ffd700,#ff9900);color:#0a0f14} .upgrade-card.v2 .upgrade-cta-ghost{display:block;width:100%;margin:0;padding:9px;background:transparent;border:1px solid rgba(255,255,255,.08);color:var(--text3);font-family:var(--FM);font-size:11px;letter-spacing:1.5px;cursor:pointer;transition:all .2s} .upgrade-card.v2 .upgrade-cta-ghost:hover{border-color:var(--text3);color:var(--text2)} /* Prueba social */ .social-proof{font-family:var(--FM);font-size:11px;color:var(--text3);text-align:center;margin:0;line-height:1.45;font-style:italic} .social-proof a{color:var(--blue);text-decoration:none} .social-proof a:hover{text-decoration:underline} .social-proof.educator{font-style:normal} /* Variante educator */ .upgrade-card.v2.educator .upgrade-head{background:linear-gradient(180deg,rgba(180,120,255,.1) 0%,transparent 100%)} .upgrade-card.v2.educator .upgrade-tag{color:var(--purple,#b06aff)} .educator-verify{margin:14px 0;padding:14px 16px;background:rgba(180,120,255,.05);border:1px solid rgba(180,120,255,.25)} .educator-verify-label{display:block;font-family:var(--FM);font-size:10px;color:var(--text2);letter-spacing:1.5px;margin-bottom:8px;font-weight:700} .educator-verify input{width:100%;padding:10px 12px;background:rgba(0,0,0,.3);border:1px solid rgba(180,120,255,.3);color:var(--text);font-family:var(--FM);font-size:12px;outline:none;box-sizing:border-box;letter-spacing:.5px} .educator-verify input:focus{border-color:var(--purple,#b06aff);box-shadow:0 0 12px rgba(180,120,255,.25)} .educator-verify-hint{font-family:var(--FM);font-size:9px;color:var(--text3);margin-top:8px;line-height:1.5} .educator-verify-hint code{background:rgba(255,255,255,.06);padding:1px 5px;color:var(--blue);font-family:var(--FM)} /* Variante institucional */ .upgrade-card.v2.institutional .upgrade-head{background:linear-gradient(180deg,rgba(255,215,0,.08) 0%,transparent 100%)} .upgrade-card.v2.institutional .upgrade-tag{color:var(--gold,#FFD700)} .upgrade-card.v2.institutional .upgrade-icon{filter:drop-shadow(0 0 14px rgba(255,215,0,.5))} .institutional-price{margin:14px 0;text-align:center;padding:16px;background:rgba(255,215,0,.04);border:1px solid rgba(255,215,0,.25)} .institutional-price .price-main{color:var(--gold,#FFD700);font-size:32px;text-shadow:0 0 18px rgba(255,170,0,.4)} /* Responsive: en pantallas <700px las columnas se apilan + scroll interno */ @media(max-width:700px){ .upgrade-card.v2 .upgrade-cols{grid-template-columns:1fr;gap:8px;overflow-y:auto} .upgrade-card.v2{max-height:96vh} } @media(max-width:480px){ .upgrade-card.v2{width:96vw} .upgrade-card.v2 .upgrade-head{padding:14px 18px 10px} .upgrade-card.v2 .upgrade-body{padding:0 18px 18px} .upgrade-card.v2 .upgrade-title{font-size:15px} .price-main{font-size:26px} } /* ── Plan Info Modal · comparativa de planes ── */ .plan-info-modal{ position:fixed;inset:0;z-index:100000; display:flex;align-items:center;justify-content:center; background:radial-gradient(ellipse at center,rgba(8,12,24,.85),rgba(0,0,0,.95)); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); animation:planInfoFadeIn .3s ease; } @keyframes planInfoFadeIn{from{opacity:0}to{opacity:1}} @keyframes planInfoSlideIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}} .plan-info-card{ position:relative; width:min(1100px,94vw);max-height:92vh;overflow-y:auto; padding:36px 36px 32px; background:linear-gradient(145deg,rgba(20,28,48,.97),rgba(8,14,32,.99)); border:1px solid rgba(255,255,255,.1);border-radius:22px; box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 120px rgba(0,200,255,.1); animation:planInfoSlideIn .4s cubic-bezier(.2,.9,.3,1.2); } .plan-info-close{ position:absolute;top:16px;right:16px; width:36px;height:36px;background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);color:#a8b0c5; font-size:14px;cursor:pointer;border-radius:10px;transition:all .2s; } .plan-info-close:hover{background:rgba(255,80,80,.15);border-color:rgba(255,80,80,.5);color:#ff5050;transform:rotate(90deg)} .plan-info-header{text-align:center;margin-bottom:30px} .plan-info-tag{font-family:var(--FM,monospace);font-size:10px;color:#00c8ff;letter-spacing:4px;margin-bottom:6px} .plan-info-title{ font-family:var(--FD,sans-serif);font-size:24px;font-weight:700; background:linear-gradient(90deg,#00c8ff,#b06aff,#ff50a0); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; letter-spacing:1px;margin-bottom:6px; } .plan-info-sub{font-family:var(--FM,monospace);font-size:11px;color:#a8b0c5} .plan-info-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; } .plan-card{ position:relative; padding:20px 18px; background:rgba(255,255,255,.03); border:1.5px solid rgba(255,255,255,.08);border-radius:14px; transition:all .3s; display:flex;flex-direction:column;gap:10px; } .plan-card:hover{ border-color:var(--plan-color,#00c8ff); background:rgba(255,255,255,.05); box-shadow:0 0 24px color-mix(in srgb,var(--plan-color,#00c8ff) 30%,transparent); transform:translateY(-3px); } .plan-card-current{ border-color:var(--plan-color,#00c8ff); background:linear-gradient(145deg,color-mix(in srgb,var(--plan-color) 10%,transparent),rgba(255,255,255,.04)); box-shadow:0 0 32px color-mix(in srgb,var(--plan-color) 45%,transparent),inset 0 0 16px color-mix(in srgb,var(--plan-color) 8%,transparent); animation:planCardCurrentGlow 3s ease-in-out infinite; } @keyframes planCardCurrentGlow{ 0%,100%{box-shadow:0 0 32px color-mix(in srgb,var(--plan-color) 45%,transparent),inset 0 0 16px color-mix(in srgb,var(--plan-color) 8%,transparent)} 50% {box-shadow:0 0 44px color-mix(in srgb,var(--plan-color) 65%,transparent),inset 0 0 22px color-mix(in srgb,var(--plan-color) 14%,transparent)} } .plan-current-tag{ position:absolute;top:-10px;left:50%;transform:translateX(-50%); background:var(--plan-color,#00c8ff);color:#04080d; font-family:var(--FM,monospace);font-size:9px;font-weight:800;letter-spacing:1.5px; padding:3px 12px;border-radius:10px;white-space:nowrap; box-shadow:0 0 16px color-mix(in srgb,var(--plan-color) 70%,transparent); } .plan-card-head{display:flex;align-items:center;gap:10px} .plan-card-icon{font-size:24px;line-height:1;filter:drop-shadow(0 0 6px currentColor)} .plan-card-title{font-family:var(--FD,sans-serif);font-size:15px;font-weight:700;letter-spacing:1px} .plan-card-cta{ font-family:var(--FM,monospace);font-size:10px;color:#a8b0c5; padding:6px 10px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.1); border-radius:6px;letter-spacing:.3px; } .plan-card-features{ list-style:none;padding:0;margin:0; display:flex;flex-direction:column;gap:6px; } .plan-card-features li{ font-family:var(--FM,monospace);font-size:10.5px;color:#cfd4e6; line-height:1.5;padding-left:14px;position:relative; } .plan-card-features li::before{ content:'▸';position:absolute;left:0;color:var(--plan-color,#00c8ff);font-weight:700; } .plan-quota-block{ margin-top:10px;padding:10px 12px; background:color-mix(in srgb,var(--plan-color) 8%,transparent); border:1px solid color-mix(in srgb,var(--plan-color) 30%,transparent); border-radius:8px; } .plan-quota-title{font-family:var(--FM,monospace);font-size:9px;color:var(--plan-color);letter-spacing:1.5px;margin-bottom:6px;font-weight:700} .plan-quota-row{display:flex;justify-content:space-between;font-family:var(--FM,monospace);font-size:10px;color:#cfd4e6;padding:2px 0} .plan-quota-row strong{color:#fff} /* ── Modal de plan SOLO (un solo plan, centrado y más prominente) ── */ .plan-info-card-solo{ width:min(560px,94vw) !important; padding:36px 32px 28px !important; } .plan-card-solo{ max-width:none !important; margin:0 auto !important; padding:26px 24px 22px !important; font-size:1.02em; } .plan-card-solo .plan-card-icon{font-size:34px !important} .plan-card-solo .plan-card-title{font-size:22px !important;letter-spacing:1.5px !important} .plan-card-solo .plan-card-cta{font-size:11px !important;padding:8px 14px !important;text-align:center} .plan-card-solo .plan-card-features li{font-size:11.5px !important;padding-left:18px !important;line-height:1.6 !important} .plan-card-solo .plan-quota-block{margin-top:14px !important;padding:14px 16px !important} .plan-card-solo .plan-quota-row{font-size:11px !important;padding:4px 0 !important} /* ── Botón EXPULSAR estudiante (solo aulas Pro) ── */ .aula-expel-btn{ background:rgba(255,80,80,.08); border:1px solid rgba(255,80,80,.35); color:rgba(255,100,100,.85); font-family:var(--FM,monospace);font-size:8px;font-weight:700; letter-spacing:1.2px;padding:5px 9px; cursor:pointer;border-radius:5px; margin-left:10px;flex-shrink:0; transition:all .2s; white-space:nowrap; } .aula-expel-btn:hover{ background:rgba(255,80,80,.18); border-color:rgba(255,80,80,.7); color:#ff5050; transform:scale(1.05); box-shadow:0 0 12px rgba(255,80,80,.3); } .aula-expel-btn:active{transform:scale(.97)} /* ── Tarjeta de estudiante (grilla del aula) · jul 2026 ── */ .aula-scard{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px;transition:border-color .2s,transform .15s,box-shadow .2s} .aula-scard:hover{border-color:rgba(0,255,136,.35);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.25)} .aula-scard-top{display:flex;align-items:center;gap:12px;cursor:pointer} .aula-scard-ava{width:46px;height:46px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;overflow:hidden} .aula-scard-ava img{width:100%;height:100%;border-radius:50%;object-fit:cover} .aula-scard-id{flex:1;min-width:0} .aula-scard-name{font-family:var(--FM);font-size:14px;font-weight:700;color:var(--text);letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .aula-scard-rank{font-family:var(--FM);font-size:10px;color:var(--text2);margin-top:4px;display:flex;align-items:center;gap:6px;letter-spacing:.5px} .aula-scard-rankdot{width:7px;height:7px;border-radius:50%;flex-shrink:0} .aula-scard-xp{font-family:var(--FD);font-size:19px;font-weight:900;color:var(--green);text-align:right;line-height:1;flex-shrink:0} .aula-scard-xp span{display:block;font-family:var(--FM);font-size:8px;color:var(--text3);font-weight:400;letter-spacing:1.5px;margin-top:3px} .aula-scard-stats{display:flex;gap:8px;cursor:pointer;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);padding:11px 0} .aula-scard-stat{flex:1;text-align:center;min-width:0} .aula-scard-stat b{display:block;font-family:var(--FM);font-size:13px;color:var(--text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .aula-scard-stat span{display:block;font-family:var(--FM);font-size:8px;color:var(--text3);letter-spacing:.6px;margin-top:4px;text-transform:uppercase} .aula-scard-actions{display:flex;gap:8px;align-items:center} .aula-scard-ver{flex:1;background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.35);color:var(--green);font-family:var(--FM);font-size:10px;font-weight:700;letter-spacing:1.2px;padding:10px;cursor:pointer;border-radius:8px;transition:background .2s} .aula-scard-ver:hover{background:rgba(0,255,136,.18)} .aula-scard .aula-expel-btn{margin-left:0;padding:9px 11px} /* ── Banner de solicitudes pendientes en card del aula ── */ .aula-pending-banner{ margin-top:10px;padding:10px 14px; background:linear-gradient(90deg,rgba(255,170,0,.15),rgba(255,100,50,.08)); border:1.5px solid rgba(255,170,0,.5);border-radius:8px; display:flex;justify-content:space-between;align-items:center;gap:10px; cursor:pointer;transition:all .25s; box-shadow:0 0 14px rgba(255,170,0,.2),inset 0 0 8px rgba(255,170,0,.08); animation:aulaPendingPulse 2.4s ease-in-out infinite; } .aula-pending-banner:hover{ background:linear-gradient(90deg,rgba(255,170,0,.25),rgba(255,100,50,.12)); box-shadow:0 0 22px rgba(255,170,0,.4); transform:translateX(2px); } .aula-pending-banner .apb-content{display:flex;align-items:center;gap:8px} .aula-pending-banner .apb-icon{font-size:16px;filter:drop-shadow(0 0 6px rgba(255,170,0,.6))} .aula-pending-banner .apb-text{font-family:var(--FM,monospace);font-size:11px;color:#ffaa00;letter-spacing:.3px} .aula-pending-banner .apb-text strong{font-size:13px;font-weight:800;text-shadow:0 0 8px rgba(255,170,0,.6)} .aula-pending-banner .apb-arrow{font-family:var(--FM,monospace);font-size:10px;color:#ffaa00;font-weight:700;letter-spacing:1.5px} @keyframes aulaPendingPulse{ 0%,100%{box-shadow:0 0 14px rgba(255,170,0,.2),inset 0 0 8px rgba(255,170,0,.08)} 50% {box-shadow:0 0 22px rgba(255,170,0,.4),inset 0 0 12px rgba(255,170,0,.15)} } @keyframes shimmerPending { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } /* keyframes para modales celebratorios */ @keyframes fadeOut { from { opacity:1 } to { opacity:0 } } @keyframes popIn { 0% { transform:scale(.7); opacity:0 } 60% { transform:scale(1.04); opacity:1 } 100% { transform:scale(1) } } @keyframes bounceIn { 0% { transform:scale(0); opacity:0 } 60% { transform:scale(1.2); opacity:1 } 80% { transform:scale(.9) } 100% { transform:scale(1) } } /* ══════════════════════════════════════════════════════════════════════ PILLS · filtro de paleta de componentes en Mi Red Posición: dentro de .at-sec-h, entre el título y el hint Categorías: Todos · Sensores · Actuadores · Controles · Visual ══════════════════════════════════════════════════════════════════════ */ .sb-cat-pills { display: flex; gap: 6px; flex: 1; flex-wrap: nowrap; overflow-x: auto; align-items: center; margin-left: 8px; min-width: 0; scrollbar-width: none; } .sb-cat-pills::-webkit-scrollbar { display: none; } .sb-cat-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; background: transparent; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; color: var(--text3); font-family: var(--FM); font-size: 9px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; transition: all .15s ease; white-space: nowrap; flex-shrink: 0; line-height: 1; } .sb-cat-pill:hover { border-color: rgba(0,200,255,.4); color: var(--blue); background: rgba(0,200,255,.04); } .sb-cat-pill.active { border-color: var(--green); background: rgba(0,255,136,.10); color: var(--green); box-shadow: 0 0 10px rgba(0,255,136,.25); } .sb-cat-pill .sb-pill-icon { font-size: 11px; line-height: 1; } .sb-cat-pill .sb-pill-count { opacity: .55; font-size: 8px; font-weight: 500; margin-left: 1px; letter-spacing: 0.5px; } .sb-cat-pill.active .sb-pill-count { opacity: 0.9; } /* ── "Componentes" más sutil cuando comparte fila con pills ── */ .at-sec-h .at-sec-title.sb-title-compact { opacity: 0.65; font-size: 10px; letter-spacing: 2.5px; } /* ── Hint "Click o arrastra" con glow visible ── */ .at-sec-h .at-sec-hint.sb-hint-glow { color: var(--green); text-shadow: 0 0 8px rgba(0,255,136,.6), 0 0 16px rgba(0,255,136,.3); opacity: 1; font-weight: 700; animation: sbHintPulse 2.5s ease-in-out infinite; } @keyframes sbHintPulse { 0%, 100% { text-shadow: 0 0 6px rgba(0,255,136,.55), 0 0 14px rgba(0,255,136,.25); } 50% { text-shadow: 0 0 12px rgba(0,255,136,.9), 0 0 24px rgba(0,255,136,.5); } } /* ── Responsive · pantallas pequeñas ── */ @media (max-width: 1024px) { .sb-cat-pill .sb-pill-count { display: none; } .at-sec-h .at-sec-hint.sb-hint-glow { font-size: 8px; } } @media (max-width: 768px) { .sb-cat-pill { padding: 3px 8px; font-size: 8px; } .sb-cat-pill .sb-pill-icon { font-size: 10px; } } /* ══════════════════════════════════════════════════════════════════════ FIX · dimensiones consistentes de widgets en la paleta Sin esto, cuando una categoría tiene solo nombres cortos (LED, RELÉ) los cards quedan más pequeños que cuando hay nombres largos (GPS NEO-6M, SUELO HUM). Forzamos altura mínima + reserva de 2 líneas para el nombre, así todas las categorías muestran cards del mismo tamaño. ══════════════════════════════════════════════════════════════════════ */ .sb-cat-item { min-height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .sb-cat-item .sb-cn { /* Reservar siempre espacio para 2 líneas de texto (12px × 2 = 24px). Los nombres cortos (LED, PIR) quedan centrados en el espacio, los largos (GPS NEO-6M) usan ambas líneas. */ min-height: 24px; display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; } /* ══════════════════════════════════════════════════════════════════════ FIX · "Click o arrastra" al lado de la pill Visual (no en el borde) Las pills antes ocupaban todo el espacio disponible (flex:1) empujando el hint al extremo derecho. Removemos el flex-grow para que las pills solo ocupen lo que necesitan y el hint quede pegado a Visual. ══════════════════════════════════════════════════════════════════════ */ .at-sec-h .sb-cat-pills { flex: 0 0 auto; /* No estirar · solo tomar lo necesario */ overflow-x: visible; /* No necesita scroll horizontal aquí */ margin-left: 8px; margin-right: 8px; /* Espacio antes del hint */ } .at-sec-h .at-sec-hint.sb-hint-glow { margin-left: 0; /* Que quede pegado al gap de las pills */ } /* ── Curie (naranja #ff6b35) — botón splash + glow flash (cu1/g) ── */ .bO{background:transparent;border:1.5px solid #ff6b35;color:#ff6b35;font-weight:700;position:relative} .bO::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#ff6b35,#ff8c42);transform:translateX(-101%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:0} .bO:hover::before{transform:translateX(0)} .bO:hover{color:#fff;box-shadow:0 0 30px rgba(255,107,53,.4)} .bO>*{position:relative;z-index:1} .ws-btn-glow-orange{animation:wsGlowBlue 2s ease-in-out infinite;border-color:rgba(255,107,53,.6)!important;background:rgba(255,107,53,.12)!important;color:#ff6b35!important} /* ── Aura · variante Curie (naranja #ff6b35) — clon de .blue (Error color Aura) ── */ .aura-companion.orange .aura-companion-avatar img{filter:drop-shadow(0 0 18px rgba(255,107,53,.3)) drop-shadow(0 6px 20px rgba(0,0,0,.4))} .aura-companion.orange .aura-companion-name{color:rgba(255,107,53,.85);text-shadow:0 0 10px rgba(255,107,53,.4)} .aura-companion-bubble.orange{background:linear-gradient(135deg,rgba(255,107,53,.08),rgba(255,107,53,.02));border-color:rgba(255,107,53,.3)} .aura-companion-bubble.orange::before{background:linear-gradient(90deg,transparent,rgba(255,107,53,.6),transparent)} .aura-companion-arrow.orange{border-right-color:rgba(255,107,53,.3)} .aura-companion.orange.happy .aura-companion-avatar img{filter:drop-shadow(0 0 30px rgba(255,107,53,.5)) drop-shadow(0 0 60px rgba(255,107,53,.2)) drop-shadow(0 4px 20px rgba(0,0,0,.4))!important} .aura-companion.orange.happy .aura-companion-bubble{border-color:rgba(255,107,53,.5)!important;background:linear-gradient(135deg,rgba(255,107,53,.1),rgba(255,107,53,.02))!important;box-shadow:0 0 30px rgba(255,107,53,.08)} .aura-companion.orange.happy .aura-companion-bubble::before{background:linear-gradient(90deg,transparent,#ff6b35,transparent)!important} .aura-companion.orange.happy .aura-companion-arrow{border-right-color:rgba(255,107,53,.5)!important} .aura-companion.orange.happy .aura-companion-name{color:#ff6b35!important;text-shadow:0 0 12px rgba(255,107,53,.5)!important} .aura-companion.orange.happy .aura-companion-text{color:#ff6b35!important} /* ── Pasos de misión: color del NIVEL (no verde/azul global) ── */ #s5a,#s5a2,#s5a3{--lvl:#00ff88} #s5b,#s5b2,#s5b3{--lvl:#ffaa00} #s5c,#s5c2,#s5c3{--lvl:#b06aff} #s5d,#s5d2,#s5d3{--lvl:#00c8ff} #s5e,#s5e2,#s5e3{--lvl:#00ffd5} #s5f,#s5f2,#s5f3{--lvl:#ffd700} #s5g,#s5g2,#s5g3{--lvl:#ff6b35} #s5h,#s5h2,#s5h3{--lvl:#00c8ff} .STP.done{border-color:var(--lvl,var(--green))!important} .STP.done:hover{border-color:var(--lvl,var(--green))!important} .STP.active{border-color:var(--lvl,var(--blue))!important} .STP.done .SCB,.STP.done .SCB *{color:var(--lvl,var(--green))!important;border-color:var(--lvl,var(--green))!important} /* ═══════════════════════════════════════════════════════════════════════════ CIERRE DEL MODO PREVIO · tiene que sentirse como un logro, no como un aviso ─────────────────────────────────────────────────────────────────────────── Carlos: «se ve demasiado simple para mi gusto». Era un modal gris con texto: el mismo aspecto que un error. El alumno acaba de ver su dato dar la vuelta al mundo — la pantalla que lo celebra no puede parecer una advertencia. ═══════════════════════════════════════════════════════════════════════════ */ @keyframes pvPop{0%{opacity:0;transform:translateY(20px) scale(.96)}60%{transform:translateY(-4px) scale(1.012)}100%{opacity:1;transform:none}} @keyframes pvLinea{0%{background-position:-200% 0}100%{background-position:200% 0}} @keyframes pvPulso{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}} .pv-card-final{ position:relative; animation:pvPop .55s cubic-bezier(.2,.9,.3,1.15) both; border-color:rgba(0,255,136,.45)!important; box-shadow:0 0 60px rgba(0,255,136,.13),0 0 150px rgba(0,200,255,.06); } .pv-card-final::before{ content:'';position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,transparent,var(--green),var(--blue),transparent); background-size:200% 100%;animation:pvLinea 2.8s linear infinite; } .pv-final-sello{ display:inline-flex;align-items:center;gap:8px;margin-bottom:12px; font-family:var(--FM);font-size:9.5px;letter-spacing:3px;color:var(--green); border:1px solid rgba(0,255,136,.4);background:rgba(0,255,136,.06);padding:5px 11px; } .pv-final-sello span{ width:6px;height:6px;background:var(--green); box-shadow:0 0 10px var(--green);animation:pvPulso 1.5s ease-in-out infinite; } .pv-final-h1{ font-family:var(--FD);font-size:23px;line-height:1.25;letter-spacing:1px; color:var(--green); /* respaldo si el clip falla */ background:linear-gradient(90deg,#00ff88,#00c8ff); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; text-shadow:0 0 26px rgba(0,255,136,.22); } /* La cadena, dibujada: es LO QUE acaba de pasar, y se lee de un vistazo. `auto-fit` no vale aqui (los pasos y las flechas alternan): en movil se reduce el tamano, no el numero de columnas. */ .pv-final-cadena{ display:flex;align-items:center;justify-content:center;gap:8px; border:1px solid rgba(0,200,255,.22);background:rgba(0,200,255,.04); padding:13px 8px;margin-bottom:14px; } .pv-final-cadena>div{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;min-width:0} .pv-final-cadena b{font-size:19px;line-height:1;filter:drop-shadow(0 0 9px rgba(0,255,136,.5))} .pv-final-cadena span{font-family:var(--FM);font-size:8.5px;letter-spacing:1.5px;color:var(--text3);text-align:center} .pv-final-cadena i{color:var(--green);font-style:normal;font-size:13px;opacity:.75;flex:0 0 auto}