/* Estilos base (los que ya tienes) */
body.offcanvas-panel-open {
    overflow: hidden;
}

.offcanvas-panel-backdrop {
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index         : 1040;
    display         : none;
    transition      : opacity 0.3s ease;
}

.offcanvas-panel-backdrop.show {
    display: block;
    opacity: 1;
}

/* Estas clases -md y -xl definen anchos para pantallas más grandes.
   En móviles, querremos que .offcanvas-panel sea 100% independientemente de estas. */
.offcanvas-panel-md {
    width: 50% !important;
}

.offcanvas-panel-xl {
    width: 80% !important;
}

.offcanvas-panel {
    position           : fixed;
    top                : 0;
    right              : -100%;
    width              : 500px;
    height             : 100%;
    box-shadow         : -2px 0 5px rgba(0, 0, 0, 0.1);
    transition         : right 0.3s ease, width 0.3s ease;
    z-index            : 1050;
    overflow-y         : auto;
    border-radius      : var(--border-radius-global) !important;
    background-image   : url('../img/bg-hero-sections.png');
    background-size    : cover;
    background-position: center center;
    background-repeat  : no-repeat;
}

.offcanvas-panel.show {
    right: 0;
}

.offcanvas-panel-header {
    display            : flex;
    justify-content    : space-between;
    align-items        : center;
    padding            : 15px;
    border-bottom      : 1px solid #000;
    background-color   : #000;
    height             : 300px;
    background-size    : cover;
    background-position: center center;
    background-repeat  : no-repeat;
    position           : relative;
}

.offcanvas-panel-title-on-bg {
    font-size  : 1.5rem;
    font-weight: bold;
    color      : white;
    z-index    : 2;
    position   : relative;
}

.offcanvas-panel-body {
    padding: 15px;
}

.offcanvas-panel-section {
    margin-bottom: 20px;
}

.offcanvas-panel-section h5 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.offcanvas-panel-section p {
    margin-bottom: 0;
}

.offcanvas-panel-footer {
    padding: 15px;
    border-top: 1px solid #e0e0e0;
}

.offcanvas-panel-header.has-bg-image .header-bg-overlay {
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgba(0,0,0,0.4);
    z-index         : 1;
}
.offcanvas-panel-secondary-title {
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}


@media (max-width: 767.98px) {
    .offcanvas-panel,
    .offcanvas-panel.offcanvas-panel-md,
    .offcanvas-panel.offcanvas-panel-xl {
        width        : 100% !important;
        border-radius: 0 !important;
        box-shadow   : none !important;
    }

    /* Opcional: Ajustar la altura del header en móviles si es muy grande */
    /*
    .offcanvas-panel-header {
        height: 200px;
    }
    */

    /* Opcional: Ajustar el padding del body si es necesario */
    /*
    .offcanvas-panel-body {
        padding: 10px;
    }
    */
}