/*
 * PAM — Visual novo do editor. Só vale com html.pam-visual-novo, que o pam-visual.v2.js liga para todos
 * (?visual=atual desliga para quem precisar do desenho antigo). Barra superior, paleta, menu de contexto, menu de troca
 * de elemento e edição de texto: mais leves, cantos arredondados, sem sombra pesada.
 */

/* ---------- Ícones de linha (máscara: a cor vem de currentColor) ---------- */
html.pam-visual-novo {
  --pv-ico-integration: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3 4 7l4 4'/><path d='M4 7h16'/><path d='m16 21 4-4-4-4'/><path d='M20 17H4'/></svg>");
  --pv-ico-automation: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/></svg>");
  --pv-ico-application: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='M2 9h20'/><path d='M6 6.5h.01M9 6.5h.01'/></svg>");
  --pv-ico-approval: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m8.5 12 2.5 2.5 4.5-5'/></svg>");
  --pv-ico-funnel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4h18l-7 8.5V19l-4 2v-8.5z'/></svg>");
  --pv-ico-calculation: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='2' width='16' height='20' rx='2'/><path d='M8 6h8'/><path d='M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M8 18h.01M12 18h.01'/><path d='M16 14v4'/></svg>");
  --pv-ico-history: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/><path d='M3 3v5h5'/><path d='M12 7v5l4 2'/></svg>");
  --pv-ico-code: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m16 18 6-6-6-6'/><path d='m8 6-6 6 6 6'/></svg>");
  --pv-ico-panel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M15 3v18'/></svg>");
  --pv-ico-save: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/><path d='M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7'/><path d='M7 3v4a1 1 0 0 0 1 1h7'/></svg>");
  --pv-ico-ambiente: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='8' height='8' rx='2'/><rect x='13' y='3' width='8' height='8' rx='2'/><rect x='3' y='13' width='8' height='8' rx='2'/><path d='M17 13v8M13 17h8'/></svg>");
  --pv-ico-recolher: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9.88 9.88a3 3 0 1 0 4.24 4.24'/><path d='M10.73 5.08A10.4 10.4 0 0 1 12 5c7 0 10 7 10 7a13 13 0 0 1-1.67 2.68'/><path d='M6.61 6.61A13.5 13.5 0 0 0 2 12s3 7 10 7a9.7 9.7 0 0 0 5.39-1.61'/><path d='m2 2 20 20'/></svg>");
  --pv-roxo: #7E33E6;
  --pv-roxo-claro: #F3EEFC;
  --pv-tinta: #1B102C;
  --pv-tinta-2: #4A4257;
  --pv-borda: rgb(27 16 44 / .09);
  --pv-sombra: 0 6px 20px rgb(27 16 44 / .08), 0 1px 2px rgb(27 16 44 / .06);
}

/* ---------- Barra superior do editor ---------- */
/* Importar · Exportar · Imagem | XML · Versões ……… Tela cheia · Propriedades · Salvar
   Botões com borda, fundo branco e sombra leve, para lerem como botão. Barra numa linha só: quando estreita (notebook com o painel
   de Propriedades aberto), os botões secundários ficam só com ícone e o nome vai para o title. */
