.app-shell {
  position: relative;
  z-index: 2;
  width: calc(100vw - 24px);
  height: calc(100vh - 24px);
  height: calc(100dvh - 24px);
  max-width: 1780px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 32px;
  background: rgba(11,8,24,.34);
  box-shadow: 0 34px 110px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.topbar {
  position: relative;
  z-index: 60;
  height: var(--topbar-h);
  display: grid;
  grid-template-columns: minmax(132px,auto) minmax(240px,.85fr) minmax(280px,1.15fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg,rgba(26,17,43,.92),rgba(18,13,32,.76));
  backdrop-filter: blur(16px);
}
.brand { display:inline-flex; align-items:center; gap:10px; border:0; padding:8px 4px; background:transparent; font-weight:900; letter-spacing:-.03em; cursor:pointer; }
.brand-mark { color:var(--accent-3); text-shadow:0 0 18px var(--accent); }
.persistent-search {
  min-width:0;
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto;
  align-items:center;
  gap:4px;
  height:42px;
  padding:4px 5px 4px 10px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.065);
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.persistent-search > span { color:var(--accent-2); font-size:1.25rem; }
.persistent-search input { min-width:0; border:0; padding:6px; color:var(--ink); background:transparent; outline:0; }
.persistent-search input::placeholder { color:rgba(255,255,255,.48); }
.persistent-search button { height:32px; border:0; border-radius:11px; padding:0 12px; color:#190f25; background:linear-gradient(135deg,var(--accent),var(--accent-2)); font-size:.78rem; font-weight:850; cursor:pointer; }
.strip-bar { min-width:0; display:flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:999px; padding:4px; background:rgba(10,8,24,.42); }
.strip-track { min-width:0; flex:1 1 auto; display:flex; align-items:center; gap:8px; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth; }
.strip-track::-webkit-scrollbar { display:none; }
.strip-arrow,.icon-button { flex:0 0 auto; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.06); cursor:pointer; }
.strip-arrow { width:27px; height:27px; border:0; background:rgba(255,255,255,.045); font-size:1.2rem; }
.topbar-actions { display:flex; align-items:center; gap:7px; }
.icon-button { font-weight:900; }
.world-shell { position:relative; z-index:2; width:100%; height:calc(100% - var(--topbar-h)); overflow:hidden; perspective:1200px; }
.world-stage { position:absolute; inset:0; transform-style:preserve-3d; will-change:transform,opacity; }
.room-scene {
  position:absolute;
  inset:0;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(180deg,var(--room-sky-a,#2d234b) 0 61%,var(--room-floor-a,#1b152e) 61% 100%);
  animation:roomArrive .42s cubic-bezier(.2,.8,.2,1) both;
}
.room-scene::after { content:""; position:absolute; z-index:0; left:0; right:0; top:61%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); }
.room-landscape { position:absolute; inset:0; z-index:-2; background:var(--landscape); background-size:cover; background-position:center; }
.room-wall { position:absolute; inset:0; z-index:-1; background:var(--room-wall,linear-gradient(180deg,rgba(28,21,52,.88) 0 61%,rgba(21,16,37,.92) 61% 100%)); box-shadow:inset 0 -20vh 80px rgba(0,0,0,.16); }
.room-title { position:absolute; left:clamp(24px,4vw,62px); top:22px; max-width:460px; pointer-events:none; opacity:.86; z-index:2; }
.room-title h1 { margin:0; font-family:Georgia,serif; font-size:clamp(1.35rem,2.3vw,2.2rem); font-weight:500; }
.room-title p { margin:6px 0 0; color:var(--muted); font-size:.88rem; }
.widget-layer { position:absolute; inset:0; z-index:10; pointer-events:none; }
.widget-layer > .widget-card { pointer-events:auto; }
.floating-note-layer { position:absolute; inset:0; z-index:18; pointer-events:none; }
.fixed-scenery { position:absolute; inset:0; z-index:3; pointer-events:none; }
.fixed-scenery button,.fixed-scenery [data-interactive] { pointer-events:auto; }
.world-arrow {
  position:absolute;
  z-index:35;
  display:flex;
  align-items:center;
  gap:7px;
  max-width:190px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:6px 10px 6px 8px;
  background:rgba(13,9,28,.56);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 28px rgba(0,0,0,.2);
  cursor:pointer;
  transition:transform .16s,background .16s,opacity .16s;
}
.world-arrow:hover { background:rgba(30,20,55,.88); }
.world-arrow span { display:grid; place-items:center; width:22px; height:22px; color:var(--room-accent-2,var(--accent-2)); font-size:1rem; line-height:1; }
.world-arrow small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.7rem; font-weight:750; }
.world-arrow-up { top:10px; left:50%; transform:translateX(-50%); }
.world-arrow-up:hover { transform:translateX(-50%) translateY(-2px); }
.world-arrow-down { bottom:12px; left:50%; transform:translateX(-50%); }
.world-arrow-down:hover { transform:translateX(-50%) translateY(2px); }
.world-arrow-left { left:10px; top:50%; transform:translateY(-50%); }
.world-arrow-left:hover { transform:translateY(-50%) translateX(-2px); }
.world-arrow-right { right:10px; top:50%; transform:translateY(-50%); }
.world-arrow-right:hover { transform:translateY(-50%) translateX(2px); }
.world-map { position:absolute; z-index:37; right:14px; top:14px; display:grid; grid-template-columns:repeat(var(--map-columns,4),15px); grid-template-rows:repeat(var(--map-rows,3),15px); gap:5px; border:1px solid var(--line); border-radius:14px; padding:9px; background:rgba(10,8,24,.58); backdrop-filter:blur(12px); }
.map-cell { width:15px; height:15px; border:1px solid rgba(255,255,255,.28); border-radius:4px; padding:0; background:rgba(255,255,255,.08); cursor:pointer; }
.map-cell:hover { background:color-mix(in srgb,var(--room-accent,var(--accent)) 35%,transparent); }
.map-cell.is-current { background:var(--room-accent-2,var(--accent-2)); box-shadow:0 0 14px var(--room-accent-2,var(--accent-2)); }
.map-cell.is-empty { opacity:0; pointer-events:none; }
.widget-add-button { position:absolute; z-index:38; left:16px; bottom:15px; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:999px; padding:7px 12px 7px 7px; background:rgba(13,9,28,.76); backdrop-filter:blur(12px); box-shadow:var(--shadow); cursor:pointer; }
.widget-add-button span { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; color:#170d25; background:linear-gradient(135deg,var(--room-accent,var(--accent)),var(--room-accent-2,var(--accent-2))); font-size:1.35rem; font-weight:900; }
.widget-add-button small { font-weight:800; }


/* v3.1 · navegación más liviana y buscador compacto */
.topbar { grid-template-columns:minmax(132px,auto) minmax(250px,440px) minmax(260px,1fr) auto; }
.persistent-search { width:min(440px,100%); justify-self:start; }
.world-arrow { gap:7px; max-width:210px; border:0; border-radius:16px; padding:3px 8px 3px 3px; background:rgba(13,9,28,.34); box-shadow:none; }
.world-arrow:hover { background:rgba(24,17,43,.74); }
.world-arrow span { width:31px; height:31px; border:1px solid rgba(255,255,255,.16); border-radius:11px; background:rgba(255,255,255,.07); font-family:Georgia,serif; font-size:1.55rem; font-weight:400; line-height:.8; }
.world-arrow small { font-size:.72rem; letter-spacing:.01em; }
.world-map { grid-template-columns:repeat(var(--map-columns,4),17px); grid-template-rows:repeat(var(--map-rows,3),17px); gap:5px; border-color:rgba(255,255,255,.18); background:rgba(10,8,24,.68); }
.map-cell { position:relative; width:17px; height:17px; border-radius:5px; transition:transform .16s ease,background .16s ease,border-color .16s ease; }
.map-cell.is-current { transform:scale(1.18); border-color:#fff; background:#79f0df; box-shadow:0 0 0 2px rgba(121,240,223,.24),0 0 18px rgba(121,240,223,.82); }
.map-cell.is-current::after { content:""; position:absolute; inset:4px; border-radius:2px; background:#151026; }


/* v3.1.1 · salida suave a Google y flechas lineales */
.app-shell { transition:transform 1s cubic-bezier(.22,.72,.2,1),filter 1s ease,opacity 1s ease; transform-origin:center; }
body.is-leaving-for-google .app-shell { transform:scale(1.025); filter:blur(7px) saturate(.72); opacity:.28; }
.google-departure { position:fixed; inset:0; z-index:210; display:grid; place-items:center; pointer-events:none; opacity:0; background:rgba(5,4,12,0); transition:opacity 1s ease,background 1s ease; }
.google-departure.is-active { opacity:1; background:rgba(5,4,12,.78); }
.google-departure-glow { position:absolute; width:min(58vw,720px); aspect-ratio:1; border-radius:50%; opacity:0; transform:scale(.72); background:radial-gradient(circle,rgba(118,231,218,.2),rgba(216,167,255,.08) 36%,transparent 68%); transition:opacity 1s ease,transform 1s cubic-bezier(.22,.72,.2,1); }
.google-departure.is-active .google-departure-glow { opacity:1; transform:scale(1); }
.google-departure-message { position:relative; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.92); opacity:0; transform:translateY(8px); transition:opacity .45s .2s ease,transform .45s .2s ease; }
.google-departure.is-active .google-departure-message { opacity:1; transform:none; }
.google-departure-message span { color:var(--accent-3); text-shadow:0 0 22px var(--accent); }
.google-departure-message p { margin:0; font-size:.9rem; letter-spacing:.02em; }
.persistent-search button:disabled { cursor:wait; opacity:.72; }
.world-arrow { min-height:38px; padding:4px 11px 4px 5px; border:1px solid rgba(255,255,255,.08); background:rgba(13,9,28,.38); }
.world-arrow span { width:28px; height:28px; border:0; border-radius:50%; background:rgba(255,255,255,.055); }
.world-arrow span svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.world-arrow:hover span { background:rgba(255,255,255,.1); }
.map-cell.is-current { animation:mapCurrentPulse 2.4s ease-in-out infinite; }
@keyframes mapCurrentPulse { 0%,100%{box-shadow:0 0 0 2px rgba(121,240,223,.22),0 0 13px rgba(121,240,223,.58)} 50%{box-shadow:0 0 0 3px rgba(121,240,223,.3),0 0 22px rgba(121,240,223,.9)} }

/* v4.2 · mapa de seis salas, escritorio unificado y carga suave */
.topbar { grid-template-columns:minmax(132px,auto) minmax(240px,340px) minmax(260px,1fr) auto; }
.persistent-search { width:min(340px,100%); }
.room-scene.is-preloaded { visibility:hidden; animation:none; }
.room-title { pointer-events:none; }
.room-title h1 { pointer-events:auto; cursor:text; border-radius:8px; padding:2px 5px; margin-left:-5px; }
.room-title h1:hover { background:rgba(255,255,255,.055); }
.room-title h1.is-editing { background:rgba(8,6,20,.62); box-shadow:0 0 0 1px rgba(255,255,255,.14); outline:none; }
.content-layer,.desktop-layer { position:absolute; inset:0; }
.content-layer { z-index:10; pointer-events:none; }
.desktop-layer { pointer-events:none; isolation:isolate; }
.desktop-layer > .widget-card,.desktop-layer > .floating-note { pointer-events:auto; }
.world-map { grid-template-columns:repeat(var(--map-columns,4),17px); grid-template-rows:repeat(var(--map-rows,3),17px); }
.world-arrow { max-width:185px; }
.world-arrow span svg { stroke-width:1.45; }


/* v4.2.3 · controles reubicados, lienzo por encima y salida con conejo */
.world-stage { z-index:1; }
.world-shell.has-maximized-widget .world-stage { z-index:50; }
.world-map { left:14px; right:auto; top:auto; bottom:14px; }
.widget-add-button { left:auto; right:16px; top:15px; bottom:auto; }
.google-departure-rabbit {
  position:relative;
  width:clamp(96px,11vw,150px);
  color:rgba(255,255,255,.2);
  opacity:0;
  transform:translateY(10px) scale(.9);
  filter:drop-shadow(0 0 24px rgba(126,235,220,.12));
  transition:opacity .45s .18s ease,transform .55s .18s cubic-bezier(.22,.72,.2,1);
}
.google-departure-rabbit svg { display:block; width:100%; height:auto; fill:currentColor; }
.google-departure.is-active .google-departure-rabbit { opacity:1; transform:translateY(0) scale(1); }