/* MyMusicSoul — encabezado y contadores (web/nav.js). Rediseño de Hugo, 2026-10-27.
   Escritorio y tablet (≥ 768 px): una fila sticky. Celular: barra de arriba
   (logo + campana) y barra de navegación abajo. Usa los tokens de cada página;
   los valores tras la coma son los mismos por si una página no los define.

   El rojo de contador (--badge-bg) es SOLO para contadores de no leídos: no va
   en botones, ni en estados activos, ni en errores (los errores usan --err).
   La app aún no tiene tema oscuro; cuando lo tenga, sus bloques llevan
   --badge-bg:#FF7A66 y --badge-fg:#16181C. */
:root{--badge-bg:#C93A2E;--badge-fg:#FFFFFF;--live-strong:#17524F;--active-bg:#E3EFEE;--mmstab-h:0px}

/* sin sesión: «Entrar», como antes */
.mmsnav{display:flex;gap:8px;align-items:center;font-size:15px}
.mmsnav a.enter{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border-radius:999px;padding:0 22px;
  white-space:nowrap;color:#fff;background:var(--live,#1F6F6B);font-weight:700}

/* con sesión, la fila vieja de cada página se esconde: manda este encabezado */
html.mmshdr-on .top,html.mmshdr-on #who{display:none !important}
html.mmshdr-on .wrap{padding-top:8px}

/* ---------- contador (badge) ---------- */
.mmsbadge,.mmsbell__n{display:inline-block;box-sizing:border-box;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--badge-bg);color:var(--badge-fg);font-size:11.5px;font-weight:700;line-height:16px;text-align:center;
  font-variant-numeric:tabular-nums;border:2px solid var(--paper,#F7F5F1)}
.mmsbadge[hidden],.mmsbell__n[hidden]{display:none}
.mmsbadge--linea{margin-left:6px;border-color:transparent;line-height:16px}
.mmsbell__n{position:absolute;top:-4px;right:-4px}
.mmsbadge.pop,.mmsbell__n.pop{animation:mmsbadge-pop .3s ease-out 1}
@keyframes mmsbadge-pop{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.mmsbadge.pop,.mmsbell__n.pop{animation:none}}

/* ---------- barra de arriba ---------- */
.mmshdr{position:sticky;top:0;z-index:60;background:var(--paper,#F7F5F1);border-bottom:1px solid transparent;
  font-family:'Outfit',system-ui,-apple-system,sans-serif}
.mmshdr.scrolled{border-bottom-color:var(--line,#DAD5CC)}
.mmshdr__in{box-sizing:border-box;max-width:1120px;margin:0 auto;height:56px;padding:0 16px;display:flex;align-items:center;gap:24px}
.mmshdr .mmshdr__logo{font-size:18px;flex:none}
.mmshdr__nav{display:none}
.mmshdr__der{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.mmshdr__campana{display:none}
.mmshdr .mmsbell{width:44px;height:44px;border:1px solid var(--line,#DAD5CC);background:transparent}
.mmshdr .mmsbell svg{width:22px;height:22px}
.mmshdr a:focus-visible,.mmshdr button:focus-visible,.mmstab a:focus-visible{outline:2px solid var(--live,#1F6F6B);outline-offset:2px}

/* cuenta: botón con avatar, alias y chevron; solo en escritorio */
.mmscta{position:relative;display:none}
.mmscta__b{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 10px 0 5px;border-radius:999px;
  border:1px solid var(--line,#DAD5CC);background:transparent;color:var(--ink,#23262B);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.mmscta__b:hover{background:var(--paper-2,#EEEAE3)}
.mmscta__b.on{background:var(--active-bg);border-color:transparent;color:var(--live-strong)}
.mmscta__b img{width:32px;height:32px;border-radius:9px;flex:none}
.mmscta__al{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mmscta__b svg{color:var(--ink-2,#55595F);transition:transform .15s}
.mmscta__b[aria-expanded="true"] svg{transform:rotate(180deg)}
.mmscta__menu{position:absolute;right:0;top:calc(100% + 6px);z-index:70;box-sizing:border-box;width:220px;margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid var(--line,#DAD5CC);border-radius:14px;box-shadow:0 14px 36px -12px rgba(35,38,43,.3)}
.mmscta__menu[hidden]{display:none}
.mmscta__op{display:flex;align-items:center;box-sizing:border-box;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:10px;
  background:transparent;color:var(--ink,#23262B);font:inherit;font-size:15px;font-weight:500;text-align:left;text-decoration:none;cursor:pointer}
.mmscta__op:hover,.mmscta__op:focus{background:var(--paper-2,#EEEAE3);outline:none}
.mmscta__op:focus-visible{outline:2px solid var(--live,#1F6F6B);outline-offset:-2px}
.mmscta__sep{height:1px;margin:6px 4px;background:var(--line,#DAD5CC)}

/* ---------- escritorio y tablet ---------- */
@media (min-width:768px){
  .mmshdr__in{height:64px;padding:0 24px}
  .mmshdr .mmshdr__logo{font-size:22px}
  .mmshdr__nav{display:flex;flex:1;justify-content:center;min-width:0}
  .mmshdr__nav ul{display:flex;flex-wrap:nowrap;gap:4px;margin:0;padding:0;list-style:none}
  .mmshdr__a{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:999px;white-space:nowrap;
    font-size:15px;font-weight:600;color:var(--ink-2,#55595F);text-decoration:none;border:0}
  .mmshdr__a:hover{background:var(--paper-2,#EEEAE3)}
  .mmshdr__a[aria-current="page"]{background:var(--active-bg);color:var(--live-strong)}
  .mmshdr__a .s{display:none}
  .mmshdr__der{margin-left:0}
  .mmscta{display:block}
  .mmstab{display:none !important}
}
/* 768-1099: etiquetas cortas y la cuenta solo con su avatar (el alias va en el aria-label) */
@media (min-width:768px) and (max-width:1099px){
  .mmshdr__in{gap:16px}
  .mmshdr__a .l{display:none}
  .mmshdr__a .s{display:inline}
  .mmscta__al{display:none}
}

/* ---------- celular: barra de navegación abajo ---------- */
.mmstab{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(var(--n,4),1fr);
  height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box;
  background:var(--surface,#FFFFFF);border-top:1px solid var(--line,#DAD5CC);font-family:'Outfit',system-ui,-apple-system,sans-serif}
.mmstab__a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:44px;
  color:var(--ink-2,#55595F);text-decoration:none}
.mmstab__ic{position:relative;display:inline-flex;align-items:center;justify-content:center;width:56px;height:28px;border-radius:999px}
.mmstab__ic img{width:24px;height:24px;border-radius:7px}
.mmstab__t{font-size:12.5px;font-weight:600;line-height:1.1}
.mmstab__a[aria-current="page"]{color:var(--live,#1F6F6B)}
.mmstab__a[aria-current="page"] .mmstab__ic{background:var(--active-bg)}
.mmsbadge--tab{position:absolute;top:-6px;left:calc(50% + 4px);height:18px;min-width:18px;padding:0 5px;line-height:14px;
  border-color:var(--surface,#FFFFFF)}
@media (max-width:767px){
  html.mmshdr-on{--mmstab-h:calc(64px + env(safe-area-inset-bottom))}
  html.mmshdr-on body{padding-bottom:calc(64px + env(safe-area-inset-bottom) + 16px)}
  html.mmshdr-on.mmstab-teclado{--mmstab-h:0px}
  html.mmshdr-on.mmstab-teclado body{padding-bottom:16px}
  html.mmstab-teclado .mmstab{display:none}
}
/* lo que flota abajo se acomoda sobre la barra */
.mmsc--dm{bottom:var(--mmstab-h)}
.mmstoast{bottom:calc(16px + var(--mmstab-h) + env(safe-area-inset-bottom))}