/* ========================================================================== HT-OVERLAY — Bottom sheet universal Base compartida por ht-select, ht-date-picker y ht-phone-input. El overlay se inserta como hijo directo de para evitar conflictos de z-index con modals Bootstrap. ========================================================================== */ /* --- Scroll lock --------------------------------------------------------- */ body.ht-overlay-open { overflow: hidden; touch-action: none; } /* --- Backdrop ------------------------------------------------------------ */ .ht-overlay__backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); z-index: 9000; transition: background 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease; } .ht-overlay__backdrop--visible { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* --- Sheet --------------------------------------------------------------- */ .ht-overlay { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9001; background: var(--color-bg-card); border-radius: 20px 20px 0 0; max-height: 85dvh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12); padding-bottom: env(safe-area-inset-bottom); overscroll-behavior: contain; } .ht-overlay--visible { transform: translateY(0); } /* --- Drag pill ----------------------------------------------------------- */ .ht-overlay__pill { width: 36px; height: 4px; background: var(--color-border-strong); border-radius: var(--radius-pill); margin: 12px auto 0; flex-shrink: 0; cursor: grab; opacity: 0.5; } /* --- Header -------------------------------------------------------------- */ .ht-overlay__header { padding: 14px var(--spacing-md) var(--spacing-sm); flex-shrink: 0; border-bottom: 1px solid var(--color-border-light); } .ht-overlay__title { font-family: var(--font-family-heading); font-size: var(--text-base); font-weight: var(--font-weight-bold); color: var(--color-text-heading); letter-spacing: -0.01em; } .ht-overlay__subtitle { margin: 6px 0 0; font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--font-weight-normal); line-height: 1.3; } /* --- Body (scrollable content) ------------------------------------------ */ .ht-overlay__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* --- Footer -------------------------------------------------------------- */ .ht-overlay__footer { flex-shrink: 0; padding: var(--spacing-md); border-top: 1px solid var(--color-border-light); } /* --- Desktop: centrar y limitar ancho ------------------------------------ */ @media (min-width: 600px) { .ht-overlay { left: 50%; right: auto; width: 100%; max-width: 480px; transform: translateX(-50%) translateY(100%); border-radius: 20px 20px 0 0; } .ht-overlay--visible { transform: translateX(-50%) translateY(0); } }