/* Minusjob — selector de cliente de correo (mj-mail). Lo crea mail.js al pulsar un enlace mailto:.
   Diálogo nativo <dialog>: Escape, clic en el fondo y botón cerrar; el foco vuelve al enlace. */
.mj-mail {
  width: min(440px, calc(100% - var(--space-6)));
  max-height: calc(100dvh - var(--space-6));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--surface);
  color: var(--ink-body);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border);
  overflow: auto;
}
.mj-mail::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mj-mail__panel { display: grid; gap: var(--space-5); padding: var(--space-5); }
.mj-mail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.mj-mail__kicker { margin: 0 0 var(--space-1); font: 600 12px/1.2 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-blue-strong); }
.mj-mail__title { margin: 0; font: 700 20px/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--ink-strong); }
.mj-mail__close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface-subtle); color: var(--ink-strong); cursor: pointer; transition: background-color var(--mj-fast); }
.mj-mail__close:hover { background: var(--surface-muted); }
.mj-mail__close .mj-i { width: 18px; height: 18px; }
.mj-mail__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.mj-mail__option { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-3); border-radius: var(--radius-md); color: var(--ink-strong); text-decoration: none; box-shadow: inset 0 0 0 1px var(--border); transition: background-color var(--mj-fast), box-shadow var(--mj-fast); }
.mj-mail__option:hover, .mj-mail__option:focus-visible { background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--brand-blue-100); }
.mj-mail__option > .mj-i { width: 18px; height: 18px; margin-left: auto; color: var(--brand-blue); transition: transform var(--mj-base) var(--mj-spring); }
.mj-mail__option:hover > .mj-i { transform: translateX(3px); }
.mj-mail__text { display: grid; gap: 2px; min-width: 0; }
.mj-mail__text strong { font: 600 15px/1.25 var(--font-display); color: var(--ink-strong); }
.mj-mail__text span { font: 400 13px/1.4 var(--font-body); color: var(--ink-muted); }
.mj-mail__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.mj-mail__address { font: 600 15px/1.3 var(--font-display); color: var(--ink-strong); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .mj-mail[open] { animation: mj-mail-in var(--mj-base) var(--mj-ease) both; }
}
@keyframes mj-mail-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.mj-mail__hint { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--brand-blue-50); color: var(--ink); font: 500 14px/1.5 var(--font-body); }
.mj-mail__hint[hidden] { display: none; }