/* Menu lateral recolhível no celular. As telas vêm do Claude Design com estilos inline,
   por isso os !important. Em telas largas nada muda. */
.mnav-toggle { display: none; }

@media (max-width: 860px) {
  aside:first-of-type {
    flex: 1 1 100% !important;
    position: sticky !important;
    top: 0;
    z-index: 50;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px !important;
    gap: 0 !important;
    box-shadow: 0 2px 10px rgba(15, 34, 25, 0.25);
  }
  aside:first-of-type > :first-child { padding: 0 56px 0 0 !important; }
  aside:first-of-type > :first-child img { width: 40px !important; height: 40px !important; }

  /* Menu e rodapé viram um painel suspenso abaixo da barra. */
  aside:first-of-type > nav,
  aside:first-of-type > :last-child:not(:first-child) {
    display: none !important;
  }
  html.mnav-open aside:first-of-type > nav {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 70px - env(safe-area-inset-top));
    overflow-y: auto;
    padding: 8px 12px 16px;
    background: #1F3A2E;
    box-shadow: 0 12px 24px rgba(15, 34, 25, 0.35);
    border-top: 1px solid rgba(248, 239, 227, 0.14);
  }
  html.mnav-open body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15, 34, 25, 0.35);
  }

  .mnav-toggle {
    display: flex;
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    right: 16px;
    z-index: 60;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(201, 169, 97, 0.45);
    border-radius: 10px;
    background: rgba(248, 239, 227, 0.08);
    color: #F8EFE3;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mnav-toggle:focus-visible { outline: 2px solid #C9A961; outline-offset: 2px; }
  .mnav-toggle .mnav-close, html.mnav-open .mnav-toggle .mnav-open { display: none; }
  html.mnav-open .mnav-toggle .mnav-close { display: block; }

  main { padding: 20px 16px 40px !important; }

  /* Tabelas largas rolam dentro do próprio cartão em vez de alargar a página
     (senão o celular reduz o zoom da tela inteira e o botão do menu sai da vista). */
  #dc-root { position: relative; overflow-x: clip; }
  main * { min-width: 0; }
  main :has(> table) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; }
}