/* === Michael WebOS V3.5 - cabecera anclada, pie real y dock multimedia móvil === */
:root{
  --mm-header-h:58px;
  --mm-mobile-dock-h:0px;
}
html{scroll-padding-top:calc(var(--mm-header-h) + 10px)!important;}
body{
  padding-top:0!important;
  padding-bottom:22px!important;
}

/* 1) La barra superior ya no flota como píldora separada: queda anclada a la cabecera. */
.topbar,
header.topbar,
.site-header,
header.site-header{
  position:sticky!important;
  top:0!important;
  left:0!important;
  right:0!important;
  transform:none!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  min-height:var(--mm-header-h)!important;
  border-radius:0!important;
  border-top:0!important;
  border-left:0!important;
  border-right:0!important;
  padding:8px clamp(10px,2vw,22px)!important;
  z-index:88!important;
  background:color-mix(in srgb,var(--panel,rgba(18,24,36,.78)) 92%,transparent)!important;
  border-bottom:1px solid var(--border,rgba(255,255,255,.12))!important;
  box-shadow:0 10px 28px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(var(--blur,24px)) saturate(1.35)!important;
}
.topbar::before,
header.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent,#3daee9) 7%,transparent),transparent 78%);
  opacity:.55;
}
.topbar > *,
header.topbar > *{position:relative!important;z-index:1!important;}
.topbar .brand,
header.topbar .brand{
  min-width:0!important;
  flex:0 0 auto!important;
}
.topbar .brand-title,
header.topbar .brand-title{
  display:none!important;
}
.topbar .nav,
header.topbar .nav{
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:none!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  -webkit-overflow-scrolling:touch!important;
}
.topbar .nav::-webkit-scrollbar,
header.topbar .nav::-webkit-scrollbar{display:none!important;}
.topbar .nav a,
.topbar .nav button,
header.topbar .nav a,
header.topbar .nav button{
  font-size:.9rem!important;
  padding:8px 10px!important;
}
.topbar .nav a[href*="admin"],
.topbar .nav a[href*="temas"],
.topbar .nav a[href*="themes"],
.topbar .nav button[data-action="themes"],
.topbar .top-actions a[href*="admin"],
.topbar .top-actions a[href*="temas"]{
  display:none!important;
}
.mm-quick-theme-buttons{
  margin-left:8px!important;
  flex:0 0 auto!important;
}

