/* --------------------------------------------------
   Estilos comunes para ambos offcanvas
   -------------------------------------------------- */
/* Límite máximo de altura sobre el viewport */
.offcanvas,
.offcanvas-bottom {
    max-height: 80vh;
    /* ocupa hasta el 80% de la ventana */
    display: flex;
    flex-direction: column;
    /* para que header+body se apilen */
}

/* Header fijo y sin scroll */
.offcanvas-header {
    display: flex;
    align-items: center;
    /* centra verticalmente el título y el botón */
    justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid #dee2e6;
    flex: 0 0 auto;
    border-bottom-style: groove;

}

/* Cuerpo crece hasta llenar, y si excede, hace scroll */
.offcanvas-body {
    flex: 1 1 auto;
    /* ocupa el espacio restante */
    overflow-y: auto;
    margin: 12px;
    /* activa scroll si se desborda */
    /* opcionalmente, añade padding interno si quieres */
}

/* --------------------------------------------------
   Tu offcanvas lateral (igual que antes, pero flex)
   -------------------------------------------------- */
.offcanvas {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -280px;
    width: 280px;
    background: #fff;
    box-shadow: 2px 0 8px rgba(0, 0, 0, .2);
    transition: left .3s ease-out;
    z-index: 1045;
}

.offcanvas.show {
    left: 0;
}

/* --------------------------------------------------
   Tu offcanvas inferior
   -------------------------------------------------- */
.offcanvas-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -800px;
    height: auto;
    /* quita la altura fija */
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .2);
    transition: bottom .3s ease-out;
    z-index: 1045;
}

.offcanvas-bottom.show {
    bottom: 0;
}

/* --------------------------------------------------
   Backdrop y body-lock (igual que antes)
   -------------------------------------------------- */
.offcanvas-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-out;
    z-index: 1041;
}

.offcanvas-title {

    margin-bottom: 0px;

}

.offcanvas-backdrop.show {
    opacity: 1;
    visibility: visible;
}

body.offcanvas-open {
    overflow: hidden;
}