/* Escritorio (≥1100 px): la web deja de ser una columna de móvil.
   Barra lateral fija con las 3 pestañas (Hoy · Mi plan · Progreso) + contenido ancho. Se carga la última para ganar a las vistas. */
@media (min-width:1100px){
  :root{--side-w:256px;--desk-max:1000px;--focus-max:880px;--desk-center:calc(var(--side-w) + (100vw - var(--side-w)) / 2)}

  .mt-app{max-width:none;margin:0;box-shadow:none}
  .mt-app.has-nav{padding-left:var(--side-w)}
  .mt-app.has-nav .mt-top,
  .mt-app.has-nav .mt-main{max-width:var(--desk-max);margin-left:auto;margin-right:auto}
  .mt-app.has-nav .mt-top{padding-left:20px;padding-right:20px}
  .mt-app.has-nav .mt-main{padding-left:32px;padding-right:32px;padding-bottom:calc(var(--cta-space, 0px) + 56px)}
  /* Pantallas sin barra (ficha, reproductor, alta): columna centrada y alineada */
  .mt-app:not(.has-nav) .mt-top,
  .mt-app:not(.has-nav) .mt-main{max-width:var(--focus-max);margin-left:auto;margin-right:auto}
  /* La CTA acompaña a esa columna (antes se quedaba en 520 px y no alineaba con el contenido) */
  .mt-app:not(.has-nav) .mt-cta{max-width:var(--focus-max)}

  /* Barra lateral */
  .mt-app .mt-nav{left:0;right:auto;top:0;bottom:0;transform:none;width:var(--side-w);max-width:none;height:100vh;height:100dvh;
    padding:28px 16px 24px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;
    background:#FAFAFA;border-top:0;border-right:1px solid var(--line-2);-webkit-backdrop-filter:none;backdrop-filter:none}
  .mt-app .mt-nav::before{content:"";order:-2;display:block;height:48px;margin:0 10px 26px;background:url("../img/firma-modotora.png") left center/contain no-repeat}
  .mt-app .mt-nav__item{flex-direction:row;justify-content:flex-start;align-items:center;gap:13px;min-height:50px;padding:0 16px;
    border-radius:14px;font-size:15px;font-weight:600;color:var(--muted);transition:background-color .18s,color .18s}
  .mt-app .mt-nav__item svg{width:22px;height:22px;flex:none}
  .mt-app .mt-nav__item:hover{background:rgba(29,29,31,.05);color:var(--ink)}
  .mt-app .mt-nav__item[aria-current="page"]{background:var(--ink);color:#fff;font-weight:700}

  /* El logo ya está en la barra lateral: fuera el de las cabeceras */
  .mt-app.has-nav .mt-header__brand{visibility:hidden}

  /* Elementos fijos abajo: centrados sobre el área de contenido, no sobre la ventana */
  body:has(.mt-app.has-nav) .mt-cta,
  body:has(.mt-app.has-nav) .mt-toast{left:var(--desk-center)}
  body:has(.mt-app.has-nav) .mt-cta{max-width:720px;bottom:20px;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(29,29,31,.45)}
  body:has(.mt-app.has-nav) .mt-layer:not(.mt-layer--modal){padding-left:var(--side-w)}
}
@media (min-width:1100px) and (prefers-reduced-motion:reduce){
  .mt-app .mt-nav__item{transition:none}
}