/* C-07 Sheet: opens below the app top bar, which stays visible. */
/* Covers everything below the top bar; --sheet-topo is measured by the Alpine `sheet` component. */
.sheet {
  position: fixed; top: var(--sheet-topo, 88px); left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.sheet[hidden] { display: none; }
.sheet__fundo { position: absolute; inset: 0; border: none; background: var(--overlay-sheet); cursor: pointer; }
.sheet__painel {
  position: relative; display: flex; flex-direction: column;
  max-width: 480px; width: 100%; margin: 0 auto;
  height: calc(100% - var(--sp-5));
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; overflow: hidden;
  background: var(--bg); box-shadow: var(--shadow-sheet);
}
.sheet__alca { display: flex; justify-content: center; padding: var(--sp-3) 0 2px; background: var(--surface); }
.sheet__alca span { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--border); }
.sheet__cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5) var(--sp-5) var(--sp-8);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.sheet__sobre { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.sheet__titulo { margin: 0; font-size: var(--fs-card-title); font-weight: 600; }
.sheet__fechar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: var(--touch-min); height: var(--touch-min); border: none; border-radius: var(--r-button-app);
  background: transparent; color: var(--ink); cursor: pointer;
}
.sheet__corpo { flex: 1; overflow-y: auto; padding: var(--sp-6) var(--sp-7) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-4); }
.sheet__rodape {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-7) max(var(--sp-8), env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line);
}
.sheet__rodape .botao:not(.botao--icone) { flex: 1; }
.sheet--entrando .sheet__painel { animation: sheet-sobe 240ms ease-out; }
@keyframes sheet-sobe { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet__titulo:focus { outline: none; }