/*
 * Aiden UI · bottom-sheet
 * CSS module de Arc (registry/components/bottom-sheet/bottom-sheet.module.css) traducido a clases
 * .aui-bottom-sheet-<parte>, con las MISMAS variables de kit/foundation.css. La posición (y) y el oscurecido los
 * escribe bottom-sheet.js en cada fotograma, como el motion value de Arc.
 *
 * Correspondencia: .overlay → -overlay · .sheet → -sheet · .header → -header · .grabber → -grabber ·
 * .grabberBar → -grabber-bar · .headRow → -head-row · .headText → -head-text · .title → -title ·
 * .description → -description · .close → -close · .body → -body · .srOnly → -sr
 *
 * Única diferencia: z-index de Arc + 100000 (50 → 100050), por las cabeceras fijas de los paneles.
 * Requiere ../dialog/dialog.css (regla [data-aui-prestado]).
 */
/* El oscurecido sigue a la hoja desde JS; aquí solo vive su color. */
.aui-bottom-sheet-overlay { position: fixed; inset: 0; z-index: 100050; background: oklch(16% 0 0 / .34); opacity: 0; }
:root[data-theme="dark"] .aui-bottom-sheet-overlay { background: oklch(0% 0 0 / .52); }
/* Mientras se va, no bloquea nada debajo y la hoja no se puede volver a agarrar. */
.aui-bottom-sheet-overlay[data-state="closed"], .aui-bottom-sheet-sheet[data-state="closed"] { pointer-events: none !important; }

/* La hoja mide su detent más alto más una extensión oculta bajo el borde; los detents son desplazamientos en Y desde ahí. */
.aui-bottom-sheet-sheet {
  position: fixed;
  z-index: 100051;
  right: 0;
  bottom: calc(var(--sheet-extension) * -1);
  left: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(100%, 36rem);
  height: calc(var(--sheet-max) * 100vh + var(--sheet-extension));
  height: calc(var(--sheet-max) * 100dvh + var(--sheet-extension));
  margin-inline: auto;
  overflow: hidden;
  padding-bottom: calc(var(--sheet-extension) + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius-surface) var(--radius-surface) 0 0;
  background: var(--surface-raised);
  color: var(--foreground);
  box-shadow: var(--shadow-floating);
  font-family: var(--font-body);
  letter-spacing: var(--tracking-body);
  text-align: left;
  outline: none;
  will-change: transform;
}
.aui-bottom-sheet-sheet *, .aui-bottom-sheet-sheet *::before, .aui-bottom-sheet-sheet *::after { box-sizing: border-box; }

/* Toda la cabecera es el asa: un arrastre puede empezar en cualquier punto por encima del contenido. */
.aui-bottom-sheet-header { position: relative; flex: none; padding: var(--space-2) var(--space-5) var(--space-4); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.aui-bottom-sheet-sheet[data-dragging] .aui-bottom-sheet-header { cursor: grabbing; }
/* Una línea fina aparece solo cuando el contenido pasa por debajo de la cabecera. */
.aui-bottom-sheet-header::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--border); content: ""; opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
.aui-bottom-sheet-sheet[data-scrolled] .aui-bottom-sheet-header::after { opacity: 1; }

/* Botones blindados frente al CSS agresivo de los paneles. */
.aui-bottom-sheet-sheet .aui-bottom-sheet-grabber, .aui-bottom-sheet-sheet .aui-bottom-sheet-close { -webkit-appearance: none !important; appearance: none !important; min-width: 0 !important; min-height: 0 !important; box-shadow: none !important; background-image: none !important; text-transform: none !important; text-shadow: none !important; float: none !important; line-height: 1 !important; }
.aui-bottom-sheet-sheet .aui-bottom-sheet-grabber { display: flex !important; width: 3.5rem !important; height: 1.25rem !important; align-items: center; justify-content: center; margin: 0 auto var(--space-1) !important; padding: 0 !important; border: 0 !important; border-radius: var(--radius-pill) !important; background: transparent !important; cursor: inherit; -webkit-tap-highlight-color: transparent; }
.aui-bottom-sheet-grabber-bar { width: 2.25rem; height: 5px; border-radius: var(--radius-pill); background: var(--border-strong); transition: background-color var(--duration-fast) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .aui-bottom-sheet-grabber:hover .aui-bottom-sheet-grabber-bar { background: var(--text-muted); } }
.aui-bottom-sheet-sheet[data-dragging] .aui-bottom-sheet-grabber-bar { background: var(--text-muted); }

.aui-bottom-sheet-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.aui-bottom-sheet-head-text { min-width: 0; }
.aui-bottom-sheet-title { margin: 0 !important; padding: 0 !important; color: var(--foreground); font-family: var(--font-body); font-size: var(--text-lg) !important; font-weight: 500 !important; letter-spacing: var(--tracking-body); line-height: var(--leading-body); text-transform: none; }
.aui-bottom-sheet-description { margin: 2px 0 0; padding: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }

.aui-bottom-sheet-sheet .aui-bottom-sheet-close { display: grid !important; flex: none; width: 2rem !important; height: 2rem !important; place-items: center; margin: -2px 0 0 !important; padding: 0 !important; border: 1px solid var(--border) !important; border-radius: var(--radius-pill) !important; background: var(--surface-muted) !important; color: var(--text-secondary) !important; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.aui-bottom-sheet-close svg { display: block; width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .aui-bottom-sheet-sheet .aui-bottom-sheet-close:hover { color: var(--foreground) !important; border-color: var(--border-strong) !important; } }
.aui-bottom-sheet-sheet .aui-bottom-sheet-close:active { color: var(--foreground) !important; }

/* El contenido solo hace scroll en el detent más alto; por debajo, un arrastre o un scroll abren antes la hoja. */
.aui-bottom-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-1) var(--space-5) var(--space-6); overscroll-behavior: contain; scrollbar-width: thin; touch-action: pan-y; font-size: var(--text-sm); line-height: var(--leading-body); }
.aui-bottom-sheet-sheet:not([data-expanded]) .aui-bottom-sheet-body { overflow: hidden; touch-action: none; }

.aui-bottom-sheet-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 40rem) {
  .aui-bottom-sheet-header { padding-inline: var(--space-4); }
  .aui-bottom-sheet-body { padding-inline: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .aui-bottom-sheet-header::after, .aui-bottom-sheet-grabber-bar, .aui-bottom-sheet-sheet .aui-bottom-sheet-close { transition: none; }
}