/* ═══════════════════════════════════════════════════════════════════
   XONE HUB — Tema visual de alertas Swal2 + Toaster
   Basado en diseño: docs/design/xonehub_licencias_alertas.html
   Solo cambia ESTÉTICA. No modifica operatividad.
   Paleta: primary #00acd7 · dark #00396f · success #00b87c
           error #e8394a · warning #f59e0b · text #18293e
═══════════════════════════════════════════════════════════════════ */


/* ─── SWEETALERT2 ────────────────────────────────────────────────── */

/* Overlay */
.swal2-container {
    background: rgba(0, 0, 0, .46) !important;
}

/* Popup */
.swal2-popup {
    width: 420px !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .28) !important;
    padding: 2.2em 2em 1.75em !important;
}

/* Icono: error */
.swal2-icon.swal2-error {
    border-color: rgba(232, 57, 74, .35) !important;
    background: rgba(232, 57, 74, .08) !important;
}
.swal2-icon.swal2-error .swal2-x-mark-line-left,
.swal2-icon.swal2-error .swal2-x-mark-line-right {
    background-color: #e8394a !important;
}

/* Icono: advertencia */
.swal2-icon.swal2-warning {
    border-color: rgba(245, 158, 11, .35) !important;
    background: rgba(245, 158, 11, .08) !important;
    color: #f59e0b !important;
}

/* Icono: éxito */
.swal2-icon.swal2-success {
    border-color: rgba(0, 184, 124, .4) !important;
    background: rgba(0, 184, 124, .1) !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #00b87c !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(0, 184, 124, .4) !important;
}
/* Elementos de máscara: anclarlos al blanco del popup para que no tapen el icono */
.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 {
    background-color: #fff !important;
}

/* Icono: info */
.swal2-icon.swal2-info {
    border-color: rgba(0, 172, 215, .35) !important;
    background: rgba(0, 172, 215, .08) !important;
    color: #00acd7 !important;
}

/* Icono: pregunta */
.swal2-icon.swal2-question {
    border-color: rgba(0, 172, 215, .35) !important;
    background: rgba(0, 172, 215, .08) !important;
    color: #00acd7 !important;
}

/* Título */
.swal2-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #18293e !important;
    padding: 0 !important;
}

/* Contenido */
.swal2-content {
    font-size: 13px !important;
    color: #4d6782 !important;
    line-height: 1.6 !important;
    padding: 0 !important;
}

/* Contenedor de botones */
.swal2-actions {
    margin-top: 22px !important;
}

/* Botones — base */
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel {
    height: 36px !important;
    padding: 0 28px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    transition: all .14s !important;
    margin: 0 5px !important;
    outline: none !important;
}

/* Confirm — azul primario (sin !important en color para que confirmButtonColor del JS siga funcionando) */
.swal2-styled.swal2-confirm {
    background-color: #00acd7;
    box-shadow: 0 3px 10px rgba(0, 172, 215, .3) !important;
}
.swal2-styled.swal2-confirm:hover {
    background-color: #009bc4 !important;
}
.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 3px 10px rgba(0, 172, 215, .4) !important;
}

/* Confirm — color por tipo de icono.
   SweetAlert2 v7 añade swal2-animate-{type}-icon SOLO al icono activo,
   a diferencia de .swal2-icon.swal2-{type} que siempre existe en el DOM. */
.swal2-popup:has(.swal2-animate-success-icon) .swal2-styled.swal2-confirm {
    background-color: #00b87c !important;
    box-shadow: 0 3px 10px rgba(0, 184, 124, .25) !important;
}
.swal2-popup:has(.swal2-animate-success-icon) .swal2-styled.swal2-confirm:hover {
    background-color: #009e6a !important;
}
.swal2-popup:has(.swal2-animate-error-icon) .swal2-styled.swal2-confirm {
    background-color: #e8394a !important;
    box-shadow: 0 3px 10px rgba(232, 57, 74, .25) !important;
}
.swal2-popup:has(.swal2-animate-error-icon) .swal2-styled.swal2-confirm:hover {
    background-color: #c22e3e !important;
}
.swal2-popup:has(.swal2-animate-warning-icon) .swal2-styled.swal2-confirm {
    background-color: #e8394a !important;
    box-shadow: 0 3px 10px rgba(232, 57, 74, .25) !important;
}
.swal2-popup:has(.swal2-animate-warning-icon) .swal2-styled.swal2-confirm:hover {
    background-color: #c22e3e !important;
}

