/* ============================================================================= TONSER · glass.css Galaxia + campo de estrellas a pantalla completa + ventanas de CRISTAL (casi transparentes, con borde de cristal y reflejo azul/morado). ============================================================================= */ /* Fondo: estrellas por TODA la pantalla (tiles) + banda de galaxia + tinte */ html, body { background-color: #05070f !important; background-image: radial-gradient(1.3px 1.3px at 30px 40px, rgba(255,255,255,.95), transparent), radial-gradient(1px 1px at 150px 90px, rgba(200,220,255,.85), transparent), radial-gradient(1.5px 1.5px at 90px 185px, rgba(255,255,255,.9), transparent), radial-gradient(1px 1px at 210px 55px, rgba(228,212,255,.85), transparent), radial-gradient(1.1px 1.1px at 55px 260px, rgba(255,255,255,.8), transparent), linear-gradient(180deg, rgba(6,8,18,.32) 0%, rgba(9,9,28,.26) 45%, rgba(12,8,28,.42) 100%), url('/galaxy_bg.jpg') !important; background-size: 230px 230px, 290px 290px, 350px 350px, 200px 200px, 270px 270px, cover, cover !important; background-position: 0 0, 60px 40px, 120px 90px, 170px 20px, 30px 140px, center, center !important; background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat !important; background-attachment: fixed !important; } :root { --bg: transparent !important; --panel: rgba(40,48,78,.16) !important; --panel2: rgba(50,60,92,.16) !important; --line: rgba(165,185,255,.30) !important; --me: rgba(110,130,225,.24) !important; } /* Ventanas estilo CLAUDE: superficie limpia y calmada (deja ver algo de galaxia detrás), borde sutil, sombra suave y neutra, sin brillos ni reflejos azules. */ .sidebar, .right, .jobs, .modeswitch, .card, .authcard, .console, #viewer, #preview, .activity, .profmenu, .menu, .tool, .task, .taskbar, .errc, .stat, #gate { background: rgba(26, 27, 34, 0.85) !important; border: 1px solid rgba(255,255,255,.09) !important; box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 12px 34px rgba(0,0,0,.30) !important; } /* Tarjetas y ventanas emergentes: esquinas redondeadas y con aire (Claude). */ .card, .authcard, .modeswitch, .activity, .profmenu, .menu, .tool, .task, .errc, .stat, #gate { border-radius: 16px !important; } /* Chat estilo Claude: la respuesta de la IA es TEXTO LIMPIO (sin caja); tu mensaje, una burbuja sutil. */ .amsg, .msg.ai .bubble, .final { background: transparent !important; border: none !important; box-shadow: none !important; } .umsg, .msg.me .bubble { background: rgba(255,255,255,.055) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: none !important; border-radius: 16px !important; } /* Pantallas de entrada: galaxia atenuada, no negro */ #login, #onboard, #storage { background: rgba(7,10,24,.30) !important; } /* Campos de texto: cristal */ input, textarea, select { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 12px !important; } input:focus, textarea:focus, select:focus { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.24) !important; } /* Terminal y bloques de código: algo más de fondo SOLO para poder leer el código */ .console, .cout { background: rgba(8,11,24,.42) !important; } .tool pre, .bubble pre { background: rgba(8,10,22,.38) !important; } #pviframe { background: #fff !important; } /* === Ventanas que SE ABREN (modales, menús, paneles): transparentes pero CON desenfoque === */ #login, #onboard, .authcard, #viewer, #preview, .console, .profmenu, .menu { -webkit-backdrop-filter: blur(17px) saturate(1.3) !important; backdrop-filter: blur(17px) saturate(1.3) !important; } /* === Botones azules: TEXTURA METÁLICA azul/morado del cerebro + brillo que barre === */ .btn:not(.ghost), .enter, .go, .refbtn, .modeswitch .m.active, #send, #run { background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%), linear-gradient(135deg, #16276f 0%, #4f8bff 34%, #9a4fe0 64%, #2440c8 100%) !important; background-size: 250% 100%, 100% 100% !important; background-position: 150% 0, 0 0 !important; background-repeat: no-repeat !important; border: 1px solid rgba(180,190,255,.45) !important; box-shadow: 0 4px 16px rgba(120,90,255,.42), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -3px 8px rgba(0,0,18,.45) !important; text-shadow: 0 1px 2px rgba(0,0,25,.55); animation: btnSheen 5s ease-in-out infinite; } @keyframes btnSheen { 0%, 16% { background-position: 150% 0, 0 0; } 56%, 100% { background-position: -150% 0, 0 0; } } /* Chat: mientras Sergia responde, el botón de enviar se vuelve un PARAR rojo */ #send.stopbtn { background: #c0453f !important; animation: none !important; border-color: rgba(255,255,255,.22) !important; box-shadow: 0 2px 8px rgba(192,69,63,.4) !important; } /* === Mientras TRABAJA: botón de enviar y campos claramente DESACTIVADOS === */ .btn:disabled, button:disabled, input:disabled, textarea:disabled { opacity: .4 !important; cursor: not-allowed !important; filter: grayscale(.4) !important; animation: none !important; box-shadow: none !important; text-shadow: none !important; } /* === Sensación de PULSAR los botones === */ .btn, .gbtn, .profbtn, .go, .stop, .pvbtn, a.back, .lnk, .sbnew { transition: transform .09s ease, box-shadow .09s ease, filter .09s ease; } button:active, .btn:active, .m:active, .iconbtn:active, .tbtn:active, .gbtn:active, .profbtn:active, .chip:active, .pvbtn:active, .del:active, .go:active, .stop:active, .x:active, .sbnew:active, a.back:active, .lnk:active, .sbToggle:active { transform: scale(.92) !important; filter: brightness(.92); } /* Botones rellenos: además un hundido al pulsar */ .btn:active, .gbtn:active, .go:active, .stop:active, #run:active, #send:active { box-shadow: inset 0 3px 9px rgba(0,0,0,.38) !important; } /* === Desplegable de CRISTAL (sustituye al