/**
 * md3-dialogo.css — Estilos de los avisos y confirmaciones del sistema.
 *
 * Complementa las clases .md-scrim / .md-dialog que ya trae md3-theme.css,
 * añadiendo solo lo que usa assets/js/md3-dialogo.js: icono de cabecera,
 * texto, campo de entrada y botones.
 *
 * Todo sale de los tokens MD3, así que respeta la paleta de Sesio y el modo
 * oscuro sin reglas adicionales.
 */

/* --- Cabecera con icono ------------------------------------------------- */
.md-dialog-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.md-dlg-icono {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 22px;
}

.md-dlg-info  { background: var(--md-sys-color-primary-container);  color: var(--md-sys-color-on-primary-container); }
.md-dlg-exito { background: var(--md-sys-color-success-container);  color: var(--md-sys-color-on-success-container); }
.md-dlg-error { background: var(--md-sys-color-error-container);    color: var(--md-sys-color-on-error-container); }
.md-dlg-aviso { background: var(--md-sys-color-warning-container);  color: var(--md-sys-color-on-warning-container); }

/* --- Cuerpo ------------------------------------------------------------- */
.md-dlg-texto {
    margin: 0;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.95rem;
    line-height: 1.6;
    /* Respeta los saltos de línea del mensaje sin permitir HTML. */
    white-space: pre-line;
}

.md-dlg-input {
    width: 100%;
    margin-top: 14px;
    padding: 11px 14px;
    font: inherit;
    font-size: 0.95rem;
    color: var(--md-sys-color-on-surface);
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-small, 8px);
    outline: none;
}
.md-dlg-input:focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 2px rgb(var(--md-sys-color-primary-rgb) / 0.18);
}

/* --- Botones ------------------------------------------------------------ */
.md-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.md-dlg-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: var(--md-sys-shape-corner-full, 999px);
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.md-dlg-btn-texto {
    background: transparent;
    color: var(--md-sys-color-primary);
}
.md-dlg-btn-texto:hover {
    background: rgb(var(--md-sys-color-primary-rgb) / 0.08);
}

.md-dlg-btn-lleno {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
.md-dlg-btn-lleno:hover {
    background: var(--md-sys-color-secondary);
}

/* Acciones irreversibles (eliminar un paciente, un tenant...): el color
   advierte antes de que la persona pulse. */
.md-dlg-btn-peligro {
    background: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
}
.md-dlg-btn-peligro:hover {
    filter: brightness(1.1);
}

.md-dlg-btn:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

/* --- Animaciones de salida ---------------------------------------------- */
@keyframes md-fade-out {
    to { opacity: 0; }
}
@keyframes md-dialog-out {
    to { opacity: 0; transform: translateY(8px) scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
    .md-scrim,
    .md-dialog { animation: none !important; }
}