:root {

    /* Variables */
    --bg-opacity: 1;

    /* Variables de colores */
    --color-bg-popup: rgb(23 23 23 / var(--bg-opacity));
    /*--color-border-popup: #181818;*/
    --color-border-popup: #eba7c7;
    --color-text: #fff;
    --color-description-text: rgb(163 163 163 / var(--bg-opacity));
    /*--color-button-confirm: #c14675;*/
    --color-button-confirm: rgb(243 134 185 / var(--bg-opacity));
    --color-button-cancel: #fff;
    /*--color-icon-success: #c14675;*/
    --color-icon-success: rgb(243 134 185 / var(--bg-opacity));

    /* Otras variables */
    --border-radius-popup: 30px;
    --border-radius-button: 5px;
    --border-width-icon: 0.25em;

}

/* Popup general */
.my-popup-class {
    background-color: var(--color-bg-popup);
    border: 1px solid #ffffff00 !important;
    border-radius: var(--border-radius-popup);
}

.swal2-popup {
    background-color: var(--color-bg-popup) !important;
    border: 2px solid var(--color-border-popup);
    border-radius: var(--border-radius-popup);
}

/* Personalización de la descripcion de la alerta */
.swal2-html-container{
    color: var(--color-description-text) !important;
}

/* Contenido de texto */
.my-content-class {
    color: var(--color-text);
}

/* Título de la alerta */
.swal2-title {
    color: var(--color-text);
    text-transform: uppercase; /* Normaliza que los títulos estén en mayúsculas */
}

/* Texto dentro del contenido */
.swal2-content {
    color: var(--color-text);
    text-transform: uppercase; /* Consistencia en el estilo del texto */
}

/* Botón de confirmación personalizado */
.swal2-confirm {
    background-color: var(--color-button-confirm) !important; /* Color personalizado */
    border-radius: var(--border-radius-button); /* Borde redondeado */
    width: 100%; /* Ancho completo */
}

/* Botón de cancelación personalizado */
.swal2-cancel {
    background-color: var(--color-button-cancel) !important; /* Color personalizado */
    color: #000;
    border-radius: var(--border-radius-button); /* Borde redondeado */
    width: 100%; /* Ancho completo */
}

/* Personalización del círculo del ícono de éxito */
.swal2-icon.swal2-success .swal2-success-ring {
    border: var(--border-width-icon) solid var(--color-icon-success) !important; /* Color del anillo del ícono de éxito */
}

/* Personalización de las líneas dentro del ícono de éxito */
.swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: var(--color-icon-success) !important; /* Color de las líneas */
}

div:where(.swal2-icon).swal2-info {
    border-color:  var(--color-icon-success) !important; /* Color de las líneas */
    color: var(--color-icon-success) !important; /* Color de las líneas */
}

/* Personalización del color del backdrop de la alerta */
div:where(.swal2-container).swal2-backdrop-show, div:where(.swal2-container).swal2-noanimation {
    background: rgba(0,0,0,.8) !important; /* Color del backdrop */
}

div:where(.swal2-container) div:where(.swal2-popup) {
    width: 22em !important;
    padding: 30px !important;

}