/*
 * 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;
}

/* ---------- FormDialogComponent: mismo backdrop/animación, tarjeta más ancha con scroll ---------- */

.form-dialog-backdrop {
    align-items: flex-start;
    overflow-y: auto;
}

.form-dialog-card {
    max-width: 34rem;
    margin: auto;
    text-align: left;
    padding: 1.5rem 1.75rem 1.5rem;
}

.form-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

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

.form-dialog-close {
    border: 0;
    background: transparent;
    font-size: 1.6rem;
    line-height: 1;
    color: #667085;
    cursor: pointer;
}

.form-dialog-close:hover {
    color: #101828;
}

.form-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

@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); }
}