body{margin:0}.login-container{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;justify-content:center;min-height:100vh}.login-box{background:#fff;border-radius:10px;box-shadow:0 10px 25px #0003;max-width:400px;padding:40px;width:100%}.login-box h1{color:#667eea;font-size:32px;margin:0 0 10px;text-align:center}.login-box h2{color:#333;font-size:20px;font-weight:400;margin:0 0 30px;text-align:center}.login-box form{display:flex;flex-direction:column;gap:15px}.login-box input{border:2px solid #e1e1e1;border-radius:5px;font-size:16px;padding:12px;transition:border-color .3s}.login-box input:focus{border-color:#667eea;outline:none}.login-box button{background:#667eea;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:16px;font-weight:700;padding:12px;transition:background .3s}.login-box button:hover{background:#5568d3}.login-box .error{background:#ffeaea;border-radius:5px;color:#e74c3c;padding:10px;text-align:center}.grupos-container{background:#f5f5f5;min-height:100vh}.grupos-header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 10px #0000001a;color:#fff;display:flex;justify-content:space-between;padding:20px 40px}.grupos-header h1{font-size:28px;margin:0}.user-info{align-items:center;display:flex;gap:15px}.username{font-size:16px;font-weight:700}.estado-select{background:#fff3;border:2px solid #fff;border-radius:5px;color:#fff;cursor:pointer;font-weight:700;padding:8px 12px}.estado-select option{color:#333}.logout-btn{background:#fff3;border:2px solid #fff;border-radius:5px;color:#fff;cursor:pointer;font-weight:700;padding:8px 20px;transition:background .3s}.logout-btn:hover{background:#ffffff4d}.grupos-list{margin:40px auto;max-width:1200px;padding:0 20px}.grupos-list h2{color:#333;margin-bottom:20px}.no-grupos{color:#999;font-size:18px;padding:40px;text-align:center}.grupo-card{align-items:center;background:#fff;border-radius:10px;box-shadow:0 2px 5px #0000001a;display:flex;justify-content:space-between;margin-bottom:15px;padding:20px;transition:transform .2s,box-shadow .2s}.grupo-card:hover{box-shadow:0 4px 10px #00000026;transform:translateY(-2px)}.grupo-info h3{color:#667eea;font-size:20px;margin:0 0 10px}.grupo-info p{color:#666;margin:0 0 10px}.usuarios-online{color:#28a745;font-weight:700}.unirse-btn{background:#667eea;border:none;border-radius:5px;color:#fff;cursor:pointer;font-weight:700;padding:10px 30px;transition:background .3s}.unirse-btn:hover{background:#5568d3}.chat-container{background:#f5f5f5;display:flex;flex-direction:column;height:100vh}.chat-header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 10px #0000001a;color:#fff;display:flex;gap:20px;padding:15px 20px}.volver-btn{background:#fff3;border:2px solid #fff;border-radius:5px;color:#fff;cursor:pointer;font-weight:700;padding:8px 15px;transition:background .3s}.volver-btn:hover{background:#ffffff4d}.chat-header h2{flex:1 1;margin:0}.usuarios-count{font-weight:700}.chat-layout{display:flex;flex:1 1;overflow:hidden}.usuarios-sidebar{background:#fff;border-right:1px solid #e1e1e1;overflow-y:auto;padding:20px;width:250px}.usuarios-sidebar h3{color:#667eea;margin:0 0 15px}.usuarios-sidebar ul{list-style:none;margin:0;padding:0}.usuarios-sidebar .usuario{align-items:center;border-radius:5px;display:flex;gap:10px;margin-bottom:5px;padding:10px;transition:background .2s}.usuarios-sidebar .usuario:hover{background:#f5f5f5;cursor:pointer}.estado-icon{font-size:12px}.chat-main{background:#fff}.chat-main,.mensajes-container{display:flex;flex:1 1;flex-direction:column}.mensajes-container{gap:10px;overflow-y:auto;padding:20px}.mensaje{align-self:flex-start;background:#f0f0f0;border-radius:10px;max-width:60%;padding:10px 15px}.mensaje.propio{align-self:flex-end;background:#667eea;color:#fff}.mensaje-header{align-items:center;display:flex;gap:15px;justify-content:space-between;margin-bottom:5px}.mensaje-header strong{font-size:14px}.mensaje.propio .mensaje-header strong{color:#ffffffe6}.mensaje-time{color:#999;font-size:11px}.mensaje.propio .mensaje-time{color:#ffffffb3}.mensaje-contenido{word-wrap:break-word;line-height:1.4}.escribiendo{color:#999;font-size:14px;font-style:italic;padding:10px 20px}.mensaje-form{background:#fff;border-top:1px solid #e1e1e1;display:flex;gap:10px;padding:20px}.mensaje-form input{border:2px solid #e1e1e1;border-radius:5px;flex:1 1;font-size:16px;padding:12px}.mensaje-form input:focus{border-color:#667eea;outline:none}.mensaje-form button{background:#667eea;border:none;border-radius:5px;color:#fff;cursor:pointer;font-weight:700;padding:12px 30px;transition:background .3s}.mensaje-form button:hover{background:#5568d3}.loading{align-items:center;color:#667eea;display:flex;font-size:24px;height:100vh;justify-content:center}@media (max-width:768px){.usuarios-sidebar{display:none}.mensaje{max-width:80%}}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{height:100vh}
/*# sourceMappingURL=main.c7af240f.css.map*/