/* --- Estilos Base del Canvas y Backdrop --- */
body.canvas-open {
    overflow: hidden; /* Evita el scroll del body cuando el canvas está abierto */
}

.canvas {
    position        : fixed;
    top             : 0;
    right           : -100%;
    width           : 70%;
    max-width       : 90vw;
    height          : 100%;
    background-color: #23272a;
    color           : #e9ecef;
    box-shadow      : -6px 0 18px rgba(0, 0, 0, 0.4);
    transition      : right 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index         : 1056;
    display         : flex;
    flex-direction  : column;
    overflow        : hidden;
}

.canvas.show {
    right: 0;
}

.canvas-header {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    padding         : 0.75rem 1.25rem;
    background-color: #1a1d1f;
    border-bottom   : 1px solid #343a40;
    flex-shrink     : 0;
}

.canvas-title {
    font-size    : 1.15rem;
    font-weight  : 500;
    margin-bottom: 0;
}

.canvas-body {
    padding                   : 1.25rem;
    flex-grow                 : 1;
    overflow-y                : auto;
    -webkit-overflow-scrolling: touch;
}

.canvas-footer {
    padding         : 0.75rem 1.25rem;
    border-top      : 1px solid #343a40;
    background-color: #1a1d1f;
    flex-shrink     : 0;
    text-align      : center;
}
.canvas-footer .btn {
    margin: 0 0.25rem;
}


.canvas-backdrop {
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgba(0, 0, 0, 0.6);
    opacity         : 0;
    visibility      : hidden;
    transition      : opacity 0.35s ease-out, visibility 0s linear 0.35s;
    z-index         : 1055;
}

.canvas-backdrop.show {
    opacity         : 1;
    visibility      : visible;
    transition-delay: 0s;
}

/* --- Estilos del Contenido Dentro del Canvas --- */
#canvasArtistNameDisplay {
    margin-bottom: 0.75rem !important;
}

#artistCanva hr {
    border-top-color: #495057;
}

#canvasDescriptionLanguage.form-select {
    background-color: #2c3034;
    color           : #e9ecef;
    border-color    : #495057;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.description-canvas-content {
    max-height      : 50vh;
    overflow-y      : auto;
    padding         : 10px 15px;
    background-color: rgba(0,0,0,0.15);
    border          : 1px solid #3a3f44;
    border-radius   : 0.25rem;
    margin-top      : 0.5rem;
    font-size       : 0.95rem;
    line-height     : 1.6;
}
.description-canvas-content img {
    max-width    : 100%;
    height       : auto;
    border-radius: 0.25rem;
    margin       : 0.75rem 0;
    display      : block;
    margin-left  : auto;
    margin-right : auto;
}
.description-canvas-content p:last-child {
    margin-bottom: 0;
}

/* Estilos para las imágenes del artista en el canvas */
img.canvas-artist-image {
    display         : block;
    margin-left     : auto;
    margin-right    : auto;
    object-fit      : contain;
    border          : 2px solid #444;
    border-radius   : 0.3rem;
    background-color: #111;
    height          : 220px;
    width           : auto;
}

/* --- Media Query para Móviles (Pantallas Pequeñas) --- */
@media (max-width: 767.98px) {
    .canvas {
        width    : 100%;
        max-width: 100%;
        right    : -100%;
    }
    .canvas.show {
        right: 0;
    }

    .canvas-body .row .col-12.col-md-7 {
        order: 0;
    }
    .canvas-body .row .col-12.col-md-5 {
        order: 1;
        margin-top: 1.5rem;
    }

    /* Podemos hacer la descripción un poco menos alta en móvil si es necesario */
    .description-canvas-content {
        max-height: none;
    }

}

/* --- Media Query para Escritorio (md y superior) --- */
@media (min-width: 768px) {
    /* Los tamaños de imagen que ya tenías para escritorio */
    #canvasArtistImgFront.canvas-artist-image { max-height: 280px; }
    #canvasArtistImgBack.canvas-artist-image { max-height: 220px; }
    #canvasArtistImgCarousel.canvas-artist-image { max-height: 180px; }

}