/* Metacrilato Gestor — AVISO AL SALIR DEL CONFIGURADOR (28-09-2026).
   Ventana propia (elemento <dialog>). Colores, radios y letras: Apariencia.
   El botón principal es la píldora oscura de buttons.css (.mc-btn-pill). */
dialog.mc-aviso-salida {
	width: min(420px, calc(100vw - 32px)); max-width: none;
	margin: auto; padding: 26px 26px 22px;
	border: 0; border-radius: var(--mc-radio-tarjeta, 12px);
	background: var(--mc-fondo, #fff); color: var(--mc-texto, #0f172a);
	box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
}
dialog.mc-aviso-salida::backdrop { background: rgba(15, 23, 42, .4); }
.mc-aviso-salida-t { margin: 0 0 8px; font-size: var(--mc-fs-titulo-s, 20px); font-weight: var(--mc-peso-fuerte, 600); line-height: 1.25; }
.mc-aviso-salida-x { margin: 0 0 22px; font-size: var(--mc-fs-compacto, 14px); line-height: 1.5; color: var(--mc-texto-2, #64748b); }
.mc-aviso-salida-b { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
dialog.mc-aviso-salida .mc-btn-pill { padding: 0 var(--mc-btn-margen-texto, 18px); }
.mc-aviso-salida-salir {
	padding: 0; border: 0; background: none; cursor: pointer;
	font-size: var(--mc-fs-compacto, 14px); font-weight: var(--mc-peso, 400);
	color: var(--mc-texto-2, #64748b); text-decoration: underline; text-underline-offset: 3px;
}
.mc-aviso-salida-salir:hover { color: var(--mc-texto, #0f172a); }
/* Al abrirse, el foco va al botón principal: que no se vea como «hover». */
dialog.mc-aviso-salida .mc-btn-pill:focus { background: var(--mc-boton); color: var(--mc-boton-texto); outline: 0; }
dialog.mc-aviso-salida .mc-btn-pill:hover { background: var(--mc-boton-hover); }
dialog.mc-aviso-salida button:focus-visible { outline: 2px solid var(--mc-enlace, #2563eb); outline-offset: 2px; }