*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}.app{display:flex;height:100vh}.header-sidebar{display:flex;align-items:center;justify-content:space-between;padding:0 0 15px}.header-sidebar h1{font-size:20px;color:#1daa61}.header-sidebar button{font-size:20px;background-color:transparent;cursor:pointer;width:40px;height:40px;border:none;border-radius:50%}.header-sidebar button:hover{background-color:#f6f5f4;border-radius:50px}.sidebar{width:350px;background-color:#fff;border-right:1px solid #ddd;display:flex;flex-direction:column;padding:20px}.search-container{display:flex;align-items:center;width:100%;background-color:#f6f5f4;padding:8px;gap:15px;border-radius:50px;border:2px solid #F6F5F4;margin:0 0 10px;cursor:pointer}.search-container:hover{border:2px solid rgb(192,192,192)}.search-container:focus-within{background-color:#fff;border:2px solid #1DAA61}.search{border:none;width:100%;outline:none;background:transparent}.search-container i{position:relative;border:none;left:10px;color:gray;font-size:18px}.search-result{text-align:center;margin-top:10px;color:gray}.user-list{list-style:none;display:flex;flex-direction:column;gap:5px}.user{display:flex;align-items:center;padding:10px;cursor:pointer;width:100%}.user:hover{background-color:#f7f5f3;border-radius:15px}.user-info{display:flex;flex-direction:column}.user-info strong{font-size:16px}.user-info p{color:#636261;font-size:12px}.avatar{width:40px;border-radius:50%;margin-right:10px}.chat{flex:1;display:flex;flex-direction:column}.user-not-found{flex:1;display:flex;justify-content:center;align-items:center}.chat-header{background-color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center}.chat-user{display:flex;align-items:center;gap:15px}.chat-info{display:flex;flex-direction:column}.chat-header img{width:40px;border-radius:50px}.chat-actions{display:flex;align-items:center;gap:5px}.chat-actions button{font-size:20px;background-color:transparent;cursor:pointer;width:40px;height:40px;border:none;border-radius:50%}.chat-actions button:hover{background-color:#f6f5f4;border-radius:50px}.chat-actions a{font-size:20px;background-color:transparent;cursor:pointer;width:40px;height:40px;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;color:#0a0a0a}.chat-actions a:hover{background-color:#f6f5f4;border-radius:50px}.btn-volver{display:none}.chat{background-color:#f5f1eb}.chat-messages{display:flex;flex:1;flex-direction:column;justify-content:flex-end;overflow-y:auto;gap:10px;padding:10px 40px 12px}.message{background-color:#d9fdd3;padding:8px 12px;border-radius:8px;align-self:flex-end;max-width:50%}.message p{font-size:14px}.message .time{font-size:10px;display:block;text-align:end;color:#979797}.tema-switch{display:flex;align-items:center;gap:10px}.chat-footer{margin:0 15px 15px;padding:10px;background-color:#fff;border-radius:50px}.chat-footer form{display:flex;flex:1;justify-content:space-between;cursor:pointer}.chat-footer button{font-size:20px;text-align:center;background-color:transparent;color:gray;cursor:pointer;width:35px;height:35px;border:none;border-radius:50%}.chat-footer button:hover{background-color:#4eba80;color:#fff}.chat-footer input{border:none;padding-left:10px;font-size:14px;outline:none}main{background-color:#d3f1e2b9;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px;flex-direction:column}.help{background-color:#fff;border-radius:16px;box-shadow:0 8px 20px #0000001a;padding:60px;max-width:1100px;width:100%;box-sizing:border-box}.introduccion{display:flex;flex-direction:column;align-items:start;text-align:left;gap:10px;margin-top:40px}.h1-help{text-align:center;color:#1daa61;padding:20px}.introduccion h2{font-size:22px}.help .funciones-principales{margin-top:35px;text-align:left}.help .contenedor-funciones{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:20px;text-align:left}.help .contenedor-funciones div{padding:25px;width:300px}.help .contenedor-funciones i{font-size:30px;color:#1daa61;padding:10px;border-radius:50px;background-color:#c8f1dc;margin-bottom:10px}.help .contenedor-funciones h4{margin:10px 0;font-size:20px;color:#1daa61}.italica{font-style:italic}main h3{font-size:22px}main ul{margin-left:50px;list-style:none}main li{padding:10px}main li strong{color:#1daa61}.sub-texto,.aclaracion{margin-top:10px}.btn-volverchat{background-color:#1daa61;color:#fff;text-decoration:none;padding:10px;border-radius:50px;margin-top:20px}.btn-volverchat:hover{background-color:#118d4d}.contenedor-popup{background-color:#a8a6a57a;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);position:fixed;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.popup{display:flex;flex-direction:column;align-items:center;background-color:#fff;padding:20px;border-radius:15px;width:300px}.btn-guardar{background-color:#1dab62;color:#fff;padding:10px 15px;margin-top:15px;border-radius:50px;border:none;cursor:pointer}.btn-guardar:hover{background-color:#4eba80}.popup h1{font-size:25px}.popup p{font-size:14px}.popup h3{font-size:16px;padding:14px 0 5px}.btn-modo{background-color:#e2e2e2;color:#696969;padding:10px 15px;border-radius:50px;border:none;cursor:pointer}.nombre-usuario{display:flex;align-items:center;gap:5px}.btn-editar{background-color:transparent;font-size:20px;color:gray;cursor:pointer;width:35px;height:35px;border:none;border-radius:50%}.nombre-usuario input{outline:none;padding:5px;border:1px solid #242625;border-radius:10px;background-color:transparent}.btn-guardarnombre{background-color:#1dab62;color:#fff;font-size:20px;cursor:pointer;width:25px;height:25px;border:none;border-radius:50%}.login-main{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(135deg,#159f30,#00c6ff);color:#fff;background-size:cover}.login-main img{width:80px;margin-bottom:15px}.login-main h1{margin-bottom:20px;font-size:30px;text-align:center}.login-main form{background-color:#fff;padding:25px;border-radius:12px;box-shadow:0 4px 10px #00000026;width:350px;display:flex;flex-direction:column;gap:10px}.login-main form label{font-weight:700;font-size:18px;color:#424242;text-align:center}.login-main form input{border:none;outline:none;font-size:14px;width:100%}.input-contraseña{display:flex;justify-content:space-around;align-items:center;border:1px solid rgb(190,190,190);border-radius:10px;padding:5px 15px}.btn-ver{border:none;background-color:transparent;width:30px;height:30px}.btn-ver:hover{background-color:#f6f5f4;border-radius:50px}.btn-acceder{margin-bottom:10px;padding:10px;border:none;border-radius:50px;background-color:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:background-color .3s}.btn-acceder:hover{background-color:#0056b3}.login-main p{margin:5px;font-size:12px;text-align:center}.text-info{margin-top:10px;font-size:12px}#Dark .sidebar{background-color:#161717;color:#f1f1f1;border-right:2px solid #333333}#Dark .sidebar .header-sidebar h1{color:#f5f5f5}#Dark .header-sidebar button{color:#fff}#Dark .header-sidebar button:hover{background-color:#242625}#Dark .search-container{color:#fff;background-color:#2e302f;border:2px solid #2E302F}#Dark .search-container:focus-within{border:2px solid #1DAA61}#Dark .search-container input{color:#cfcfcf}#Dark .user-info p{font-weight:700}#Dark .user:hover{background-color:#2e2f2f}#Dark .chat-header{background-color:#161717;color:#f1f1f1}#Dark .chat-actions button{color:#fff}#Dark .chat-actions button:hover{background-color:#242625}#Dark .chat-actions a{color:#fff}#Dark .chat{background-color:#252424}#Dark .message{background-color:#144d37;color:#fff}#Dark .message .time{color:#fff;font-weight:400px}#Dark .user-not-found{background-color:#000}#Dark .chat-footer{background-color:#2e302f}#Dark .chat-footer button{color:#fff}#Dark .chat-footer input{background-color:transparent;font-weight:700;color:#e9e2e2}#Dark .contenedor-popup{background-color:#161717b7;color:#fff}#Dark .popup{background-color:#343636}#Dark .nombre-usuario input{border:1px solid #ebecec;color:#fff}#Dark .btn-editar,#Dark .btn-volver{color:#fff}@media (max-width: 480px){.app{display:block}.app .sidebar{display:block;width:100%;height:100%;overflow:auto}.app.has-selection .sidebar,.app .chat{display:none}.app.has-selection .chat{display:flex;width:100%;height:100vh;padding:0;box-sizing:border-box}.btn-volver{display:block;font-size:20px;background-color:transparent;width:20px;height:20px;border:none}.user-not-found{display:none}}