/* ══════════════════════════════════════════════════════════════════
   Pappitas — Barra inferior en móvil (Fase 2.5)
   Solo existe en pantallas ≤ 768px. Colores 100% desde el theme de
   MASTER (variables), sin colores quemados salvo neutros de sombra.
   ══════════════════════════════════════════════════════════════════ */
.mnav, .mnav-sheet, .mnav-sheet-bg { display: none; }

@media (max-width: 768px) {
  body.has-mnav .mnav { display: grid; }
  /* El menú se abre desde la barra: el hamburguesa del topbar sobra. */
  body.has-mnav #menu-toggle { display: none !important; }
  /* El contenido nunca queda tapado por la barra. */
  body.has-mnav .content-area { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  body.has-mnav .toast-container { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); right: 12px; left: 12px; align-items: stretch; }

  .mnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
    grid-template-columns: repeat(5, 1fr); align-items: end;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
    border-top: 1px solid var(--border);
    transition: transform .22s ease;
  }
  body.mnav-hidden .mnav { transform: translateY(110%); }

  .mnav-item {
    appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
    height: 54px; padding: 0 0 6px; color: var(--text-muted); position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mnav-item span { font-size: 10.5px; font-weight: 700; letter-spacing: .01em; line-height: 1; }
  .mnav-item.on { color: var(--text-primary); }
  .mnav-item.on svg { stroke: var(--brand-primary); stroke-width: 2; }
  .mnav-item.on::before {
    content: ""; position: absolute; top: -6px; left: 50%; width: 18px; height: 3px; margin-left: -9px;
    border-radius: 0 0 3px 3px; background: var(--brand-primary);
  }
  .mnav-item:active { transform: scale(.94); }

  /* Botón central: crear */
  .mnav-plus { gap: 3px; }
  .mnav-plus i {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 14px; margin-top: -22px;
    background: var(--brand-primary); color: #fff;
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--brand-primary) 70%, transparent);
    transition: transform .2s ease;
  }
  .mnav-plus i svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 2.2; }
  .mnav-plus.open i { transform: rotate(45deg); }

  .mnav-dot { position: absolute; top: 8px; left: calc(50% + 7px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--c-danger); color: #fff; font-size: 9.5px; font-weight: 800; line-height: 16px; text-align: center;
    box-shadow: 0 0 0 2px var(--bg-card); }

  /* Hoja "Crear" */
  body.has-mnav .mnav-sheet-bg, body.has-mnav .mnav-sheet { display: block; visibility: hidden; }
  .mnav-sheet-bg { position: fixed; inset: 0; z-index: 470; background: rgba(15, 15, 20, .42);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s; }
  .mnav-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 480;
    background: var(--bg-card); border-radius: 20px 20px 0 0; border-top: 1px solid var(--border);
    padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateY(105%); transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .26s;
    max-height: 86vh; max-height: calc(100dvh - 20px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  body.mnav-sheet-open .mnav-sheet-bg { visibility: visible; opacity: 1; transition: opacity .2s ease; }
  body.mnav-sheet-open .mnav-sheet { visibility: visible; transform: translateY(0); transition: transform .26s cubic-bezier(.2, .8, .2, 1); }

  .mnav-grab { width: 38px; height: 4px; border-radius: 4px; background: var(--border); margin: 2px auto 12px; }
  .mnav-sheet h3 { margin: 0 2px 12px; font-size: 17px; font-weight: 900; letter-spacing: -.02em; color: var(--text-primary); }
  .mnav-opt {
    appearance: none; width: 100%; border: 1px solid var(--border); background: var(--bg-card); font: inherit; cursor: pointer;
    display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; border-radius: 14px; margin-bottom: 8px;
    color: var(--text-primary); -webkit-tap-highlight-color: transparent;
  }
  .mnav-opt:active { background: var(--bg-app); }
  .mnav-opt-ic { flex: none; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--brand-primary) 8%, var(--bg-app)); color: var(--brand-primary); }
  .mnav-opt-ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .mnav-opt-t { flex: 1; min-width: 0; }
  .mnav-opt-t b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; }
  .mnav-opt-t small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mnav-opt > svg { flex: none; width: 18px; height: 18px; stroke: var(--text-muted); fill: none; stroke-width: 2; }
  .mnav-opt.lock { opacity: .55; }
  .mnav-rec { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px;
    background: var(--text-primary); color: var(--bg-card); }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .mnav, .mnav-sheet, .mnav-sheet-bg, .mnav-plus i { transition: none; }
}

