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}.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;font-weight:700;transition:background .3s}.logout-btn:hover{background:#ffffff4d}.grupos-list{margin:40px auto;max-width:1200px;padding:0 20px}.no-grupos{font-size:18px}.grupo-card{background:#fff;border-radius:10px;box-shadow:0 2px 5px #0000001a;transition:transform .2s,box-shadow .2s}.grupo-card:hover{box-shadow:0 4px 10px #00000026}.grupo-info h3{color:#667eea;font-size:20px}.grupo-info h3,.grupo-info p{margin:0 0 10px}.usuarios-online{color:#28a745;font-weight:700}.unirse-btn{background:#667eea;border-radius:5px;font-weight:700;transition:background .3s}.unirse-btn:hover{background:#5568d3}.whatsapp-shell .box,.whatsapp-shell .card,.whatsapp-shell .container,.whatsapp-shell .content,.whatsapp-shell .main,.whatsapp-shell .panel{background:#111b21!important;border:1px solid #ffffff0f!important;border-radius:12px!important;color:#e9edef!important}.whatsapp-shell .header,.whatsapp-shell .navbar,.whatsapp-shell .topbar,.whatsapp-shell header{background:#111b21!important;border-bottom:1px solid #ffffff0f!important;color:#e9edef!important}.whatsapp-shell .tab-bar,.whatsapp-shell .tabs{background:#111b21!important;border:1px solid #ffffff0f!important;border-radius:12px!important;overflow:hidden!important}.whatsapp-shell .tab-bar button,.whatsapp-shell .tabs button{background:#0000!important;border:none!important;color:#e9edefd9!important}.whatsapp-shell .tab-bar button.active,.whatsapp-shell .tabs button.active{background:#005c4b!important;color:#e9edef!important}.whatsapp-shell .chat-item,.whatsapp-shell .grupo-item,.whatsapp-shell .list,.whatsapp-shell .list-item{background:#202c33!important;border:1px solid #ffffff0f!important;border-radius:10px!important;color:#e9edef!important}.whatsapp-shell .chat-item:hover,.whatsapp-shell .grupo-item:hover,.whatsapp-shell .list-item:hover{filter:brightness(1.06)!important}.whatsapp-shell input,.whatsapp-shell select,.whatsapp-shell textarea{background:#202c33!important;border:1px solid #ffffff1a!important;border-radius:10px!important;color:#e9edef!important;outline:none!important}.whatsapp-shell input::placeholder,.whatsapp-shell textarea::placeholder{color:#e9edef8c!important}.whatsapp-shell button{border:1px solid #ffffff14!important}.whatsapp-shell .btn-primary,.whatsapp-shell button.primary{background:#00a884!important;border:none!important;color:#001b13!important}.whatsapp-shell a{color:#7dcfff!important}.whatsapp-shell,body,html{background:#0b141a!important}.whatsapp-shell{color:#e9edef!important;min-height:100vh!important;padding:20px 0!important}.whatsapp-shell .grupos-container{background:#0000!important}.whatsapp-shell .grupos-header{background:#111b21!important;border:1px solid #ffffff0f!important;border-radius:14px!important;color:#e9edef!important}.whatsapp-shell .estado-select{background:#202c33!important;border:1px solid #ffffff1a!important;border-radius:10px!important;color:#e9edef!important}.whatsapp-shell .logout-btn{background:#d94141!important;border:none!important;border-radius:10px!important;color:#fff!important}.whatsapp-shell .grupos-list{background:#111b21!important;border:1px solid #ffffff0f!important;border-radius:14px!important;color:#e9edef!important}.whatsapp-shell .grupo-card{background:#202c33!important;border:1px solid #ffffff0f!important;border-radius:12px!important;color:#e9edef!important}.whatsapp-shell .unirse-btn{background:#00a884!important;border:none!important;border-radius:10px!important;color:#001b13!important}.whatsapp-shell .no-grupos{color:#e9edefb3!important}.whatsapp-shell .chat-item,.whatsapp-shell .list-item{background:#202c33!important;border:1px solid #ffffff0f!important;border-radius:10px!important;color:#e9edef!important}.whatsapp-shell .box,.whatsapp-shell .card,.whatsapp-shell .content,.whatsapp-shell .grupos-container,.whatsapp-shell .grupos-header,.whatsapp-shell .grupos-tabs,.whatsapp-shell .panel,.whatsapp-shell .tabs,.whatsapp-shell .tabs-container,.whatsapp-shell .tabs-wrapper{background:#111b21!important;border:1px solid #ffffff0f!important;border-radius:14px!important;color:#e9edef!important}.whatsapp-shell .chat-card,.whatsapp-shell .chat-item,.whatsapp-shell .chat-row,.whatsapp-shell .grupo-card,.whatsapp-shell .list-item{background:#202c33!important;border:1px solid #ffffff0f!important;border-radius:12px!important;color:#e9edef!important}.whatsapp-shell .tab,.whatsapp-shell .tab-btn,.whatsapp-shell .tab-button{background:#0000!important;border:none!important;color:#e9edefd9!important}.whatsapp-shell .tab-btn.active,.whatsapp-shell .tab-btn.selected,.whatsapp-shell .tab-button.active,.whatsapp-shell .tab-button.selected,.whatsapp-shell .tab.active,.whatsapp-shell .tab.selected{background:#005c4b!important;color:#e9edef!important}.grupos-container,.whatsapp-shell h1,.whatsapp-shell h2,.whatsapp-shell h3,.whatsapp-shell p,.whatsapp-shell span{color:#e9edef!important}.grupos-container{background:#0b141a!important}.grupos-header{box-shadow:none!important;color:#e9edef!important}.grupos-header,.grupos-list{background:#111b21!important;border:1px solid #ffffff0f!important}.grupos-list{border-radius:14px!important;padding:20px!important}.grupos-list h2{color:#e9edef!important}.no-grupos{color:#e9edefb3!important}.grupo-card{background:#202c33!important;border:1px solid #ffffff0f!important;box-shadow:none!important;color:#e9edef!important}.grupo-info h3{color:#00a884!important}.grupo-info p{color:#e9edefcc!important}.usuarios-online{color:#00a884!important}.estado-select{background:#202c33!important;border:1px solid #ffffff1a!important;color:#e9edef!important}.logout-btn{background:#d94141!important;border:none!important;color:#fff!important}.unirse-btn{background:#00a884!important;border:none!important;color:#001b13!important}.unirse-btn:hover{filter:brightness(1.05)!important}.principal-container{background:#0b141a!important;color:#e9edef!important;min-height:100vh!important}.principal-container .whatsapp-shell{background:#0000!important}.principal-container .grupos-header,.principal-container .grupos-list,.principal-container .tabs-container{background:#111b21!important;border:1px solid #ffffff0f!important;border-radius:14px!important;color:#e9edef!important}.principal-container .chat-item,.principal-container .grupo-card,.principal-container .list-item{background:#202c33!important;border:1px solid #ffffff0f!important;border-radius:12px!important;color:#e9edef!important}.principal-container .tabs-container{background:#1f2933!important;border:1px solid #ffffff14!important;box-shadow:none!important}.principal-container .tabs-container button{background:#0000!important;color:#e9edefcc!important}.principal-container .tabs-container button.active,.principal-container .tabs-container button.selected{background:#2a3642!important;color:#e9edef!important}.principal-container .tab-content{background:#111b21!important;border:1px solid #ffffff0f!important;border-radius:14px!important}.principal-container .contacto-card{background:#1f2933!important;border:1px solid #ffffff14!important;border-radius:12px!important;box-shadow:none!important;color:#e9edef!important}.principal-container .contacto-card:hover{filter:brightness(1.06)!important}.principal-container .contacto-card p,.principal-container .contacto-card span,.principal-container .contacto-card strong,.principal-header{color:#e9edef!important}.principal-header{background:#1f2933!important;border:1px solid #ffffff14!important;border-radius:12px!important;box-shadow:none!important}.principal-container .chats-list h2,.principal-container .contacto-card,.principal-container .contacto-card *,.principal-container .grupo-info,.principal-container .grupo-info *,.principal-container .grupos-list h2,.principal-container .tabs-container,.principal-container .tabs-container *,.principal-container .user-info,.principal-container .user-info *,.principal-container .username,.principal-container h1,.principal-container h2,.principal-container h3{color:#fff!important}.mensaje-form{background:#1f1f1f!important;border-top:1px solid #ffffff14!important;padding:12px!important}.mensaje-form .chat-input-row{background:#0000!important}.mensaje-form input[type=text]{background:#2a2a2a!important;border:1px solid #ffffff14!important;border-radius:22px!important;color:#e9edef!important;padding:12px 14px!important}.mensaje-form input[type=text]::placeholder{color:#e9edef8c!important}.mensaje-form button[type=submit]{background:#005c4b!important;border:none!important;border-radius:10px!important;color:#e9edef!important}.chat-header{background:#111b21!important;border-bottom:1px solid #ffffff0f!important;color:#e9edef!important}.chat-header h2{color:#fff!important}.mensaje-form button[title="Adjuntar archivo"]:hover{filter:brightness(1.06)!important}.chat-container .mensaje-form .reply-banner{background:#111b21!important;border:1px solid #ffffff0f!important;border-radius:12px!important;color:#e9edef!important}.chat-container .mensaje-form .reply-banner-title{color:#00a884!important}.chat-container .mensaje-form .reply-banner-sub{color:#e9edefbf!important}.chat-container .mensaje-form .reply-banner-close{background:#0000!important;color:#f2f0e6!important}.chat-header button[title="Llamada de voz"],.chat-header button[title=Videollamada]{align-items:center!important;background:#202c33!important;border:1px solid #ffffff1a!important;border-radius:50%!important;box-shadow:none!important;color:#e9edef!important;cursor:pointer!important;display:inline-flex!important;font-size:18px!important;height:40px!important;justify-content:center!important;line-height:1!important;padding:0!important;transition:filter .15s ease,background .15s ease,transform .05s ease!important;width:40px!important}.chat-header button[title="Llamada de voz"]:hover,.chat-header button[title=Videollamada]:hover{filter:brightness(1.08)!important}.chat-header button[title="Llamada de voz"]:active,.chat-header button[title=Videollamada]:active{transform:translateY(1px)!important}.chat-header button[title="Llamada de voz"]:focus-visible,.chat-header button[title=Videollamada]:focus-visible{outline:2px solid #00a8848c!important;outline-offset:2px!important}.chat-header button[title="Llamada de voz"]{background:#111b21!important;border-color:#00a884a6!important;color:#00a884!important}.chat-header button[title=Videollamada]{background:#111b21!important;border-color:#7dcfffa6!important;color:#7dcfff!important}.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{border-radius:50%;display:inline-block;height:10px;width:10px}.estado-icon.online{background:#25d366}.estado-icon.offline{background:#666}.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{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%}}.mensajes-badge{align-items:center;background:#f44;border-radius:20px;box-shadow:0 2px 8px #ff44444d;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:700;gap:5px;padding:8px 15px;position:absolute;right:20px;top:50%;transform:translateY(-50%);transition:all .3s ease}.mensajes-badge:hover{background:#f66;transform:translateY(-50%) scale(1.05)}.mensajes-lista{margin:0 auto;max-width:800px;padding:20px}.chat-item{background:#fff;border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;margin-bottom:10px;padding:15px 20px;transition:all .2s ease}.chat-item:hover{background:#f5f5f5;border-color:#667eea;transform:translateX(5px)}.chat-item-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.chat-item-header strong{color:#333;font-size:16px}.badge-count{background:#667eea;border-radius:12px;color:#fff;font-size:12px;font-weight:700;padding:2px 8px}.chat-item-preview{color:#666;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge-sin-leer{min-width:18px;padding:2px 6px}.mensaje-header{align-items:center;display:flex;gap:8px}.btn-responder-icon{background:#0000;border:0;cursor:pointer;font-size:16px;line-height:1;margin-left:auto;opacity:.65;padding:2px 6px}.btn-responder-icon:hover{opacity:1}.reply-quote{background:#0000000f;border-left:3px solid #25d366;border-radius:10px;cursor:pointer;margin-bottom:6px;padding:6px 8px}.reply-quote-user{font-size:12px;font-weight:700;margin-bottom:2px}.reply-quote-text{font-size:12px;max-width:320px;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mensaje-form{align-items:stretch!important;display:flex!important;flex-direction:column!important;gap:8px!important}.reply-banner{align-items:center!important;background:#f0f2f5!important;border-left:4px solid #25d366!important;border-radius:10px!important;display:flex!important;gap:10px!important;justify-content:space-between!important;padding:10px 12px!important}.reply-banner-texts{flex:1 1!important;min-width:0!important}.reply-banner-title{font-size:13px!important;font-weight:700!important;line-height:1.2!important}.reply-banner-sub{color:#555!important;font-size:12px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.reply-banner-close{background:#0000!important;border:none!important;cursor:pointer!important;font-size:18px!important;padding:6px 10px!important}.chat-container,.chat-layout,.chat-main,.mensajes-container{background:#0b141a!important}.chat-container,.mensaje{color:#e9edef!important}.mensaje{background:#202c33!important;border:1px solid #ffffff0f!important;border-radius:14px!important}.mensaje.propio{background:#005c4b!important;border:1px solid #0000001f!important}.mensaje-header strong,.mensaje.propio{color:#e9edef!important}.mensaje-time{color:#e9edefb3!important}.mensaje a{color:#7dcfff!important;text-decoration:underline!important}.mensaje.propio a{color:#b9f6ca!important}.btn-responder-icon{background:#0000!important;border:none!important;color:#f2f0e6!important;opacity:.95!important}.btn-responder-icon:hover{filter:brightness(1.05)!important;opacity:1!important}body,html{overflow-x:hidden}.chat-header{padding-top:calc(10px + env(safe-area-inset-top))!important}.mensaje-form{padding-bottom:calc(12px + env(safe-area-inset-bottom))!important}.chat-header{align-items:center!important;display:flex!important;flex-wrap:wrap!important;gap:10px!important;justify-content:space-between!important}.chat-header h2{flex:1 1 auto!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}@media (max-width:640px){.chat-header button[title="Llamada de voz"],.chat-header button[title=Videollamada]{font-size:16px!important;height:36px!important;width:36px!important}.volver-btn{font-size:14px!important;padding:8px 10px!important}}.chat-input-row{align-items:center!important;display:flex!important;gap:10px!important;width:100%!important}.chat-input-row input[type=text]{flex:1 1 auto!important;min-width:0!important}@media (max-width:420px){.mensaje-form{padding:10px!important}.chat-input-row{gap:8px!important}.mensaje-form button[type=submit]{font-size:14px!important;padding:10px 12px!important}.mensaje-form button[title="Adjuntar archivo"]{font-size:16px!important;padding:10px 12px!important}}.principal-container{overflow-x:hidden!important}@media (max-width:640px){.grupos-header{padding:14px!important}.tabs-container{padding:10px!important}.tabs-container button{font-size:14px!important;padding:10px 12px!important}.contacto-card{padding:12px!important}}.video-preview{background:#111b21!important;border:1px solid #ffffff14!important;border-radius:12px!important;cursor:pointer!important;max-width:320px!important;overflow:hidden!important;position:relative!important}.video-thumb{display:block!important;height:auto!important;pointer-events:none!important;width:100%!important}.video-play-overlay{background:linear-gradient(180deg,#0003,#00000059)!important;color:#e9edefe6!important;font-size:56px!important;position:absolute!important;text-shadow:0 6px 18px #0009!important}.media-zoom-overlay,.video-play-overlay{align-items:center!important;display:flex!important;inset:0!important;justify-content:center!important}.media-zoom-overlay{background:#000000d9!important;padding:16px!important;position:fixed!important;z-index:9999!important}.media-zoom-content{align-items:center!important;display:flex!important;justify-content:center!important;max-height:92vh!important;width:min(920px,96vw)!important}.media-zoom-close{background:#202c33!important;border:1px solid #ffffff1a!important;border-radius:999px!important;color:#f2f0e6!important;cursor:pointer!important;height:40px!important;position:absolute!important;right:-6px!important;top:-6px!important;width:40px!important}.media-zoom-video{background:#000!important;border-radius:12px!important;max-height:92vh!important;width:100%!important}.media-zoom-content{position:relative!important}.media-zoom-close{pointer-events:auto!important;right:12px!important;top:12px!important;z-index:10002!important}.media-zoom-video{position:relative!important;z-index:10001!important}.archivo-nombre{color:#e9edefbf!important;font-size:13px!important;margin-top:8px!important;word-break:break-word!important}.usuarios-sidebar{background:#111b21!important;border-right:1px solid #ffffff0f!important;color:#e9edef!important}.usuarios-sidebar h1,.usuarios-sidebar h2,.usuarios-sidebar h3{color:#fff!important}.usuarios-sidebar,.usuarios-sidebar *{color:#e9edef!important}.usuarios-sidebar .contacto-card,.usuarios-sidebar .usuario-card,.usuarios-sidebar .usuario-item,.usuarios-sidebar li{background:#202c33!important;border:1px solid #ffffff0f!important;border-radius:12px!important}.usuarios-sidebar .contacto-card:hover,.usuarios-sidebar .usuario-card:hover,.usuarios-sidebar .usuario-item:hover,.usuarios-sidebar li:hover{filter:brightness(1.06)!important}.btn-stickers{background:#202c33!important;border:1px solid #ffffff14!important;border-radius:10px!important;color:#f2f0e6!important;cursor:pointer!important;font-size:18px!important;padding:10px 12px!important}.btn-stickers:hover{filter:brightness(1.06)!important}.sticker-picker{height:360px}.sticker-grid{grid-gap:10px;gap:10px;grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}@media (max-width:520px){.sticker-grid{grid-template-columns:repeat(4,1fr)!important}}.sticker-chat{border-radius:10px!important;cursor:pointer!important;display:block!important;height:auto!important;width:140px!important}.reply-mini-image,.reply-mini-sticker{border-radius:6px;height:auto;margin-top:4px;width:48px}.sticker-tabs{background:#0000;display:inline-flex;gap:8px;margin:0 0 8px;padding:0;position:-webkit-sticky;position:sticky;top:0;z-index:999}.sticker-tab{background:#1f2c33;border:1px solid #ffffff14;border-radius:999px;color:#e9edef;padding:6px 10px;white-space:nowrap}.sticker-tab.active{background:#00a884;border-color:#00a884;color:#081c15}.sticker-picker-header{align-items:center;background:#0000;display:flex;gap:10px;justify-content:space-between;padding-bottom:8px;position:-webkit-sticky;position:sticky;top:0;z-index:999}.sticker-close{background:#0f1b22;border:1px solid #ffffff1f;border-radius:10px;color:#e9edef;cursor:pointer;font-size:22px;height:34px;line-height:1;width:34px}.sticker-close:hover{filter:brightness(1.1)}.sticker-overlay{align-items:flex-end;background:#00000059;display:flex;inset:0;justify-content:center;padding:12px;position:fixed;z-index:4000}.sticker-picker{background:#0f1b22;border-radius:14px;max-height:70vh;overflow-x:hidden;overflow-y:auto;padding:8px;width:min(520px,96vw)}.sticker-grid{grid-gap:8px;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}.sticker-item{align-items:center;aspect-ratio:1/1;background:#0000!important;border:0!important;border-radius:12px;display:flex;justify-content:center;padding:2px!important;width:100%}.sticker-item:hover{background:#ffffff0f!important}.sticker-img{display:block;height:92%!important;max-height:none!important;max-width:none!important;object-fit:contain;width:92%!important}.reply-thumb{border-radius:6px;height:32px;object-fit:contain;width:32px}.reply-banner-sub.has-thumb{align-items:center;display:flex;gap:8px;min-height:28px}*{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}.principal-container{background-color:#f5f5f5;margin:0 auto;max-width:1200px;min-height:100vh;padding:20px}.principal-header{align-items:center;background:#fff;border-radius:10px;box-shadow:0 2px 4px #0000001a;display:flex;justify-content:space-between;margin-bottom:20px;padding:20px}.principal-header h1{color:#333;margin:0}.user-info{align-items:center;display:flex;gap:15px}.username{color:#555;font-weight:600}.logout-btn{background:#f44;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:14px;padding:8px 20px}.logout-btn:hover{background:#c00}.tabs-container{background:#fff;border-radius:10px;box-shadow:0 2px 4px #0000001a;display:flex;gap:10px;margin-bottom:20px;padding:10px}.tab{background:#0000;border:none;border-radius:8px;color:#666;cursor:pointer;flex:1 1;font-size:16px;font-weight:500;padding:12px 20px;transition:all .3s ease}.tab:hover{background:#f0f0f0}.tab.activo{background:#4caf50;color:#fff}.tab-content{background:#fff;border-radius:10px;box-shadow:0 2px 4px #0000001a;min-height:500px;padding:20px}.chats-list,.grupos-list{padding:20px}.grupos-list h2{color:#333;margin-bottom:20px;margin-top:0}.no-grupos{color:#999;padding:40px;text-align:center}.grupo-card{align-items:center;background:#f9f9f9;border-radius:8px;display:flex;justify-content:space-between;margin-bottom:15px;padding:20px;transition:transform .2s ease}.grupo-card:hover{box-shadow:0 4px 8px #0000001a;transform:translateY(-2px)}.grupo-info h3{color:#333;font-size:18px;margin:0 0 8px}.grupo-info p{color:#666;font-size:14px;margin:0 0 8px}.usuarios-online{border-radius:12px;display:inline-block;font-size:12px;font-weight:500;padding:4px 12px}.unirse-btn,.usuarios-online{background:#4caf50;color:#fff}.unirse-btn{border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:600;padding:10px 30px;transition:background .3s ease}.unirse-btn:hover{background:#45a049}.chats-list h2{color:#333;margin-bottom:20px;margin-top:0}.no-contactos{color:#999;padding:40px;text-align:center}.contacto-card{align-items:center;background:#f9f9f9;border-radius:8px;cursor:pointer;display:flex;margin-bottom:10px;padding:15px 20px;transition:all .2s ease}.contacto-card:hover{background:#e8f5e9;transform:translateX(5px)}.contacto-info{align-items:center;display:flex;gap:12px}.estado-icon{font-size:12px}.contacto-nombre{color:#333;font-size:16px;font-weight:500}.badge-sin-leer{background-color:#f44;border-radius:50%;color:#fff;display:inline-block;font-size:12px;font-weight:700;margin-left:8px;min-width:20px;padding:2px 7px;text-align:center}