.layout { display: flex; min-height: 100vh; }

    /* ---- Sidebar: pills sobre el fondo, activo en lima ---- */
    .sidebar {
      width: 236px; flex-shrink: 0; background: transparent;
      padding: 1.4rem 1rem; display: flex; flex-direction: column;
      /* Fija al hacer scroll; si el menú crece más que la pantalla,
         scrollea por dentro sin mover el resto. */
      position: sticky; top: 0; align-self: flex-start;
      height: 100vh; overflow-y: auto; scrollbar-width: thin;
    }
    .sidebar .brand {
      color: var(--text); font-weight: 800; font-size: 1.15rem; letter-spacing: .3px;
      padding: .25rem .5rem 1.1rem; display: flex; align-items: center; gap: .5rem;
    }
    .sidebar .brand .star { font-size: 1.3rem; line-height: 1; filter: grayscale(1); }
    .sidebar nav { flex: 1; }
    .sidebar nav a {
      display: flex; align-items: center; gap: .65rem;
      color: #4a4f59; text-decoration: none; font-weight: 500;
      background: rgba(255, 255, 255, .55);
      padding: .55rem 1rem; min-height: 44px; border-radius: 999px; margin: .35rem 0;
    }
    .sidebar nav a:hover { background: #fff; color: var(--text); }
    /* Sin cambio de font-weight al activarse: engordar la tipografía ensancha
       la pill y en el nav horizontal móvil producía layout shift al navegar.
       El fondo lima + aria-current ya comunican el estado. */
    .sidebar nav a[aria-current="page"] {
      background: var(--lime); color: var(--lime-ink);
    }
    .nav-ico { filter: grayscale(1); opacity: .8; width: 1.35em; text-align: center; flex-shrink: 0; }
    .nav-badge {
      /* No usa var(--red) #f43f5e: con texto blanco a .72rem da ~3.3:1 y
         reprueba WCAG AA (4.5:1). Este rojo más profundo llega a ~4.8:1. */
      margin-left: auto; background: #dc2626; color: #fff; border-radius: 999px;
      padding: 0 .5rem; font-size: .72rem; font-weight: 700; min-width: 1.4em; text-align: center;
    }
    .nav-label {
      display: block; padding: 1rem .6rem .3rem; font-size: .68rem; font-weight: 700;
      /* #9aa0aa daba ~1.8:1 sobre el fondo plata: los rótulos eran decorativos
         de facto. Este gris llega a ~4.6:1 sin dejar de verse secundario. */
      letter-spacing: 1.2px; text-transform: uppercase; color: #565b66;
    }

    /* ---- Main + topbar de bienvenida ---- */
    .main { flex: 1; padding: 1.5rem 2rem 2.5rem; min-width: 0; }
    .topbar {
      display: flex; align-items: center; justify-content: space-between;
      gap: 1rem; flex-wrap: wrap;
      /* Anclada arriba: el contenido pasa por debajo con desenfoque. */
      position: sticky; top: 0; z-index: 20;
      /* Tinte de la base (--page-bg) para el esmerilado; se actualiza a mano
         si cambia --page-bg (rgba no acepta el hex de la variable). */
      background: rgba(208, 210, 215, .88);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      margin: -1.5rem -2rem 1.4rem; padding: 1.1rem 2rem;
    }
    .topbar .hello { font-weight: 800; font-size: 1.45rem; }
    .topbar .sub { color: var(--text-muted); font-size: .88rem; margin-top: .15rem; }
    .topbar .chips { display: flex; gap: .6rem; align-items: center; }
    .chip-out {
      background: var(--card-bg); border-radius: 999px; padding: .55rem 1.1rem; min-height: 42px;
      display: inline-flex; align-items: center; text-decoration: none; color: var(--text);
      box-shadow: var(--shadow); font-size: .88rem;
    }
    .chip-out:hover { background: var(--lime); color: var(--lime-ink); }
    .chip-avatar {
      width: 42px; height: 42px; border-radius: 50%; background: var(--lime); color: var(--lime-ink);
      display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem;
    }
    h1 { font-size: 1.3rem; font-weight: 800; margin: 0 0 1.1rem; }
    h2 { font-size: 1.02rem; font-weight: 700; margin: 0 0 .75rem; }

    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }
    @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

    @media (max-width: 720px) {
      .layout { flex-direction: column; }
      .sidebar {
        width: 100%; flex-direction: row; align-items: center; padding: .6rem .75rem; gap: .5rem;
        /* En móvil el menú horizontal queda fijo arriba; la bienvenida scrollea normal. */
        height: auto; overflow-y: visible; z-index: 30;
        background: rgba(208, 210, 215, .92);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      }
      .sidebar .brand { padding: 0 .5rem 0 0; }
      .sidebar nav { display: flex; margin: 0; overflow-x: auto; }
      .sidebar nav a { white-space: nowrap; margin: 0 .2rem; }
      .nav-label { display: none; }
      .main { padding: 1rem; }
      .topbar { position: static; margin: 0 0 1rem; padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
      .bubble { max-width: 90%; }
    }
    @media (prefers-reduced-motion: no-preference) {
      .pills a, button, .sidebar nav a, .chip-out { transition: background-color .15s, color .15s, border-color .15s; }
    }