@media (max-width: 768px) {
  /* Topbar más limpio: tema y foto viven ahora en la pestaña Cuenta */
  body.has-mnav #topbar-avatar, body.has-mnav .topbar-actions > button[onclick="toggleTheme()"] { display: none !important; }

  /* Pestaña Cuenta: tu foto en lugar de un ícono */
  .mnav-me-av { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--text-muted) center / cover no-repeat; color: var(--bg-card); font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
    box-shadow: 0 0 0 1.5px var(--bg-card); transition: box-shadow .15s ease; }
  .mnav-me.on .mnav-me-av, .mnav-me.open .mnav-me-av { box-shadow: 0 0 0 1.5px var(--bg-card), 0 0 0 3px var(--text-primary); }
  .mnav-me.has-alert::after { content: ""; position: absolute; top: 9px; left: calc(50% + 7px); width: 9px; height: 9px; border-radius: 50%;
    background: var(--c-danger); box-shadow: 0 0 0 2px var(--bg-card); }

  /* Hoja Cuenta */
  .mnav-sheet.is-account { background: var(--bg-app); }
  .mnav-me-card {
    appearance: none; font: inherit; cursor: pointer; width: 100%; text-align: left; color: var(--text-primary);
    display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 14px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  }
  .mnav-me-big { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
    background: var(--brand-primary) center / cover no-repeat; color: #fff; font-size: 17px; font-weight: 800; }
  .mnav-me-t { flex: 1; min-width: 0; }
  .mnav-me-t b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mnav-me-t small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mnav-plan { flex: none; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: 6px 10px; border-radius: 999px; color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 9%, black), color-mix(in srgb, var(--brand-primary) 24%, black));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }

  .mnav-sec { margin: 0 4px 8px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

  .mnav-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
  .mnav-tile {
    appearance: none; font: inherit; cursor: pointer; color: var(--text-primary);
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 11px 4px 10px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; -webkit-tap-highlight-color: transparent;
  }
  .mnav-tile:active { transform: scale(.97); }
  .mnav-tile > span:last-child { font-size: 11px; letter-spacing: -.005em; font-weight: 700; line-height: 1.15; text-align: center; }
  .mnav-tile-ic { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px;
    background: color-mix(in srgb, var(--brand-primary) 7%, var(--bg-app)); color: var(--brand-primary); }
  .mnav-tile-ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mnav-count { position: absolute; top: -5px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--c-danger); color: #fff; font-style: normal; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
    box-shadow: 0 0 0 2px var(--bg-card); }

  .mnav-list { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
  .mnav-row {
    appearance: none; font: inherit; cursor: pointer; width: 100%; background: none; border: 0; color: var(--text-primary);
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-align: left; font-size: 14.5px; font-weight: 700;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-row + .mnav-row { border-top: 1px solid var(--border); }
  .mnav-row:active { background: var(--bg-app); }
  .mnav-row > span { flex: 1; }
  .mnav-row svg { flex: none; width: 19px; height: 19px; stroke: var(--text-secondary); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .mnav-row > svg:last-child { width: 17px; height: 17px; stroke: var(--text-muted); }
  .mnav-row.danger, .mnav-row.danger svg { color: var(--c-danger); stroke: var(--c-danger); }
  .mnav-sw { flex: none; position: relative; width: 40px; height: 24px; border-radius: 12px; background: var(--border); transition: background .18s ease; }
  .mnav-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .18s ease; }
  .mnav-sw.on { background: var(--brand-primary); }
  .mnav-sw.on::after { transform: translateX(16px); }
}

@media (max-width: 768px) {
  /* La hoja Cuenta siempre entra completa: en iPhone "vh" mide la pantalla
     sin la barra de Safari y el pie (Cerrar sesión) quedaba tapado. */
  .mnav-me-big { width: 46px; height: 46px; font-size: 15px; }
  .mnav-tile-ic { width: 34px; height: 34px; }
  .mnav-sec { margin-bottom: 6px; }
  @media (max-height: 700px) {
    .mnav-me-card { padding: 10px 12px; margin-bottom: 10px; }
    .mnav-tiles { margin-bottom: 10px; }
    .mnav-tile { padding: 9px 4px 8px; }
    .mnav-row { padding: 11px 14px; }
  }
}