/* Retro Messenger by Black Ring Business — estilos v2 */
:root{
  --tb1:#0a5fe3;--tb2:#0756d6;--tbline:#0831d9;--tbtxt:#fff;--tbshadow:#0b2b6e;--tbin1:#7a9ee4;--tbin2:#6f94dd;
  --chrome:#ece9d8;--panel:#fff;--panel2:#f4f6fa;--line:#d4d0c8;--sel:#316ac5;--selbg:#dbe6f6;--hdr1:#fff;--hdr2:#e3edf9;--hdrline:#a9c0e0;
  --desk1:#5a8fd0;--desk2:#2a5a9a;--desk3:#1b3f73;--task1:#3168d5;--task2:#245edb;--task3:#1941a5;--tray1:#0f9bea;--tray2:#0a6cb7;--start1:#3c9b3c;--start2:#237023;
  --accent:#e8580c;--gold:#d4af37;--text:#000;--muted:#555;--btn1:#fff;--btn2:#d8d0c4;--btnline:#003c74;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
[data-theme=silver]{--tb1:#c2c6d1;--tb2:#9da4b3;--tbline:#8b93a5;--tbtxt:#1a1a1a;--tbshadow:transparent;--tbin1:#dcdfe6;--tbin2:#c9cdd6;--chrome:#e6e7ea;--sel:#4a5d82;--selbg:#dfe3ec;--hdr2:#e9ebf0;--hdrline:#b7bcc8;
  --desk1:#8d99ad;--desk2:#5a6679;--desk3:#3a4453;--task1:#b9bfcb;--task2:#9ea6b6;--task3:#7a8393;--tray1:#8d99ad;--tray2:#5f6b7f;--start1:#5c6b82;--start2:#3a4453}
[data-theme=olive]{--tb1:#8fa65a;--tb2:#6f8a3c;--tbline:#5c7330;--tbshadow:#3a4a1c;--tbin1:#b7c48d;--tbin2:#a3b47a;--chrome:#ece9d8;--sel:#6f8a3c;--selbg:#e4ead0;--hdr2:#eef2e2;--hdrline:#b8c48f;
  --desk1:#9fb36a;--desk2:#5f7a35;--desk3:#3b4d1f;--task1:#8fa65a;--task2:#7a9345;--task3:#55682c;--tray1:#a0b56a;--tray2:#6f8a3c;--start1:#3c9b3c;--start2:#237023}
[data-theme=blackring]{--tb1:#1c1c1c;--tb2:#0a0a0a;--tbline:#d4af37;--tbtxt:#f5e6b8;--tbshadow:#000;--tbin1:#3a3a3a;--tbin2:#262626;--chrome:#1f1f1f;--panel:#141414;--panel2:#1b1b1b;--line:#333;--sel:#d4af37;--selbg:#2a2412;--hdr1:#1d1d1d;--hdr2:#111;--hdrline:#5a4a1a;
  --desk1:#2a2a2a;--desk2:#121212;--desk3:#000;--task1:#1e1e1e;--task2:#141414;--task3:#000;--tray1:#2a2412;--tray2:#111;--start1:#d4af37;--start2:#9a7b1c;--text:#f0e8d0;--muted:#b8ad8a;--btn1:#3a3a3a;--btn2:#1f1f1f;--btnline:#d4af37;--accent:#d4af37}
[data-theme=blackring] input,[data-theme=blackring] textarea,[data-theme=blackring] select{background:#222;color:#f0e8d0;border-color:#5a4a1a}
[data-theme=blackring] .m .who{color:#d4af37}
[data-theme=blackring] .btn{color:#f0e8d0}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{font-family:Tahoma,Verdana,"Segoe UI",sans-serif;font-size:12px;color:var(--text);overflow:hidden;background:var(--desk2) radial-gradient(ellipse at 50% 100%,var(--desk1) 0,var(--desk2) 60%,var(--desk3) 100%);touch-action:manipulation}
button,input,select,textarea{font:inherit}
a{color:#0645ad}
.hidden{display:none!important}
.muted{color:var(--muted)}
.gold{color:var(--gold)}

/* ---------- ventana ---------- */
.win{position:absolute;display:flex;flex-direction:column;background:var(--chrome);border:1px solid var(--tbline);border-radius:8px 8px 0 0;box-shadow:0 4px 18px rgba(0,0,0,.45);min-width:260px;overflow:hidden;user-select:none;color:var(--text)}
.win.active{z-index:50}
.tb{height:30px;display:flex;align-items:center;padding:0 4px 0 8px;color:var(--tbtxt);font-weight:bold;font-size:12px;cursor:move;flex:none;background:linear-gradient(var(--tb1) 0,var(--tb2) 10%,var(--tb1) 30%,var(--tb2) 60%,var(--tb1) 100%);text-shadow:1px 1px 0 var(--tbshadow);border-bottom:1px solid var(--tbline)}
.win:not(.active) .tb{background:linear-gradient(var(--tbin1),var(--tbin2));text-shadow:none}
.tb .ico{width:18px;height:18px;margin-right:6px;flex:none;display:grid;place-items:center;font-size:14px}
.tb .ico img{width:16px;height:16px;border-radius:2px;object-fit:cover}
.tb .t{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tb .back{display:none}
.tb button{width:22px;height:22px;margin-left:2px;border:1px solid #fff;border-radius:3px;color:#fff;font-size:12px;font-weight:bold;line-height:1;cursor:pointer;background:linear-gradient(#5f9af5,#2f6ddc);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);padding:0}
.tb button.x{background:linear-gradient(#e89a7c,#c84a24)}
[data-theme=blackring] .tb button{background:linear-gradient(#444,#222);border-color:#d4af37}
[data-theme=blackring] .tb button.x{background:linear-gradient(#8a2b1a,#5a1a0e)}
.body{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--panel);border:3px solid var(--tbline);border-top:0;border-radius:0 0 2px 2px}
.menubar{display:flex;gap:2px;background:var(--chrome);padding:2px 4px;border-bottom:1px solid var(--line);flex:none;overflow-x:auto}
.menubar span{padding:2px 7px;cursor:default;white-space:nowrap;border-radius:2px}
.menubar span:hover{background:var(--sel);color:#fff}
.shake{animation:shake .5s linear 2}
@keyframes shake{0%,100%{transform:translate(0,0)}10%{transform:translate(-8px,4px)}20%{transform:translate(8px,-6px)}30%{transform:translate(-7px,-4px)}40%{transform:translate(6px,6px)}50%{transform:translate(-8px,2px)}60%{transform:translate(7px,-5px)}70%{transform:translate(-5px,5px)}80%{transform:translate(6px,-3px)}90%{transform:translate(-4px,2px)}}
.flash .tb{animation:flash 1s steps(2) infinite}
@keyframes flash{to{background:linear-gradient(#f5a623,#d98a0a)}}

/* ---------- botones / campos ---------- */
.btn{padding:4px 14px;border:1px solid var(--btnline);border-radius:3px;background:linear-gradient(var(--btn1),#ecebe5 86%,var(--btn2));cursor:pointer;box-shadow:inset 1px 1px 0 #fff;color:#000;min-height:28px;white-space:nowrap}
[data-theme=blackring] .btn{background:linear-gradient(#3a3a3a,#262626);box-shadow:none}
.btn:hover{border-color:#ffc73c;box-shadow:inset 0 0 0 1px #fdd27c}
.btn:active{background:var(--btn2)}
.btn.primary{font-weight:bold}
.btn.gold{background:linear-gradient(#f3dd8c,#d4af37 80%,#b8962a);border-color:#8a6d1c;color:#1a1200;font-weight:bold}
.btn.danger{color:#a00}
.btn:disabled{opacity:.5;cursor:default}
.field{display:block;margin:8px 0 2px;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],select,textarea{width:100%;padding:5px 6px;border:1px solid #7f9db9;font-size:13px;background:#fff;color:#000;border-radius:2px;outline:0}
input:focus,textarea:focus,select:focus{border-color:var(--sel);box-shadow:0 0 0 2px rgba(49,106,197,.2)}
.chk{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--muted)}
.chk input{width:16px;height:16px;margin:0}
.err{color:#c00;margin-top:6px;min-height:14px}
.row{display:flex;gap:8px;align-items:center}
.row>*{flex:1}
.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:8px}
.tabs span,.tabs button{padding:6px 12px;cursor:pointer;border:1px solid transparent;border-bottom:0;border-radius:3px 3px 0 0;color:var(--muted);background:none;font:inherit;-webkit-appearance:none}
.tabs span.on,.tabs button.on{background:var(--panel);border-color:var(--line);color:var(--text);font-weight:bold;margin-bottom:-1px}

/* ---------- login ---------- */
#login{width:320px;left:calc(50% - 160px);top:40px;max-height:calc(100% - 80px)}
#login .body{background:linear-gradient(var(--panel),#e9f1fb 60%,#cfe0f5);align-items:stretch;padding:0;overflow:auto}
[data-theme=blackring] #login .body{background:linear-gradient(#141414,#0a0a0a)}
.brand{background:#0b0b0b;color:#f5e6b8;padding:16px 14px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;border-bottom:2px solid var(--gold)}
.brand .ring{width:54px;height:54px}
.brand b{font-size:15px;letter-spacing:.5px}
.brand small{color:var(--gold);font-size:10px;letter-spacing:2px;text-transform:uppercase}
.loginbox{padding:10px 14px 14px}
.loginbox .btn{width:100%;margin-top:10px}
.loginbox .alt{text-align:center;margin-top:10px;color:var(--muted)}
.loginbox .alt a{cursor:pointer}
.loginbox .btn.big{min-height:46px;font-size:15px;margin-top:14px}
.loginbox .alt.far{margin-top:30px;padding-top:12px;border-top:1px dashed var(--line)}

/* ---------- invitación ---------- */
.invite{margin:0 -14px 10px;padding:10px 14px 12px;background:linear-gradient(#fff8dc,#fff 70%);border-bottom:1px solid #e6d38a}
[data-theme=blackring] .invite{background:#1a1708;border-bottom-color:#5a4a1a}
.invite .who{display:flex;gap:10px;align-items:center;font-size:13px;line-height:1.35}
.invite .who .av{width:44px;height:44px;border:1px solid #9ab;border-radius:4px;background:#fff;display:grid;place-items:center;font-size:28px;overflow:hidden;flex:none}
.invite .who .av img{width:100%;height:100%;object-fit:cover}
.invite .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.step{position:relative;background:#fff;border:1px solid #d9d3c0;border-radius:8px;padding:8px;text-align:center;font-size:11px;line-height:1.35;color:#333}
.step img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;border:1px solid #cfd6e0;border-radius:5px;background:#eef;margin-bottom:6px}
.step i{position:absolute;top:2px;left:2px;width:26px;height:26px;border-radius:50%;background:var(--gold);color:#1a1200;font-style:normal;font-weight:bold;font-size:14px;display:grid;place-items:center;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.step b{display:block;font-size:12px;margin-bottom:2px}
.step span{display:block;color:#555}
#login.wide{width:520px;left:calc(50% - 260px);top:20px;max-height:calc(100% - 60px)}
@media (max-width:819px){.invite .steps{grid-template-columns:1fr}.step{display:grid;grid-template-columns:120px 1fr;grid-template-rows:auto auto;gap:4px 10px;text-align:left;align-items:start}.step img{margin:0;aspect-ratio:3/4;grid-row:1/span 2}.step b{grid-column:2;font-size:13px;margin-top:4px}.step span{grid-column:2}.step i{top:-6px;left:-6px}}

/* ---------- lista de contactos ---------- */
#main{width:290px;height:580px;left:40px;top:30px}
#main .body{background:var(--chrome)}
.hdr{background:linear-gradient(var(--hdr1),var(--hdr2));padding:8px 8px 6px;border-bottom:1px solid var(--hdrline);display:flex;gap:8px;flex:none}
.bigav{width:52px;height:52px;border:1px solid #7f9db9;border-radius:3px;background:#fff;display:grid;place-items:center;font-size:32px;flex:none;position:relative;cursor:pointer;overflow:visible}
.bigav img{width:100%;height:100%;object-fit:cover;border-radius:2px}
.dot{position:absolute;right:-4px;bottom:-4px;width:13px;height:13px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #888}
.hdr .me{flex:1;min-width:0}
.hdr .nick{font-weight:bold;font-size:13px;display:flex;align-items:center;gap:4px;cursor:pointer;flex-wrap:wrap}
.hdr .nick .st{color:var(--muted);font-weight:normal}
.hdr .nick .arrow{font-size:8px}
.hdr .pm{color:var(--muted);margin-top:3px;cursor:text;border:1px solid transparent;padding:1px 3px;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:2px}
.hdr .pm:hover{border-color:#7f9db9;background:#fff}
.hdr .pm input{width:100%;border:0;font:inherit;outline:0;background:#fff;padding:0}
.hdr .lst{color:#1a3b73;margin-top:2px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-theme=blackring] .hdr .lst{color:var(--gold)}
.tools{display:flex;gap:2px;padding:3px 6px;border-bottom:1px solid var(--line);background:var(--panel2);flex:none}
.tools b{width:28px;height:28px;display:grid;place-items:center;border:1px solid transparent;border-radius:2px;cursor:pointer;font-size:15px;position:relative}
.tools b:hover{border-color:var(--sel);background:var(--selbg)}
.tools b .badge{position:absolute;top:-4px;right:-4px}
.search{display:flex;gap:4px;padding:4px 6px;border-bottom:1px solid var(--line);background:var(--panel2);flex:none}
.search input{flex:1;padding:4px 6px}
#contacts{flex:1;overflow:auto;padding:4px 0;background:var(--panel);-webkit-overflow-scrolling:touch}
.grp{padding:5px 8px;color:#1a3b73;font-weight:bold;cursor:pointer;display:flex;gap:4px;align-items:center;user-select:none}
[data-theme=blackring] .grp{color:var(--gold)}
.grp .tri{font-size:8px;width:10px}
.grp.closed+.items{display:none}
.c{display:flex;align-items:center;gap:7px;padding:5px 8px 5px 20px;cursor:pointer;position:relative;min-height:34px}
.c:hover,.c:active{background:var(--selbg)}
.c .st{width:24px;height:24px;flex:none;display:grid;place-items:center;font-size:16px;position:relative;border-radius:3px;overflow:visible}
.c .st img{width:24px;height:24px;object-fit:cover;border-radius:3px;border:1px solid #9ab}
.c .st::after{content:"";position:absolute;right:-3px;bottom:-2px;width:8px;height:8px;border-radius:50%;background:var(--sc,#3fb64a);border:1px solid #fff}
.c.off .st{filter:grayscale(1);opacity:.7}
.c.nodot .st::after{display:none}
.c .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;line-height:1.3}
.c .n small{color:var(--muted);font-weight:normal}
.c .n em{color:var(--muted);font-style:normal}
.c .n .l{display:block;color:#1a3b73;font-size:10px}
[data-theme=blackring] .c .n .l{color:var(--gold)}
.badge{background:var(--accent);color:#fff;border-radius:9px;padding:0 6px;font-size:10px;font-weight:bold;min-width:18px;text-align:center;line-height:16px}
.c .badge{position:absolute;right:10px}
.c .acts{display:flex;gap:4px}
.c .acts .btn{padding:2px 8px;min-height:22px;font-size:11px}
.brandbar{height:46px;border-top:1px solid var(--hdrline);background:linear-gradient(var(--hdr2),var(--hdr1));display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 8px;font-size:10px;color:#1a3b73;flex:none}
.brandbar .ring{width:22px;height:22px}
.brandbar b{display:block;font-size:11px}
.brandbar a{color:inherit;text-decoration:none}
[data-theme=blackring] .brandbar{color:var(--gold);background:#0b0b0b}

/* ---------- Mundo Black Ring ---------- */
.menubar span.gold{color:#8a6d1c;font-weight:bold}
[data-theme=blackring] .menubar span.gold{color:var(--gold)}
.tools b.brbbtn{background:#0b0b0b;border-color:#d4af37}
.brandbar{cursor:pointer;justify-content:flex-start}
.brandbar:hover{filter:brightness(1.05)}
.brandbar span{display:block;font-size:10px;opacity:.8}
.brandbar .yt{margin-left:auto;background:#e00;color:#fff;font-weight:bold;border-radius:4px;padding:3px 6px;font-size:10px;opacity:1}
#brb{width:520px;height:600px;left:calc(50% - 160px);top:30px;max-height:calc(100% - 50px)}
#brb .body{background:#0b0b0b;color:#f0e8d0;overflow:hidden}
.brbhero{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:2px solid var(--gold);background:linear-gradient(#1a1a1a,#0b0b0b);flex:none}
.brbhero .ring{width:40px;height:40px;flex:none}
.brbhero b{display:block;font-size:15px;color:#f5e6b8}
.brbhero small{color:#b8ad8a}
.brbbody{flex:1;overflow:auto;padding:10px 12px 14px;-webkit-overflow-scrolling:touch}
.brbbody h5{margin:12px 0 6px;color:var(--gold);font-size:12px;letter-spacing:1px;text-transform:uppercase}
.brbbody h5:first-child{margin-top:2px}
.yt-sub{display:flex;align-items:center;justify-content:center;gap:8px;background:#e00;color:#fff;text-decoration:none;font-weight:bold;border-radius:6px;padding:10px;font-size:14px;margin-bottom:8px}
.yt-sub:hover{background:#c00}
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vid{text-decoration:none;color:#f0e8d0;display:block}
.vid img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:5px;border:1px solid #333;display:block;background:#222}
.vid span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;line-height:1.3;margin-top:4px;color:#ddd}
.vid:hover img{border-color:var(--gold)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tile{display:flex;gap:9px;align-items:center;padding:9px 10px;background:#161616;border:1px solid #2c2c2c;border-radius:7px;text-decoration:none;color:#f0e8d0;min-height:50px}
.tile:hover,.tile:active{border-color:var(--gold);background:#1d1a10}
.tile i{font-style:normal;font-size:22px;width:28px;text-align:center;flex:none}
.tile b{display:block;font-size:12px}
.tile small{display:block;color:#a99f80;font-size:10.5px;line-height:1.25}
.brbwa{display:block;flex:none;text-align:center;background:#1f8f4e;color:#fff;font-weight:bold;text-decoration:none;padding:11px;font-size:13px}
.brbwa:hover{background:#18763f}
.loginbox .loginlinks{margin-top:8px;font-size:11px}
@media (max-width:819px){.vids{grid-template-columns:repeat(2,1fr)}.tile{min-height:56px}.brbwa{padding:14px 14px calc(14px + var(--safe-b))}}

/* ---------- menús ---------- */
.menu{position:fixed;background:#fff;color:#000;border:1px solid #777;box-shadow:2px 2px 6px rgba(0,0,0,.35);z-index:3000;padding:2px;min-width:190px;max-height:70vh;overflow:auto}
.menu div{padding:7px 20px 7px 28px;cursor:default;position:relative;white-space:nowrap}
.menu div:hover{background:var(--sel);color:#fff}
.menu div i{position:absolute;left:8px;top:9px;width:11px;height:11px;border-radius:50%}
.menu div.ico{padding-left:30px}
.menu div.ico::before{content:attr(data-ico);position:absolute;left:8px;top:6px;font-style:normal}
.menu hr{border:0;border-top:1px solid #ccc;margin:2px 0}
.menu div.dis{color:#999}
.menu div.dis:hover{background:transparent;color:#999}

/* ---------- chat ---------- */
.chat{width:560px;height:480px}
.chat .body{flex-direction:column}
.ctools{display:flex;gap:2px;padding:3px 6px;border-bottom:1px solid var(--line);background:linear-gradient(var(--hdr1),var(--hdr2));flex:none;overflow-x:auto;scrollbar-width:none}
.ctools::-webkit-scrollbar{display:none}
.ctools b{display:flex;flex-direction:column;align-items:center;padding:2px 7px;border:1px solid transparent;border-radius:2px;cursor:pointer;font-weight:normal;font-size:10px;gap:1px;white-space:nowrap;color:var(--text)}
.ctools b i{font-style:normal;font-size:16px}
.ctools b:hover{border-color:var(--sel);background:var(--selbg)}
.cmain{flex:1;display:flex;min-height:0}
.ccol{flex:1;display:flex;flex-direction:column;min-width:0}
.to{padding:4px 8px;border-bottom:1px solid var(--line);color:var(--muted);background:var(--panel2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.to b{color:var(--text)}
.log{flex:1;overflow:auto;padding:6px 8px;background:var(--panel);font-size:13px;line-height:1.4;user-select:text;-webkit-user-select:text;-webkit-overflow-scrolling:touch;position:relative}
.log .more{display:block;margin:0 auto 8px;font-size:11px}
.m{margin-bottom:7px;word-wrap:break-word;overflow-wrap:anywhere}
.m .who{color:var(--muted)}
.m .txt{padding-left:12px;white-space:pre-wrap}
.m.sys{color:#777;font-style:italic;text-align:center;margin:8px 0;font-size:12px}
.m.nudge{color:#444;background:#fff7d6;border:1px dashed #d8b84a;padding:5px 8px;border-radius:3px}
[data-theme=blackring] .m.nudge{background:#2a2412;color:#f0e8d0}
.m .time{color:#999;font-size:10px;margin-left:6px}
.m.me .who{color:#444}
.m a{word-break:break-all}
.emo{width:19px;height:19px;vertical-align:-5px}
.m .img{display:block;max-width:min(320px,100%);max-height:260px;border:1px solid var(--line);border-radius:4px;margin:4px 0 0 12px;cursor:zoom-in;background:#eee}
.filecard{display:flex;gap:8px;align-items:center;margin:4px 0 0 12px;padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:var(--panel2);max-width:320px;text-decoration:none;color:inherit}
.filecard .fi{font-size:24px}
.filecard .fn{font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filecard .fs{color:var(--muted);font-size:11px}
.aud{display:flex;gap:8px;align-items:center;margin:4px 0 0 12px;padding:6px 8px;border:1px solid var(--line);border-radius:20px;background:var(--panel2);max-width:320px;min-width:220px}
.aud .pb{width:30px;height:30px;border-radius:50%;border:1px solid var(--btnline);background:linear-gradient(var(--btn1),var(--btn2));cursor:pointer;display:grid;place-items:center;font-size:13px;flex:none;color:#000}
.aud .bar{flex:1;height:6px;background:#cfd6e0;border-radius:3px;position:relative;cursor:pointer}
.aud .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--sel);border-radius:3px;width:0}
.aud .du{font-size:11px;color:var(--muted);min-width:34px;text-align:right}
.pics{width:116px;border-left:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8px 6px;background:var(--panel2);flex:none}
.pic{width:98px;height:98px;border:1px solid #7f9db9;background:#fff;display:grid;place-items:center;font-size:56px;border-radius:3px;box-shadow:1px 1px 3px rgba(0,0,0,.2);overflow:hidden}
.pic img{width:100%;height:100%;object-fit:cover}
.fmt{display:flex;gap:2px;padding:3px 6px;border-top:1px solid var(--line);background:var(--chrome);align-items:center;flex-wrap:nowrap;flex:none;overflow-x:auto;scrollbar-width:none}
.fmt::-webkit-scrollbar{display:none}
.fmt b{width:28px;height:26px;display:grid;place-items:center;border:1px solid transparent;border-radius:2px;cursor:pointer;font-size:14px;font-weight:normal;position:relative;flex:none}
.fmt b:hover{border-color:var(--sel);background:var(--selbg)}
.fmt .sep{width:1px;height:18px;background:#b4b0a8;margin:0 3px;flex:none}
.fmt .cur{width:14px;height:14px;border:1px solid #555;border-radius:2px}
.inrow{display:flex;gap:6px;padding:4px 6px 6px;background:var(--chrome);flex:none;align-items:flex-end}
.inrow textarea{flex:1;height:54px;resize:none;border:1px solid #7f9db9;font-size:13px;padding:5px;outline:0;line-height:1.35}
.inrow .bts{display:flex;flex-direction:column;gap:4px}
.inrow .btn{width:76px}
.sbar{padding:2px 8px;border-top:1px solid var(--line);background:var(--chrome);color:var(--muted);height:22px;display:flex;align-items:center;gap:6px;font-size:11px;white-space:nowrap;overflow:hidden;flex:none}
.sbar .w{display:inline-block;width:12px;height:12px;background:#777;border-radius:2px;animation:blink 1s steps(2) infinite;flex:none}
@keyframes blink{to{opacity:.2}}
.rec{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#ffe9e9;border-top:1px solid #e9a0a0;flex:none}
.rec .r{width:12px;height:12px;border-radius:50%;background:#e23b2e;animation:blink 1s steps(2) infinite}
.rec .t{font-weight:bold;min-width:40px}
.rec .btn{min-height:26px;padding:2px 10px}
.drop{position:absolute;inset:0;background:rgba(49,106,197,.25);border:3px dashed var(--sel);display:grid;place-items:center;font-size:16px;font-weight:bold;color:#1a3b73;z-index:5;pointer-events:none}
.up{font-size:11px;color:var(--muted);padding:2px 8px;background:var(--panel2);border-top:1px solid var(--line)}
.up i{display:block;height:4px;background:var(--sel);border-radius:2px;width:0;transition:width .2s}
/* escenas */
.log[data-scene=clouds]{background:#fff linear-gradient(#dff0ff,#fff 40%)}
.log[data-scene=stars]{background:#0b1a3a radial-gradient(#fff 1px,transparent 1.5px) 0 0/40px 40px;color:#e9f1ff}
.log[data-scene=stars] .m .who{color:#9db8e8}
.log[data-scene=gold]{background:#fffbe9 linear-gradient(135deg,#fff8dc,#fff 50%,#f8ecc0)}
.log[data-scene=paper]{background:#fdfaf2 repeating-linear-gradient(transparent 0 23px,#e6dcc3 23px 24px)}
.log[data-scene=grid]{background:#fff linear-gradient(#eef2f7 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,#eef2f7 1px,transparent 1px) 0 0/20px 20px}
.log[data-scene=sunset]{background:linear-gradient(#ffe0b3,#ffb3c6 60%,#c9a7ff)}
.log[data-scene=ocean]{background:linear-gradient(#d8f3ff,#8fd3f4 70%,#4a9fd8)}
.log[data-scene=retro]{background:#000 repeating-linear-gradient(transparent 0 2px,rgba(0,255,120,.06) 2px 3px);color:#8fff9f;font-family:"Courier New",monospace}
.log[data-scene=retro] .m .who{color:#4ec964}

/* paneles emoticonos / guiños */
.popup{position:fixed;background:#fff;color:#000;border:1px solid #777;box-shadow:0 4px 14px rgba(0,0,0,.35);padding:5px;z-index:4000;max-width:min(92vw,330px)}
.popup.sheet{max-width:none;border:0;border-top:2px solid var(--sel);border-radius:12px 12px 0 0;padding:10px 10px calc(10px + var(--safe-b));max-height:46vh;overflow:auto;box-shadow:0 -6px 20px rgba(0,0,0,.35)}
.popup.sheet.emopanel{display:grid;grid-template-columns:repeat(auto-fill,44px);justify-content:center;gap:4px}
.popup.sheet.emopanel span{width:44px;height:44px}
.popup.sheet.emopanel span img{width:28px;height:28px}
.popup.sheet.winks{display:grid;grid-template-columns:repeat(auto-fill,70px);justify-content:center;gap:6px}
.popup.sheet.winks span{height:60px;font-size:34px}
.popup.sheet.colors{display:grid;grid-template-columns:repeat(auto-fill,40px);justify-content:center;gap:6px}
.popup.sheet.colors span{width:40px;height:40px}
.emopanel{display:grid;grid-template-columns:repeat(8,34px);gap:2px;max-height:50vh;overflow:auto}
.emopanel span{width:34px;height:34px;display:grid;place-items:center;cursor:pointer;border:1px solid transparent;border-radius:2px}
.emopanel span img{width:22px;height:22px}
.emopanel span:hover{border-color:var(--sel);background:var(--selbg)}
.winks{display:grid;grid-template-columns:repeat(4,64px);gap:4px}
.winks span{height:54px;display:grid;place-items:center;font-size:32px;cursor:pointer;border:1px solid #ccc;border-radius:3px}
.winks span:hover{border-color:var(--sel);background:var(--selbg)}
.colors{display:grid;grid-template-columns:repeat(8,26px);gap:3px}
.colors span{width:26px;height:26px;border:1px solid #555;cursor:pointer;border-radius:2px}
.winkplay{position:absolute;inset:0;display:grid;place-items:center;font-size:130px;pointer-events:none;animation:wink 2.5s ease-out forwards;z-index:5}
@keyframes wink{0%{transform:scale(0) rotate(-30deg);opacity:0}20%{transform:scale(1.2) rotate(5deg);opacity:1}80%{transform:scale(1);opacity:1}100%{transform:scale(1.4);opacity:0}}

/* ---------- diálogos ---------- */
.dlg{width:360px;left:calc(50% - 180px);top:80px;max-height:calc(100% - 120px)}
.dlg .body{padding:12px;overflow:auto;gap:4px}
.dlg .foot{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
.results{max-height:40vh;overflow:auto;border:1px solid var(--line);margin-top:8px;background:var(--panel)}
.results .c{padding-left:8px}
.pick{max-height:45vh;overflow:auto;border:1px solid var(--line);background:var(--panel);margin-top:6px}
.pick label{display:flex;gap:8px;align-items:center;padding:6px 8px;cursor:pointer;border-bottom:1px solid var(--line)}
.pick label:hover{background:var(--selbg)}
.reqbox{display:flex;gap:10px;align-items:center;padding:8px;background:var(--panel2);border:1px solid var(--line);border-radius:4px;margin-bottom:8px}
.reqbox .av{font-size:34px;width:48px;height:48px;display:grid;place-items:center;border:1px solid #9ab;background:#fff;border-radius:3px;overflow:hidden}
.reqbox .av img{width:100%;height:100%;object-fit:cover}

/* ---------- perfil ---------- */
#profile{width:440px;height:600px;left:calc(50% - 220px);top:20px;max-height:calc(100% - 40px)}
#profile .body{overflow:hidden}
.ptabs{display:flex;background:var(--chrome);border-bottom:1px solid var(--line);flex:none;overflow-x:auto;scrollbar-width:none}
.ptabs span{padding:8px 12px;cursor:pointer;white-space:nowrap;color:var(--muted);border-bottom:2px solid transparent}
.ptabs span.on{color:var(--text);font-weight:bold;border-bottom-color:var(--sel)}
.pbody{flex:1;overflow:auto;padding:12px}
.pbody section{display:none}
.pbody section.on{display:block}
.pbody h4{margin:14px 0 4px;color:#1a3b73;border-bottom:1px solid var(--line);padding-bottom:3px}
[data-theme=blackring] .pbody h4{color:var(--gold)}
.pbody h4:first-child{margin-top:0}
.avrow{display:flex;gap:12px;align-items:center}
.avrow .bigav{width:96px;height:96px;font-size:60px}
.avrow .bigav .dot{display:none}
.emojis{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.emojis span{width:34px;height:34px;display:grid;place-items:center;font-size:22px;border:2px solid transparent;border-radius:3px;cursor:pointer;background:#fff}
.emojis span.sel{border-color:var(--sel)}
.swatches{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sw{width:64px;height:44px;border:2px solid #999;border-radius:4px;cursor:pointer;display:grid;place-items:end center;font-size:10px;padding-bottom:2px;color:#fff;text-shadow:0 0 2px #000}
.sw.sel{border-color:#f5a623;box-shadow:0 0 0 2px #f5a623}
.pfoot{padding:8px 12px;border-top:1px solid var(--line);background:var(--chrome);display:flex;gap:8px;justify-content:flex-end;flex:none}
.sessions div{padding:4px 0;border-bottom:1px dotted var(--line)}

/* ---------- barra de tareas ---------- */
#taskbar{position:fixed;left:0;right:0;bottom:0;height:calc(32px + var(--safe-b));padding-bottom:var(--safe-b);background:linear-gradient(var(--task1),var(--task2) 8%,var(--task2) 90%,var(--task3));display:flex;align-items:center;z-index:1000;box-shadow:0 -1px 0 #4b7ee8}
#start{height:32px;padding:0 12px 0 8px;display:flex;align-items:center;gap:6px;color:#fff;font-weight:bold;font-style:italic;font-size:14px;background:linear-gradient(var(--start1),var(--start2));border-radius:0 12px 12px 0;text-shadow:1px 1px 1px #124;cursor:pointer;flex:none}
#start img{width:20px;height:20px}
#tasks{flex:1;display:flex;gap:3px;padding:0 6px;overflow-x:auto;scrollbar-width:none;height:32px;align-items:center}
#tasks::-webkit-scrollbar{display:none}
.task{height:25px;padding:0 8px;min-width:110px;max-width:170px;color:#fff;display:flex;align-items:center;gap:5px;border-radius:3px;cursor:pointer;background:linear-gradient(#3c81f3,#2a67d5);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;flex:none}
.task.on{background:linear-gradient(#1a4ba0,#1e55b5);box-shadow:inset 1px 1px 2px rgba(0,0,0,.5)}
.task.flash{animation:tflash .8s steps(2) infinite}
@keyframes tflash{to{background:#f5a623}}
.task .badge{margin-left:auto}
[data-theme=blackring] .task{background:linear-gradient(#333,#1a1a1a);border:1px solid #5a4a1a}
[data-theme=blackring] .task.on{background:#2a2412}
[data-theme=silver] .task{background:linear-gradient(#d8dce4,#b9bfcb);color:#111}
[data-theme=silver] .task.on{background:#8d99ad}
[data-theme=silver] #start{color:#fff}
#tray{height:32px;padding:0 10px;display:flex;align-items:center;gap:8px;color:#fff;background:linear-gradient(var(--tray1),var(--tray2));border-left:1px solid rgba(0,0,0,.2);font-size:11px;flex:none}
#tray .ti{font-size:14px;cursor:pointer}
.toast{position:fixed;right:10px;bottom:calc(40px + var(--safe-b));width:230px;background:linear-gradient(#fff,#e3edf9);color:#000;border:1px solid var(--tbline);border-radius:5px;padding:8px 10px;box-shadow:0 3px 10px rgba(0,0,0,.4);z-index:1500;animation:toast 4.5s ease-in-out forwards;cursor:pointer;display:flex;gap:8px;align-items:center}
.toast .a{font-size:26px;width:34px;height:34px;display:grid;place-items:center;flex:none;overflow:hidden;border-radius:3px}
.toast .a img{width:100%;height:100%;object-fit:cover}
.toast b{display:block;color:#1a3b73;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast div{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast.sticky{animation:none}
@keyframes toast{0%{transform:translateY(40px);opacity:0}8%,88%{transform:none;opacity:1}100%{transform:translateY(40px);opacity:0}}
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:grid;place-items:center;z-index:5000;cursor:zoom-out}
#lightbox img{max-width:96vw;max-height:92vh;object-fit:contain}
#lightbox a{position:absolute;bottom:14px;right:14px;color:#fff}
.offline{position:fixed;top:0;left:0;right:0;background:#c84a24;color:#fff;text-align:center;padding:4px;z-index:6000;font-size:11px}

/* ---------- móvil ---------- */
@media (max-width:819px){
  body{font-size:13px}
  .win{left:0!important;top:0!important;width:100vw!important;width:100dvw!important;height:calc(100dvh - 48px - var(--safe-b))!important;border-radius:0;min-width:0;box-shadow:none;border:0;max-height:none!important}
  .win.active{z-index:60}
  .tb{cursor:default;height:calc(44px + var(--safe-t));padding-top:var(--safe-t);font-size:15px}
  .tb .back{display:grid;place-items:center;width:34px;height:34px;margin-right:4px;font-size:20px;cursor:pointer;border-radius:4px}
  .tb .ico{width:26px;height:26px;font-size:18px}
  .tb .ico img{width:24px;height:24px}
  .tb button{width:32px;height:32px;font-size:15px}
  .tb button.min{display:none}
  .body{border-width:0}
  .menubar{display:none}
  .pics{display:none}
  .chat .ctools b{padding:2px 8px}
  .inrow textarea{height:44px}
  .inrow .bts{flex-direction:row}
  .inrow .btn{width:auto;padding:4px 12px}
  .inrow .btn.find{display:none}
  .fmt b{width:34px;height:30px;font-size:16px}
  #login{width:100vw!important;height:calc(100dvh - 48px - var(--safe-b))!important;top:0!important;left:0!important}
  #login .body{justify-content:flex-start}
  .loginbox{max-width:360px;margin:0 auto;width:100%}
  .c{min-height:44px;padding:6px 8px 6px 16px}
  .c .st{width:34px;height:34px;font-size:22px}
  .c .st img{width:34px;height:34px}
  .grp{padding:8px 10px;font-size:13px}
  .tools b{width:40px;height:36px;font-size:18px}
  .dlg{width:100vw!important}
  #profile{width:100vw!important}
  #taskbar{height:calc(48px + var(--safe-b))}
  #start{height:48px;padding:0 10px;font-size:0;border-radius:0}
  #start img{width:26px;height:26px}
  #tasks{height:48px}
  .task{height:36px;min-width:44px;max-width:150px;font-size:12px;padding:0 8px}
  .task .lbl{display:none}
  .task.on .lbl{display:inline}
  #tray{height:48px;padding:0 10px}
  #tray .clock{display:none}
  .toast{width:calc(100vw - 20px);left:10px;right:10px;bottom:calc(58px + var(--safe-b))}
  .emopanel{grid-template-columns:repeat(7,40px)}
  .emopanel span{width:40px;height:40px}
  .emopanel span img{width:26px;height:26px}
  .menu div{padding:11px 20px 11px 32px}
  .avrow .bigav{width:84px;height:84px}
}
@media (max-width:819px) and (orientation:landscape){.inrow textarea{height:38px}.tb{height:38px}}
@media (prefers-reduced-motion:reduce){.shake,.winkplay,.flash .tb,.task.flash{animation:none}}