/* Tema de SweetAlert2 para todo el sistema (portal, admin, jugador, público).
   Selectores con .swal2-container adelante: SweetAlert inyecta su propio CSS
   en <head> al cargar, y con igual especificidad ganaría el suyo. */

.swal2-container {
    --sw-bg: #ffffff;
    --sw-text: #0f172a;
    --sw-muted: #475569;
    --sw-border: rgba(15, 23, 42, .08);
    --sw-input-bg: #f8fafc;
    --sw-input-border: #cbd5e1;
    --sw-cancel-bg: #eef2f7;
    --sw-cancel-text: #334155;
    --sw-shadow: 0 30px 70px -18px rgba(15, 23, 42, .45);
    --sw-primario: #16a34a;
    --sw-foco: rgba(34, 197, 94, .35);
}

html[data-bs-theme="dark"] .swal2-container {
    --sw-bg: #1e293b;
    --sw-text: #f1f5f9;
    --sw-muted: #94a3b8;
    --sw-border: rgba(255, 255, 255, .08);
    --sw-input-bg: #0f172a;
    --sw-input-border: #334155;
    --sw-cancel-bg: rgba(255, 255, 255, .08);
    --sw-cancel-text: #e2e8f0;
    --sw-shadow: 0 30px 70px -18px rgba(0, 0, 0, .8);
}

/* Fondo: oscurecido + desenfoque */
.swal2-container.swal2-backdrop-show {
    background: rgba(2, 6, 23, .55) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Ventana */
.swal2-container .swal2-popup:not(.swal2-toast) {
    background: var(--sw-bg);
    color: var(--sw-text);
    border: 1px solid var(--sw-border);
    border-radius: 1.25rem;
    box-shadow: var(--sw-shadow);
    padding: 1.75rem 1.5rem 1.5rem;
    width: min(28rem, calc(100vw - 2rem));
    font-family: inherit;
    overflow: hidden;
}

.swal2-container .swal2-popup:not(.swal2-toast)::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    border-radius: 1.25rem 1.25rem 0 0;
    background: linear-gradient(90deg, #22c55e, #0d4c94);
}

.swal2-container .swal2-popup.swal2-show {
    animation: sw-entrar .22s cubic-bezier(.2, .9, .3, 1.2);
}

@keyframes sw-entrar {
    from { opacity: 0; transform: translateY(12px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* Ícono: más chico y con halo del color del tipo */
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-icon {
    width: 4.25rem;
    height: 4.25rem;
    margin: .5rem auto 1rem;
    border-width: 3px;
    font-size: .85rem;
}

.swal2-container .swal2-icon.swal2-warning  { background: rgba(245, 158, 11, .12); border-color: #f59e0b; color: #f59e0b; }
.swal2-container .swal2-icon.swal2-error    { background: rgba(239, 68, 68, .12);  border-color: #ef4444; }
.swal2-container .swal2-icon.swal2-info     { background: rgba(59, 130, 246, .12); border-color: #3b82f6; color: #3b82f6; }
.swal2-container .swal2-icon.swal2-question { background: rgba(139, 92, 246, .12); border-color: #8b5cf6; color: #8b5cf6; }
/* El tilde de éxito se anima con piezas del color del fondo: sin halo, y esas
   piezas con el fondo del tema (si no, en oscuro quedan manchas blancas). */
.swal2-container .swal2-icon.swal2-success  { border-color: rgba(34, 197, 94, .35); }
.swal2-container .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(34, 197, 94, .35); }
.swal2-container .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: #22c55e; }
.swal2-container .swal2-icon.swal2-success [class^="swal2-success-circular-line"],
.swal2-container .swal2-icon.swal2-success .swal2-success-fix { background-color: var(--sw-bg) !important; }

/* Textos */
.swal2-container .swal2-popup:not(.swal2-toast) .swal2-title {
    color: var(--sw-text);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    padding: 0 .5rem;
}

.swal2-container .swal2-popup:not(.swal2-toast) .swal2-html-container {
    color: var(--sw-muted);
    font-size: .95rem;
    line-height: 1.55;
    margin: .6rem .75rem 0;
}

/* Botones */
.swal2-container .swal2-actions {
    gap: .5rem;
    margin-top: 1.5rem;
    width: 100%;
    flex-wrap: wrap;
}

.swal2-container .swal2-actions .swal2-styled {
    margin: 0;
    padding: .65rem 1.3rem;
    border-radius: .75rem;
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .01em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.swal2-container .swal2-actions .swal2-styled:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    background-image: none;
}

.swal2-container .swal2-actions .swal2-styled:active {
    transform: translateY(0);
}

/* Halo neutro: el que calcula SweetAlert sale verde aunque el botón sea rojo. */
.swal2-container .swal2-actions .swal2-styled:focus,
.swal2-container .swal2-actions .swal2-styled:focus-visible {
    box-shadow: 0 0 0 3px rgba(148, 163, 184, .45);
}

/* Solo el color por defecto: confirmButtonColor/denyButtonColor/cancelButtonColor
   llegan como variables inline en el botón (--swal2-*-button-background-color) y ganan. */
.swal2-container .swal2-popup {
    --swal2-confirm-button-background-color: var(--sw-primario);
    --swal2-deny-button-background-color: #0d4c94;
    --swal2-cancel-button-background-color: var(--sw-cancel-bg);
}
.swal2-container .swal2-actions .swal2-styled.swal2-confirm { background-color: var(--swal2-confirm-button-background-color, var(--sw-primario)); color: #fff; }
.swal2-container .swal2-actions .swal2-styled.swal2-deny    { background-color: var(--swal2-deny-button-background-color, #0d4c94); color: #fff; }
.swal2-container .swal2-actions .swal2-styled.swal2-cancel  { background-color: var(--swal2-cancel-button-background-color, var(--sw-cancel-bg)); color: var(--sw-cancel-text); }
.swal2-container .swal2-actions .swal2-styled.swal2-cancel[style*="--swal2-cancel-button-background-color"] { color: #fff; }
.swal2-container .swal2-actions .swal2-styled.swal2-confirm,
.swal2-container .swal2-actions .swal2-styled.swal2-deny,
.swal2-container .swal2-actions .swal2-styled.swal2-cancel { background-image: none; }

/* Campos (Swal con input) */
.swal2-container .swal2-input,
.swal2-container .swal2-textarea,
.swal2-container .swal2-select,
.swal2-container .swal2-file {
    background: var(--sw-input-bg);
    color: var(--sw-text);
    border: 1px solid var(--sw-input-border);
    border-radius: .7rem;
    box-shadow: none;
    font-size: .95rem;
}

.swal2-container .swal2-input:focus,
.swal2-container .swal2-textarea:focus,
.swal2-container .swal2-select:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px var(--sw-foco);
}

.swal2-container .swal2-validation-message {
    background: rgba(239, 68, 68, .1);
    color: #ef4444;
    border-radius: .6rem;
    margin: 1rem .5rem 0;
}

.swal2-container .swal2-close {
    color: var(--sw-muted);
    border-radius: .6rem;
}

.swal2-container .swal2-close:hover {
    color: var(--sw-text);
    background: var(--sw-cancel-bg);
}

.swal2-container .swal2-footer {
    border-top-color: var(--sw-border);
    color: var(--sw-muted);
}

.swal2-container .swal2-timer-progress-bar {
    background: linear-gradient(90deg, #22c55e, #0d4c94);
}

/* Toasts */
.swal2-container .swal2-popup.swal2-toast {
    background: var(--sw-bg);
    color: var(--sw-text);
    border: 1px solid var(--sw-border);
    border-left: 4px solid #3b82f6;
    border-radius: .9rem;
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .45);
    padding: .75rem 1rem;
}

.swal2-container .swal2-popup.swal2-toast:has(.swal2-success.swal2-icon-show) { border-left-color: #22c55e; }
.swal2-container .swal2-popup.swal2-toast:has(.swal2-error.swal2-icon-show)   { border-left-color: #ef4444; }
.swal2-container .swal2-popup.swal2-toast:has(.swal2-warning.swal2-icon-show) { border-left-color: #f59e0b; }

.swal2-container .swal2-popup.swal2-toast .swal2-title {
    color: var(--sw-text);
    font-size: .92rem;
    font-weight: 600;
}

.swal2-container .swal2-popup.swal2-toast .swal2-html-container {
    color: var(--sw-muted);
}

/* Móvil: botones a lo ancho, uno debajo del otro */
@media (max-width: 480px) {
    .swal2-container .swal2-popup:not(.swal2-toast) {
        padding: 1.5rem 1.1rem 1.1rem;
    }

    .swal2-container .swal2-popup:not(.swal2-toast) .swal2-title {
        font-size: 1.2rem;
    }

    .swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions {
        flex-direction: column;
    }

    .swal2-container .swal2-popup:not(.swal2-toast) .swal2-actions .swal2-styled {
        width: 100%;
    }
}