html.pam-visual-novo [class~="bg-muted/30"]:has(> .bjs-container) > [class~="z-50"][class~="flex-wrap"] {
  flex-wrap: nowrap !important; gap: 6px; padding: 8px 12px; align-items: center;
  background: #fff; border-bottom: 1px solid var(--pv-borda); container-type: inline-size;
}
html.pam-visual-novo [class~="bg-muted/30"]:has(> .bjs-container) > [class~="z-50"][class~="flex-wrap"] button {
  height: 32px; padding: 0 12px; gap: 6px; white-space: nowrap; transform: none !important;
  border: 1px solid rgb(27 16 44 / .15); border-radius: 6px; background: #fff; color: var(--pv-tinta);
  box-shadow: 0 1px 2px rgb(27 16 44 / .06) !important; font-size: 13px; font-weight: 600; letter-spacing: .01em;
}
html.pam-visual-novo [class~="bg-muted/30"]:has(> .bjs-container) > [class~="z-50"][class~="flex-wrap"] button:hover { background: #F7F5FA; border-color: rgb(27 16 44 / .26); }
html.pam-visual-novo [class~="bg-muted/30"]:has(> .bjs-container) > [class~="z-50"][class~="flex-wrap"] button:active { background: #EFEBF4; }
html.pam-visual-novo [class~="bg-muted/30"]:has(> .bjs-container) > [class~="z-50"][class~="flex-wrap"] button svg { width: 16px; height: 16px; flex: none; stroke-width: 1.75; color: var(--pv-tinta-2); }
/* Ícone nos botões que vieram só com texto. */
html.pam-visual-novo :is(button[title="Ver/Restaurar versões"], button[title="Visualizar/Editar XML"], button[title="Fechar propriedades"], button[title="Abrir propriedades"], button[title="Salvar XML"]:not(:has(svg)))::before {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--pv-mask) center / 16px no-repeat; mask: var(--pv-mask) center / 16px no-repeat;
}
html.pam-visual-novo button[title="Ver/Restaurar versões"] { --pv-mask: var(--pv-ico-history); }
html.pam-visual-novo button[title="Visualizar/Editar XML"] { --pv-mask: var(--pv-ico-code); font-size: 0 !important; }
html.pam-visual-novo button[title="Visualizar/Editar XML"]::after { content: "XML"; font-size: 13px; }
html.pam-visual-novo :is(button[title="Fechar propriedades"], button[title="Abrir propriedades"]) { --pv-mask: var(--pv-ico-panel); font-size: 0 !important; }
html.pam-visual-novo :is(button[title="Fechar propriedades"], button[title="Abrir propriedades"])::after { content: "Propriedades"; font-size: 13px; }
html.pam-visual-novo button[title="Salvar XML"] { --pv-mask: var(--pv-ico-save); }
/* Ordem e separadores. */
html.pam-visual-novo [class~="bg-muted/30"]:has(> .bjs-container) > [class~="z-50"][class~="flex-wrap"] > :has(> button[title="Exportar como imagem"]) { order: 3; }
html.pam-visual-novo [class~="bg-muted/30"]:has(> .bjs-container) > [class~="z-50"][class~="flex-wrap"] > :has(> button[title="Visualizar/Editar XML"]) { order: 4; margin-left: 2px; padding-left: 8px; border-left: 1px solid var(--pv-borda); }
html.pam-visual-novo [class~="bg-muted/30"]:has(> .bjs-container) > [class~="z-50"][class~="flex-wrap"] > :has(> button[title="Ver/Restaurar versões"]) { order: 5; }
html.pam-visual-novo [class~="bg-muted/30"]:has(> .bjs-container) > [class~="z-50"][class~="flex-wrap"] > .pam-btn-cheia { order: 9; margin-left: auto; }
html.pam-visual-novo [class~="bg-muted/30"]:has(> .bjs-container) > [class~="z-50"][class~="flex-wrap"] > :is(button[title="Fechar propriedades"], button[title="Abrir propriedades"]) { order: 10; }
/* Propriedades é liga/desliga: aberto aparece pressionado. */
html.pam-visual-novo [class~="bg-muted/30"]:has(> .bjs-container) > [class~="z-50"][class~="flex-wrap"] > button[title="Fechar propriedades"] { background: #F3EEFC !important; border-color: #B89AF0 !important; color: #5A1FB0; }
html.pam-visual-novo [class~="bg-muted/30"]:has(> .bjs-container) > [class~="z-50"][class~="flex-wrap"] > button[title="Salvar XML"] {
  order: 11; padding: 0 16px !important; background: #1A94FF !important; border-color: #1A94FF !important; color: #fff !important;
}
html.pam-visual-novo [class~="bg-muted/30"]:has(> .bjs-container) > [class~="z-50"][class~="flex-wrap"] > button[title="Salvar XML"]:hover { background: #0B85F0 !important; border-color: #0B85F0 !important; }
html.pam-visual-novo [class~="bg-muted/30"]:has(> .bjs-container) > [class~="z-50"][class~="flex-wrap"] > button[title="Salvar XML"] svg { color: #fff; }
/* Botão só de ícone (tela cheia). */
html.pam-visual-novo .pam-barra-extra { display: inline-flex; align-items: center; justify-content: center; width: 32px; padding: 0 !important; }
html.pam-visual-novo .pam-barra-extra span { display: none; }
/* Barra estreita, em dois degraus. Até 860px: Exportar imagem, XML, Versões e Propriedades só com ícone
   (Importar, Exportar e Salvar mantêm o nome). Até 600px: Importar e Exportar também. */
@container (max-width: 860px) {
  html.pam-visual-novo [class~="z-50"][class~="flex-wrap"] > button:is([title="Fechar propriedades"], [title="Abrir propriedades"]),
  html.pam-visual-novo [class~="z-50"][class~="flex-wrap"] > div > button:is([title="Exportar como imagem"], [title="Visualizar/Editar XML"], [title="Ver/Restaurar versões"]) {
    width: 32px; padding: 0 !important; justify-content: center; font-size: 0 !important;
  }
  html.pam-visual-novo [class~="z-50"][class~="flex-wrap"] button[title="Exportar como imagem"] span { display: none; }
  html.pam-visual-novo [class~="z-50"][class~="flex-wrap"] button:is([title="Visualizar/Editar XML"], [title$="propriedades"])::after { content: none; }
}
@container (max-width: 600px) {
  html.pam-visual-novo [class~="z-50"][class~="flex-wrap"] > button:is([title^="Importar"], [title^="Exportar XML"]) { width: 32px; padding: 0 !important; justify-content: center; }
  html.pam-visual-novo [class~="z-50"][class~="flex-wrap"] > button:is([title^="Importar"], [title^="Exportar XML"]) span { display: none; }
}
/* Anotações: Mostrar todas | Ocultar todas, depois de Versões. O botão do estado atual fica marcado. */
html.pam-visual-novo [class~="bg-muted/30"]:has(> .bjs-container) > [class~="z-50"][class~="flex-wrap"] > .pam-notas-grupo { order: 6; display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; padding-left: 8px; border-left: 1px solid var(--pv-borda); }
html.pam-visual-novo [class~="bg-muted/30"]:has(> .bjs-container) > [class~="z-50"][class~="flex-wrap"] .pam-notas-rotulo { margin-right: 2px; font-size: 12px; font-weight: 600; color: var(--pv-tinta-2); white-space: nowrap; }
html.pam-visual-novo [class~="bg-muted/30"]:has(> .bjs-container) > [class~="z-50"][class~="flex-wrap"] .pam-notas-grupo button.on { background: #F3EEFC !important; border-color: #B89AF0 !important; color: #5A1FB0; }
@container (max-width: 860px) { html.pam-visual-novo .pam-notas-rotulo { display: none; } }
/* Tela cheia: sem o menu do app, o editor ocupa a tela toda. */
html.pam-foco [class~="transition-all"][class~="bg-gradient-to-b"] { display: none !important; }
/* Menus que abrem da barra (Versões, Exportar imagem). */
html.pam-visual-novo [class~="bg-muted/30"]:has(> .bjs-container) > [class~="z-50"][class~="flex-wrap"] .relative > div:not(:empty) { border: 1px solid var(--pv-borda); border-radius: 10px; box-shadow: var(--pv-sombra); }

/* ---------- Paleta (barra lateral do bpmn.io) ---------- */
html.pam-visual-novo .djs-palette {
  top: 16px; left: 16px; padding: 6px; border: 1px solid var(--pv-borda); border-radius: 12px;
  background: #fff; box-shadow: var(--pv-sombra);
}
/* Sempre 2 colunas (a grade abaixo), em qualquer altura de tela: o bpmn.io só passa a "two-column" em tela
   baixa, e em uma coluna o cartão ficava estreito com os ícones vazando. 2 x 36 + 4 de vão + 12 + 2 de borda. */
html.pam-visual-novo .djs-palette, html.pam-visual-novo .djs-palette.two-column.open { width: 90px; }
html.pam-visual-novo .djs-palette .entry {
  width: 36px; height: 36px; margin: 2px; line-height: 36px; font-size: 22px; border-radius: 8px;
  color: var(--pv-tinta-2); transition: background-color 100ms ease, color 100ms ease;
}
html.pam-visual-novo .djs-palette .entry:hover { background: var(--pv-roxo-claro); color: var(--pv-roxo); }
html.pam-visual-novo .djs-palette .entry:before { line-height: 36px; }
/* Grade única de 2 colunas: os grupos (eventos, decisão, atividades…) não deixam mais casas vazias. */
html.pam-visual-novo .djs-palette .djs-palette-entries { display: grid; grid-template-columns: repeat(2, 36px); gap: 4px; justify-content: center; }
html.pam-visual-novo .djs-palette .group { display: contents; }
html.pam-visual-novo .djs-palette .djs-palette-entries .entry { margin: 0 !important; }
html.pam-visual-novo .djs-palette .separator { grid-column: 1 / -1; width: 100%; margin: 2px 0; border: 0; border-top: 1px solid var(--pv-borda); }
/* Ícones do Ploomes na paleta: linha fina no lugar da imagem pesada. */
/* O CSS do PAM fixa imagem, 46px e ::before vazio com !important: aqui o seletor é mais específico. */
html.pam-visual-novo .djs-palette .djs-palette-entries .entry.entry-icon {
  background: none !important; filter: none !important; display: flex; align-items: center; justify-content: center;
  width: 36px !important; height: 36px !important; line-height: 36px !important;
}
html.pam-visual-novo .djs-palette .djs-palette-entries .entry.entry-icon:hover { background: var(--pv-roxo-claro) !important; }
html.pam-visual-novo .djs-palette .djs-palette-entries .entry.entry-icon::before {
  content: "" !important; display: block; margin: 8px auto; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--pv-mask) center / 20px no-repeat; mask: var(--pv-mask) center / 20px no-repeat;
}
html.pam-visual-novo .ico-integration { --pv-mask: var(--pv-ico-integration); }
html.pam-visual-novo .ico-automation { --pv-mask: var(--pv-ico-automation); }
html.pam-visual-novo .ico-application { --pv-mask: var(--pv-ico-application); }
html.pam-visual-novo .ico-approval { --pv-mask: var(--pv-ico-approval); }
html.pam-visual-novo .ico-funnel { --pv-mask: var(--pv-ico-funnel); }
html.pam-visual-novo .ico-calculation { --pv-mask: var(--pv-ico-calculation); }

/* ---------- Menu de contexto (ao lado do elemento selecionado) ---------- */
html.pam-visual-novo .djs-context-pad .entry {
  width: 28px; height: 28px; margin: 0 0 4px 4px; line-height: 28px; font-size: 18px; border-radius: 7px;
  background: #fff; color: var(--pv-tinta-2); box-shadow: 0 1px 3px rgb(27 16 44 / .12), 0 0 0 1px var(--pv-borda);
}
html.pam-visual-novo .djs-context-pad .entry:hover { background: var(--pv-roxo-claro); color: var(--pv-roxo); }
html.pam-visual-novo .djs-context-pad .entry[data-action="delete"]:hover { background: #FDEEEE; color: #D93F3F; }

/* ---------- Menu de troca de elemento (chave inglesa) e outros popups ---------- */
html.pam-visual-novo .djs-popup {
  border: 1px solid var(--pv-borda); border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 12px 32px rgb(27 16 44 / .14), 0 2px 6px rgb(27 16 44 / .08);
  font-family: "Source Sans Pro", "Source Sans 3", system-ui, sans-serif; color: var(--pv-tinta);
}
html.pam-visual-novo .djs-popup-header { padding: 10px 12px 6px; }
html.pam-visual-novo .djs-popup-title { font-size: 13px; font-weight: 700; color: var(--pv-tinta); }
html.pam-visual-novo .djs-popup-header .entry { border-radius: 6px; color: var(--pv-tinta-2); }
html.pam-visual-novo .djs-popup-header .entry:hover, html.pam-visual-novo .djs-popup-header .entry.active { background: var(--pv-roxo-claro); color: var(--pv-roxo); }
html.pam-visual-novo .djs-popup-search { margin: 4px 10px 6px; }
html.pam-visual-novo .djs-popup-search input {
  height: 32px; border: 1px solid rgb(27 16 44 / .14); border-radius: 8px; font-size: 13px; background: #fff;
}
html.pam-visual-novo .djs-popup-search input:focus { outline: none; border-color: var(--pv-roxo); box-shadow: 0 0 0 3px rgb(126 51 230 / .14); }
html.pam-visual-novo .djs-popup-results { padding: 0 6px 6px; }
html.pam-visual-novo .djs-popup-group { border: 0; }
html.pam-visual-novo .djs-popup-results .entry { border-radius: 7px; padding: 6px 8px; font-size: 13px; color: var(--pv-tinta); }
html.pam-visual-novo .djs-popup-results .entry:hover, html.pam-visual-novo .djs-popup-results .entry.selected { background: var(--pv-roxo-claro); }
html.pam-visual-novo .djs-popup-results .entry [class*="bpmn-icon"], html.pam-visual-novo .djs-popup-results .entry:before { color: var(--pv-roxo); }

/* ---------- Seleção, alças e edição de texto no canvas ---------- */
html.pam-visual-novo .djs-container {
  --element-selected-outline-stroke-color: #7E33E6;
  --element-hover-outline-fill-color: #B89AF0;
  --lasso-fill-color: rgb(126 51 230 / .06);
  --lasso-stroke-color: #7E33E6;
}
html.pam-visual-novo .djs-element.selected .djs-outline { rx: 10px; }
html.pam-visual-novo .djs-resizer-visual { fill: #fff !important; stroke: #7E33E6 !important; stroke-width: 1.25px !important; }
html.pam-visual-novo .djs-direct-editing-parent {
  border-radius: 8px; background: #fff !important; box-shadow: 0 0 0 2px rgb(126 51 230 / .35);
}
html.pam-visual-novo .djs-popup-results .djs-popup-label { color: var(--pv-tinta); }

/* ---------- Ambiente: botão no menu de contexto e seletor ---------- */
html.pam-visual-novo .djs-context-pad .entry.pam-cp-ambiente::before {
  content: ""; display: block; width: 16px; height: 16px; margin: 6px auto; background: currentColor;
  -webkit-mask: var(--pv-ico-ambiente) center / 16px no-repeat; mask: var(--pv-ico-ambiente) center / 16px no-repeat;
}
.pam-ambiente-seletor {
  position: fixed; z-index: 1002; width: 320px; max-height: 420px; display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgb(27 16 44 / .09); border-radius: 12px;
  box-shadow: 0 12px 32px rgb(27 16 44 / .14), 0 2px 6px rgb(27 16 44 / .08);
  font: 13px/1.3 "Source Sans Pro", "Source Sans 3", system-ui, sans-serif; color: #1B102C;
}
.pam-amb-topo { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 6px 14px; font-size: 14px; }
.pam-amb-x { width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: #4A4257; cursor: pointer; }
.pam-amb-x:hover { background: rgb(27 16 44 / .05); }
.pam-amb-busca { margin: 0 12px 8px; height: 32px; padding: 0 10px; border: 1px solid rgb(27 16 44 / .14); border-radius: 8px; font: inherit; outline: none; }
.pam-amb-busca:focus { border-color: #7E33E6; box-shadow: 0 0 0 3px rgb(126 51 230 / .14); }
.pam-amb-lista { overflow: auto; padding: 0 8px 4px; }
.pam-amb-rotulo { padding: 8px 6px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgb(27 16 44 / .5); }
.pam-amb-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.pam-amb-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 6px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pam-amb-item > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pam-amb-item:hover { background: #F3EEFC; }
.pam-amb-quad { flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid #DCD3EC; border-radius: 6px; background: #fff; }
.pam-amb-item.on { background: #F3EEFC; font-weight: 600; }
.pam-amb-item.on .pam-amb-quad { border-color: #7E33E6; box-shadow: 0 0 0 1px #7E33E6; }
.pam-amb-rodape { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-top: 1px solid rgb(27 16 44 / .09); }
.pam-amb-dica { font-size: 12px; color: rgb(27 16 44 / .55); }
.pam-amb-limpar { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: #4A4257; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.pam-amb-limpar:hover { background: rgb(27 16 44 / .05); }
.pam-ambiente-seletor [hidden] { display: none !important; }


/* ---------- Alça de recolher o menu lateral ---------- */
/* Fica na borda direita do próprio menu, à altura do cabeçalho: discreta até o mouse chegar no menu. */
html.pam-visual-novo [class~="transition-all"][class~="bg-gradient-to-b"] { position: relative; }
.pam-menu-alca {
  position: absolute; top: 52px; right: -11px; z-index: 30; width: 22px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid rgb(27 16 44 / .12); background: #fff; color: #4A4257; cursor: pointer;
  box-shadow: 0 1px 3px rgb(27 16 44 / .12); opacity: .55; transition: opacity 150ms ease, transform 150ms ease, color 100ms ease;
}
.pam-menu-alca svg { width: 13px; height: 13px; }
[class~="transition-all"][class~="bg-gradient-to-b"]:hover > .pam-menu-alca, .pam-menu-alca:focus-visible { opacity: 1; }
.pam-menu-alca:hover { color: #7E33E6; transform: scale(1.08); }
/* Recolhido, o PAM deixava uma faixa roxa vazia de 64px (o conteúdo do menu some). Recolhe por inteiro;
   a alça fica na borda esquerda da tela para reabrir. */
html.pam-visual-novo [class~="w-16"][class~="transition-all"][class~="bg-gradient-to-b"] { width: 0 !important; overflow: visible; }
html.pam-visual-novo [class~="w-16"][class~="transition-all"][class~="bg-gradient-to-b"] > :not(.pam-menu-alca) { visibility: hidden; }
html.pam-visual-novo [class~="w-16"][class~="transition-all"][class~="bg-gradient-to-b"] > .pam-menu-alca { right: -26px; opacity: .8; }

/* Logotipo do bpmn.io (crédito obrigatório da licença): canto inferior esquerdo, porque o direito é do
   botão do Assistente. */
html.pam-visual-novo .bjs-powered-by { right: auto !important; left: 16px; bottom: 12px; opacity: .55; }
html.pam-visual-novo .bjs-powered-by:hover { opacity: 1; }

/* Menu de contexto da anotação: recolher. */
html.pam-visual-novo .djs-context-pad .entry.pam-cp-recolher::before {
  content: ""; display: block; width: 16px; height: 16px; margin: 6px auto; background: currentColor;
  -webkit-mask: var(--pv-ico-recolher) center / 16px no-repeat; mask: var(--pv-ico-recolher) center / 16px no-repeat;
}
/* Anotação recolhida: etiqueta clicável. */
html.pam-visual-novo .pam-anot-etiqueta { cursor: pointer; }
html.pam-visual-novo .djs-element:hover .pam-anot-etiqueta rect { fill: #EBDFFC; }

/* ---------- Seletor de ambiente: ambientes da conta ---------- */
.pam-amb-item { position: relative; }
.pam-amb-nome-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pam-amb-quad img { width: 16px; height: 16px; object-fit: contain; }
.pam-amb-del { margin-left: auto; flex: none; width: 18px; height: 18px; display: none; align-items: center; justify-content: center; border-radius: 4px; font-size: 10px; color: #7A7286; }
.pam-amb-item:hover .pam-amb-del { display: inline-flex; }
.pam-amb-del:hover { background: #FDEEEE; color: #D93F3F; }
.pam-amb-adicionar { height: 28px; padding: 0 10px; border: 1px solid rgb(27 16 44 / .15); border-radius: 6px; background: #fff; color: #5A1FB0; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgb(27 16 44 / .06); }
.pam-amb-adicionar:hover { background: #F7F5FA; border-color: #B89AF0; }
.pam-amb-novo { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
.pam-amb-novo[hidden] { display: none; }
.pam-amb-novo .pam-amb-rotulo { padding: 4px 0 0; }
.pam-amb-novo-linha { display: flex; align-items: center; gap: 8px; }
.pam-amb-upload { cursor: pointer; }
.pam-amb-upload .pam-amb-quad { width: 40px; height: 40px; border-style: dashed; font-size: 18px; color: #7E33E6; }
.pam-amb-upload .pam-amb-quad img { width: 28px; height: 28px; }
.pam-amb-upload:hover .pam-amb-quad { border-color: #7E33E6; background: #F7F2FF; }
.pam-amb-nome { flex: 1; height: 34px; padding: 0 10px; border: 1px solid rgb(27 16 44 / .14); border-radius: 8px; font: inherit; outline: none; }
.pam-amb-nome:focus { border-color: #7E33E6; box-shadow: 0 0 0 3px rgb(126 51 230 / .14); }
.pam-amb-erro { font-size: 12px; color: #D93F3F; }
.pam-amb-novo-acoes { display: flex; justify-content: flex-end; gap: 8px; }
.pam-amb-cancelar, .pam-amb-salvar { height: 30px; padding: 0 12px; border-radius: 6px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.pam-amb-cancelar { border: 1px solid rgb(27 16 44 / .15); background: #fff; color: #1B102C; }
.pam-amb-salvar { border: 1px solid #1A94FF; background: #1A94FF; color: #fff; }
.pam-amb-salvar:disabled { opacity: .5; cursor: default; }