/* Cancel — neutro */
.swal2-styled.swal2-cancel {
    background-color: #fff !important;
    color: #4d6782 !important;
    border: 1.5px solid #dde5ef !important;
    box-shadow: none !important;
}
.swal2-styled.swal2-cancel:hover {
    background-color: #f0f4f8 !important;
    border-color: #00acd7 !important;
    color: #00396f !important;
}
.swal2-styled.swal2-cancel:focus {
    box-shadow: none !important;
}

/* Input de texto dentro de swal */
.swal2-input {
    border-radius: 8px !important;
    border: 1.5px solid #dde5ef !important;
    box-shadow: none !important;
    color: #18293e !important;
    font-size: 13px !important;
}
.swal2-input:focus {
    border-color: #00acd7 !important;
    box-shadow: 0 0 0 3px rgba(0, 172, 215, .15) !important;
    outline: none !important;
}

/* Mensaje de validación */
.swal2-validationerror {
    border-radius: 6px !important;
    font-size: 12px !important;
    background-color: rgba(232, 57, 74, .07) !important;
    color: #e8394a !important;
    border-top: 1px solid rgba(232, 57, 74, .2) !important;
}


/* ─── TOASTER (angularjs-toaster) ────────────────────────────────── */

/* Reubicar al bottom-right (todos los contenedores top-right pasan abajo) */
#toast-container.toast-top-right {
    top: auto !important;
    bottom: 20px !important;
    right: 20px !important;
}

/* Quitar las imágenes de fondo con iconos PNG del toaster por defecto */
#toast-container > .toast-info,
#toast-container > .toast-error,
#toast-container > .toast-success,
#toast-container > .toast-warning,
#toast-container > .toast-wait {
    background-image: none !important;
}

/* Base del item toast */
#toast-container > div {
    width: auto !important;
    min-width: 280px !important;
    max-width: 360px !important;
    margin: 0 0 8px !important;
    padding: 11px 38px 11px 14px !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .13) !important;
    opacity: 1 !important;
    filter: none !important;
    -ms-filter: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background-color: #fff !important;
    color: #18293e !important;
    border: 1.5px solid #dde5ef !important;
}

#toast-container > div:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18) !important;
    opacity: 1 !important;
    filter: none !important;
    -ms-filter: none !important;
}

/* Error */
#toast-container > .toast-error {
    background-color: rgba(232, 57, 74, .12) !important;
    border-color: rgba(232, 57, 74, .3) !important;
}

/* Éxito */
#toast-container > .toast-success {
    background-color: rgba(0, 184, 124, .12) !important;
    border-color: rgba(0, 184, 124, .3) !important;
}

/* Advertencia */
#toast-container > .toast-warning {
    background-color: rgba(245, 158, 11, .12) !important;
    border-color: rgba(245, 158, 11, .3) !important;
}

/* Info */
#toast-container > .toast-info {
    background-color: rgba(0, 172, 215, .12) !important;
    border-color: rgba(0, 172, 215, .3) !important;
}

/* Título del toast */
.toast-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #18293e !important;
    margin-bottom: 1px !important;
}

/* Mensaje del toast */
.toast-message {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #4d6782 !important;
}
.toast-message a,
.toast-message label {
    color: #00acd7 !important;
    font-weight: 600 !important;
}
.toast-message a:hover {
    color: #00396f !important;
}

/* Botón de cierre */
.toast-close-button {
    color: #8fa8c0 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    top: 6px !important;
    right: 8px !important;
    line-height: 1 !important;
}
.toast-close-button:hover,
.toast-close-button:focus {
    color: #18293e !important;
    opacity: 1 !important;
    text-decoration: none !important;
}


/* ─── DARK MODE ──────────────────────────────────────────────────── */

body.xh-dark #toast-container > div {
    background-color: var(--xh-white) !important;
    color: var(--xh-text) !important;
    border-color: var(--xh-border) !important;
}

body.xh-dark .toast-title {
    color: var(--xh-text) !important;
}

body.xh-dark .toast-message {
    color: var(--xh-mid) !important;
}

body.xh-dark .toast-message a,
body.xh-dark .toast-message label {
    color: var(--xh-a) !important;
}

body.xh-dark .toast-close-button {
    color: var(--xh-dim) !important;
}

body.xh-dark .toast-close-button:hover,
body.xh-dark .toast-close-button:focus {
    color: var(--xh-text) !important;
}