/* Capa visual suave (inspirada en Gather): barra lateral de íconos, píldoras flotantes y tarjetas oscuras de vidrio.
   Se carga al final: solo presentación, no cambia ninguna función. */
:root {
  --s-bg:#e7ebe6; --s-rail:#f4f4f1; --s-ink:#262826; --s-mute:#8b8f8a; --s-line:rgba(38,40,38,.08);
  --s-dark:rgba(36,39,36,.72); --s-dark-line:rgba(255,255,255,.12); --s-on-dark:#f4f5f2;
  --s-r1:28px; --s-r2:22px; --s-r3:16px;
  --s-shadow:0 12px 40px rgba(20,28,20,.22); --s-shadow-soft:0 4px 18px rgba(20,28,20,.10);
  --s-blur:blur(18px) saturate(1.35);
}
body { background:var(--s-bg); color:var(--s-ink); }

/* ---------- estructura: barra de íconos | personas | mapa ---------- */
#app { grid-template-columns:72px 300px 1fr; gap:12px; padding:12px; }
html.nopanel #app { grid-template-columns:72px 1fr; }
html.nopanel #left { display:none; }

#rail { position:relative; z-index:12; background:var(--s-rail); border-radius:var(--s-r1); box-shadow:var(--s-shadow-soft); border:1px solid rgba(255,255,255,.8); display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 0 12px; min-height:0; }
#rail .rgrow { flex:1; }
.rl { position:relative; width:48px; height:48px; border:0; border-radius:var(--s-r3); background:transparent; color:#3a3d3a; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:background .15s, transform .12s, box-shadow .15s; }
.rl:hover { background:rgba(38,40,38,.07); }
.rl:active { transform:scale(.94); }
.rl.on { background:#fff; color:var(--s-ink); box-shadow:0 3px 12px rgba(20,28,20,.12); }
.rl:focus-visible, #ptoggle:focus-visible, #rmenu button:focus-visible { outline:3px solid rgba(122,92,255,.45); outline-offset:2px; }
.rl i, #ptoggle i { display:flex; }
.rl .rbadge { position:absolute; right:3px; top:2px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#d9453f; color:#fff; font:700 11px/1 var(--font); display:none; align-items:center; justify-content:center; border:2px solid var(--s-rail); box-sizing:content-box; }
.rlogo { width:52px; height:52px; margin-bottom:2px; border-radius:18px; background:#2b2d2b; box-shadow:0 6px 16px rgba(20,28,20,.28); }
.rlogo:hover { background:#383b38; }
.rlogo img { width:30px; height:30px; border-radius:9px; }
.rlogo .rchev { position:absolute; right:-6px; bottom:-6px; width:22px; height:22px; border-radius:50%; background:#fff; color:#333; border:1px solid var(--s-line); box-shadow:0 2px 6px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; }
.rkeys { display:flex; gap:3px; margin:-2px 0 2px; } .rkeys kbd { font:700 11px/1 var(--font); color:#6c706b; background:rgba(38,40,38,.07); border-radius:7px; padding:4px 6px; }
.rsep { width:30px; border:0; border-top:1px solid var(--s-line); margin:6px 0; }
#rmenu { display:none; position:absolute; left:66px; top:12px; min-width:220px; flex-direction:column; gap:2px; background:rgba(255,255,255,.96); backdrop-filter:var(--s-blur); border-radius:var(--s-r2); padding:8px; box-shadow:var(--s-shadow); border:1px solid var(--s-line); }
#rmenu.open { display:flex; animation:popin .16s ease-out; }
#rmenu button { background:transparent; color:var(--s-ink); border:0; border-radius:14px; padding:10px 12px; font:700 14px var(--font); text-align:left; cursor:pointer; box-shadow:none; }
#rmenu button:hover { background:rgba(38,40,38,.06); }

/* ---------- panel de personas: tarjeta clara y suave ---------- */
#left { background:rgba(255,255,255,.82); border-radius:var(--s-r1); box-shadow:var(--s-shadow-soft); border:1px solid rgba(255,255,255,.85); padding:16px 14px 12px; }
.brand { display:none; }
.floor { border-radius:999px; border:0; background:rgba(38,40,38,.06); box-shadow:none; color:#4a4e4a; font-weight:700; padding:9px 14px; }
.floor:hover { background:rgba(38,40,38,.1); }
#search { border:0; border-radius:999px; background:rgba(38,40,38,.06); padding:11px 16px; }
#search:focus { background:#fff; box-shadow:0 0 0 3px rgba(122,92,255,.28); }
.moodbtn { border:0; background:rgba(38,40,38,.06); border-radius:999px; box-shadow:none; }
.moodbtn:hover { border:0; background:rgba(38,40,38,.1); box-shadow:none; transform:none; }
.moodbtn.empty { border:1.5px dashed rgba(38,40,38,.2); background:transparent; }
#side h2 { color:var(--s-mute); }
.per { border-radius:18px; } .per:hover { background:rgba(38,40,38,.06); transform:none; }
.bd { background:rgba(38,40,38,.05); box-shadow:none; }

/* ---------- el mapa: fondo verde suave y degradado oscuro arriba ---------- */
#stage { border-radius:var(--s-r1); background:#dcefd6; border:0; box-shadow:var(--s-shadow-soft); }
#wrap:not(:has(#login))::after { content:""; position:absolute; left:0; right:0; top:0; height:170px; pointer-events:none; background:linear-gradient(rgba(28,32,28,.62), rgba(28,32,28,.28) 45%, transparent); z-index:1; }

#stage:has(#login) { background:radial-gradient(900px 600px at 30% 10%,#5b6a58,#2b302b 70%); }

/* ---------- barra superior flotante: píldoras ---------- */
#ptoggle, #roomchip, #status, #musicchip { background:var(--s-dark); backdrop-filter:var(--s-blur); -webkit-backdrop-filter:var(--s-blur); color:var(--s-on-dark); border:1px solid var(--s-dark-line); box-shadow:0 6px 22px rgba(10,16,10,.2); z-index:3; }
#ptoggle { position:absolute; left:14px; top:14px; width:44px; height:44px; border-radius:16px; padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; }
#ptoggle:hover { background:rgba(60,64,60,.8); }
#roomchip { left:66px; top:14px; height:44px; padding:0 18px; border-radius:16px; font-weight:700; letter-spacing:-.1px; }
#status { top:14px; height:auto; border-radius:999px; padding:10px 18px; font-weight:600; color:var(--s-on-dark); }
#status.warn { background:rgba(255,236,170,.92); color:#5e4300; border-color:rgba(255,255,255,.5); }
#musicchip { border-radius:999px; padding:9px 14px; } #musicchip button { color:var(--s-on-dark); }

/* ---------- barra inferior: píldora flotante oscura ---------- */
#bar { background:var(--s-dark); backdrop-filter:var(--s-blur); -webkit-backdrop-filter:var(--s-blur); border:1px solid var(--s-dark-line); border-radius:999px; padding:7px 12px; box-shadow:var(--s-shadow); z-index:3; }
#bar button { color:var(--s-on-dark); border-radius:20px; }
#bar button:hover { background:rgba(255,255,255,.12); transform:translateY(-1px); }
#bar button:active { background:rgba(255,255,255,.2); }
#bar .pri { background:rgba(255,255,255,.16); color:#fff; box-shadow:none; }
#bar .pri:hover { background:rgba(255,255,255,.24); } #bar .pri:active { background:rgba(255,255,255,.28); }
#bar .bg + .bg::before { background:linear-gradient(transparent,rgba(255,255,255,.22),transparent); }
#bar .tg:not(.live) { background:rgba(255,106,120,.16); color:#ffc0c7; } #bar .tg:not(.live):hover { background:rgba(255,106,120,.26); }
#bar .tg.live, #bar button.live { background:rgba(70,214,130,.2); color:#9af2bb; } #bar .tg.live:hover, #bar button.live:hover { background:rgba(70,214,130,.3); }
#bar .tg::after, #bar .tg2::after { border-color:rgba(36,39,36,.9); }
#bar button:focus-visible { outline:3px solid rgba(255,255,255,.55); }
#bar button i[data-ic] img { filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }

/* ---------- controles flotantes sueltos ---------- */
#zoom { background:var(--s-dark); backdrop-filter:var(--s-blur); border:1px solid var(--s-dark-line); border-radius:var(--s-r2); box-shadow:0 6px 22px rgba(10,16,10,.2); z-index:3; overflow:visible; }
#zoom button { color:var(--s-on-dark); width:44px; height:44px; position:relative; display:flex; align-items:center; justify-content:center; padding:0; border:0; background:transparent; cursor:pointer; font-size:22px; line-height:1; }
#zoom button + button { border-top:1px solid rgba(255,255,255,.1); } #zoom button:first-child { border-radius:var(--s-r2) var(--s-r2) 0 0; } #zoom button:last-child { border-radius:0 0 var(--s-r2) var(--s-r2); }
#zoom button:hover { background:rgba(255,255,255,.12); } #zoom button.off { opacity:.55; }

/* ---------- columna de botones arriba a la derecha ---------- */
#ftop { position:absolute; right:14px; top:62px; z-index:3; display:flex; flex-direction:column; gap:8px; }
.fab { position:relative; width:44px; height:44px; padding:0; border-radius:16px; border:1px solid var(--s-dark-line); background:var(--s-dark); backdrop-filter:var(--s-blur); -webkit-backdrop-filter:var(--s-blur); color:var(--s-on-dark); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 22px rgba(10,16,10,.2); transition:background .15s, transform .12s; }
.fab:hover { background:rgba(60,64,60,.85); } .fab:active { transform:scale(.94); } .fab.off { opacity:.6; }
.fab:focus-visible, #zoom button:focus-visible { outline:3px solid rgba(255,255,255,.6); outline-offset:-3px; }
.fab[data-tip]::after, #zoom button[data-tip]::after { content:attr(data-tip); position:absolute; right:calc(100% + 10px); top:50%; transform:translate(4px,-50%); background:rgba(28,30,28,.92); color:#fff; font:600 12px/1.3 var(--font); padding:6px 10px; border-radius:10px; width:max-content; max-width:220px; text-align:center; white-space:normal; box-shadow:0 6px 18px rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:5; }
@media (hover:hover) { .fab[data-tip]:hover::after, #zoom button[data-tip]:hover::after { opacity:1; transform:translate(0,-50%); transition-delay:.3s; } }
.fab.tipon::after { opacity:1 !important; transform:translate(0,-50%) !important; }
html.nomini #mini { display:none; }
/* con el panel de decorar abierto, los controles se corren a su izquierda */
body.decorating #ftop, body.decorating #zoom { right:314px; } body.decorating #mini { right:368px; } body.decorating #bubble { right:370px; }
/* el globo de chat va junto a la columna de zoom, sin taparla */
@media (min-width:641px) { #bubble { right:70px; bottom:90px; } }   /* sobre la altura del dock, junto a la columna de zoom */
@media (max-width:900px) { #zoom .fx-mini { display:none; } }
@media (max-width:640px) {
  #ftop { top:66px; right:12px; } #zoom .fx { display:none; }
  #status { max-width:calc(100% - 140px); }
  html.touch #status { max-width:calc(100% - 140px); }
  #zoom button[data-tip]::after, .fab[data-tip]::after { display:none; }
}
#mini { left:auto; right:68px; top:62px; bottom:auto; width:150px; height:99px; border-radius:var(--s-r2); border:1px solid var(--s-dark-line); box-shadow:0 6px 22px rgba(10,16,10,.2); }
#hint { background:var(--s-dark); backdrop-filter:var(--s-blur); color:#ffe9a8; border:1px solid var(--s-dark-line); }
#bubbtn { background:var(--s-dark); backdrop-filter:var(--s-blur); border:1px solid var(--s-dark-line); box-shadow:0 6px 22px rgba(10,16,10,.25); }
#bubbtn:hover { background:rgba(60,64,60,.85); }
#bubpanel { background:rgba(34,37,34,.86); backdrop-filter:var(--s-blur); -webkit-backdrop-filter:var(--s-blur); border:1px solid var(--s-dark-line); border-radius:var(--s-r2); box-shadow:var(--s-shadow); }
#bubpanel .bt button.on, #bubchat .ct button.on { background:rgba(255,255,255,.18); color:#fff; }
#chatbar { background:var(--s-dark); backdrop-filter:var(--s-blur); border:1px solid var(--s-dark-line); box-shadow:var(--s-shadow); }
#chatbar.priv { border-color:rgba(255,143,208,.6); }
#chattag { color:#cfd3cc; } #chatbar.priv #chattag { color:#ffb4e0; }

/* ---------- tarjetas y diálogos claros: más redondos y difusos ---------- */
#setmenu { background:rgba(255,255,255,.95); backdrop-filter:var(--s-blur); border-radius:var(--s-r2); border:1px solid var(--s-line); box-shadow:var(--s-shadow); }
#card, #decor, #moodpop { border-radius:var(--s-r1); border-color:var(--s-line); box-shadow:var(--s-shadow); }
dialog { border-radius:var(--s-r1); box-shadow:0 30px 90px rgba(20,28,20,.34); }
dialog::backdrop { background:rgba(28,34,28,.4); }

/* ---------- celular y pantallas angostas ---------- */
@media (max-width:900px) {
  #app, html.nopanel #app { grid-template-columns:1fr; }
  #rail, html.nopanel #rail { display:none; }
  html:not(.nopanel) #left { display:flex; position:fixed; z-index:20; left:12px; top:calc(70px + env(safe-area-inset-top)); bottom:12px; width:min(330px, calc(100vw - 24px)); box-shadow:var(--s-shadow); background:rgba(255,255,255,.94); backdrop-filter:var(--s-blur); }
}
@media (max-width:640px) {
  #app { padding:8px; gap:8px; }
  #stage { border-radius:24px; }
  #roomchip { max-width:calc(100% - 76px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #bar { border-radius:28px; }
}
@media (max-width:480px) {
  #bar { grid-template-columns:repeat(12,1fr); }
  #bar button { grid-column:span 2; }
  #bar #homebtn, #bar #holdbtn, #bar #evbtn, #bar #setbtn { grid-column:span 3; }
}
@media (max-height:640px) and (min-width:901px) { #rail { gap:4px; padding:10px 0; } .rkeys { display:none; } .rl { width:44px; height:44px; } }

/* modo táctil con muesca: respeta las áreas seguras */
html.touch #ptoggle { left:calc(14px + env(safe-area-inset-left)); top:calc(14px + env(safe-area-inset-top)); }
html.touch #roomchip { left:calc(66px + env(safe-area-inset-left)); top:calc(14px + env(safe-area-inset-top)); }
html.touch #status { top:calc(70px + env(safe-area-inset-top)); }
html.touch #ptoggle { min-width:44px; min-height:44px; }
html.touch #tact button { background:var(--s-dark); border-color:rgba(255,255,255,.35); backdrop-filter:var(--s-blur); }
html.touch #tjoy i { background:rgba(255,255,255,.8); border-color:#fff; }

/* modo ahorro: sin desenfoque (ya lo desactiva ui.css) y fondos un poco más opacos para que se lean */
html.ahorro { --s-dark:rgba(36,39,36,.9); }

/* vista ligera: es vectorial, así que el lienzo se escala suave (el pixelado solo sirve al mapa de píxeles) */
html.lite canvas#c { image-rendering:auto; }