dialog {
    /* Caja principal (similar a .modal-content) */
    background-color: #fff;
    color: #212529;
    border: 1px solid rgba(0,0,0,.175);
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    background-clip: padding-box;
    margin: auto;
    padding: 0;
    overflow: hidden;
    outline: 0;
}

/* Centrado fijo en pantalla (el <dialog> ya centra, pero esto lo hace consistente) */
dialog[open] {
    position: fixed;
    inset: 0; /* top/right/bottom/left: 0 */
}

dialog::backdrop {
    background-color: transparent;
    cursor: pointer;
}

 /*Tipografía por defecto similar a Bootstrap (opcional) */
dialog {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
  font-size: 1rem;
}

dialog.dialog-fullscreen[open] {
    inset: 0;
    margin: 0;
    padding: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
}

/* ===== Zonas internas: header, body, footer ===== */
.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 0.75rem .25rem 0.75rem;
}

.dialog-body {
    padding: 1rem;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: .5rem 1rem;
    gap: .5rem;
}

/* Botón de cierre dentro del header */
.dialog-header .close {
    padding: .5rem;
    margin: -1rem -0.5rem -0.5rem auto;
    color: red !important;
    font-weight: bold !important;
}

@media (max-width: 576px) {
    .dialog {
        margin: auto .5rem !important;
    }

    .msb-body {
        padding: 0.5rem
    }
}

.msb-dialog {
    /* Caja principal (similar a .modal-content) */
    /* max-width: 350px !important; */
    /* min-width: 350px !important; */
    width: 350px !important;
}

.msb-body {
    text-align: center;
}