/* Diálogos y avisos (public/js/dialogo.js) y modales <dialog> de formularios */
.dialogo-fondo {
    position: fixed; inset: 0; z-index: 100;
    display: grid; place-items: center; padding: 16px;
    background: rgba(16, 48, 47, .45);
    animation: aparecer .15s ease;
}
.dialogo, dialog.modal {
    width: min(460px, 100%);
    padding: 24px;
    border: 0; border-radius: 14px;
    background: var(--color-superficie);
    box-shadow: var(--sombra-alta);
    color: var(--color-texto);
    animation: subir .18s ease;
}
dialog.modal { width: min(560px, calc(100% - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
dialog.modal::backdrop { background: rgba(16, 48, 47, .45); }
.dialogo__icono {
    display: grid; place-items: center;
    width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%;
}
.dialogo__icono .icono { width: 26px; height: 26px; }
.dialogo__icono--exito { background: var(--color-exito-fondo); color: var(--color-exito); }
.dialogo__icono--error { background: var(--color-peligro-fondo); color: var(--color-peligro); }
.dialogo__icono--pregunta { background: var(--color-primario-claro); color: var(--color-primario); }
.dialogo__icono--aviso { background: var(--color-aviso-fondo); color: var(--color-aviso); }
.dialogo__titulo { margin: 0 0 6px; font-size: 18px; font-weight: 600; text-align: center; }
.dialogo__texto { margin: 0 0 16px; color: var(--color-texto-suave); text-align: center; }
.dialogo__campo { margin-bottom: 16px; }
.dialogo__acciones { display: flex; justify-content: center; gap: 10px; }

.modal__cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.modal__cabecera h2 { margin-right: auto; }

.avisos { position: fixed; right: 18px; bottom: 18px; z-index: 110; display: flex; flex-direction: column; gap: 8px; }
.aviso {
    display: flex; align-items: center; gap: 10px;
    min-width: 260px; max-width: 380px; padding: 12px 16px;
    border-radius: var(--radio); background: var(--color-tinta); color: #fff;
    box-shadow: var(--sombra-alta); font-size: 13.5px;
    animation: subir .2s ease;
}
.aviso--exito .icono { color: #6ee7b7; }
.aviso--error .icono { color: #fca5a5; }

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }