/*
 * AlertDialogComponent — modal de aviso sin JavaScript.
 *
 * NO va en un .razor.css: igual que agency-survey.css, el aislamiento de CSS de Blazor no
 * cruza componentes cuando el markup termina viviendo dentro del envoltorio de una marca (otro
 * proyecto/ensamblado); las reglas se perderían ahí. Por eso es un archivo global, cargado una
 * vez en App.razor.
 */

.alert-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(16, 24, 40, 0.55);
    animation: alert-dialog-fade-in 0.15s ease;
}

.alert-dialog-card {
    width: 100%;
    max-width: 26rem;
    background-color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 20px 60px -12px rgba(16, 24, 40, 0.35);
    padding: 2rem 1.75rem 1.75rem;
    text-align: center;
    animation: alert-dialog-pop-in 0.18s ease;
}

.alert-dialog-icon {
    font-size: 2.75rem;
    margin-bottom: 0.75rem;
}

.alert-dialog-success .alert-dialog-icon { color: #12b76a; }
.alert-dialog-warning .alert-dialog-icon { color: #f79009; }
.alert-dialog-error .alert-dialog-icon { color: #f04438; }
.alert-dialog-info .alert-dialog-icon { color: var(--brand-primary, #033159); }

.alert-dialog-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #101828;
    margin: 0 0 0.5rem;
}

.alert-dialog-message {
    font-size: 0.92rem;
    color: #475467;
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

.alert-dialog-btn {
    display: inline-block;
    padding: 0.6rem 2rem;
    border: 0;
    border-radius: 0.5rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--brand-primary-contrast, #fff);
    background-color: var(--brand-primary, #033159);
    cursor: pointer;
    transition: filter 0.15s ease;
}

.alert-dialog-btn:hover {
    filter: brightness(0.92);
}

.alert-dialog-btn:focus-visible {
    outline: 2px solid var(--brand-primary, #033159);
    outline-offset: 2px;
}

@keyframes alert-dialog-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes alert-dialog-pop-in {
    from { opacity: 0; transform: scale(0.94) translateY(6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}