/* Nebulosa · hoja inferior (ui.bottom-sheet). Solo se activa cuando el componente le pone .is-sheet (según su consulta de medios).
   Se anima únicamente con transform y opacity. */
.sheet-handle { display: none; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 78; background: rgba(2, 8, 18, .62); opacity: 0; transition: opacity .3s var(--ease); }
.sheet-backdrop.is-open { opacity: 1; }
.sheet-backdrop[hidden] { display: none; }
.is-sheet {
  position: fixed; z-index: 79; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: auto; max-height: min(90dvh, 820px); margin: 0;
  overflow-y: auto; overscroll-behavior: contain; border-radius: 26px 26px 0 0; padding-bottom: env(safe-area-inset-bottom);
  background: var(--card); border: 1px solid var(--line-2); border-bottom: 0; box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, .7);
  opacity: 1; transform: translateY(104%); visibility: hidden; transition: transform .32s var(--ease), visibility 0s linear .32s;
}
.is-sheet.is-open { transform: none; visibility: visible; transition: transform .32s var(--ease), visibility 0s; }
.is-sheet.is-dragging { transition: none; }
.is-sheet:focus { outline: none; }
.is-sheet .sheet-handle { display: block; position: sticky; top: 0; z-index: 2; width: 100%; height: 30px; padding: 0; border: 0; background: var(--card); cursor: grab; touch-action: none; }
.is-sheet .sheet-handle::before { content: ""; position: absolute; left: 50%; top: 11px; width: 46px; height: 5px; border-radius: 3px; background: var(--line-2); transform: translateX(-50%); }
.is-sheet .sheet-handle:focus-visible { outline: 2px solid var(--sky); outline-offset: -4px; border-radius: 26px 26px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .is-sheet, .is-sheet.is-open, .sheet-backdrop { transition: none; }
}