/* ── Ventanas emergentes del sitio (SweetAlert2) ─────────────────────────
   Un único estilo para todas: cristal oscuro con borde luminoso del color de
   marca, títulos en Lexend, iconos con brillo, botones en píldora y una entrada
   suave. Se carga en todas las páginas que usan alertas.
   - El fondo y el color del texto se fijan aquí (con !important) aunque la
     alerta pida otro, para que todas se vean iguales.
   - El color de los botones SÍ se respeta cuando la alerta lo pide
     (p. ej. rojo para borrar, dorado para GoonCoins); si no, va el de marca. */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@500;600;700;800&family=DM+Sans:wght@400;500;700&display=swap');

:root {
    --pp-accent: var(--accent, rgb(163, 49, 104));
    --pp-text: #f5eff4;
    --pp-muted: rgba(245, 239, 244, 0.68);
    --pp-ok: #34d399;
    --pp-error: #ff4d6d;
    --pp-warn: #fbbf24;
    --pp-info: #60a5fa;
    --pp-question: #c084fc;
}

/* fondo de la página detrás de la alerta: oscurecido y algo desenfocado */
/* (los avisos pequeños de esquina no llevan fondo: la página sigue usable) */
body .swal2-container.swal2-backdrop-show:not(:has(.swal2-toast)),
body .swal2-container.swal2-noanimation:not(:has(.swal2-toast)) {
    background: rgba(5, 2, 4, 0.72) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* ── La ventana ── */
body .swal2-container .swal2-popup {
    position: relative;
    width: min(31em, calc(100vw - 32px));
    padding: 2.1em 1.9em 1.8em;
    border-radius: 26px !important;
    background: linear-gradient(165deg, #1d0d18 0%, #120810 55%, #0b0509 100%) !important;
    color: var(--pp-text) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 0 60px color-mix(in srgb, var(--pp-accent) 20%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    overflow: hidden;
}
/* línea de luz en el borde superior y un resplandor tenue detrás del icono */
body .swal2-container .swal2-popup::before {
    content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--pp-accent), transparent);
}
body .swal2-container .swal2-popup::after {
    content: ''; position: absolute; top: -120px; left: 50%; width: 320px; height: 240px; transform: translateX(-50%);
    pointer-events: none; z-index: 0;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--pp-accent) 22%, transparent), transparent);
}
body .swal2-container .swal2-popup > * { position: relative; z-index: 1; }

body .swal2-container .swal2-title {
    padding: 0.4em 0.6em 0;
    font-family: 'Lexend', sans-serif !important; font-weight: 800 !important; font-size: 1.55em !important;
    line-height: 1.2; letter-spacing: -0.015em; color: #fff !important;
}
body .swal2-container .swal2-html-container {
    margin: 0.75em 1em 0.2em; padding: 0;
    color: var(--pp-muted) !important; font-size: 0.98em; line-height: 1.65;
}
body .swal2-container .swal2-html-container b,
body .swal2-container .swal2-html-container strong { color: #fff; }
body .swal2-container .swal2-footer {
    margin: 1.2em 0 0; padding-top: 1em; border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--pp-muted); font-size: 0.85em;
}

/* ── Iconos: más finos, con color propio y brillo ── */
/* El tamaño y el grosor se dejan como los trae la librería: las piezas de la palomita y de la
   cruz están colocadas a medida para ese tamaño y, si se cambia, se deforman. */
body .swal2-container .swal2-icon {
    margin: 0.4em auto 0.6em;
    filter: drop-shadow(0 0 14px currentColor);
}
body .swal2-container .swal2-icon .swal2-icon-content { font-family: 'Lexend', sans-serif; font-weight: 700; }

body .swal2-container .swal2-icon.swal2-success { color: var(--pp-ok) !important; border-color: var(--pp-ok) !important; }
body .swal2-container .swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--pp-ok) 35%, transparent) !important; }
body .swal2-container .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--pp-ok) !important; }
/* piezas que la librería pinta del color del fondo: transparentes sobre el cristal */
body .swal2-container .swal2-icon.swal2-success .swal2-success-fix,
body .swal2-container .swal2-icon.swal2-success [class^='swal2-success-circular-line'] { background-color: transparent !important; }

body .swal2-container .swal2-icon.swal2-error { color: var(--pp-error) !important; border-color: var(--pp-error) !important; }
body .swal2-container .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--pp-error) !important; }
body .swal2-container .swal2-icon.swal2-warning { color: var(--pp-warn) !important; border-color: var(--pp-warn) !important; }
body .swal2-container .swal2-icon.swal2-info { color: var(--pp-info) !important; border-color: var(--pp-info) !important; }
body .swal2-container .swal2-icon.swal2-question { color: var(--pp-question) !important; border-color: var(--pp-question) !important; }

/* ── Botones ── */
body .swal2-container .swal2-actions { gap: 10px; margin-top: 1.5em; }
body .swal2-container .swal2-styled {
    margin: 0; padding: 0.8em 1.8em; border-radius: 999px !important;
    font-family: 'Lexend', sans-serif !important; font-weight: 700 !important; font-size: 0.95em !important; letter-spacing: 0.01em;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), filter .2s, box-shadow .2s;
}
body .swal2-container .swal2-styled:hover { transform: translateY(-2px); filter: brightness(1.12); background-image: none !important; }
body .swal2-container .swal2-styled:active { transform: translateY(0); }
body .swal2-container .swal2-styled:focus,
body .swal2-container .swal2-styled:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-accent) 40%, transparent) !important; outline: none; }
/* Colores por defecto. La librería pinta cada botón con una variable que la alerta puede
   fijar en el propio botón (confirmButtonColor, etc.); aquí solo se cambia el valor por defecto,
   así que un rojo de "borrar" o un dorado de GoonCoins se siguen respetando. */
