/* ════════════════════════════════════════════════════════════════════
   MENÚ CONTEXTUAL DE ERA — el clic derecho en todo el sistema (31-10-2026)
   Pedido de Arturo: «menú contextual propio de ERA en todo el sistema», con el mismo traje del menú de los
   diseñadores. Estas reglas vivían en disenador-de-documentos.css (18-10-2026) y se mudaron aquí sin cambiar un
   píxel: el diseño de documentos, el de correos y el resto de ERA usan la misma hoja. La lógica está en
   js/menu-contextual.js.

   LA PALETA VA EN EL MENÚ MISMO
   El menú de todo el sistema cuelga de <body>, fuera de .fac-pagina, que es donde se declaran las --dlg-*. Por eso
   las declara él, con los mismos valores (las variables de MudBlazor): el tema claro y el oscuro funcionan solos.

   POR ENCIMA DE TODO
   MudBlazor llega a 1600 (los tooltips) y la barra de ventanas a 10001 (su vista previa): el menú es lo último que
   se abrió y va arriba de todo.
   ════════════════════════════════════════════════════════════════════ */

.dd-menu,
.era-menu-aviso {
    --dlg-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --dlg-primary: var(--mud-palette-primary);
    --dlg-surf: var(--mud-palette-surface);
    --dlg-surf2: var(--mud-palette-background-gray);
    --dlg-lines: var(--mud-palette-lines-default);
    --dlg-lines2: var(--mud-palette-table-lines);
    --dlg-txt: var(--mud-palette-text-primary);
    --dlg-dim: var(--mud-palette-text-secondary);
    --dlg-dim2: var(--mud-palette-text-disabled);
    --dlg-rojo: color-mix(in srgb, var(--mud-palette-error) 70%, var(--mud-palette-text-primary));
    --dlg-rojo-bg: color-mix(in srgb, var(--mud-palette-error) 11%, var(--mud-palette-surface));
    --fac-sel: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

/* Lo que se puede hacer con lo elegido, a mano: las mismas acciones de la barra y los atajos, y lo destructivo en rojo. */
.dd-menu {
    position: fixed; z-index: 10050; min-width: 232px; max-width: 300px; padding: 5px;
    background: var(--dlg-surf); color: var(--dlg-txt); border: 1px solid var(--dlg-lines); border-radius: 10px;
    box-shadow: 0 14px 40px rgba(15, 30, 45, .28); font-size: 12.5px; user-select: none; -webkit-user-select: none;
    font-family: var(--mud-typography-default-family, 'Inter', system-ui, sans-serif); line-height: 1.35; text-align: left;
    box-sizing: border-box; overscroll-behavior: contain;
}
.dd-menu-tit {
    padding: 6px 10px 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dlg-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dd-menu-i {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 10px; border: 0; background: none; border-radius: 6px;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.dd-menu-i .ic { width: 16px; height: 16px; display: inline-flex; flex: 0 0 16px; color: var(--dlg-dim); }
.dd-menu-i .ic .dd-ico { width: 16px; height: 16px; fill: currentColor; }
.dd-menu-i .tx { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-menu-i kbd { font-family: var(--dlg-mono); font-size: 10.5px; color: var(--dlg-dim2); background: none; border: 0; padding: 0; box-shadow: none; }
/* «activo» es el ítem que toma el teclado: el foco se queda en la pantalla (ver js/menu-contextual.js). */
.dd-menu-i:hover:not(:disabled), .dd-menu-i:focus-visible, .dd-menu-i.activo { background: var(--fac-sel, var(--dlg-surf2)); outline: none; }
.dd-menu-i:disabled { opacity: .42; cursor: default; }
.dd-menu-i.peligro, .dd-menu-i.peligro .ic { color: var(--dlg-rojo); }
.dd-menu-i.peligro:hover:not(:disabled), .dd-menu-i.peligro:focus-visible, .dd-menu-i.peligro.activo { background: var(--dlg-rojo-bg); }
.dd-menu-sep { height: 1px; margin: 4px 6px; background: var(--dlg-lines2); }
.dd-menu-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 4px 3px 10px; color: var(--dlg-dim); white-space: nowrap; }
.dd-menu-fila .bs { display: flex; gap: 1px; }
.dd-menu-fila button {
    width: 26px; height: 26px; border: 0; background: none; border-radius: 6px; color: var(--dlg-txt); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.dd-menu-fila button .dd-ico { width: 16px; height: 16px; fill: currentColor; }
.dd-menu-fila button:hover:not(:disabled), .dd-menu-fila button:focus-visible, .dd-menu-fila button.activo { background: var(--fac-sel, var(--dlg-surf2)); outline: none; }
.dd-menu-fila button:disabled { opacity: .42; cursor: default; }

/* La salida al menú del navegador, dicha en el pie: Mayús + clic derecho. */
.dd-menu-pie {
    margin: 4px -5px -5px; padding: 6px 15px 7px; border-top: 1px solid var(--dlg-lines2); border-radius: 0 0 10px 10px;
    font-size: 11px; color: var(--dlg-dim); background: color-mix(in srgb, var(--dlg-surf2) 55%, transparent); white-space: normal;
}
.dd-menu-pie kbd {
    font-family: var(--dlg-mono); font-size: 10px; padding: 0 4px; border: 1px solid var(--dlg-lines); border-radius: 4px;
    background: var(--dlg-surf); color: var(--dlg-txt); box-shadow: none;
}

/* El aviso corto junto al puntero: «Fila copiada», «Para pegar, usa ⌘V». */
.era-menu-aviso {
    position: fixed; z-index: 10060; max-width: min(420px, calc(100vw - 16px)); padding: 7px 12px; border-radius: 8px;
    background: #1f2a37; color: #fff; font-size: 12.5px; line-height: 1.4; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    font-family: var(--mud-typography-default-family, 'Inter', system-ui, sans-serif);
    opacity: 0; transform: translateY(4px); transition: opacity .16s, transform .16s; pointer-events: none;
}
.era-menu-aviso.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .era-menu-aviso { transition: none; } }