/* ============================================================
   SWEETALERT2 — LÍNEA VISUAL "AVISOS DEL SISTEMA"
   ARCHIVO      : assets/css/swal-custom.css
   APLICACIÓN   : MunDigital Web
   DESARROLLADOR: Rodrigo Arce Muñoz
   CREACIÓN     : Septiembre 2026
   ============================================================
   Reskin 100% CSS de SweetAlert2 (sin tocar ningún Swal.fire() existente)
   para que se vea igual que el modal de Avisos del Sistema (includes/header.php,
   renderizar_aviso_modal_html() en includes/functions.php): popup oscuro,
   ícono circular sólido, título en mayúsculas, botones tipo píldora.

   SweetAlert2 envuelve sus propias reglas en :where(...) a propósito para
   dejar especificidad CSS 0 — por eso estas reglas ganan sin necesitar
   !important en casi ningún caso (sólo donde compite con un color puesto
   inline por un Swal.fire() puntual, ej. confirmButtonColor).
   ============================================================ */

/* ===== Popup: fondo oscuro + esquinas redondeadas, igual que el modal de Avisos ===== */
.swal2-popup {
    background-color: #404040 !important;
    border-radius: 1rem;
    padding-top: 0.6em;
    overflow: hidden;
    position: relative;
}

/* ===== Barra de color detrás del ícono, según el tipo (mismo criterio que aviso_tipo) ===== */
.swal2-popup::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 64px;
    background-color: #3fc3ee; /* info por defecto */
}
.swal2-popup:has(.swal2-icon.swal2-success)::before { background-color: #02a41c; }
.swal2-popup:has(.swal2-icon.swal2-error)::before   { background-color: #ed0017; }
.swal2-popup:has(.swal2-icon.swal2-warning)::before { background-color: #ecb100; }
.swal2-popup:has(.swal2-icon.swal2-question)::before{ background-color: #0dcaf0; }

/* ===== Ícono: círculo sólido (no el anillo delgado por defecto), asomando sobre la barra. =====
   El borde queda del mismo color que el fondo del popup (#404040) a pedido — mismo criterio
   que se probó y se sacó en el modal de Avisos por la "media luna" contra la barra de color;
   acá el ícono queda más metido en la barra que en el cuerpo, así que se nota menos. ===== */
.swal2-icon {
    position: relative;
    z-index: 1;
    border-width: .25em !important;
    border-style: solid !important;
    border-color: #404040 !important;
    background-color: #3fc3ee;
    margin-top: 0.6em !important;
}
.swal2-icon.swal2-success { background-color: #02a41c; }
.swal2-icon.swal2-error   { background-color: #ed0017; }
.swal2-icon.swal2-warning { background-color: #ecb100; }
.swal2-icon.swal2-question{ background-color: #0dcaf0; }

/* ===== Glifos/marcas en blanco: al rellenar el ícono, quedaban del mismo color que el =====
   fondo (invisibles) — se recolorean a blanco para que se vean sobre el círculo sólido ===== */
.swal2-icon .swal2-icon-content { color: #fff !important; }
.swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-icon.swal2-success .swal2-success-line-long { background-color: #fff !important; }
.swal2-icon.swal2-error .swal2-x-mark-line-left,
.swal2-icon.swal2-error .swal2-x-mark-line-right { background-color: #fff !important; }
/* Anillo decorativo semitransparente de "success": de más sobre un ícono ya sólido */
.swal2-icon.swal2-success .swal2-success-ring { display: none; }
/* Piezas de "success" que sólo existen para tapar el anillo delgado original y animar
   la entrada (SweetAlert2 las pinta con el color de fondo del popup, ahora oscuro, y
   por eso tapaban el verde sólido) — con el ícono relleno no cumplen ningún propósito */
.swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal2-icon.swal2-success .swal2-success-circular-line-right,
.swal2-icon.swal2-success .swal2-success-fix { display: none; }

/* Nota: las "máscaras" de esquina del ícono de éxito (swal2-success-circular-line-*,
   swal2-success-fix) no se tocan acá — SweetAlert2 ya las colorea en JS leyendo el
   background-color real del popup (ver sweetalert2.all.min.js), así que se adaptan
   solas al fondo oscuro de arriba. */

/* ===== Título y mensaje ===== */
.swal2-title {
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
}
.swal2-html-container {
    color: #adb5bd !important;
}

/* ===== Botones tipo píldora — el color lo sigue poniendo cada Swal.fire() (confirmButtonColor =====
   o las clases por defecto), acá sólo se cambia la forma ===== */
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
    border-radius: 50rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}