/* ════════════════════════════════════════════════════════════════
   MI TURNO · modals/bottom-sheets.css
   ════════════════════════════════════════════════════════════════ */

.mol-ov {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(200, 220, 255, 0.18);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  animation: fadeIn 0.25s var(--ease);
  isolation: isolate;
  contain: paint;
}

[data-theme='dark'] .mol-ov {
  background: rgba(0, 4, 20, 0.52);
}

.mol-sh {
  width: 100%;
  max-width: 480px;
  max-height: 88svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 18px 22px max(26px, var(--sab));
  border: 1px solid var(--border);
  border-bottom: none;
  box-shadow: var(--sh-3);
  animation: slideUp 0.4s var(--spring);
  contain: paint layout;
}

.mol-hdl {
  width: 36px;
  height: 5px;
  background: var(--border2);
  border-radius: 3px;
  margin: 0 auto 18px;
  opacity: 0.5;
}