/* ═══════════════════════════════════════════════════════════════════════ LUXURY · la piel nueva de ATMA (15-sep-2026) ═══════════════════════════════════════════════════════════════════════ Qué es: una capa que va DESPUÉS de estilos.css y le cambia la piel a la app entera sin tocar su estructura. Se puede quitar con una línea (el de index.html) y la app vuelve a como estaba. De dónde sale: de leer el código de dos sitios, no de mirarlos. · Frequency (myfrqncy.app): la GRAMÁTICA. Fondo casi negro con auroras que derivan despacio, grano, vidrio líquido sin borde, todo en píldora, tipografía fina y grande para lo que importa y rótulos diminutos para lo demás, un aro con el estado, "mantén para continuar". · La página del evento de ATMA (atmaconciencia.com): la IDENTIDAD. Su degradado violeta→turquesa en el botón principal, tarjetas oscuras con borde violeta al 18-22 %, palabras en degradado dentro del titular, rótulos Jost 300 con .34em, la barra flotante de vidrio con borde, los cuadritos de icono con degradado, el reveal al hacer scroll. Los colores son los de la marca (los mismos de estilos.css). El oro se queda para el nivel y el estado, como ya era. Convención: lo nuevo lleva prefijo `lx-` para no chocar con nada. Lo que ya existía se restyla por su clase de siempre. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* Vidrio: la tinta de ATMA al 4-8 %, con brillo interior en vez de borde */ --vidrio:rgba(233,233,242,.045); --vidrio-fuerte:rgba(233,233,242,.075); --vidrio-brillo:rgba(233,233,242,.10); --vidrio-borde:rgba(122,78,255,.16); /* el borde de las tarjetas del evento */ --vidrio-borde-viva:rgba(63,208,200,.45); /* su hover */ --oro-claro:#f3dcae; /* El degradado de la casa (botón del evento): violeta → turquesa */ --degradado:linear-gradient(100deg,#8FA3F2,#6F4DEF 42%,#3FD0C8); --degradado-texto:linear-gradient(100deg,#8FA3F2,#3FD0C8); --degradado-icono:linear-gradient(135deg, rgba(122,78,255,.22), rgba(63,208,200,.16)); --pildora:9999px; --curva-lx:cubic-bezier(.16,1,.3,1); /* La luz de fondo de cada pantalla. La cambia `data-vista` en . */ --ambiente:rgba(122,78,255,.30); } body[data-vista="inicio"]{ --ambiente:rgba(122,78,255,.34) } body[data-vista="personaje"]{ --ambiente:rgba(232,199,137,.16) } body[data-vista="nivel"]{ --ambiente:rgba(63,208,200,.22) } body[data-vista="chat"]{ --ambiente:rgba(143,107,255,.30) } body[data-vista="protocolos"]{ --ambiente:rgba(95,242,214,.14) } /* ── El cielo ────────────────────────────────────────────────────────── Sustituye a la foto de fondo del panel. La foto (la pirámide) se queda solo en la entrada, donde es la protagonista. Dentro de la app el fondo es luz: tres auroras que derivan en 30, 36 y 13 s, una pulsación de 18 s y grano fijo. Los tiempos son los de Frequency, leídos de su CSS. */ body::before{ background: radial-gradient(ellipse 120% 60% at 50% 0%, var(--ambiente) 0%, transparent 60%), radial-gradient(ellipse 120% 60% at 50% 0%, var(--plano-2) 0%, var(--plano-1) 60%, var(--plano-0) 100%); animation:none; inset:0; transition:background 1.2s var(--curva-lx); } body::after{ opacity:.05 } .lx-cielo{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none } .lx-cielo i{ position:absolute; border-radius:50%; filter:blur(80px); will-change:transform; mix-blend-mode:screen; display:block; } .lx-cielo .a1{ top:-22%; left:-14%; width:62vw; height:56vh; background:radial-gradient(ellipse at center, rgba(122,78,255,.62) 0%, rgba(111,77,239,.30) 40%, transparent 70%); animation:lx-aurora-1 30s ease-in-out infinite } .lx-cielo .a2{ top:2%; right:-18%; width:58vw; height:50vh; filter:blur(100px); background:radial-gradient(ellipse at center, rgba(63,208,200,.40) 0%, rgba(63,208,200,.18) 45%, transparent 70%); animation:lx-aurora-2 36s ease-in-out infinite } .lx-cielo .a3{ bottom:-20%; left:12%; width:54vw; height:44vh; background:radial-gradient(ellipse at center, rgba(143,107,255,.26) 0%, rgba(143,107,255,.10) 50%, transparent 70%); animation:lx-aurora-3 13s ease-in-out infinite } .lx-cielo .a4{ top:-10%; left:24%; width:46vw; height:38vh; filter:blur(60px); background:radial-gradient(ellipse at center, rgba(185,165,255,.18) 0%, rgba(122,78,255,.08) 50%, transparent 70%); animation:lx-aurora-pulso 18s ease-in-out infinite } @keyframes lx-aurora-1{0%{opacity:.65;transform:translate(0)scale(1)}20%{opacity:.9;transform:translate(14%,-10%)scale(1.18)}40%{opacity:.55;transform:translate(-8%,14%)scale(.9)}60%{opacity:.8;transform:translate(10%,8%)scale(1.12)}80%{opacity:.6;transform:translate(-12%,-6%)scale(.95)}to{opacity:.65;transform:translate(0)scale(1)}} @keyframes lx-aurora-2{0%{opacity:.55;transform:translate(0)scale(1.1)}25%{opacity:.8;transform:translate(-18%,12%)scale(.88)}50%{opacity:.45;transform:translate(20%,-10%)scale(1.2)}75%{opacity:.7;transform:translate(-6%,-14%)scale(.92)}to{opacity:.55;transform:translate(0)scale(1.1)}} @keyframes lx-aurora-3{0%{opacity:.45;transform:translate(0)scale(.95)}33%{opacity:.7;transform:translate(12%,16%)scale(1.15)}66%{opacity:.35;transform:translate(-14%,-8%)scale(1.05)}to{opacity:.45;transform:translate(0)scale(.95)}} @keyframes lx-aurora-pulso{0%,to{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}} @keyframes lx-rise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} } @keyframes lx-respira{ 0%,to{transform:scale(1)} 50%{transform:scale(1.016)} } /* ── Tipografía: fino y grande, o diminuto y en mayúsculas ────────────── */ body{ font-weight:300; letter-spacing:.005em } h1,h2,h3,h4{ font-weight:300 } .portada{ background:none; border-bottom:none; padding:38px 40px 26px } .portada .encima{ font-size:10.5px; letter-spacing:.24em; font-weight:500; color:var(--tinta-tenue) } .portada h2{ font-weight:200; font-size:clamp(32px, 4vw, 46px); letter-spacing:-.03em; line-height:1.02; } .portada .bajo{ font-size:15px; color:var(--tinta-media) } .portada .haz{ opacity:.22 !important } .titulo-zona{ font-weight:300; font-size:24px; letter-spacing:-.02em } .bloque-cabeza h3{ font-weight:300; font-size:22px; letter-spacing:-.02em } .rutina-cabeza h3{ font-weight:300; font-size:22px; letter-spacing:-.02em } .dato .cifra{ font-weight:200; font-size:38px; letter-spacing:-.04em } .rutina-cuenta{ font-weight:300; font-size:24px } .aro-valor{ font-weight:300; font-size:30px; color:var(--oro); text-shadow:0 0 18px rgba(232,199,137,.4) } .anillo-valor{ font-weight:200 } .hoy-texto h3{ font-weight:300; font-size:24px; letter-spacing:-.02em } .tarjeta-acceso h1{ font-weight:300; font-size:30px; letter-spacing:-.02em } .tarjeta-modulo h3{ font-weight:300 } /* Rótulos: todos iguales, Jost 500, 10,5 px, .22em */ .rotulo, .dato .rotulo, .portada .encima, .modulo-nombre, label, .barra .modulo-actual, .anillo-nivel, .aro-pie, .marca .sobre, th, .habito-pie.rotulo{ font-family:var(--texto); font-weight:500; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--tinta-tenue); } th{ font-size:9.5px } /* Palabras en degradado dentro de un titular (de la página del evento) */ .lx-grad{ background:var(--degradado-texto); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } /* ── Vidrio líquido ───────────────────────────────────────────────────── */ .bloque, .dato, .tarjeta-modulo, .rutina, .hoy-tarjeta, .personaje-figura, .prioridades-hoy, .reto-nota, .marco-tabla, .tarjeta-acceso, .panel, .nada, .chat-lado, .panel-caja, .tarjeta, .metrica, .cifra-caja, .marco-mapa, .celda{ background:var(--vidrio) !important; border:1px solid var(--vidrio-borde) !important; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:inset 0 1px 1px var(--vidrio-brillo), 0 20px 50px -30px rgba(0,0,0,.7); border-radius:24px; } .bloque:hover, .dato:hover, .tarjeta-modulo:hover, .hoy-tarjeta:hover{ border-color:var(--vidrio-borde-viva) !important; background:var(--vidrio-fuerte) !important; } .tarjeta-modulo::before, .dato.viva::before, .panel::before, .personaje-figura::before{ display:none } .bloque-cabeza{ border-bottom-color:rgba(233,233,242,.06) } .nada{ border-style:solid !important } .tarjeta-acceso{ backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); background:rgba(6,4,32,.55) !important; border-radius:30px } /* Cuadrito de icono con degradado (evento) */ .tarjeta-modulo .orden{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--degradado-icono); color:var(--luz-magenta); font-family:var(--display); font-weight:400; font-size:12px; letter-spacing:.06em; } /* ── Píldoras: botones, chips, campos ─────────────────────────────────── */ button, .btn-luz, .btn-suave, .descarga-grande, .boton-panel, .pestana, .mando, .segmento{ border-radius:var(--pildora) !important; } button{ font-family:var(--texto); font-weight:400; font-size:13px; letter-spacing:.12em; text-transform:uppercase; padding:12px 22px; } /* Los botones que son texto de verdad (sugerencias del chat, pestañas, mandos) no gritan en mayúsculas */ button.idea, .idea, .pestana, .segmento, .mando, .chat-archivar, .borrar-nota{ text-transform:none; letter-spacing:.01em; font-size:13.5px; } .btn-luz{ background:var(--degradado); color:#fff; box-shadow:0 0 24px rgba(122,78,255,.35); } .btn-luz:hover:not(:disabled){ transform:none; box-shadow:0 0 44px rgba(122,78,255,.55) } .btn-luz:active{ transform:scale(.98) } .btn-suave, .descarga-grande, .boton-panel{ background:var(--vidrio-fuerte) !important; border:none !important; color:var(--tinta-media); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:inset 0 1px 1px var(--vidrio-brillo); } .btn-suave:hover:not(:disabled), .descarga-grande:hover, .boton-panel:hover{ background:rgba(233,233,242,.12) !important; color:var(--tinta); } /* El oro solo cuando el botón entrega el reporte */ .descarga-grande:first-child{ background:linear-gradient(180deg, var(--oro-claro), var(--oro)) !important; color:#2b1f08; font-weight:500; box-shadow:0 8px 30px rgba(232,199,137,.22); } .descarga-grande:first-child:hover{ color:#2b1f08; filter:brightness(1.05) } .descarga-grande{ text-transform:uppercase; letter-spacing:.12em; font-size:12.5px; padding:14px 26px } .sello{ background:var(--vidrio-fuerte); border-color:transparent; color:var(--tinta-media); font-size:11px; letter-spacing:.04em; padding:5px 12px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:inset 0 1px 1px var(--vidrio-brillo); } .sello.oro{ color:var(--oro); background:rgba(232,199,137,.10) } .sello.si{ color:var(--luz-menta); background:rgba(63,208,200,.12) } .sello.ojo{ color:var(--ojo); background:rgba(224,184,67,.10) } .sello.no{ color:#ffb8b2; background:rgba(240,85,77,.12) } input, select{ border-radius:var(--pildora); padding:13px 20px; background:var(--vidrio-fuerte); border:1px solid transparent; box-shadow:inset 0 1px 1px var(--vidrio-brillo); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } textarea{ border-radius:22px; padding:14px 20px; background:var(--vidrio-fuerte); border:1px solid transparent; box-shadow:inset 0 1px 1px var(--vidrio-brillo) } input:hover, textarea:hover, select:hover{ border-color:var(--vidrio-borde) } input:focus, textarea:focus, select:focus{ background:rgba(233,233,242,.09); border-color:rgba(122,78,255,.5); box-shadow:inset 0 1px 1px var(--vidrio-brillo), 0 0 0 4px rgba(122,78,255,.14); } label{ margin-left:16px; margin-bottom:7px } .nota{ border-radius:20px; backdrop-filter:blur(12px) } /* ── El armazón ───────────────────────────────────────────────────────── */ aside{ background:linear-gradient(180deg, rgba(6,4,32,.42), rgba(3,1,16,.35)); border-right:1px solid rgba(233,233,242,.05); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); padding:26px 14px 0; } aside .marca{ padding:0 12px 6px } aside .marca .logo{ font-weight:300; font-size:17px } .modulo-nombre{ padding:0 12px 8px; font-size:9.5px } .modulo-nombre::after{ background:linear-gradient(90deg, rgba(233,233,242,.08), transparent) } nav a{ padding:10px 14px; border-left:none; border-radius:var(--pildora); margin:2px 0; font-size:14px; color:var(--tinta-media); gap:10px; } nav a:hover{ background:var(--vidrio); color:var(--tinta) } nav a.aqui{ background:var(--vidrio-fuerte); color:var(--tinta); box-shadow:inset 0 1px 1px var(--vidrio-brillo); } nav a.aqui::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--oro); box-shadow:0 0 8px var(--oro) } aside .pie{ border-top:1px solid rgba(233,233,242,.05); padding:18px 14px } .barra{ background:transparent; border-bottom:none; backdrop-filter:none; padding:22px 40px 0; } .barra h1{ font-weight:300; font-size:15px; letter-spacing:.02em } .barra .modulo-actual::after{ color:var(--tinta-tenue) } .zona{ padding:22px 40px; animation:lx-rise .6s var(--curva-lx) both } /* La entrada: la foto de la pirámide se queda, con más velo, y la tarjeta es vidrio */ .acceso::before{ filter:saturate(.85) } .acceso::after{ opacity:.7 } .marca .logo{ font-weight:300 } /* El nombre de la IA con la letra del logo: IΛ ΛTMΛ (18-sep-2026). Sora como "Λ T M Λ" (la Λ la pone la fuente del sistema, Sora no la trae), sin las mayúsculas ni el interletrado de rótulo, para que se lea igual en el menú, en la pestaña del teléfono y encima de cada respuesta. */ .ia-nombre{ font-family:var(--display); font-weight:300; letter-spacing:.14em; text-transform:none; white-space:nowrap } /* ── Inicio del alumno (la cabeza de Frequency) ───────────────────────── */ .lx-cabeza{ display:flex; justify-content:flex-start; align-items:flex-end; gap:56px; flex-wrap:wrap; padding:34px 40px 8px; position:relative; } .lx-saludo{ font-family:var(--display); font-weight:200; font-size:20px; color:var(--tinta-media); letter-spacing:-.01em } .lx-nombre{ font-family:var(--display); font-weight:300; font-size:clamp(40px, 5vw, 56px); letter-spacing:-.035em; line-height:1; margin-top:4px } /* El aro de estado: trazo fino en oro con halo; respira un 1,6 % (Frequency) */ .lx-aro{ position:relative; width:118px; height:118px; display:grid; place-items:center; flex:0 0 auto; animation:lx-respira 6s ease-in-out infinite; cursor:pointer; } .lx-aro svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg) } .lx-aro circle{ fill:none; stroke-width:2.2; stroke-linecap:round } .lx-aro .pista{ stroke:rgba(233,233,242,.08) } .lx-aro .valor{ stroke:var(--oro); transition:stroke-dashoffset 1.2s var(--curva-lx); filter:drop-shadow(0 0 6px rgba(232,199,137,.75)) drop-shadow(0 0 16px rgba(232,199,137,.35)); } .lx-aro .dentro{ text-align:center; line-height:1; position:relative } .lx-aro .dentro b{ font-family:var(--display); font-weight:300; font-size:34px; color:var(--oro); letter-spacing:-.03em; text-shadow:0 0 18px rgba(232,199,137,.45) } .lx-aro .dentro b i{ font-style:normal; font-size:14px; margin-left:2px; color:var(--oro-claro); opacity:.8 } .lx-aro .dentro small{ display:block; margin-top:6px; font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-media); font-weight:500 } .lx-aro.frio .valor{ stroke:var(--luz-punta); filter:drop-shadow(0 0 6px rgba(63,208,200,.7)) } .lx-aro.frio .dentro b{ color:var(--luz-menta); text-shadow:0 0 16px rgba(95,242,214,.4) } .rejilla-modulos{ margin-top:8px } /* ── Protocolos: cada hábito es una píldora ───────────────────────────── */ .rutina{ background:transparent !important; border:none !important; box-shadow:none; backdrop-filter:none; padding:6px 0 0 } .rutina-cabeza{ border-bottom:none; padding-bottom:10px } .habitos{ gap:8px } .habito{ grid-template-columns:24px 1fr auto; gap:14px; padding:12px 18px 12px 16px; background:var(--vidrio); border-radius:var(--pildora); border-bottom:none; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:inset 0 1px 1px var(--vidrio-brillo); transition:background .2s var(--curva-lx), transform .2s var(--curva-lx); } .habito:hover{ background:var(--vidrio-fuerte); transform:translateX(4px) } .habito:last-child{ border-bottom:none } .tilde{ border-radius:50%; border-color:rgba(233,233,242,.22) } .tilde::after{ width:7px; height:4px; border-width:1.5px; border-color:var(--oro); margin-top:-1px } .habito:hover .tilde{ border-color:rgba(233,233,242,.4) } .habito.hecho .tilde{ background:transparent; border-color:var(--oro); box-shadow:0 0 10px rgba(232,199,137,.35) } .habito-nombre{ font-size:14.5px; color:var(--tinta-media) } .habito.hecho .habito-nombre{ color:var(--tinta) } .habito-pie{ font-size:12px } /* El aro de la rutina (conic) en trazo fino y oro */ .aro{ background:conic-gradient(var(--oro) calc(var(--pct) * 1%), rgba(233,233,242,.08) 0); filter:drop-shadow(0 0 8px rgba(232,199,137,.35)); animation:lx-respira 6s ease-in-out infinite; } .aro::after{ inset:3px; background:var(--plano-1) } .hoy-tarjeta .aro::after{ inset:3px } .aro-valor i{ color:var(--oro-claro); opacity:.8 } .barra-dia i{ background:linear-gradient(180deg, var(--luz-punta), var(--luz)) } .prioridades-hoy{ border-left:1px solid var(--vidrio-borde) !important } /* ── Personaje ────────────────────────────────────────────────────────── */ .personaje-figura{ background:transparent !important; border:none !important; box-shadow:none; backdrop-filter:none } .personaje-estado h3{ font-weight:300; color:var(--oro); font-size:26px; letter-spacing:-.01em } .barra-personaje .linea, .barra-p .linea{ height:2px } /* ── Mi nivel: el panel del reporte ───────────────────────────────────── */ /* El panel no es vidrio: lo son sus celdas. Vidrio sobre vidrio se ve gris. */ .panel{ background:transparent !important; border:none !important; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:0 } .panel .celda{ background:var(--vidrio) !important } .panel .celda.alta{ background:var(--vidrio-fuerte) !important } /* El núcleo del reproductor, en oro, con el triángulo oscuro */ .rep-nucleo{ border:none; color:#2b1f08; background:linear-gradient(180deg, var(--oro-claro), var(--oro)); box-shadow:0 0 0 6px rgba(232,199,137,.10), 0 10px 30px rgba(232,199,137,.25); } .rep-nucleo:hover{ box-shadow:0 0 0 8px rgba(232,199,137,.14), 0 10px 34px rgba(232,199,137,.35) } .rep-escena::before, .rep-escena::after{ border-color:rgba(232,199,137,.18) } .rep-tiempos{ color:var(--tinta-tenue) } /* Sin desenfoque propio: encima del vidrio de la celda se veía como una caja oscura */ .rep, .rep.lateral{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:transparent !important } .panel .rejilla{ background:transparent !important } /* En la forma lateral el núcleo va a la izquierda, como en la maqueta */ .rep.lateral .rep-nucleo{ order:-1; width:64px; height:64px } .rep.lateral .rep-tiempos{ padding-left:86px } .pestanas-nivel{ padding:14px 40px 0; gap:6px } .pestana{ background:transparent; color:var(--tinta-tenue); padding:9px 16px; border:none } .pestana.aqui, .pestana.activa, .pestana[aria-selected="true"]{ background:var(--vidrio-fuerte); color:var(--tinta); box-shadow:inset 0 1px 1px var(--vidrio-brillo); } .elegir-reporte select{ font-weight:300; font-size:26px; letter-spacing:-.02em; border-radius:0; padding-left:0; border:none; border-bottom:1px solid rgba(233,233,242,.12); background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } .panel .celda{ border-radius:20px } .cifra-linea .valor{ font-weight:200; letter-spacing:-.04em; color:var(--oro); text-shadow:0 0 30px rgba(232,199,137,.3) } .nivel-nombre{ font-weight:300 } .anillo{ background:transparent; border-width:2px; box-shadow:0 0 0 6px rgba(122,78,255,.06), 0 0 34px -6px var(--tono, var(--luz)) } .mes-pasado{ border-radius:20px } /* ── ATMA Intelligence ────────────────────────────────────────────────── */ .chat-lado{ border-radius:0; border:none !important; border-right:1px solid rgba(233,233,242,.05) !important; background:rgba(3,1,16,.30) !important; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; } .chat-item{ border-radius:16px } .burbuja-texto{ background:var(--vidrio-fuerte); border:none; border-radius:22px; border-bottom-left-radius:8px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:inset 0 1px 1px var(--vidrio-brillo); font-size:15px; line-height:1.55; } .burbuja.alumno .burbuja-texto{ background:rgba(122,78,255,.22); border-bottom-left-radius:22px; border-bottom-right-radius:8px; box-shadow:inset 0 1px 1px rgba(185,165,255,.18); } .burbuja-quien{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:500 } .compositor{ border-radius:30px !important; background:var(--vidrio-fuerte) !important; border:none !important; backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); box-shadow:inset 0 1px 1px var(--vidrio-brillo), 0 18px 40px rgba(0,0,0,.35) !important; } .compositor textarea{ background:transparent !important; border:none !important; box-shadow:none !important; font-size:15px } .mando{ background:rgba(233,233,242,.08); box-shadow:inset 0 1px 1px var(--vidrio-brillo) } .mando-enviar{ background:var(--tinta) !important; color:var(--plano-0) !important; box-shadow:0 6px 20px rgba(233,233,242,.15) } .idea{ border-radius:var(--pildora); background:var(--vidrio); border:none; box-shadow:inset 0 1px 1px var(--vidrio-brillo) } .chat-vacio h3{ font-weight:300; font-size:26px; letter-spacing:-.02em } /* ── Tablas del admin ─────────────────────────────────────────────────── */ th{ background:rgba(233,233,242,.03); border-bottom-color:rgba(233,233,242,.06) } td{ border-bottom-color:rgba(233,233,242,.05) } tbody tr:hover{ background:rgba(233,233,242,.03) } /* ── Móvil: barra de pestañas abajo (alumno) ──────────────────────────── */ .lx-pestanas{ display:none } @media (max-width:860px){ body.lx-alumno aside{ display:none } body.lx-alumno main{ padding-bottom:118px } body.lx-alumno main:has(.chat){ height:calc(100vh - 92px) } .lx-pestanas{ position:fixed; left:14px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); z-index:60; display:flex; align-items:center; justify-content:space-between; padding:6px; border-radius:var(--pildora); background:rgba(8,5,30,.62); backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); box-shadow:inset 0 1px 1px rgba(233,233,242,.10), 0 18px 40px rgba(0,0,0,.45); } .lx-pestanas a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 4px 8px; border-radius:var(--pildora); color:var(--tinta-tenue); font-size:9.5px; letter-spacing:.06em; text-decoration:none; cursor:pointer; margin:0; border:none; } .lx-pestanas a svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round } .lx-pestanas a.aqui{ background:rgba(233,233,242,.10); color:var(--tinta); box-shadow:inset 0 1px 1px rgba(233,233,242,.10) } .lx-pestanas a.aqui::before{ display:none } .lx-pestanas a.aqui svg{ stroke:var(--oro) } .barra, .portada, .zona, .lx-cabeza, .pestanas-nivel{ padding-left:18px; padding-right:18px } .portada{ padding-top:22px } /* En el teléfono no hay lateral: la marca va arriba, en la barra */ body.lx-alumno .barra{ padding-top:16px; align-items:center } body.lx-alumno .barra .donde{ align-items:center; gap:14px } body.lx-alumno .barra .donde::before{ content:'Λ T M Λ'; font-family:var(--display); font-weight:300; font-size:14px; letter-spacing:.42em; color:var(--tinta); white-space:nowrap; } body.lx-alumno .barra h1{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-tenue); font-weight:500 } body.lx-alumno .barra .modulo-actual{ display:none } .lx-cabeza{ padding-top:22px; flex-wrap:nowrap; justify-content:space-between; gap:16px } .lx-nombre{ font-size:40px } .lx-aro{ width:104px; height:104px } .lx-aro .dentro b{ font-size:30px } .lx-cielo i{ filter:blur(60px) } .bloque{ padding:20px 18px } } @media (prefers-reduced-motion:reduce){ .lx-cielo i, .lx-aro, .aro{ animation:none } } /* ═══════════════════════════════════════════════════════════════════════ SIGMA · la organización de SigmaOS (18-sep-2026) ═══════════════════════════════════════════════════════════════════════ Lo que pinta `sigma.js`, solo para el alumno. Encima de la piel luxury: no cambia colores ni tipografía, añade ORDEN. Maqueta: muestra-sigmaos.html · doc: DISENO_SIGMAOS_18sep2026.md. La idea que manda: cada área tiene su color (como cada función en SigmaOS) y ese color lo comparten la tarjeta del Inicio, la pestaña activa y la luz de fondo. Van como "r, g, b" para poder usarlos a cualquier alfa. */ :root{ --c-violeta:122,78,255; --c-oro:232,199,137; --c-turquesa:63,208,200; --c-lila:185,165,255; --c-menta:95,242,214; --c-area:var(--c-violeta); } body[data-vista="personaje"]{ --c-area:var(--c-oro) } body[data-vista="nivel"]{ --c-area:var(--c-turquesa) } body[data-vista="chat"]{ --c-area:var(--c-lila) } body[data-vista="protocolos"]{ --c-area:var(--c-menta) } /* Las teclas, iguales en todas partes */ :is(.lx-paleta, .lx-boton, .lx-fila, .lx-resumen, .lx-hoja) kbd{ font-family:var(--display); font-weight:400; font-size:9.5px; line-height:1; letter-spacing:0; padding:3px 6px; border-radius:5px; border:1px solid rgba(233,233,242,.16); color:var(--tinta-tenue); background:rgba(233,233,242,.03); } /* ── Inicio en bento ──────────────────────────────────────────────────── */ .lx-inicio{ padding:30px 40px 40px; display:flex; flex-direction:column; gap:22px; animation:lx-rise .6s var(--curva-lx) both } .lx-inicio-cabeza{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap } .lx-inicio-fecha{ font-size:13px; color:var(--tinta-tenue); letter-spacing:.02em } .lx-inicio-titular{ font-family:var(--display); font-weight:200; font-size:clamp(30px, 3.6vw, 42px); letter-spacing:-.03em; line-height:1.05; margin-top:6px; text-wrap:balance; } .lx-inicio-titular b{ font-weight:200 } .lx-inicio-acciones{ display:flex; gap:8px; align-items:center } .lx-boton{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--pildora); font:inherit; font-size:12.5px; font-weight:400; color:var(--tinta); white-space:nowrap; cursor:pointer; background:var(--vidrio-fuerte); border:1px solid rgba(233,233,242,.08); box-shadow:inset 0 1px 1px var(--vidrio-brillo); transition:border-color .2s, background .2s; } .lx-boton:hover{ border-color:rgba(var(--c-area),.5); background:rgba(233,233,242,.09) } .lx-boton:focus-visible{ outline:2px solid rgba(var(--c-area),.7); outline-offset:2px } .lx-bento{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-auto-flow:dense; gap:12px } .lx-tarjeta{ --c:var(--c-violeta); position:relative; border-radius:22px; padding:20px 22px; cursor:pointer; overflow:hidden; display:flex; flex-direction:column; gap:12px; min-width:0; background:linear-gradient(180deg, rgba(var(--c),.10), rgba(var(--c),.045)); border:1px solid rgba(var(--c),.38); box-shadow:inset 0 1px 1px rgba(233,233,242,.08), 0 22px 44px -32px rgba(var(--c),.55); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); transition:transform .45s var(--curva-lx), border-color .3s; animation:lx-rise .6s var(--curva-lx) both; } .lx-tarjeta:nth-child(2){ animation-delay:.06s } .lx-tarjeta:nth-child(3){ animation-delay:.12s } .lx-tarjeta:nth-child(4){ animation-delay:.18s } .lx-tarjeta:hover{ transform:translateY(-2px); border-color:rgba(var(--c),.62) } .lx-tarjeta:focus-visible{ outline:2px solid rgba(var(--c),.8); outline-offset:3px } .lx-tarjeta.oro{ --c:var(--c-oro) } .lx-tarjeta.turquesa{ --c:var(--c-turquesa) } .lx-tarjeta.lila{ --c:var(--c-lila) } .lx-tarjeta.menta{ --c:var(--c-menta) } .lx-tarjeta.alta{ grid-row:span 2 } .lx-tarjeta.ancha{ grid-column:span 2 } .lx-tarjeta .rotulo{ color:rgba(var(--c),.95) } .lx-tarjeta h3{ font-family:var(--display); font-weight:300; font-size:20px; letter-spacing:-.02em } .lx-tarjeta p{ font-size:13px; line-height:1.5; color:var(--tinta-media); margin:0 } .lx-abajo{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11.5px; color:var(--tinta-tenue) } .lx-abajo span:last-child{ color:rgba(var(--c),.9); white-space:nowrap } .lx-pista{ font-size:12.5px; color:var(--tinta-tenue); margin:0 } .lx-pista.mal{ color:#ffb8b2 } .lx-personaje-fila{ display:flex; align-items:center; gap:16px } .lx-aro-chico{ position:relative; width:84px; height:84px; flex:0 0 84px } .lx-aro-chico svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg) } .lx-aro-chico circle{ fill:none; stroke-width:2.2 } .lx-aro-chico .pista{ stroke:rgba(233,233,242,.08) } .lx-aro-chico .valor{ stroke:var(--oro); stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(232,199,137,.6)); transition:stroke-dashoffset 1.4s var(--curva-lx) } .lx-aro-chico .dentro{ position:absolute; inset:0; display:grid; place-items:center } .lx-aro-chico .dentro b{ font-family:var(--display); font-weight:200; font-size:24px; letter-spacing:-.04em; color:var(--oro) } .lx-aro-chico .dentro b i{ font-style:normal; font-size:11px; letter-spacing:0 } .lx-barras{ display:flex; flex-direction:column; gap:10px } .lx-barra{ display:grid; grid-template-columns:1fr auto; gap:3px 10px; font-size:12px; color:var(--tinta-media) } .lx-barra .v{ font-family:var(--display); font-weight:300; color:var(--tinta); font-variant-numeric:tabular-nums } .lx-barra .linea{ grid-column:1/-1; height:2px; border-radius:2px; background:rgba(233,233,242,.08); position:relative } .lx-barra .linea i{ position:absolute; inset:0; width:var(--p); border-radius:2px; background:linear-gradient(90deg, var(--oro-hondo), var(--oro)); box-shadow:0 0 8px rgba(232,199,137,.5) } .lx-cifra-fila{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap } .lx-cifra{ font-family:var(--display); font-weight:200; font-size:46px; letter-spacing:-.05em; line-height:.95; color:var(--tinta); font-variant-numeric:tabular-nums } .lx-cifra.tenue{ color:var(--tinta-tenue) } .lx-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--pildora); font:inherit; font-size:11px; color:var(--tinta-media); background:var(--vidrio-fuerte); border:1px solid rgba(233,233,242,.08); } .lx-chip b{ font-weight:500 } .lx-chip b.sube{ color:var(--luz-menta, #5ff2d6) } .lx-chip b.baja{ color:#ffb8b2 } .lx-burbuja-mini{ font-size:12.5px; line-height:1.5; color:var(--tinta-media); padding:11px 13px; border-radius:14px; background:rgba(3,1,16,.32); border:1px solid rgba(233,233,242,.05) } .lx-burbuja-mini b{ display:block; font-weight:500; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgb(var(--c-lila)); margin-bottom:4px } .lx-nuevo{ position:absolute; top:14px; right:-7px; transform:rotate(8deg); font-family:var(--display); font-weight:500; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; padding:4px 14px 4px 10px; border-radius:6px; background:var(--degradado); color:#fff; box-shadow:0 6px 18px -6px rgba(122,78,255,.8); } .lx-nuevo-mini{ font-family:var(--display); font-weight:500; font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; padding:2px 6px; border-radius:4px; background:var(--degradado); color:#fff; } .lx-filas{ display:grid; grid-template-columns:1fr 1fr; gap:6px } .lx-fila{ display:flex; align-items:center; gap:10px; min-width:0; padding:9px 12px; border-radius:var(--pildora); font:inherit; font-size:12.5px; color:var(--tinta); text-align:left; cursor:pointer; background:rgba(3,1,16,.32); border:1px solid transparent; transition:border-color .2s, background .2s; } .lx-fila:hover:not(:disabled){ border-color:rgba(var(--c-menta),.4) } .lx-fila:disabled{ cursor:default; opacity:.6 } .lx-fila .t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .lx-fila .marca{ width:16px; height:16px; flex:0 0 16px; border-radius:50%; border:1.5px solid rgba(233,233,242,.3); position:relative } .lx-fila kbd{ margin-left:auto } .lx-fila.hecha{ color:var(--tinta-tenue) } .lx-fila.hecha .t{ text-decoration:line-through; text-decoration-color:rgba(233,233,242,.3) } .lx-fila.hecha .marca{ background:var(--oro); border-color:var(--oro) } .lx-fila.hecha .marca::after{ content:''; position:absolute; left:4px; top:3.5px; width:6px; height:3px; border-left:1.5px solid #2b1f08; border-bottom:1.5px solid #2b1f08; transform:rotate(-45deg) } .lx-fila.fantasma{ height:36px; cursor:default; animation:lx-latido 1.4s ease-in-out infinite } @keyframes lx-latido{ 50%{ opacity:.45 } } /* El Inicio no lleva barra en escritorio: la cabeza del bento ya dice dónde estás */ @media (min-width:861px){ body.lx-alumno[data-vista="inicio"] #main > .barra{ display:none } } /* ── Busca o pregunta ─────────────────────────────────────────────────── */ .lx-velo{ position:fixed; inset:0; z-index:200; display:grid; place-items:start center; padding:12vh 16px 16px; background:rgba(3,1,16,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:lx-aparece .18s ease-out; } @keyframes lx-aparece{ from{ opacity:0 } } .lx-paleta{ width:min(580px, 100%); max-height:70vh; display:flex; flex-direction:column; overflow:hidden; border-radius:18px; background:rgba(11,8,48,.88); border:1px solid rgba(var(--c-lila),.22); backdrop-filter:blur(30px) saturate(2); -webkit-backdrop-filter:blur(30px) saturate(2); box-shadow:0 40px 90px -30px rgba(0,0,0,.9), inset 0 1px 1px var(--vidrio-brillo); animation:lx-rise .25s var(--curva-lx) both; } .lx-paleta-campo{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid rgba(233,233,242,.07) } .lx-paleta-campo svg{ width:17px; height:17px; flex:0 0 17px; stroke:var(--tinta-tenue); fill:none; stroke-width:1.8 } .lx-paleta-campo input, .lx-paleta-campo input:hover, .lx-paleta-campo input:focus{ flex:1; min-width:0; padding:2px 0; border:0; border-radius:0; outline:none; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; font-family:var(--display); font-weight:300; font-size:16px; color:var(--tinta); } .lx-paleta-lista{ overflow-y:auto; padding:4px 0 8px } .lx-paleta-seccion{ padding:12px 18px 5px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-tenue); font-weight:500 } .lx-paleta-vacio{ padding:18px; font-size:13px; color:var(--tinta-tenue) } .lx-res{ display:flex; align-items:center; gap:12px; margin:0 8px; padding:9px 10px; border-radius:10px; font-size:13.5px; color:var(--tinta-media); cursor:pointer; min-width:0; } .lx-res svg{ width:15px; height:15px; flex:0 0 15px; stroke:currentColor; fill:none; stroke-width:1.6; opacity:.8 } .lx-res .n{ white-space:nowrap } .lx-res .sec{ color:var(--tinta-tenue); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0 } .lx-res.sel{ background:rgba(var(--c-violeta),.18); color:var(--tinta) } .lx-res .teclas{ margin-left:auto; flex:0 0 auto } .lx-res .teclas span{ font-size:10.5px; padding:3px 8px; border-radius:6px; background:rgba(233,233,242,.06); color:var(--tinta-media) } .lx-res .teclas span.ir{ background:rgba(var(--c-violeta),.4); color:#fff } .lx-punto{ width:7px; height:7px; flex:0 0 7px; margin:0 4px; border-radius:50%; background:rgb(var(--c-menta)); box-shadow:0 0 6px rgb(var(--c-menta)) } .lx-punto.hecho{ background:var(--oro); box-shadow:0 0 6px var(--oro) } .lx-res.atma{ margin-top:6px; padding-top:12px; padding-bottom:12px; border-top:1px solid rgba(233,233,242,.07); border-radius:0 0 10px 10px } .lx-res.atma b{ font-weight:400; color:var(--tinta) } .lx-estrella{ width:22px; height:22px; flex:0 0 22px; border-radius:50%; background:var(--degradado); display:grid; place-items:center } .lx-estrella::after{ content:'✦'; font-size:11px; color:#fff } .lx-paleta-pie{ display:flex; gap:16px; flex-wrap:wrap; padding:10px 18px; border-top:1px solid rgba(233,233,242,.07); font-size:11px; color:var(--tinta-tenue) } .lx-paleta-pie kbd{ margin-right:3px } /* La hoja de atajos (?) usa la misma caja */ .lx-hoja-caja{ width:min(460px, 100%) } .lx-atajos{ display:flex; flex-direction:column; gap:4px; padding:4px 12px 10px } .lx-atajo{ display:flex; align-items:center; gap:14px; padding:8px 6px; font-size:13.5px; color:var(--tinta-media) } .lx-atajo kbd{ min-width:40px; text-align:center; font-size:11px; padding:5px 8px; color:var(--tinta) } /* ── Resumen del reporte ──────────────────────────────────────────────── */ .lx-resumen-velo{ position:fixed; inset:0; z-index:190; display:grid; place-items:center; padding:16px; background:rgba(3,1,16,.45); backdrop-filter:blur(5px) saturate(.7); -webkit-backdrop-filter:blur(5px) saturate(.7); animation:lx-aparece .2s ease-out; } .lx-resumen{ width:min(540px, 100%); max-height:88vh; overflow-y:auto; border-radius:24px; padding:26px 28px 20px; display:flex; flex-direction:column; gap:16px; background:rgba(11,8,48,.86); border:1px solid rgba(var(--c-turquesa),.36); backdrop-filter:blur(30px) saturate(2); -webkit-backdrop-filter:blur(30px) saturate(2); box-shadow:0 40px 90px -30px rgba(0,0,0,.9), inset 0 1px 1px var(--vidrio-brillo), 0 0 70px -24px rgba(var(--c-turquesa),.45); animation:lx-rise .3s var(--curva-lx) both; } .lx-resumen .rotulo{ color:rgb(var(--c-turquesa)) } .lx-resumen-cuerpo{ display:flex; flex-direction:column; gap:14px } .lx-resumen h3{ font-family:var(--display); font-weight:300; font-size:24px; letter-spacing:-.02em; line-height:1.15; text-wrap:balance } .lx-resumen ul{ list-style:none; display:flex; flex-direction:column; gap:10px; margin:0; padding:0 } .lx-resumen li{ position:relative; padding-left:16px; font-size:14px; line-height:1.55; color:var(--tinta-media) } .lx-resumen li b{ font-weight:500; color:var(--tinta) } .lx-resumen li::before{ content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:rgb(var(--c-turquesa)); box-shadow:0 0 6px rgb(var(--c-turquesa)) } .lx-fuentes{ display:flex; flex-wrap:wrap; gap:6px } .lx-fuentes .lx-chip{ cursor:pointer } .lx-fuentes .lx-chip:hover{ border-color:rgba(var(--c-turquesa),.5); color:var(--tinta) } .lx-fuentes .lx-chip i{ width:5px; height:5px; border-radius:50%; background:rgb(var(--c-turquesa)) } .lx-cargando{ display:flex; gap:6px; padding:8px 0 } .lx-cargando i{ width:7px; height:7px; border-radius:50%; background:rgb(var(--c-turquesa)); animation:lx-latido 1s ease-in-out infinite } .lx-cargando i:nth-child(2){ animation-delay:.15s } .lx-cargando i:nth-child(3){ animation-delay:.3s } .lx-compositor{ display:flex; align-items:center; gap:10px; padding:5px 5px 5px 16px; border-radius:var(--pildora); background:var(--vidrio-fuerte); border:1px solid rgba(233,233,242,.1); } .lx-compositor:focus-within{ border-color:rgba(var(--c-turquesa),.5) } .lx-compositor input, .lx-compositor input:hover, .lx-compositor input:focus{ flex:1; min-width:0; padding:6px 0; border:0; border-radius:0; outline:none; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; font:inherit; font-size:13.5px; color:var(--tinta); } .lx-compositor button{ width:32px; height:32px; flex:0 0 32px; border-radius:50%; border:0; cursor:pointer; background:var(--tinta); display:grid; place-items:center } .lx-compositor button::after{ content:''; width:8px; height:8px; border-top:1.6px solid var(--plano-1); border-right:1.6px solid var(--plano-1); transform:rotate(-45deg) translate(-1px,1px) } .lx-resumen-pie{ display:flex; align-items:center; justify-content:center; gap:7px; font-size:11px; color:var(--tinta-tenue) } .lx-resumen-pie kbd{ margin-left:6px } .lx-resumir{ gap:8px } .lectura .parte{ transition:box-shadow .6s, background .6s; border-radius:14px } .lectura .parte.lx-destello, .reporte-doc.lx-destello{ background:rgba(var(--c-turquesa),.07); box-shadow:0 0 0 10px rgba(var(--c-turquesa),.07) } .reporte-doc{ transition:box-shadow .6s, background .6s } /* ── ATMA Intelligence: contexto y acciones ───────────────────────────── */ .lx-contexto{ position:relative; z-index:3; align-self:flex-start; max-width:calc(100% - 40px); display:flex; align-items:center; gap:10px; margin:14px 20px 0; padding:7px 14px; border-radius:var(--pildora); font-size:12px; color:var(--tinta-media); background:rgba(var(--c-lila),.10); border:1px solid rgba(var(--c-lila),.32); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .lx-contexto b{ font-weight:500; color:rgb(var(--c-lila)) } .lx-punto-vivo{ width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:rgb(var(--c-menta)); box-shadow:0 0 8px rgb(var(--c-menta)); animation:lx-vivo 3s ease-in-out infinite } @keyframes lx-vivo{ 50%{ transform:scale(1.3); opacity:.7 } } .lx-acc{ display:flex; flex-wrap:wrap; gap:4px 14px; padding-left:2px } .lx-acc button{ display:inline-flex; align-items:center; gap:5px; padding:3px 0; border:0; background:none; cursor:pointer; font:inherit; font-size:11.5px; color:var(--tinta-tenue); transition:color .15s; } .lx-acc button:hover{ color:var(--tinta) } .lx-acc button:disabled{ cursor:default } .lx-acc button.hecho{ color:var(--oro) } .lx-acc svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.6 } /* ── Protocolos como tareas ───────────────────────────────────────────── */ .habito{ grid-template-columns:24px 1fr auto auto; transition:background .2s var(--curva-lx), transform .25s var(--curva-lx) } .habito.hecho .habito-nombre{ color:var(--tinta-tenue); text-decoration:line-through; text-decoration-color:rgba(233,233,242,.3) } .lx-cand{ display:grid; place-items:center; opacity:.3 } .lx-cand svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:1.6 } .habito.lx-listo{ background:rgba(var(--c-menta),.14) } /* ── Avisos cortos ────────────────────────────────────────────────────── */ .lx-aviso{ position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom, 0px)); z-index:250; transform:translate(-50%, 16px); opacity:0; pointer-events:none; max-width:calc(100% - 32px); padding:10px 18px; border-radius:var(--pildora); font-size:13px; color:var(--tinta); background:rgba(11,8,48,.9); border:1px solid rgba(var(--c-menta),.35); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 20px 40px -20px rgba(0,0,0,.8); transition:opacity .25s, transform .35s var(--curva-lx); } .lx-aviso.visible{ opacity:1; transform:translate(-50%, 0) } .lx-aviso.mal{ border-color:rgba(240,85,77,.45) } /* ── Tamaños ──────────────────────────────────────────────────────────── */ @media (max-width:1100px){ .lx-bento{ grid-template-columns:repeat(2, minmax(0, 1fr)) } .lx-tarjeta.ancha{ grid-column:span 2 } } @media (max-width:860px){ .lx-inicio{ padding:18px 18px 30px; gap:18px } .lx-tarjeta.alta{ grid-row:auto; grid-column:span 2 } .lx-aviso{ bottom:calc(112px + env(safe-area-inset-bottom, 0px)) } .lx-contexto{ margin:10px 14px 0; max-width:calc(100% - 28px) } .lx-velo{ padding-top:8vh } } @media (max-width:560px){ .lx-bento{ grid-template-columns:1fr } .lx-tarjeta.alta, .lx-tarjeta.ancha{ grid-column:auto } .lx-filas{ grid-template-columns:1fr } .lx-resumen{ padding:22px 20px 18px } } @media (prefers-reduced-motion:reduce){ .lx-tarjeta, .lx-inicio, .lx-paleta, .lx-resumen, .lx-velo, .lx-resumen-velo, .lx-punto-vivo, .lx-cargando i, .lx-fila.fantasma{ animation:none } } /* ── La barra de energía del Personaje (18-sep) ────────────────────────── Fluida, sin marcas, como la energía de un juego: el relleno es el degradado de la casa (violeta → turquesa) que fluye, con una ola de luz que lo recorre, una punta que brilla y un latido suave. La escala son 30 días, pero eso lo dice el rótulo de abajo, no la pista. */ .barra-energia{ position:relative; height:14px; border-radius:var(--pildora); overflow:hidden; background:rgba(3,1,16,.55); box-shadow:inset 0 1px 3px rgba(0,0,0,.6), inset 0 0 0 1px rgba(185,165,255,.10); } .barra-energia .energia{ position:absolute; left:0; top:0; bottom:0; width:var(--v); min-width:0; border-radius:var(--pildora); background:linear-gradient(90deg, #6F4DEF 0%, #8FA3F2 30%, #3FD0C8 50%, #8FA3F2 70%, #6F4DEF 100%); background-size:200% 100%; box-shadow:0 0 14px rgba(122,78,255,.55), 0 0 6px rgba(63,208,200,.45), inset 0 1px 1px rgba(255,255,255,.3); animation:lx-fluye 3.2s linear infinite, lx-late-energia 2.6s ease-in-out infinite; transition:width 1.4s var(--curva-lx); } .barra-energia .energia::after{ /* la ola de luz que recorre el relleno */ content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.32) 50%, transparent 100%); background-size:60% 100%; background-repeat:no-repeat; animation:lx-ola 2.8s ease-in-out infinite; } .barra-energia .punta{ position:absolute; right:-1px; top:-4px; bottom:-4px; width:10px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.95), rgba(95,242,214,.65) 40%, transparent 70%); filter:blur(1px); } .barra-energia.llena .energia{ box-shadow:0 0 22px rgba(63,208,200,.7), 0 0 10px rgba(122,78,255,.6), inset 0 1px 1px rgba(255,255,255,.45) } @keyframes lx-fluye{ from{ background-position:0% 0 } to{ background-position:-200% 0 } } @keyframes lx-ola{ 0%{ background-position:-60% 0 } 60%,100%{ background-position:160% 0 } } @keyframes lx-late-energia{ 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.18) } } .barra-p-pie{ display:flex; justify-content:space-between; margin-top:7px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-tenue) } .barra-p-pie b{ font-weight:500; color:var(--tinta-media) } .personaje-ciclo .barra-energia{ height:16px; margin-top:6px } @media (prefers-reduced-motion:reduce){ .barra-energia .energia, .barra-energia .energia::after{ animation:none } } /* ── Cuentas (admin, 18-sep) ──────────────────────────────────────────── */ .btn-suave.peligro{ color:#ffb8b2; border-color:rgba(240,85,77,.35) } .btn-suave.peligro:hover{ background:rgba(240,85,77,.12) } td .btn-suave{ padding:7px 12px; font-size:12px; margin-right:6px } .dato[data-filtro]:hover{ border-color:var(--vidrio-borde-viva) !important }