/* ═══════════════════════════════════════════════════════════════════════════
   RAVVO — MODAIS DA ÁREA DO ALUNO (2026-10-07)
   --------------------------------------------------------------------------
   Por que existe: os modais do aluno nascem DENTRO de `.app-layout`, que tem
   `position:relative; z-index:1` (layout.css). Isso prende o z-index:2000 do
   overlay numa camada de valor 1 — e a barra inferior (#mobile-tabbar, irmã
   do .app-layout, z-index:150) era desenhada POR CIMA de qualquer modal.
   Somado ao `max-height:90vh` e ao teclado (que não encolhe o que é fixed),
   o SALVAR do registro de carga ficava atrás da barra ou do teclado.

   O que faz (só área do aluno, só celular — desktop intacto):
   - com modal aberto (`body.ra-modal-aberto`, posto pelo v26-modais-aluno.js)
     somem a barra inferior e os botões flutuantes;
   - o overlay ocupa a ÁREA VISÍVEL real: 100dvh, ou a altura medida do
     visualViewport/teclado (`--ra-vv-h`) quando o JS mede;
   - o modal vira cabeçalho fixo + conteúdo rolável + rodapé de ações fixo,
     com a área segura do iPhone embaixo.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* 1) nada por cima do modal */
  body.is-student-shell.ra-modal-aberto .mobile-tabbar,
  body.is-student-shell.ra-modal-aberto .sidebar-toggle,
  body.is-student-shell.ra-modal-aberto .theme-fab,
  body.is-student-shell.ra-modal-aberto .ft-rest-bar,
  body.is-student-shell.ra-modal-aberto .pwa-install-banner { display: none !important; }

  /* 2) overlay = área visível (alguns modais trazem inset/padding inline) */
  body.is-student-shell .modal-overlay {
    top: 0 !important;
    bottom: auto !important;
    height: 100vh !important;   /* navegador sem dvh */
    height: 100dvh !important;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: center;
    box-sizing: border-box;
  }
  /* medida real (teclado aberto, barra do navegador etc.) */
  body.is-student-shell.ra-vv .modal-overlay {
    top: var(--ra-vv-top, 0px) !important;
    height: var(--ra-vv-h, 100dvh) !important;
  }

  /* 3) modal: cabe na área visível e rola por dentro */
  body.is-student-shell .modal-overlay > .modal {
    max-height: 100% !important;
    margin: 0 auto !important;
    width: 96%;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-top: 0;
    padding-bottom: 0;
    background: var(--bg-modal);   /* opaco: cabeçalho/rodapé fixos não deixam o conteúdo vazar */
  }
  /* cabeçalho fixo no topo do modal */
  body.is-student-shell .modal-overlay > .modal > .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-modal);
    padding-top: 18px;
  }
  /* rodapé de ações fixo embaixo, sempre alcançável */
  body.is-student-shell .modal-overlay > .modal > .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--bg-modal);
    margin: 16px -20px 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    flex-wrap: wrap;
  }
  body.is-student-shell .modal-overlay > .modal > .modal-footer .btn { flex: 1 1 40%; width: auto; }
  /* modal sem rodapé: respiro no fim do conteúdo */
  body.is-student-shell .modal-overlay > .modal > :last-child:not(.modal-footer) { margin-bottom: 20px; }
}