/* Shell cuadrático universal (FLT-101311). Reutiliza responsive-shell.css, el mismo
   de la portada, y añade solo lo que en index.html vive en su <style> en línea:
   cabecera fija, marca, selector de idioma y botones de acción. */
@import url('responsive-shell.css?v=20261006-experto-tecla-1');

/* Tokens de la portada como valor por defecto: la página y brand.css mandan. */
:where(:root){--bg:#02080d;--ink:#dff8ff;--mut:#75aab9;--brand:#78f3ff;--accent:#ffd866;--good:#88ffaa;--warn:#ff8866;--card:#0a1620;--card2:#0d1c28;--line:rgba(120,243,255,.18)}

/* Paneles superpuestos (principio de Carlos, 3-oct-2026): ☰, ▤ y ⌘ flotan sobre el contenido.
   El cuerpo de la página nunca cambia de posición, ancho ni alto al abrirlos: solo resta la
   cabecera. Los flotantes (toasts, navegación de diapositivas) pueden apartarse con
   var(--expert-panel-height), que vale 0 con ⌘ cerrado. */
body.galaxy-shell-page{padding-top:var(--app-header-height)}

/* Mismo tipo de letra que la portada (su base es la del kit admira-design: 15px/1.55), sea cual sea el de la página. */
body > header.galaxy-shell,#header-navigation,#advanced-tools,#expert-panel{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:normal;text-transform:none;text-align:left}
body > header.galaxy-shell{position:fixed;top:0;left:0;right:0;z-index:10;margin:0;border:0;color:var(--ink);background:linear-gradient(to bottom,rgba(2,8,13,.96),rgba(2,8,13,.68) 76%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.galaxy-shell .logo{font-family:monospace;font-size:13px;letter-spacing:.16em;color:var(--accent);font-weight:bold;white-space:nowrap}
.galaxy-shell .logo .logo-home{color:inherit;text-decoration:none;cursor:pointer;border-radius:4px;outline:none;transition:opacity .15s,text-shadow .15s}
.galaxy-shell .logo .logo-home:hover{text-shadow:0 0 12px rgba(255,216,102,.55);text-decoration:none}
.galaxy-shell .logo .logo-home:focus-visible{box-shadow:0 0 0 2px var(--brand)}
.galaxy-shell .logo .galaxy-shell-section{color:var(--mut);margin-left:10px;font-weight:normal;letter-spacing:.1em}
#header-navigation a,#advanced-tools a{color:var(--brand);text-decoration:none}
#header-navigation a:hover{text-decoration:underline}
.lang-switch{display:inline-flex;align-items:center;background:rgba(10,22,32,.6);border:1px solid var(--line);border-radius:8px;padding:2px}
.lang-switch .lang-btn{font-family:monospace;font-size:12px;letter-spacing:.06em;font-weight:700;color:var(--brand);background:rgba(120,243,255,.08);border:0;border-radius:6px;padding:4px 9px;cursor:pointer;transition:background .15s,color .15s}
.lang-switch .lang-btn:hover{color:var(--ink)}
.header-circuit-btn{height:36px;border:1px solid rgba(255,216,102,.45);border-radius:8px;background:rgba(10,22,32,.78);color:var(--accent);font-family:monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:0 12px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
:where(.header-circuit-btn):hover{background:var(--accent);color:#1a0e00;border-color:var(--accent)}
/* Enlaces de página con el mismo aspecto que los botones de acción de la portada. */
#advanced-tools .advanced-actions a.header-circuit-btn{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;height:auto}
#advanced-tools .galaxy-shell-empty{margin:0;font:11px/1.4 monospace;color:var(--mut)}
@media(max-width:720px){
 .galaxy-shell .brand-heading,.galaxy-shell .logo{min-width:0}
 .galaxy-shell .logo{overflow:hidden;text-overflow:ellipsis}
 .galaxy-shell .logo .galaxy-shell-section{margin-left:6px;letter-spacing:.04em}
}
@media(max-width:420px){.galaxy-shell .logo .galaxy-shell-section{display:none}}

/* Todas las páginas (FLT-101311 c). La barra queda siempre por encima del contenido de
   la página (que puede traer z-index propios) y por debajo de los paneles (9000) y de
   las capas de la página (puertas, modales, avisos: ≥ 9100). Las anclas internas no
   quedan escondidas bajo la barra fija. */
body > header.galaxy-shell{z-index:8900}
/* La barra y los paneles llevan los colores de la portada en cualquier página, aunque la
   página tenga su propia paleta: los de index.html en clearchannel.tv y, en admira.app,
   los mismos valores que brand.css (:root[data-brand="admira"]). */
body > header.galaxy-shell,#header-navigation,#advanced-tools,#expert-panel{--bg:#02080d;--ink:#dff8ff;--mut:#75aab9;--brand:#78f3ff;--accent:#ffd866;--good:#88ffaa;--warn:#ff8866;--card:#0a1620;--card2:#0d1c28;--line:rgba(120,243,255,.18);--text:#e8f6ff}
:root[data-brand="admira"] :is(body > header.galaxy-shell,#header-navigation,#advanced-tools,#expert-panel){--bg:#05040c;--ink:#f2efff;--mut:#a69bc8;--brand:#7dffd0;--accent:#b89cff;--good:#7dffd0;--warn:#ff8fa8;--card:#100c20;--card2:#17102c;--line:rgba(184,156,255,.24)}
html[data-shell=galaxy]{scroll-padding-top:calc(var(--app-header-height,64px) + 12px)}
/* Capas compartidas del kit admira-design (contacto) por encima del shell. */
.galaxy-shell-page .admira-contact-backdrop{z-index:9300}
.galaxy-shell-page .admira-contact-panel{z-index:9310}

/* Aislamiento: los estilos de elemento o de clase genérica de cada página (header, nav,
   section, input, .logo…) no deforman el shell. Con id o doble clase para ganar siempre. */
body > header.galaxy-shell{min-height:0;height:auto;max-width:none;box-shadow:none;outline:0}
body > header.galaxy-shell .logo{display:block;width:auto;height:auto;padding:0;margin:0;background:none;border:0;border-radius:0;box-shadow:none;text-align:left}
#header-navigation,#advanced-tools,#expert-panel,#expert-panel .expert-module{margin:0}
#expert-panel .expert-module{padding:0;border-top:0;border-left:0;border-radius:0;background:none;min-height:0;box-shadow:none}
@media(min-width:601px){#expert-panel .expert-module{border-bottom:0}}
body > header.galaxy-shell :is(button,a),#header-navigation :is(button,a),#advanced-tools :is(button,a),#expert-panel button{margin:0}
body > header.galaxy-shell .mode-toggle:not(.header-login){padding:0}
:is(#header-navigation,#advanced-tools) .mode-panel-head button{padding:0 4px;min-height:0;min-width:0}
:is(#header-navigation,#advanced-tools,#expert-panel) strong{color:inherit;font-weight:700}
#expert-panel li{font-size:inherit;line-height:inherit;color:inherit;margin:0}
#expert-panel li.expert-routine-group{margin-top:4px;font-size:11px;color:var(--mut)}
/* Con muchos enlaces, el carril hace scroll en vez de aplastarlos. */
#header-navigation > *{flex-shrink:0}
#header-navigation a{min-height:0;gap:normal;background:none;font-size:inherit;font-weight:normal;letter-spacing:normal;text-transform:none}
#expert-panel #expert-command{min-height:0;margin:0;box-shadow:none}
#expert-panel .expert-command-form{margin:0;padding:0;border:0;background:none}