body .swal2-container .swal2-styled.swal2-confirm {
    --swal2-confirm-button-background-color: var(--pp-accent);
    color: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
body .swal2-container .swal2-styled.swal2-deny { --swal2-deny-button-background-color: var(--pp-error); color: #fff; }
body .swal2-container .swal2-styled.swal2-cancel {
    --swal2-cancel-button-background-color: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: none;
}

/* ── Campos dentro de la alerta ── */
/* :not(#_) sube la prioridad por encima de reglas de página como input:not(#algo) */
body .swal2-container .swal2-input:not(#_),
body .swal2-container .swal2-file:not(#_),
body .swal2-container .swal2-textarea:not(#_),
body .swal2-container .swal2-select:not(#_) {
    margin: 1em auto 0.2em; width: calc(100% - 1.6em); max-width: 100%;
    padding: 0.75em 1em; border-radius: 14px !important; box-sizing: border-box;
    background: rgba(0, 0, 0, 0.35) !important; color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: none !important;
    font-family: inherit; font-size: 0.98em;
}
body .swal2-container .swal2-input { height: 3em; }
body .swal2-container .swal2-input:not(#_):focus,
body .swal2-container .swal2-textarea:not(#_):focus,
body .swal2-container .swal2-select:not(#_):focus {
    border-color: var(--pp-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-accent) 25%, transparent) !important;
}
body .swal2-container .swal2-input::placeholder,
body .swal2-container .swal2-textarea::placeholder { color: rgba(255, 255, 255, 0.32); }
body .swal2-container .swal2-select option { background: #160a12; color: #fff; }
body .swal2-container .swal2-input-label { color: var(--pp-muted); font-weight: 600; margin-top: 1em; }
body .swal2-container .swal2-checkbox, body .swal2-container .swal2-radio { background: transparent !important; color: var(--pp-text) !important; }
body .swal2-container .swal2-validation-message {
    margin: 1em 0 0; border-radius: 12px; background: rgba(255, 77, 109, 0.12) !important;
    color: #ffb3c1 !important; border: 1px solid rgba(255, 77, 109, 0.3);
}
body .swal2-container .swal2-validation-message::before { background-color: var(--pp-error); }

/* ── Detalles ── */
body .swal2-container .swal2-close { color: rgba(255, 255, 255, 0.4); font-size: 2.2em; transition: color .2s, transform .2s; }
body .swal2-container .swal2-close:hover { color: #fff; transform: rotate(90deg); background: transparent; }
body .swal2-container .swal2-timer-progress-bar-container { border-radius: 0 0 26px 26px; }
body .swal2-container .swal2-timer-progress-bar { background: var(--pp-accent) !important; height: 3px; box-shadow: 0 0 10px var(--pp-accent); }
body .swal2-container .swal2-loader { border-color: var(--pp-accent) transparent var(--pp-accent) transparent; }
body .swal2-container .swal2-image { border-radius: 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }

/* ── Avisos pequeños en una esquina (toast) ── */
body .swal2-container .swal2-popup.swal2-toast {
    width: auto; min-width: 260px; max-width: min(380px, calc(100vw - 24px));
    padding: 0.8em 1.1em; border-radius: 18px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 30px color-mix(in srgb, var(--pp-accent) 18%, transparent) !important;
}
body .swal2-container .swal2-popup.swal2-toast::after { display: none; }
body .swal2-container .swal2-popup.swal2-toast .swal2-title { font-size: 0.98em !important; font-weight: 700 !important; padding: 0; margin: 0 0.6em; }
body .swal2-container .swal2-popup.swal2-toast .swal2-html-container { font-size: 0.88em; margin: 0.3em 0.6em 0; }
body .swal2-container .swal2-popup.swal2-toast .swal2-icon { margin: 0; filter: drop-shadow(0 0 8px currentColor); }
body .swal2-container .swal2-popup.swal2-toast .swal2-timer-progress-bar-container { border-radius: 0 0 18px 18px; }

/* ── Entrada y salida ── */
@media (prefers-reduced-motion: no-preference) {
    body .swal2-container .swal2-popup.swal2-show { animation: pp-in .42s cubic-bezier(.2, .9, .25, 1.15); }
    body .swal2-container .swal2-popup.swal2-hide { animation: pp-out .2s ease-in forwards; }
    body .swal2-container .swal2-popup.swal2-toast.swal2-show { animation: pp-toast-in .4s cubic-bezier(.2, .9, .25, 1.1); }
    body .swal2-container .swal2-popup.swal2-toast.swal2-hide { animation: pp-out .18s ease-in forwards; }
}
@keyframes pp-in { from { opacity: 0; transform: translateY(18px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes pp-out { to { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes pp-toast-in { from { opacity: 0; transform: translateY(-14px) scale(0.96); } to { opacity: 1; transform: none; } }

@media (max-width: 480px) {
    body .swal2-container .swal2-popup:not(.swal2-toast) { padding: 1.7em 1.2em 1.4em; border-radius: 22px !important; }
    body .swal2-container .swal2-title { font-size: 1.35em !important; }
    body .swal2-container .swal2-actions { flex-direction: column; width: 100%; }
    body .swal2-container .swal2-actions .swal2-styled { width: 100%; }
}

/* los avisos de arriba aparecen debajo de la barra de navegación (52 px), no encima */
body .swal2-container.swal2-top-end:has(.swal2-toast),
body .swal2-container.swal2-top-start:has(.swal2-toast),
body .swal2-container.swal2-top:has(.swal2-toast) { padding-top: 64px; }