@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";:root{--color-principal: #00ffcc;--color-fondo: #111116;--color-fondo-secundario: #1b1b20;--color-borde: #3c3c44;--color-texto: #e8fffa;--color-texto-secundario: #888}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,sans-serif;background-color:#222;color:var(--color-texto);height:100vh;display:flex;flex-direction:column}button{cursor:pointer;border:none;font-family:inherit;transition:all .2s}input{font-family:inherit}.layout-wrapper{display:flex;flex-direction:column;height:100vh;max-width:800px;margin:0 auto;width:100%;background-color:var(--color-fondo)}.simple-header{padding:16px 24px;display:flex;justify-content:space-between;align-items:center;background-color:var(--color-fondo-secundario);border-bottom:1px solid var(--color-borde)}.logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:18px;color:var(--color-principal);text-shadow:0 0 10px rgba(0,255,204,.5)}.logo-icon{color:var(--color-principal);filter:drop-shadow(0 0 5px rgba(0,255,204,.5))}.status-pill{display:flex;align-items:center;gap:8px;background:#00ffcc1a;padding:6px 12px;border-radius:20px;font-size:13px;font-weight:500;color:var(--color-principal);border:1px solid rgba(0,255,204,.3)}.status-indicator{width:8px;height:8px;border-radius:50%;background:var(--color-principal);box-shadow:0 0 8px var(--color-principal)}.pulse{animation:pulse-dot 1.5s infinite}@keyframes pulse-dot{0%{transform:scale(.95);box-shadow:0 0 #00ffccb3}70%{transform:scale(1);box-shadow:0 0 0 6px #0fc0}to{transform:scale(.95);box-shadow:0 0 #0fc0}}.chat-container{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column}.chat-container::-webkit-scrollbar{width:6px}.chat-container::-webkit-scrollbar-thumb{background:var(--color-borde);border-radius:10px}.welcome-screen{margin:auto;text-align:center;max-width:500px}.welcome-icon{width:80px;height:80px;background:#00ffcc1a;color:var(--color-principal);border-radius:24px;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;box-shadow:0 0 30px #0fc3}.welcome-screen h1{font-size:28px;font-weight:600;margin-bottom:12px;color:var(--color-texto)}.welcome-subtitle{color:var(--color-texto-secundario);font-size:16px;margin-bottom:40px}.suggestions{display:flex;flex-direction:column;gap:12px}.suggestion-card{background:var(--color-fondo-secundario);border:1px solid var(--color-borde);padding:16px 20px;border-radius:16px;font-size:15px;color:var(--color-texto);text-align:left;transition:all .2s}.suggestion-card:hover{background:#00ffcc0d;border-color:var(--color-principal);transform:translateY(-1px);box-shadow:0 0 15px #00ffcc1a}.messages-area{display:flex;flex-direction:column;gap:24px}.message-row{display:flex;width:100%}.message-row.user{justify-content:flex-end}.message-bubble{max-width:85%;padding:14px 18px;border-radius:20px;font-size:15px;line-height:1.6}.message-row.user .message-bubble{background:#00ffcc26;color:var(--color-texto);border:1px solid rgba(0,255,204,.3);border-bottom-right-radius:4px}.message-row.assistant .message-bubble{background:var(--color-fondo-secundario);border:1px solid var(--color-borde);color:var(--color-texto);border-bottom-left-radius:4px;box-shadow:0 0 10px #0000004d}.loading-bubble{display:flex;align-items:center;justify-content:center;padding:14px 24px!important;color:var(--color-principal)!important;background:#00ffcc1a!important;border:1px solid rgba(0,255,204,.3)!important}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.pulse-icon{animation:pulse-opacity 1.5s infinite}@keyframes pulse-opacity{0%,to{opacity:1}50%{opacity:.4}}.input-zone{padding:0 24px 24px}.input-box{display:flex;align-items:center;background:var(--color-fondo-secundario);border:1px solid var(--color-borde);border-radius:32px;padding:6px 6px 6px 16px;box-shadow:0 0 15px #0000004d;transition:border-color .2s,box-shadow .2s}.input-box:focus-within{border-color:var(--color-principal);box-shadow:0 0 20px #0fc3}.input-box input{flex:1;border:none;outline:none;padding:12px 8px;font-size:16px;background:transparent;color:var(--color-texto)}.input-box input::placeholder{color:var(--color-texto-secundario)}.mic-button{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--color-texto-secundario);margin-right:4px}.mic-button:hover{background:#00ffcc1a}.mic-button.active{background:var(--color-principal);color:#111;animation:pulse-bg 2s infinite}.mic-button.muted{color:#ff8a8a;background:#ff8a8a1a}@keyframes pulse-bg{0%{box-shadow:0 0 #0fc6}70%{box-shadow:0 0 0 10px #0fc0}to{box-shadow:0 0 #0fc0}}.send-button,.stop-button{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center}.send-button{background:var(--color-principal);color:#111}.send-button:hover{box-shadow:0 0 15px #00ffcc80}.stop-button{background:#333;color:#fff}.stop-button:hover{background:#444}.input-footer{text-align:center;font-size:12px;color:var(--color-texto-secundario);margin-top:12px}.error-toast{background:#ff8a8a1a;color:#ff8a8a;padding:10px;border-radius:8px;font-size:13px;text-align:center;margin-bottom:12px;border:1px solid rgba(255,138,138,.3)}.robot-face-container{display:flex;justify-content:center;padding:28px 0 20px;overflow:visible}.robot-face{position:relative;display:flex;flex-direction:column;align-items:center;overflow:visible}.robot-screen{width:340px;height:230px;background-color:var(--color-fondo);border:10px solid #333;border-radius:36px;box-shadow:0 0 50px #000000b3,inset 0 0 36px #000000e6;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:18px 24px;box-sizing:border-box;position:relative;overflow:hidden}.eyes-container{display:flex;justify-content:space-around;align-items:center;width:100%;margin-bottom:10px}.eye{--ty: 0px;--rot: 0deg;--sy: 1;--mx: 0px;--my: 0px;width:110px;height:140px;background-color:var(--color-principal);border-radius:55px;box-shadow:0 0 35px var(--color-principal),0 0 70px #0fc6;position:relative;overflow:hidden;transform:translate(var(--mx),calc(var(--ty) + var(--my))) rotate(var(--rot)) scaleY(var(--sy));transition:transform .18s ease-out,width .3s ease-in-out,height .3s ease-in-out,border-radius .3s ease-in-out}.eye:after{content:"";position:absolute;top:22px;left:22px;width:30px;height:30px;background-color:#ffffffd9;border-radius:50%;transition:all .3s ease}.eyelid{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;background-color:var(--color-fondo);clip-path:polygon(0 0,100% 0,100% 0);transition:clip-path .3s ease-in-out;pointer-events:none}.eye.right-eye .eyelid{transform:scaleX(-1)}.eye-shine{position:absolute;top:22px;left:22px;width:30px;height:30px;background-color:#ffffffd9;border-radius:50%;transition:all .3s ease}.mouth{width:90px;height:26px;background-color:var(--color-principal);border-radius:0 0 45px 45px;box-shadow:0 0 18px var(--color-principal),0 0 34px #00ffcc59;opacity:0;transform:scaleY(.3);transition:opacity .3s ease,transform .3s ease;overflow:hidden;position:relative}.mouth-inner{width:100%;height:100%;background:linear-gradient(to bottom,transparent 30%,rgba(0,0,0,.3) 100%)}.robot-face.hablando .mouth{opacity:1;animation:hablar-boca .38s ease-in-out infinite}@keyframes hablar-boca{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}.robot-face.hablando .eye{animation:hablar .42s ease-in-out infinite}.robot-face.hablando .eye.right-eye{animation-delay:.12s}@keyframes hablar{0%,to{--sy: 1}50%{--sy: .88}}.robot-face.carga .eye{height:16px;width:100px;border-radius:8px;animation:pulso .9s ease-in-out infinite alternate}.robot-face.carga .eye.right-eye{animation-delay:.45s}.robot-face.carga .eye:after{display:none}.robot-face.carga .mouth{opacity:0}@keyframes pulso{0%{scale:.65 1;opacity:.7}to{scale:1.1 1;opacity:1}}.robot-face.sorprendido .eye{width:120px;height:120px;border-radius:50%;animation:sorpresa .35s cubic-bezier(.3,1.6,.5,1)}.robot-face.sorprendido .eye:after{top:26px;left:26px;width:24px;height:24px}.robot-face.sorprendido .mouth{opacity:1;transform:scaleY(1);width:50px;height:50px;border-radius:50%}@keyframes sorpresa{0%{scale:.6}to{scale:1}}.symbol{position:absolute;top:10px;left:0;right:0;text-align:center;font-size:40px;font-weight:900;line-height:1;color:var(--color-principal);text-shadow:0 0 12px var(--color-principal),0 0 24px rgba(0,255,204,.4);opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .2s ease}.robot-face[data-exp=sorprendido] .symbol,.robot-face[data-exp=carga] .symbol{opacity:1}.robot-face[data-exp=sorprendido] .symbol:before{content:"!";display:inline-block;animation:aparece-exclamacion .35s cubic-bezier(.3,1.6,.5,1)}.robot-face[data-exp=carga] .symbol:before{content:"?";display:inline-block;animation:balanceo 1.6s ease-in-out infinite}@keyframes aparece-exclamacion{0%{scale:.3;translate:0 10px}to{scale:1;translate:0 0}}@keyframes balanceo{0%,to{rotate:-8deg;translate:0 0}50%{rotate:8deg;translate:0 -3px}}.hand{position:absolute;top:45%;width:90px;height:110px;opacity:0;transition:opacity .6s ease;pointer-events:none;z-index:10}.hand-svg{width:100%;height:100%;fill:var(--color-principal);stroke:var(--color-principal);stroke-width:4;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 10px var(--color-principal)) drop-shadow(0 0 20px rgba(0,255,204,.4))}.left-hand{left:-115px;transform-origin:bottom center}.right-hand{right:-115px;transform-origin:bottom center;transform:scaleX(-1)}.robot-face.waving .hand{opacity:1}.robot-face.waving .left-hand{animation:wave-left .6s ease-in-out infinite alternate}.robot-face.waving .right-hand{animation:wave-right .6s ease-in-out infinite alternate}@keyframes wave-left{0%{transform:rotate(-18deg) translate(0)}to{transform:rotate(8deg) translate(-6px)}}@keyframes wave-right{0%{transform:scaleX(-1) rotate(-18deg) translate(0)}to{transform:scaleX(-1) rotate(8deg) translate(-6px)}}@keyframes hand-glow-pulse{0%{opacity:.75}to{opacity:1}}@media(max-width:600px){.welcome-screen h1{font-size:24px}.message-bubble{max-width:95%}.input-zone{padding:0 16px 16px}.simple-header,.chat-container{padding:16px}.robot-screen{width:280px;height:190px;padding:14px 16px}.eye{width:80px;height:100px;border-radius:40px}.eye:after,.eye-shine{width:22px;height:22px;top:16px;left:16px}.mouth{width:70px;height:20px}.hand{width:60px;height:75px}.left-hand{left:-76px}.right-hand{right:-76px}}.mode-selector{display:flex;align-items:center;background:#ffffff0a;border:1px solid var(--color-borde);border-radius:24px;padding:3px;gap:2px}.mode-btn{display:flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:500;background:transparent;color:var(--color-texto-secundario);transition:all .2s;white-space:nowrap}.mode-btn:hover{color:var(--color-texto);background:#ffffff0f}.mode-btn-active{background:var(--color-principal);color:#111!important;box-shadow:0 0 12px #0fc6}.mode-robot{max-width:100%!important;width:100%!important;background:var(--color-fondo)!important;overflow:hidden}.header-robot{padding:8px 20px!important;background:#111116d9!important;border-bottom:1px solid rgba(60,60,68,.3)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-shrink:0;z-index:10}.robot-face-container-fullscreen{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 0 8px;overflow:visible;min-height:0}.robot-face-container-fullscreen .robot-face{transform:none;transform-origin:center center}.robot-face-container-fullscreen .robot-screen{width:clamp(340px,65vw,1400px);height:calc(clamp(340px,65vw,1400px)*.676);max-height:60vh;border-radius:clamp(36px,4vw,80px);border-width:clamp(10px,1.2vw,22px)}.robot-face-container-fullscreen .eye{width:clamp(110px,14vw,280px);height:clamp(140px,18vw,360px);border-radius:clamp(55px,7vw,140px)}.robot-face-container-fullscreen .eye:after,.robot-face-container-fullscreen .eye-shine{width:clamp(30px,3.5vw,70px);height:clamp(30px,3.5vw,70px);top:clamp(22px,2.5vw,50px);left:clamp(22px,2.5vw,50px)}.robot-face-container-fullscreen .mouth{width:clamp(90px,12vw,240px);height:clamp(26px,3.5vw,70px);border-radius:0 0 clamp(45px,6vw,120px) clamp(45px,6vw,120px)}.robot-face-container-fullscreen .hand{width:clamp(80px,8.5vw,170px);height:clamp(100px,11vw,210px);z-index:10}.robot-face-container-fullscreen .left-hand{left:calc(-1*clamp(80px,8.5vw,170px) - clamp(20px,2.5vw,45px))}.robot-face-container-fullscreen .right-hand{right:calc(-1*clamp(80px,8.5vw,170px) - clamp(20px,2.5vw,45px))}.robot-mode-controls{position:static;transform:none;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(24px,4vh,48px) 0 clamp(20px,3vh,40px);width:100%;z-index:20}.robot-mic-btn{width:clamp(64px,7vw,88px);height:clamp(64px,7vw,88px);border-radius:50%;display:flex;align-items:center;justify-content:center;background:#1b1b20f2;border:2px solid var(--color-borde);color:var(--color-texto-secundario);transition:all .25s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 32px #0009}.robot-mic-btn:hover{border-color:var(--color-principal);color:var(--color-principal);box-shadow:0 0 28px #00ffcc59;transform:scale(1.05)}.robot-mic-btn.active{background:var(--color-principal);color:#111;border-color:var(--color-principal);animation:pulse-bg 2s infinite}.robot-mic-btn.muted{color:#ff8a8a;border-color:#ff8a8a80;background:#ff8a8a1a}.robot-status-label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--color-principal);background:#00ffcc14;border:1px solid rgba(0,255,204,.25);padding:5px 16px;border-radius:20px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.robot-stop-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#3c3c44d9;color:var(--color-texto-secundario);border:1px solid var(--color-borde);transition:all .2s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.robot-stop-btn:hover{background:#444;color:#fff}.error-toast-robot{max-width:300px;font-size:12px;text-align:center}@media(max-width:768px){.robot-face-container-fullscreen .robot-screen{width:clamp(300px,88vw,600px);height:calc(clamp(300px,88vw,600px)*.676);max-height:50vh}.robot-face-container-fullscreen .eye{width:clamp(80px,18vw,140px);height:clamp(100px,23vw,180px);border-radius:clamp(40px,9vw,90px)}.robot-face-container-fullscreen .eye:after,.robot-face-container-fullscreen .eye-shine{width:clamp(22px,4.5vw,40px);height:clamp(22px,4.5vw,40px);top:clamp(16px,3vw,28px);left:clamp(16px,3vw,28px)}.robot-face-container-fullscreen .mouth{width:clamp(70px,14vw,120px);height:clamp(20px,4vw,36px)}.robot-face-container-fullscreen .hand{width:clamp(50px,8vw,85px);height:clamp(65px,10vw,110px);z-index:10}.robot-face-container-fullscreen .left-hand{left:calc(-1*clamp(50px,8vw,85px) - 12px)}.robot-face-container-fullscreen .right-hand{right:calc(-1*clamp(50px,8vw,85px) - 12px)}.robot-mic-btn{width:64px;height:64px}}@media(orientation:landscape)and (max-height:500px){.robot-face-container-fullscreen{padding:8px 0 4px}.robot-face-container-fullscreen .robot-screen{width:auto;height:clamp(160px,52vh,300px);aspect-ratio:340 / 230;max-height:52vh}.robot-face-container-fullscreen .eye{width:clamp(60px,11vh,110px);height:clamp(80px,14vh,140px);border-radius:clamp(30px,5.5vh,55px)}.robot-face-container-fullscreen .hand{width:clamp(45px,14vh,75px);height:clamp(60px,18vh,100px);z-index:10}.robot-face-container-fullscreen .left-hand{left:calc(-1*clamp(45px,14vh,75px) - 12px)}.robot-face-container-fullscreen .right-hand{right:calc(-1*clamp(45px,14vh,75px) - 12px)}.header-robot{padding:4px 14px!important}.robot-mode-controls{flex-direction:row;padding:8px 0 10px;gap:20px}.robot-mic-btn{width:52px;height:52px}}