/* FULBO 2.85 — Encabezado responsive para Claro, Oscuro y Retro.
   El ancho de la ventana determina el layout; la apariencia no lo modifica. */
.app-shell{min-width:0}
.sidebar{min-width:0}
.sidebar .brand-wrap,.sidebar .brand{min-width:0;max-width:100%;box-sizing:border-box}
.sidebar .brand{display:flex;align-items:center;gap:10px}
.sidebar .brand-text{min-width:0;max-width:100%;overflow:hidden}
.sidebar .brand-text small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace{min-width:0}
.topbar{box-sizing:border-box;max-width:100%;min-width:0}
.topbar .top-quick-nav{min-width:0;max-width:100%;flex:1 1 0;overflow-x:auto;overflow-y:hidden}
.topbar .top-quick-nav .top-quick{flex-shrink:0}
.topbar-right{min-width:0;flex-shrink:0;display:flex;align-items:center;justify-content:flex-end}
.topbar-right .fulbo-style-picker{min-width:0;max-width:100%;flex:0 1 auto}
.topbar-right .fulbo-style-picker select{max-width:100%;box-sizing:border-box}
.topbar-right .refresh-button{flex-shrink:0}
/* Medidas intermedias: controles arriba, navegación debajo.
   Evita que el selector de estilo empuje los botones del menú. */
@media (min-width:751px) and (max-width:1300px){
 .topbar{
  display:grid!important;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto;
  height:auto!important;min-height:98px;
  padding:7px clamp(10px,1.8vw,20px) 5px!important;
  row-gap:3px;column-gap:0;
  align-content:center;align-items:center;
 }
 .topbar-left{display:none!important}
 .topbar-right{
  grid-column:1;grid-row:1;justify-self:end;
  width:auto;max-width:100%;margin-left:0!important;
  gap:clamp(5px,1vw,9px)!important
 }
 .topbar .top-quick-nav{
  grid-column:1;grid-row:2;display:flex!important;
  justify-content:flex-start;align-self:stretch;
  width:100%!important;max-width:100%!important;
  padding:2px 0 3px!important;margin:0!important;
  overflow-x:auto!important;overflow-y:hidden!important;
  scrollbar-width:thin!important;scrollbar-color:var(--line) transparent;
 }
 .topbar .top-quick-nav::-webkit-scrollbar{display:block;height:3px}
 .topbar .top-quick-nav::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
 .topbar .top-quick{min-height:34px;padding:7px 10px}
 .topbar-right .account-button{max-width:190px!important}
 .topbar-right .fulbo-style-picker select{width:clamp(100px,15vw,150px);min-width:0!important}
}
@media(min-width:751px) and (max-width:980px){
 .topbar{min-height:92px}
 .topbar-right .account-button{max-width:155px!important}
 .topbar-right .fulbo-style-picker select{width:115px}
 .sidebar .brand{gap:7px}
 .sidebar .brand-text{font-size:clamp(16px,1.8vw,22px)}
 .sidebar .brand-text small{font-size:7px;letter-spacing:.5px}
}
@media(max-width:750px){
 .topbar{display:flex!important;height:58px!important;min-height:58px}
 .topbar-left{display:flex!important;flex:0 0 auto}
 .topbar .top-quick-nav{display:none!important}
 .topbar-right{max-width:calc(100% - 44px);margin-left:auto}
 .topbar-right .fulbo-style-picker select{min-width:0!important;width:clamp(87px,22vw,109px)}
}
@media(max-width:390px){
 .topbar{gap:4px!important;padding-left:7px!important;padding-right:7px!important}
 .topbar-right{gap:4px!important}
 .topbar-right .fulbo-style-picker select{width:87px;font-size:11px}
 .topbar-right .account-button{min-width:0}
}