/* Shell cuadrático común de XpaceOS · FLT-101337.
   La misma barra y los mismos paneles que el gemelo (admira-xp/index.html: #topBar,
   .quad-icon, .quad-menu.quad-left/.quad-right y el modo Experto abajo), para cualquier
   página. Va después del CSS propio de la página y se aísla de sus selectores de
   elemento (header, nav, button, input…). Capas: barra 8900, paneles 9000; avisos,
   modales y puertas propios de la página van a ≥ 9100. Ver admira-xp/docs/shell-cuadratico.md. */

:root{--xs-bar-h:0px;--xs-left:0px;--xs-right:0px;--xs-bottom:0px}
html[data-xpace-shell="on"]{--xs-bar-h:46px;scroll-padding-top:calc(var(--xs-bar-h) + 12px)}

/* Tokens del gemelo en la barra y los paneles, sea cual sea la paleta de la página. */
#topBar.xs-bar,.xs-panel,.xs-expert{
  --xp-bg:#05070c;--xp-panel:#08141d;--xp-panel-2:#0f222b;--xp-line:#1f6b78;--xp-cyan:#78f3ff;
  --xp-mint:#7dffb5;--xp-gold:#f7c95d;--xp-ink:#dff8ff;--xp-muted:#80a0a9;--xp-danger:#ff6b6b;
  --xs-surface:rgba(3,10,16,.94);--xs-edge:rgba(120,243,255,.34);--xs-soft:rgba(120,243,255,.1);
  --xs-font:'Orbitron','Press Start 2P',ui-monospace,SFMono-Regular,Menlo,monospace;
  box-sizing:border-box;-webkit-font-smoothing:antialiased;letter-spacing:normal;text-transform:none;text-align:left;text-shadow:none;
}
#topBar.xs-bar *,.xs-panel *,.xs-expert *{box-sizing:border-box}

/* El contenido empieza bajo la barra y, en pantallas anchas, junto a los paneles abiertos. */
body.xs-page{padding-top:var(--xs-bar-h)!important;padding-bottom:var(--xs-bottom)}
html.xs-docked body.xs-page{padding-left:var(--xs-left);padding-right:var(--xs-right)}
body.xs-page{transition:padding .22s ease}
html.xs-no-anim body.xs-page,html.xs-no-anim .xs-panel,html.xs-no-anim .xs-expert{transition:none!important}

/* ─── Barra (la del gemelo: 46 px, degradado, borde cian) ─── */
#topBar.xs-bar{position:fixed;top:0;left:0;right:0;z-index:8900;display:flex;align-items:center;gap:9px;
  width:100%;max-width:100vw;height:var(--xs-bar-h);min-height:0;margin:0;padding:0 10px;
  background:linear-gradient(90deg,rgba(5,12,18,.98),rgba(12,31,39,.98) 44%,rgba(28,18,10,.98));
  border:0;border-bottom:1px solid rgba(120,243,255,.36);border-radius:0;
  box-shadow:0 10px 28px rgba(0,0,0,.42),inset 0 -1px 0 rgba(247,201,93,.22);
  font:11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--xp-ink);overflow:hidden}
#topBar.xs-bar .spacer{flex:1 1 auto;min-width:0}
#topBar.xs-bar .pf-toggles{display:flex;align-items:center;gap:6px;margin:0;flex:0 0 auto}
#topBar.xs-bar .quad-icon{flex:0 0 auto;width:30px;height:30px;min-width:0;min-height:0;margin:0;padding:0;border-radius:7px;
  font:14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;display:grid;place-items:center;cursor:pointer;
  background:rgba(2,8,13,.78);border:1px solid rgba(120,243,255,.34);color:var(--xp-cyan);text-transform:none;letter-spacing:0;
  box-shadow:inset 0 0 12px rgba(120,243,255,.06);transition:background .15s,border-color .15s,color .15s}
