*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.app{color:#fff;background-color:#0f172a;height:100vh;display:flex}aside{background-color:#1e293b;border-right:1px solid #334155;width:260px;padding:20px;overflow-y:auto}aside h1{color:#38bdf8;text-align:center;margin-bottom:15px;font-size:20px}.search{color:#fff;background:#0f172a;border:none;border-radius:6px;width:100%;margin-bottom:15px;padding:8px}.search:focus{outline:1px solid #38bdf8}ul{list-style:none}li{cursor:pointer;border-radius:6px;align-items:center;gap:12px;padding:10px;transition:all .2s;display:flex}li:hover{background-color:#334155;transform:translate(3px)}li img{border-radius:50%;width:40px;height:40px}.address-aside{color:#8696a0;padding:5px;font-size:9px}.user-info{flex-direction:column;display:flex}.user-name{font-weight:500}.chat{flex-direction:column;flex:1;display:flex}.chat header{background-color:#1e293b;border-bottom:1px solid #334155;justify-content:space-between;align-items:center;padding:15px;display:flex}.back-btn{cursor:pointer;background:#ccc;border:none;border-radius:6px;font-size:18px;display:none}.exit-button{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:6px;padding:6px 12px}.chat-body{flex-direction:column;flex:1;gap:10px;padding:15px;display:flex;overflow-y:auto}.not-found-chat{color:#80808069;flex-direction:column;flex-grow:1;justify-content:center;align-items:center;height:100%;font-size:45px;display:flex}.message{word-break:break-word;border-radius:12px;flex-direction:column;max-width:60%;padding:10px 14px;font-size:14px;display:flex}.received{background:#1e293b;border-bottom-left-radius:4px;align-self:flex-start}.me{color:#000;background:#38bdf8;border-bottom-right-radius:4px;align-self:flex-end}.time{color:#fcfcfcc4;align-self:flex-end;margin-top:4px;font-size:11px}.chat-input{border-top:1px solid #334155;gap:10px;padding:10px;display:flex}.chat-input input{color:#fff;background:#1e293b;border:none;border-radius:6px;flex:1;padding:8px}.chat-input button{color:#000;cursor:pointer;background:#38bdf8;padding:8px 14px;font-weight:700}a{color:#0fc;text-decoration:none}a:hover{text-decoration:underline}.Acerca{color:#f0f8ff;text-align:center}.container{color:#eaeaea;background:#1e1e2f;border-radius:12px;max-width:800px;margin:40px auto;padding:25px;font-family:sans-serif;box-shadow:0 0 20px #00ffcc1a}.container h1{text-align:center;color:#0fc;margin-bottom:20px}.container h2{color:#0fc;margin-top:25px;margin-bottom:10px;font-size:1.2rem}.container p{color:#ccc;line-height:1.6}.container ul{padding-left:20px}.container li{margin-bottom:8px}.container a{color:#0fc;text-decoration:none;transition:all .2s}.container a:hover{color:#0fa;text-decoration:underline}.main-container{background:linear-gradient(-45deg,#0f172a,#1e293b,#12b154,#160d8d) 0 0/400% 400%;justify-content:center;align-items:center;width:100%;height:100vh;animation:15s infinite moveGradient;display:flex}@keyframes moveGradient{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.section-login,.section-registro{background:#1e293b;border-radius:10px;flex-direction:column;gap:15px;width:90%;max-width:400px;padding:30px;display:flex;box-shadow:0 10px 30px #00000080}.section-login h2,.section-registro h2{text-align:center;color:#38bdf8;font-size:32px}.section-login form,.section-registro form{flex-direction:column;gap:12px;display:flex}.input-login,.input-registro{color:#fff;background:#0f172a;border:none;border-radius:6px;width:100%;padding:10px}.input-login:focus,.input-registro:focus{outline:1px solid #38bdf8}.section-login button,.section-registro button{color:#000;cursor:pointer;background:#38bdf8;border:none;border-radius:6px;padding:12px;font-weight:700;transition:all .2s}.section-login button:hover,.section-registro button:hover{transform:scale(1.03)}.button-reg{color:#fff;text-align:center;cursor:pointer;font-size:14px;text-decoration:underline}.error-form{color:#ef4444;text-align:center}@media (width<=768px){.app{flex-direction:row}aside{width:100%;height:100vh}.app.chat-selected aside{display:none}.chat{width:100%;height:100vh;display:none}.app.chat-selected .chat{display:flex}.back-btn{display:block!important}.not-found-chat{display:none}}
