/* ══════════════════════════════════════════════════════════════════════
   COMPONENT: bottom-sheet.css
   Hoja inferior genérica. La abre y la cierra js/utils/bottom-sheet.js
   (arrastre para cerrar, foco atrapado, Escape, fondo inerte).

   Marcado:
     <div class="sheet-overlay" hidden>
       <div class="sheet" role="dialog" aria-modal="true" aria-labelledby="…">
         <div class="sheet-handle" data-sheet-drag aria-hidden="true"></div>
         <header class="sheet-header" data-sheet-drag>…</header>
         <div class="sheet-body" data-sheet-scroll>…</div>
       </div>
     </div>

   Teléfono (≤768px): sube desde el borde inferior. Escritorio: modal centrado.
   La usa el quiz. El simulacro tiene la misma geometría en exam-runner.css
   (`.sim-sheet-*`, acotada a #sim-exam-layout); si cambia una, cambia la otra.

   Personalizable desde la pantalla que la aloja:
     --sheet-scrim, --sheet-shadow, --sheet-bg, --sheet-max-w
   Los selectores van con dos clases (`.sheet-overlay > .sheet`) para ganar a
   las reglas de una clase de las hojas de página, que cargan después.
   ══════════════════════════════════════════════════════════════════════ */

.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overscroll-behavior: contain;
}
.sheet-overlay[hidden] { display: none; }

.sheet-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sheet-scrim, rgba(20, 16, 38, 0.48));
  opacity: 0;
  transition: opacity 240ms ease-out;
}
.sheet-overlay.is-open::before { opacity: var(--sheet-backdrop, 1); }
.sheet-overlay.is-closing::before { opacity: 0; transition-duration: 200ms; }

.sheet-overlay > .sheet {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--sheet-max-w, 560px);
  max-height: calc(100dvh - 48px);
  background: var(--sheet-bg, var(--bg-white));
  color: var(--text-primary);
  border-radius: 24px;
  box-shadow: 0 24px 60px -16px rgba(20, 16, 38, 0.32);
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transition: opacity 200ms ease-out, transform 260ms cubic-bezier(0.23, 1, 0.32, 1);
}
.sheet-overlay.is-open > .sheet { opacity: 1; transform: none; }
.sheet-overlay.is-closing > .sheet {
  opacity: 0;
  transform: scale(0.98);
  transition-duration: 150ms;
}
.sheet-overlay > .sheet:focus { outline: none; }

.sheet-handle { display: none; }

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 12px 12px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
  flex-shrink: 0;
}
.sheet-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.sheet-title .material-symbols-outlined { font-size: 20px; }

.sheet-close {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.sheet-close:active { transform: scale(0.94); }
.sheet-close .material-symbols-outlined { font-size: 22px; }
@media (hover: hover) and (pointer: fine) {
  .sheet-close:hover { background: var(--bg-secondary); }
}

.sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 24px 24px;
}

@media (max-width: 768px) {
  .sheet-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .sheet-overlay > .sheet {
    max-width: none;
    max-height: calc(100dvh - env(safe-area-inset-top) - 24px);
    border-radius: 24px 24px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: var(--sheet-shadow, 0 -12px 40px -12px rgba(20, 16, 38, 0.28));
    opacity: 1;
    transform: translate3d(0, 100%, 0);
    transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .sheet-overlay.is-open > .sheet { transform: translate3d(0, 0, 0); }
  .sheet-overlay.is-closing > .sheet {
    opacity: 1;
    transform: translate3d(0, 100%, 0);
    transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .sheet-handle {
    display: block;
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: 22px;
    touch-action: none;
    cursor: grab;
  }
  .sheet-handle::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 36px;
    height: 5px;
    margin-left: -18px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--text-primary) 20%, transparent);
  }
  .sheet-overlay [data-sheet-drag] { touch-action: none; }
  .sheet-header { padding: 0 12px 10px 20px; }
  .sheet-body { padding: 16px 20px 24px; }
}

[data-theme="dark"] .sheet-overlay::before { background: var(--sheet-scrim, rgba(0, 0, 0, 0.62)); }
[data-theme="dark"] .sheet-overlay > .sheet {
  box-shadow: var(--sheet-shadow, 0 -12px 40px -12px rgba(0, 0, 0, 0.6));
}

/* Movimiento reducido: sin desplazamientos, solo fundidos */
@media (prefers-reduced-motion: reduce) {
  .sheet-overlay > .sheet,
  .sheet-overlay.is-open > .sheet,
  .sheet-overlay.is-closing > .sheet {
    transform: none;
    transition: opacity 160ms ease;
  }
  .sheet-overlay:not(.is-open) > .sheet { opacity: 0; }
  .sheet-overlay.is-open > .sheet { opacity: 1; }
}