#topBar.xs-bar .quad-icon:hover{border-color:var(--xp-cyan);background:rgba(120,243,255,.12)}
#topBar.xs-bar .quad-icon.is-active{background:var(--xp-cyan);color:#03151a;border-color:var(--xp-cyan);box-shadow:0 0 12px rgba(120,243,255,.5)}
#topBar.xs-bar .quad-icon:focus-visible,#topBar.xs-bar .xs-brand:focus-visible{outline:2px solid var(--xp-gold);outline-offset:2px}
#topBar.xs-bar .xs-brand-wrap{display:inline-flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto;white-space:nowrap;overflow:hidden}
#topBar.xs-bar .xs-brand{display:inline-flex;align-items:center;gap:8px;min-width:0;padding:0;margin:0;color:var(--xp-cyan);text-decoration:none;border-radius:4px;
  font:800 13px/1 var(--xs-font);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 12px rgba(120,243,255,.35);background:none;border:0}
#topBar.xs-bar .xs-brand:hover{color:#fff}
#topBar.xs-bar .xs-section{color:var(--xp-muted);font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ─── Paneles Opciones (☰, izquierda) y Avanzado (▤, derecha) ───
   Viven en una capa fija que recorta su desplazamiento (plegados no crean scroll). */
.xs-layer{position:fixed;inset:0;z-index:9000;overflow:hidden;pointer-events:none;margin:0;padding:0;border:0;background:none}
.xs-layer > *{pointer-events:auto}
.xs-layer > .is-collapsed{pointer-events:none}
.xs-panel.quad-menu{position:absolute;top:var(--xs-bar-h);bottom:var(--xs-bottom);z-index:9000;display:flex;flex-direction:column;flex-wrap:nowrap;gap:6px;
  width:min(280px,86vw);max-width:none;height:auto;margin:0;padding:14px 12px;overflow-y:auto;overscroll-behavior:contain;
  background:var(--xs-surface);border:1px solid var(--xs-edge);box-shadow:0 0 24px rgba(120,243,255,.12),inset 0 0 18px rgba(120,243,255,.05);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--xp-ink);font:13px/1.35 var(--xs-font);
  transition:transform .22s ease,visibility 0s linear 0s}
.xs-panel.quad-left{left:0;right:auto;border-left:0;border-radius:0 12px 12px 0;transform:translateX(0)}
.xs-panel.quad-right{right:0;left:auto;border-right:0;border-radius:12px 0 0 12px;transform:translateX(0)}
.xs-panel.quad-left.is-collapsed{transform:translateX(-102%)}
.xs-panel.quad-right.is-collapsed{transform:translateX(102%)}
.xs-panel.is-collapsed,.xs-expert.is-collapsed{visibility:hidden;pointer-events:none;transition:transform .22s ease,visibility 0s linear .22s}
.xs-panel .qm-title{flex:0 0 auto;margin:0 0 8px;padding:2px 6px 12px;font:800 13px/1.2 var(--xs-font);letter-spacing:.14em;text-transform:uppercase;
  color:var(--xp-cyan);border-bottom:1px solid rgba(120,243,255,.30);text-shadow:0 0 12px rgba(120,243,255,.35);background:none}
.xs-panel .xs-links,.xs-panel .xs-actions{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;flex:0 0 auto}
.xs-panel .xs-links[hidden],.xs-panel [hidden]{display:none!important}
.xs-panel .xs-page-options{margin-top:6px;padding-top:8px;border-top:1px solid rgba(120,243,255,.16)}
.xs-panel :is(a,button){display:flex;align-items:center;gap:8px;width:100%;min-height:40px;height:auto;margin:0;padding:9px 12px;
  border:1px solid transparent;border-radius:8px;background:transparent;color:var(--xp-ink);text-decoration:none;text-align:left;
  font:inherit;font-size:12px;line-height:1.3;letter-spacing:.03em;text-transform:none;white-space:normal;cursor:pointer;box-shadow:none}
.xs-panel :is(a,button):hover{border-color:var(--xp-cyan);color:var(--xp-cyan);background:var(--xs-soft);text-decoration:none}
.xs-panel :is(a,button):focus-visible{outline:2px solid var(--xp-gold);outline-offset:1px}
.xs-panel :is(a,button)[aria-current="page"],.xs-panel :is(a,button).is-current{border-color:rgba(120,243,255,.45);color:var(--xp-cyan)}
.xs-panel :is(select,input:not([type=checkbox]):not([type=radio])){width:100%;max-width:100%;min-height:36px;margin:0;padding:6px 8px;border:1px solid var(--xs-edge);border-radius:7px;background:rgba(2,8,13,.8);color:var(--xp-ink);font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}
.xs-panel label{color:var(--xp-muted);font-size:11px}
.xs-panel .qm-hint,.xs-panel .xs-empty{margin:6px;color:var(--xp-muted);font-size:10px;line-height:1.5;letter-spacing:.06em;text-align:left;opacity:.85}
.xs-panel .qm-version{margin-top:auto;padding:12px 6px 0;color:var(--xp-muted);font:10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;opacity:.75;overflow-wrap:anywhere}
.xs-panel .qm-version:empty{display:none}