/* 2) El selector/menú de temas deja de ser flotante en escritorio: es pie de página real. */
.mm-footer-controls{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  top:auto!important;
  transform:none!important;
  width:min(1180px,calc(100% - 24px))!important;
  max-width:1180px!important;
  min-height:58px!important;
  margin:34px auto 14px auto!important;
  z-index:8!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  border-radius:24px!important;
  background:var(--panel,rgba(18,24,36,.78))!important;
  color:var(--text,#f7f9ff)!important;
  border:1px solid var(--border,rgba(255,255,255,.12))!important;
  box-shadow:var(--shadow,0 18px 45px rgba(0,0,0,.22))!important;
  backdrop-filter:blur(var(--blur,24px)) saturate(1.35)!important;
}
.mm-footer-controls .mm-fx-toggle,
.mm-footer-controls button[data-action="fx"]{
  display:none!important;
}
.mm-footer-left,
.mm-footer-right{
  min-width:0!important;
}
.mm-theme-select{
  max-width:min(48vw,480px)!important;
}

/* 3) Nuevo dock multimedia: oculto en escritorio, flotante solo en móvil. */
.mm-mobile-media-dock{
  display:none!important;
}

@media(max-width:900px){
  :root{--mm-header-h:54px;}
  .topbar,
  header.topbar,
  .site-header,
  header.site-header{
    min-height:var(--mm-header-h)!important;
    padding:7px 8px!important;
  }
  .topbar .brand-mark,
  header.topbar .brand-mark{
    width:32px!important;
    height:32px!important;
    flex-basis:32px!important;
  }
  .topbar .nav a,
  .topbar .nav button,
  header.topbar .nav a,
  header.topbar .nav button{
    font-size:.83rem!important;
    padding:7px 8px!important;
  }
  .mm-quick-theme-buttons{gap:5px!important;margin-left:5px!important;}
  .mm-quick-theme-btn{min-height:32px!important;padding:7px 9px!important;font-size:.8rem!important;}
  .mm-footer-controls{
    width:calc(100% - 16px)!important;
    margin:24px auto 12px auto!important;
    border-radius:18px!important;
    padding:8px!important;
  }
  .mm-theme-select{max-width:none!important;}
}

@media(max-width:720px){
  :root{--mm-mobile-dock-h:78px;}
  body{
    padding-bottom:calc(var(--mm-mobile-dock-h) + 18px + env(safe-area-inset-bottom))!important;
  }
  .topbar,
  header.topbar,
  .site-header,
  header.site-header{
    box-shadow:0 8px 24px rgba(0,0,0,.14)!important;
  }
  .topbar .nav,
  header.topbar .nav{
    max-width:none!important;
  }
  .topbar .nav a:nth-child(n+4),
  .topbar .nav button:nth-child(n+4),
  header.topbar .nav a:nth-child(n+4),
  header.topbar .nav button:nth-child(n+4){
    display:none!important;
  }
  .mm-quick-theme-btn::before{display:none!important;}
  .mm-footer-controls{
    position:relative!important;
    margin:22px auto calc(var(--mm-mobile-dock-h) + 16px) auto!important;
    width:calc(100% - 16px)!important;
    min-height:auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .mm-footer-left,
  .mm-footer-right{
    width:100%!important;
    display:flex!important;
    justify-content:center!important;
  }
  .mm-footer-label,
  .mm-footer-mini,
  .mm-footer-logo{display:none!important;}
  .mm-theme-select{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:38px!important;
  }
  .mm-footer-controls a{
    flex:1 1 auto!important;
    text-align:center!important;
    font-size:.8rem!important;
    padding:8px 7px!important;
  }
  .mm-footer-controls a[href="/discos/"],
  .mm-footer-controls a[href="/discos"]{
    display:none!important;
  }
  .mm-mobile-media-dock{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    z-index:140!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    min-height:62px!important;
    padding:7px!important;
    border-radius:22px!important;
    background:color-mix(in srgb,var(--panel,rgba(18,24,36,.78)) 92%,transparent)!important;
    border:1px solid var(--border,rgba(255,255,255,.14))!important;
    box-shadow:0 18px 42px rgba(0,0,0,.32),0 0 0 1px color-mix(in srgb,var(--accent,#3daee9) 9%,transparent)!important;
    backdrop-filter:blur(var(--blur,24px)) saturate(1.45)!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .mm-mobile-media-dock::-webkit-scrollbar{display:none!important;}
  .mm-mobile-media-dock a{
    flex:1 0 68px!important;
    min-width:68px!important;
    max-width:88px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    min-height:48px!important;
    padding:6px 6px!important;
    border-radius:17px!important;
    text-decoration:none!important;
    color:var(--text,#f7f9ff)!important;
    background:color-mix(in srgb,var(--text,#fff) 7%,transparent)!important;
    border:1px solid color-mix(in srgb,var(--border,rgba(255,255,255,.14)) 70%,transparent)!important;
    font-weight:850!important;
    line-height:1!important;
  }
  .mm-mobile-media-dock a:active,
  .mm-mobile-media-dock a:hover{
    background:linear-gradient(135deg,var(--accent,#3daee9),var(--accent2,#8be9fd))!important;
    color:var(--button-text,#061018)!important;
    border-color:transparent!important;
  }
  .mm-mobile-media-dock .mm-dock-ico{
    font-size:1.18rem!important;
    line-height:1!important;
  }
  .mm-mobile-media-dock .mm-dock-label{
    font-size:.69rem!important;
    max-width:76px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
}

@media(max-width:430px){
  .topbar .nav a:nth-child(n+3),
  .topbar .nav button:nth-child(n+3),
  header.topbar .nav a:nth-child(n+3),
  header.topbar .nav button:nth-child(n+3){display:none!important;}
  .mm-quick-theme-btn{font-size:.76rem!important;padding:7px 8px!important;}
  .mm-mobile-media-dock a{flex-basis:64px!important;min-width:64px!important;}
}