/* =====================================================================
   mlsurvey · diálogos de aviso y confirmación
   ---------------------------------------------------------------------
   Sustituyen a alert() y confirm() del navegador, que se pintan con el
   aspecto del sistema operativo y no siguen ni el color ni la
   tipografía de la aplicación.

   Van sobre <dialog> nativo: el navegador ya se encarga de la capa
   superior, del foco atrapado dentro, de cerrar con Escape y de
   devolver el foco al elemento que lo abrió. Aquí sólo se viste.
   ===================================================================== */

.ml-dialog {
    width: min(440px, calc(100vw - 32px));
    padding: 0;
    background: var(--ml-elevated);
    color: var(--ml-text);
    border: 1px solid var(--ml-border-strong);
    border-radius: var(--ml-radius-lg);
    box-shadow: var(--ml-shadow-lg);
    font-family: var(--ml-font);
}

/* El velo de detrás también es parte del tema. */
.ml-dialog::backdrop {
    background: rgb(13 17 23 / 0.55);
    backdrop-filter: blur(2px);
}

.ml-dialog__form {
    margin: 0;
    padding: 22px 24px 18px;
}

.ml-dialog__title {
    margin: 0 0 8px;
    color: var(--ml-text);
    font-size: 1.125rem;
    font-weight: 650;
    line-height: 1.3;
}

.ml-dialog__message {
    margin: 0;
    color: var(--ml-text-soft);
    font-size: 0.9375rem;
    line-height: 1.55;
    /* Los mensajes se escriben con saltos de línea. */
    white-space: pre-line;
    overflow-wrap: break-word;
}

.ml-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 22px;
}

.ml-dialog__actions .button-3 + .button-3 {
    margin-left: 0;
}

/* Una sola acción (aviso): a la derecha igualmente, pero sin hueco
   raro si el texto es corto. */
.ml-dialog__actions .button-3 {
    min-width: 104px;
}

/* Aparición: el diálogo entra desde un punto por debajo. Quien haya
   pedido menos movimiento tiene --ml-transition a 0ms, así que esto se
   vuelve instantáneo por sí solo. */
@media (prefers-reduced-motion: no-preference) {
    .ml-dialog[open] {
        animation: ml-dialog-in 160ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .ml-dialog[open]::backdrop {
        animation: ml-backdrop-in 160ms cubic-bezier(0.4, 0, 0.2, 1);
    }
}

@keyframes ml-dialog-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}

@keyframes ml-backdrop-in {
    from {
        opacity: 0;
    }
}

@media (max-width: 480px) {
    .ml-dialog__actions {
        flex-direction: column-reverse;
    }

    .ml-dialog__actions .button-3 {
        width: 100%;
    }
}