/* ─── Modo experto (⌘, abajo): la consola ─── */
.xs-expert.quad-menu{position:absolute;left:0;right:0;bottom:0;top:auto;z-index:9000;display:flex;flex-direction:column;gap:6px;
  width:auto;max-width:none;height:min(42vh,340px);min-height:0;margin:0;padding:8px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--xs-surface);border:1px solid var(--xs-edge);border-bottom:0;border-radius:12px 12px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--xp-ink);font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  transform:translateY(0);opacity:1;transition:transform .2s ease,visibility 0s linear 0s}
.xs-expert.is-collapsed{transform:translateY(105%)}
.xs-expert .xs-expert-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto;margin:0;padding:0}
.xs-expert .qm-head{font:700 10px/1.2 var(--xs-font);letter-spacing:.18em;text-transform:uppercase;color:var(--xp-gold);margin:0;padding:2px 0}
.xs-expert .xs-close{width:28px;height:28px;min-height:0;margin:0;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--xp-muted);font:18px/1 ui-monospace,monospace;cursor:pointer}
.xs-expert .xs-close:hover{color:var(--xp-cyan);border-color:var(--xp-cyan)}
.xs-expert .xs-expert-slot:empty{display:none}
.xs-expert .xs-expert-slot{flex:0 1 auto;max-height:35%;overflow:auto}
.xs-expert .xs-log{flex:1 1 auto;min-height:0;margin:0;padding:6px 8px;list-style:none;overflow:auto;border:1px solid rgba(120,243,255,.16);border-radius:8px;background:rgba(1,6,10,.7);white-space:pre-wrap;overflow-wrap:anywhere}
.xs-expert .xs-log li{margin:0;padding:0;font:inherit;color:var(--xp-ink);background:none;border:0}
.xs-expert .xs-log li.xs-in{color:var(--xp-cyan);margin-top:4px}
.xs-expert .xs-cli{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin:0;padding:0;border:0;background:none}
.xs-expert .xs-prompt{color:var(--xp-cyan);font-weight:700}
.xs-expert .xs-cli input{flex:1 1 auto;min-width:0;height:36px;min-height:0;margin:0;padding:6px 10px;border:1px solid var(--xs-edge);border-radius:8px;background:rgba(2,8,13,.85);color:var(--xp-ink);font:13px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:none;outline:0}
.xs-expert .xs-cli input:focus-visible{border-color:var(--xp-cyan);box-shadow:0 0 0 2px rgba(120,243,255,.25)}
.xs-expert .xs-cli button{flex:0 0 auto;height:36px;min-height:0;margin:0;padding:0 14px;border:1px solid var(--xp-cyan);border-radius:8px;background:rgba(120,243,255,.12);color:var(--xp-cyan);font:700 11px/1 var(--xs-font);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.xs-expert .xs-cli button:hover{background:var(--xp-cyan);color:#03151a}
.xs-expert .xs-hint{margin:0;color:var(--xp-muted);font-size:10px;letter-spacing:.04em}

/* ─── Móvil: sin scroll horizontal; la sección cede antes que los iconos ─── */
@media (max-width:600px){
  #topBar.xs-bar{gap:7px;padding:0 8px}
  #topBar.xs-bar .xs-brand{font-size:12px;letter-spacing:.1em}
  .xs-expert.quad-menu{height:min(55vh,360px)}
}
@media (max-width:420px){#topBar.xs-bar .xs-section{display:none}}
@media (prefers-reduced-motion:reduce){.xs-panel,.xs-expert,body.xs-page{transition:none!important}}
@media print{#topBar.xs-bar,.xs-panel,.xs-expert{display:none!important}body.xs-page{padding:0!important}}