/* =========================================================
   ARMAZÉM INTELIGENTE — camada de edição
   A moldura é escura e fixa para se distinguir do ecrã que está a
   editar. Não usa tokens do PDA de propósito: o que é da ferramenta
   não se confunde com o que é do produto.

   A seleção é azul e não laranja, ao contrário do editor da entrada.
   No PDA o laranja é a ação principal e a moldura da tarefa seguinte,
   e um contorno laranja de seleção lia-se como mais uma dessas.
   ========================================================= */

:root {
  /* Desenho de 23 de setembro: claro, com o azul da marca e o laranja só
     onde há ação. O escuro ficou nos ecrãs do PDA, que são o produto. */
  --ed-fundo:   #eef3fa;
  --ed-painel:  #ffffff;
  --ed-painel-2:#f4f7fb;
  --ed-borda:   #e2e8f0;
  --ed-tinta:   #17212e;
  --ed-tinta-2: #4a5568;
  --ed-tinta-3: #7a8699;
  --ed-accao:   #1a6fd6;
  --ed-erro:    #cf372d;
  --ed-marca:   #00537e;
  --ed-tela:    #eef3fa;
  --ed-aro:     #1b1f24;
  --ed-larg:    300px;
}

/* ---------- a tela ----------
   O aparelho ao centro, à escala de 1 px por dp, com o aro do EDA61K à
   volta. O aro é da tela e não do ecrã: não entra nas camadas nem no CSS. */
html, body { background: var(--ed-tela); }
.tela { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: 48px 24px; }
.ecra { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ecra[hidden] { display: none; }
.ecra > .pda {
  border-radius: 6px;
  box-shadow: 0 0 0 10px var(--ed-aro), 0 0 0 11px #3a4048, 0 18px 40px rgba(0,0,0,.28);
  margin: 11px;
}

/* ---------- o ícone da app ----------
   Não é um ecrã do aparelho: é a marca, a 320 × 320 (1024 no SVG a 31,25%).
   As medidas são do desenho do ícone, e não da escala de tokens — é arte,
   não interface. As cores, essas, são tokens. */
.icone-app {
  position: relative; width: 320px; height: 320px; border-radius: 72px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(circle at 50% 50%, var(--c-invertido) 32%, var(--c-logotipo) 100%);
  color: var(--c-sobre-marca); box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.icone-app__simbolo { width: 164px; height: 147px; margin-top: 44px; }
.icone-app__nome { font-family: var(--f-marca); font-weight: 700; font-size: 64px; line-height: 1; margin-top: 12px; letter-spacing: .01em; }
.icone-app__sub  { font-size: 13px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; margin-top: 8px; padding-left: .32em; }
.icone-app__tamanhos { display: flex; align-items: flex-end; gap: 24px; }
.icone-app__tamanho { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.icone-app__tamanho figcaption { font: 500 11px var(--f-base); color: #52514e; }
.so-ecra .ecra--marca { padding: 0; }

/* #so=<ecrã>: só o aparelho, colado ao canto, para as capturas */
html:has(.so-ecra), .so-ecra { background: #f4f5f7; }
.so-ecra .tela { padding: 0; min-height: 0; display: block; }
.so-ecra .ecra > .pda { box-shadow: none; border-radius: 0; margin: 0; }

/* ---------- ecrãs, documentação, como funciona ---------- */
.ed-abas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 8px 12px; border-bottom: 1px solid var(--ed-borda); }
.ed-aba {
  font: inherit; font-size: 11px; font-weight: 600; padding: 6px 4px; cursor: pointer;
  border: 1px solid var(--ed-borda); border-radius: 6px; background: var(--ed-painel-2); color: var(--ed-tinta-2);
}
.ed-aba[aria-selected="true"] { background: var(--ed-accao); border-color: transparent; color: #ffffff; }

/* A documentação ocupa a tela e o lugar das propriedades, que ali não servem
   para nada. As camadas ficam, para se voltar a um ecrã com um clique. */
.ed-leitura { position: fixed; top: 0; bottom: 0; left: var(--ed-larg); right: 0; z-index: 62; background: #f4f5f7; }
.ed-sem-esq .ed-leitura { left: 0; }
.ed-leitura iframe { display: block; width: 100%; height: 100%; border: 0; }
.ed-lendo .ed-abrir--dir { display: none; }
@media (max-width: 1100px) { .ed-leitura { left: 0; top: 0; } }
.ed-select optgroup { color: var(--ed-tinta-3); font-style: normal; }
.ed-select option { color: var(--ed-tinta); }

/* ---------- escolha do ecrã ---------- */
.ed-ecras {
  display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--ed-borda);
  background: var(--ed-painel-2);
}
.ed-ecras > label { color: var(--ed-tinta-3); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }

/* ---------- rótulo que segue o rato ---------- */
.ed-dica-flutuante {
  position: fixed; z-index: 80; pointer-events: none;
  background: var(--ed-fundo); color: var(--ed-tinta);
  border: 1px solid var(--ed-borda); border-radius: 6px;
  padding: 5px 8px; font-size: 11px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.ed-dica-flutuante[hidden] { display: none; }

/* ---------- a tela encolhe para os painéis ---------- */
.editando { padding-left: var(--ed-larg); padding-right: var(--ed-larg); }
.editando.ed-sem-esq { padding-left: 0; }
.editando.ed-sem-dir { padding-right: 0; }
.editando.ed-sem-esq .ed-painel--esq,
.editando.ed-sem-dir .ed-painel--dir { display: none; }

/* botão de fechar, na cabeça de cada painel */
.ed-fechar {
  font: inherit; font-size: 16px; line-height: 1;
  width: 24px; height: 24px; flex: none;
  border: 1px solid var(--ed-borda); border-radius: 6px;
  background: var(--ed-painel-2); color: var(--ed-tinta-2); cursor: pointer;
}
.ed-fechar:hover { background: rgba(255,255,255,.10); color: var(--ed-tinta); }

/* botão de abrir, encostado à margem, só quando o painel está fechado */
.ed-abrir {
  position: fixed; top: 10px; z-index: 61; display: none;
  width: 26px; height: 34px; padding: 0;
  font: inherit; font-size: 16px; line-height: 1;
  border: 1px solid var(--ed-borda); background: var(--ed-painel); color: var(--ed-tinta);
  cursor: pointer;
}
.ed-abrir--esq { left: 0; border-left: 0; border-radius: 0 6px 6px 0; }
.ed-abrir--dir { right: 0; border-right: 0; border-radius: 6px 0 0 6px; }
.ed-sem-esq .ed-abrir--esq, .ed-sem-dir .ed-abrir--dir { display: block; }

/* ---------- alvos na tela ---------- */
/* O realce vai só à peça que o clique escolheria. Com :hover puro,
   todos os pais do rato ficavam marcados ao mesmo tempo. */
.editando [data-ed-alvo] { cursor: default; }
.editando [data-ed-sel] { cursor: move; }
.editando [data-ed-hover] { outline: 1px solid var(--ed-accao); outline-offset: 1px; }
.editando [data-ed-sel] { outline: 2px solid var(--ed-accao) !important; outline-offset: 1px; }
.editando [contenteditable="true"] { outline: 2px solid var(--ed-marca) !important; cursor: text; }

/* ---------- painéis ---------- */
.ed-painel {
  position: fixed; top: 0; bottom: 0; width: var(--ed-larg); z-index: 60;
  display: none; flex-direction: column;
  background: var(--ed-painel); color: var(--ed-tinta);
  font-family: var(--f-base); font-size: 12px; line-height: 1.5;
}
.editando .ed-painel { display: flex; }
.ed-painel--esq { left: 0; border-right: 1px solid var(--ed-borda); }
.ed-painel--dir { right: 0; border-left: 1px solid var(--ed-borda); }

.ed-cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 44px; padding: 0 12px;
  border-bottom: 1px solid var(--ed-borda); background: var(--ed-fundo);
}
.ed-cabeca h2 { font-family: var(--f-base); font-size: 14px; font-weight: 600; margin: 0; }
.ed-cabeca__marca { font-family: var(--f-base); font-size: 16px; display: flex; align-items: center; gap: 8px; }
.ed-cabeca__simbolo { width: 24px; height: 24px; border-radius: 6px; }

.ed-corpo { flex: 1; overflow-y: auto; }
.ed-pe { border-top: 1px solid var(--ed-borda); padding: 12px; display: grid; gap: 8px; }

/* ---------- camadas ---------- */
.ed-camada {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; text-align: left; cursor: pointer;
  padding: 5px 12px; border: 0; background: none; color: var(--ed-tinta-2);
}
.ed-camada:hover { background: var(--ed-painel-2); color: var(--ed-tinta); }
.ed-camada[aria-current="true"] { background: rgba(13,153,255,.22); color: var(--ed-tinta); }
.ed-camada__icone { width: 12px; color: var(--ed-tinta-3); flex: none; }
.ed-camada__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- secções de propriedades ---------- */
.ed-seccao { border-bottom: 1px solid var(--ed-borda); padding: 12px; display: grid; gap: 8px; }
.ed-seccao__titulo {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ed-tinta-3); margin: 0;
}
.ed-linha { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 8px; }
.ed-linha > label { color: var(--ed-tinta-3); }

.ed-select, .ed-texto {
  width: 100%; font: inherit; font-size: 12px; color: var(--ed-tinta);
  background: var(--ed-painel-2); border: 1px solid var(--ed-borda);
  border-radius: 6px; padding: 5px 8px;
}
.ed-texto { resize: vertical; min-height: 56px; }
.ed-select:focus, .ed-texto:focus { outline: 2px solid var(--ed-marca); outline-offset: -1px; }

/* tokens de cor: a paleta é a do manual, não há selecionador livre */
.ed-tokens { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.ed-token {
  aspect-ratio: 1; border-radius: 4px; border: 1px solid var(--ed-borda);
  padding: 0; cursor: pointer; background-clip: padding-box;
}
.ed-token[aria-pressed="true"] { outline: 2px solid var(--ed-accao); outline-offset: 1px; }

/* DUAS MARCAS, E A DIFERENÇA IMPORTA.
   O traço cheio é o que TU mudaste, e é o que sai no CSS exportado.
   O traço interrompido é o que a peça JÁ TINHA, e não sai em lado nenhum —
   serve para se saber onde ela está antes de se lhe tocar. Se fossem iguais,
   quem olhasse para o painel não saberia o que ia levar daqui. */
.ed-token[data-ed-actual] { outline: 2px dashed var(--ed-marca); outline-offset: 1px; }
.ed-token--nenhum { position: relative; background: var(--ed-painel-2); }
.ed-token--nenhum::after {
  content: ""; position: absolute; inset: 2px;
  background: linear-gradient(to top right, transparent 45%, #f49791 45%, #f49791 55%, transparent 55%);
}

/* escalas: só os degraus que o manual tem */
.ed-degraus { display: flex; flex-wrap: wrap; gap: 4px; }
.ed-degrau {
  font: inherit; font-size: 10px; font-weight: 700;
  padding: 4px 7px; border-radius: 6px;
  border: 1px solid var(--ed-borda); background: var(--ed-painel-2); color: var(--ed-tinta-2);
  cursor: pointer;
}
.ed-degrau[aria-pressed="true"] { background: var(--ed-accao); border-color: transparent; color: #ffffff; }

/* Ver a nota em `.ed-token[data-ed-actual]`: o que a peça já tinha marca-se,
   mas não se confunde com o que mudaste. */
.ed-degrau[data-ed-actual] { border-color: var(--ed-marca); color: var(--ed-tinta); }
.ed-degrau[data-ed-actual][aria-pressed="true"] { border-color: transparent; }

.ed-botao {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 7px 12px; border-radius: 6px;
  border: 1px solid var(--ed-borda); background: var(--ed-painel-2); color: var(--ed-tinta);
  cursor: pointer;
}
.ed-botao:hover { background: rgba(255,255,255,.10); }
.ed-botao--accao { background: var(--ed-accao); border-color: transparent; color: #ffffff; font-weight: 700; }
.ed-botao:disabled { opacity: .4; cursor: not-allowed; }

.ed-vazio { padding: 16px; color: var(--ed-tinta-3); }
.ed-dica { color: var(--ed-tinta-3); font-size: 10px; margin: 0; }

/* ---------- diálogo do CSS ---------- */
.ed-dialogo {
  border: 1px solid var(--ed-borda); border-radius: 10px; padding: 0;
  width: min(680px, 92vw); background: var(--ed-painel); color: var(--ed-tinta);
  font-family: var(--f-base);
}
.ed-dialogo::backdrop { background: rgba(0,0,0,.55); }
.ed-dialogo__topo { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--ed-borda); }
.ed-dialogo h2 { font-family: var(--f-base); font-size: 16px; margin: 0; }
.ed-dialogo pre { margin: 0; padding: 16px; max-height: 50vh; overflow: auto; background: var(--ed-fundo); font-size: 11px; line-height: 1.7; color: var(--ed-tinta-2); }
.ed-dialogo__accoes { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; }

.ed-aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70;
  background: var(--ed-fundo); color: var(--ed-tinta); border: 1px solid var(--ed-borda);
  padding: 8px 16px; border-radius: 999px; font-size: 12px;
}

@media (max-width: 1100px) {
  .editando { padding: 0; }
  .ed-painel--esq { display: none !important; }
  .ed-painel--dir { width: 100%; top: auto; height: 52vh; border-top: 1px solid var(--ed-borda); }
}

/* ---------- coordenadas ---------- */
.ed-coords { display: flex; gap: 8px; align-items: center; }
.ed-coord { display: flex; align-items: center; gap: 4px; flex: 1; }
.ed-coord > span { color: var(--ed-tinta-3); font-size: 10px; font-weight: 700; }
.ed-coord input { width: 100%; }

/* ---------- o CSS da peça ---------- */
.ed-css {
  margin: 0; padding: 8px; max-height: 260px; overflow: auto;
  background: var(--ed-fundo); border: 1px solid var(--ed-borda); border-radius: 6px;
  font-family: var(--f-mono); font-size: 10px; line-height: 1.6; color: var(--ed-tinta-2);
  white-space: pre; tab-size: 2;
}

/* =========================================================
   A PALETA DE PEÇAS

   Vive no painel das camadas, por baixo da árvore. Ali e não no painel das
   propriedades: o da direita fala da peça escolhida, e acrescentar não é uma
   propriedade de nada — é uma ação sobre o ecrã.
   ========================================================= */

.ed-pecas {
  /* `flex: none` e altura própria: sem isto a paleta empurrava a árvore das
     camadas até ela ficar cortada a meio de um nome, e quem estava a mexer no
     ecrã deixava de conseguir escolher pela lista. As duas repartem a altura,
     e cada uma rola dentro do seu bocado. */
  flex: none;
  max-height: 44%;
  overflow-y: auto;
  border-top: 1px solid var(--ed-borda);
  padding: 12px 12px 16px;
}

/* A árvore nunca desce abaixo disto. Uma lista de camadas com duas linhas não
   serve para nada, e é preferível a paleta rolar. */
.ed-painel--esq .ed-corpo { min-height: 150px; }

.ed-pecas__grupo {
  margin: 12px 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ed-tinta-3);
}

/* Duas colunas e não três: os nomes são palavras inteiras — «Caixa de
   verificação» — e cortados a meio deixam de dizer o que a peça é. */
.ed-pecas__grelha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.ed-peca {
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--ed-borda);
  border-radius: 6px;
  background: var(--ed-painel-2);
  color: var(--ed-tinta);
  font: inherit;
  font-size: 11.5px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.ed-peca:hover { border-color: var(--ed-accao); color: var(--ed-accao); }
.ed-peca:focus-visible { outline: 2px solid var(--ed-marca); outline-offset: 1px; }

.ed-pecas__lista { margin-top: 12px; }

.ed-pecas__linha {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ed-pecas__nome {
  flex: 1;
  min-width: 0;
  padding: 5px 6px;
  border: 0;
  background: none;
  color: var(--ed-tinta-2);
  font: inherit;
  font-size: 11px;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}

.ed-pecas__nome:hover { color: var(--ed-accao); }

.ed-pecas__apagar {
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--ed-borda);
  border-radius: 6px;
  background: none;
  color: var(--ed-tinta-3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.ed-pecas__apagar:hover { border-color: var(--ed-erro); color: var(--ed-erro); }

/* #so=todos: os dezanove seguidos, um por página */
.so-ecra--todos .ecra { display: block; gap: 0; }
.so-ecra--todos .ecra + .ecra { break-before: page; }
/* o ícone não é um ecrã do aparelho */
.so-ecra--todos .ecra--marca { display: none; }

/* O mapa de navegação, montado pelo fluxo.js: na aba «Fluxo» do editor
   (.ed-fluxo) e sozinho em #so=fluxo, que é o que o gerar.sh fotografa. */
html:has(.so-fluxo), .so-fluxo { background: #eef0f3; }
.com-fluxo .tela { display: block; min-height: 0; padding: 0; }
.ed-fluxo .tela { background: #eef0f3; height: 100vh; overflow: auto; }
.fluxo { position: relative; width: max-content; padding: 40px 56px 56px; font-family: var(--f-base); color: #1c1d1f; }
.fluxo__cabeca { margin-bottom: 0; }  /* espaço para as faixas das setas que sobem à primeira linha */
.fluxo__titulo { margin: 0 0 6px; font-size: 28px; font-weight: 700; color: var(--c-logotipo); }
.fluxo__legenda { margin: 0; font-size: 15px; color: #52514e; display: flex; align-items: center; gap: 10px; }
.fluxo__amostra { width: 28px; height: 16px; border: 2px solid #1a73e8; border-radius: 4px; }
.fluxo__filtro { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fluxo__filtro button {
  font: 600 14px var(--f-base); padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid #c5cad1; background: #ffffff; color: #3a3b3d;
}
.fluxo__filtro button[aria-pressed="true"] { background: var(--c-logotipo); border-color: transparent; color: #ffffff; }
.fluxo .fluxo--fora { display: none; }
/* O ecrã a que se acabou de ir: pisca um instante, para se dar por ele no
   meio do mapa. */
.fluxo .fluxo--encontrado { outline: 3px solid var(--ed-accao); outline-offset: 6px; border-radius: 4px; animation: fluxo-encontrado 1.6s ease-out; }
@keyframes fluxo-encontrado { 0%, 60% { outline-color: var(--ed-accao); } 100% { outline-color: transparent; } }
.so-fluxo .fluxo__filtro { display: none; }
.fluxo__funcao:not(:empty)::before { content: " · "; }
.fluxo__linha { display: grid; grid-template-columns: 240px auto; align-items: start; padding: 150px 0 40px; }
.fluxo__linha + .fluxo__linha { border-top: 1px solid #d5d8dd; }
.fluxo__cabeca-linha { padding-right: 32px; }
.fluxo__rotulo { margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--c-logotipo); }
.fluxo__descricao { margin: 0; font-size: 14px; line-height: 1.45; color: #52514e; }
.fluxo__fila { display: flex; gap: 150px; }
.fluxo .ecra { gap: 10px; align-items: flex-start; }
.fluxo__nome { margin: 46px 0 0; font-size: 14px; font-weight: 700; color: #3a3b3d; }  /* os 46 px por cima são das setas que saem por baixo */
/* o objetivo: à largura do ecrã, duas ou três linhas; a altura fica igual em toda a linha */
.fluxo__objetivo { width: 320px; min-height: 3.9em; margin: 0; font-size: 13px; line-height: 1.3; color: #52514e; }
.fluxo .ecra > .pda { margin: 0; box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 6px 18px rgba(0,0,0,.08); border-radius: 12px; }
.fluxo__setas { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; color: #1a73e8; }
.fluxo__setas path { fill: none; stroke: currentColor; stroke-width: 2; }
.fluxo__alvo { fill: rgba(26,115,232,.08); stroke: #1a73e8; stroke-width: 2; }
/* mover as setas: agarra-se por uma linha larga e invisível por cima da seta */
.fluxo__toque { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: move; }
.fluxo__toque:hover { stroke: rgba(26,115,232,.18); }
.fluxo__setas path.fluxo__seta--agarrada { stroke-width: 3; }
.fluxo-a-mover, .fluxo-a-mover * { cursor: move !important; user-select: none; }
/* criar e mudar setas: a bolinha da peça escolhida, a ponta de cada seta,
   a linha que segue o rato e o ecrã onde vai cair */
.fluxo__nova, .fluxo__ponta { pointer-events: all; cursor: crosshair; stroke: #ffffff; stroke-width: 2; }
.fluxo__nova { fill: #1a73e8; }
.fluxo__ponta { fill: transparent; stroke: transparent; }
.fluxo__ponta:hover { fill: #1a73e8; stroke: #ffffff; }
.fluxo__setas path.fluxo__provisoria { stroke-dasharray: 6 4; }
.fluxo .ecra--alvo-seta > .pda { outline: 3px solid #1a73e8; outline-offset: 4px; }
.fluxo-a-ligar, .fluxo-a-ligar * { cursor: crosshair !important; user-select: none; }
@media print { .fluxo__linha { break-inside: avoid; } }

/* o zoom da tela, em baixo ao centro, como no Figma */
.fluxo__zoom {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 70;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--ed-painel); border: 1px solid var(--ed-borda); border-radius: 8px;
  font: 600 12px system-ui, sans-serif; color: var(--ed-tinta);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.fluxo__zoom button {
  font: inherit; color: inherit; background: transparent; border: 0; border-radius: 6px;
  min-width: 28px; height: 28px; padding: 0 8px; cursor: pointer;
}
.fluxo__zoom button:hover { background: var(--ed-painel-2); }
.fluxo__zoom .fluxo__zoom-valor { min-width: 52px; text-align: center; color: var(--ed-tinta-2); }
/* espaço carregado: a mão do Figma */
.fluxo-mao .tela, .fluxo-mao .tela * { cursor: grab !important; }
.fluxo-agarrado .tela, .fluxo-agarrado .tela * { cursor: grabbing !important; user-select: none; }
.fluxo-a-ligar .fluxo__setas * { pointer-events: none !important; }

/* ---------- o contexto do ecrã, por cima do aparelho ----------
   De que fluxo é, o que é o fluxo, e para que serve o ecrã. Só na aba dos
   ecrãs: no mapa do Fluxo o nome e o objetivo já estão por baixo de cada um. */
.ecra__contexto {
  width: 342px; padding: 14px 16px; border-radius: 10px;
  background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,.12);
  font-family: var(--f-base); color: #3a3b3d;
}
.ecra__contexto p { margin: 0; }
.ecra__contexto-rotulo {
  display: block; margin-bottom: 2px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b6e74;
}
.ecra__contexto-fluxo b { font-size: 15px; color: var(--c-logotipo); }
.ecra__contexto-descricao { margin-top: 4px !important; font-size: 13px; line-height: 1.4; color: #52514e; }
.ecra__contexto-nome { margin-top: 12px !important; padding-top: 10px; border-top: 1px solid #e3e5e8; font-size: 15px; font-weight: 700; color: #1c1d1f; }
.ecra__contexto-objetivo { margin-top: 6px !important; font-size: 13px; line-height: 1.4; }
.fluxo .ecra__contexto, .so-ecra .ecra__contexto { display: none; }

/* ---------- a aba «Texto»: o fluxo por escrito ---------- */
.ed-leitura--texto { overflow: auto; background: #f4f5f7; }
.texto-fluxo { max-width: 760px; margin: 0 auto; padding: 40px 32px 80px; font-family: var(--f-base); color: #1c1d1f; }
.texto-fluxo__titulo { margin: 0 0 8px; font-size: 28px; color: var(--c-logotipo); }
.texto-fluxo__intro { margin: 0 0 16px; font-size: 15px; color: #52514e; }
.texto-fluxo__filtro { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.texto-fluxo__filtro button {
  font: 600 14px var(--f-base); padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid #c5cad1; background: #ffffff; color: #3a3b3d;
}
.texto-fluxo__filtro button[aria-pressed="true"] { background: var(--c-logotipo); border-color: transparent; color: #ffffff; }
.texto-fluxo__seccao { margin-top: 32px; padding-top: 24px; border-top: 1px solid #d5d8dd; }
.texto-fluxo__seccao h2 { margin: 0 0 6px; font-size: 21px; color: var(--c-logotipo); }
.texto-fluxo__descricao { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: #3a3b3d; }
.texto-fluxo__bloco { margin: 12px 0; padding: 14px 16px; background: #ffffff; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.texto-fluxo__bloco h3 { margin: 0 0 6px; font-size: 16px; }
.texto-fluxo__ecra {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--c-logotipo); text-decoration: underline; text-underline-offset: 2px;
}
.texto-fluxo__objetivo { margin: 0 0 8px; font-size: 14px; line-height: 1.45; }
.texto-fluxo__rotulo, .texto-fluxo__leitura {
  display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: #eceff3; color: #52514e;
}
.texto-fluxo__leitura { background: #e3edf5; color: var(--c-acento); }
.texto-fluxo__saidas { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.texto-fluxo__saidas li { padding: 4px 0; border-top: 1px dashed #e3e5e8; }
.texto-fluxo__botao::before { content: "«"; } .texto-fluxo__botao::after { content: "»"; }
.texto-fluxo__seta { margin: 0 8px; color: #6b6e74; }
.texto-fluxo__sem { margin: 0; font-size: 13px; color: #6b6e74; font-style: italic; }
.texto-fluxo [hidden] { display: none; }

/* o diagrama de fluxo: largo, desliza para os lados se for preciso */
.texto-fluxo__diagrama h2 { margin: 0 0 6px; font-size: 21px; color: var(--c-logotipo); }
.texto-fluxo__tela {
  overflow: auto; padding: 16px; background: #ffffff;
  border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.texto-fluxo__tela svg { display: block; margin: 0 auto; }
.ed-leitura--texto .texto-fluxo { max-width: 1100px; }
.texto-fluxo__tela--fluxo { margin-bottom: 16px; }

/* os casos de uso, no fim da aba «Texto» */
.texto-fluxo__sub { margin: 16px 0 4px; font-size: 17px; color: var(--c-logotipo); }
.texto-fluxo__caso h3 { display: flex; align-items: baseline; gap: 10px; }
.texto-fluxo__cu { font-variant-numeric: tabular-nums; color: var(--c-logotipo); }
.texto-fluxo__estado {
  padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  background: #eceff3; color: #52514e;
}
.texto-fluxo__caso--fora { background: #f7f8fa; box-shadow: none; border: 1px dashed #c5cad1; }
.texto-fluxo__caso--fora h3 > span:nth-child(2) { color: #6b6e74; text-decoration: line-through; }
.texto-fluxo__caso .texto-fluxo__ecra { margin-right: 4px; font-size: 14px; }

/* O deslizar dos diagramas: a barra fica sempre à vista (o Windows esconde-a
   até se passar o rato) e o diagrama não passa de 80 % da janela, para a barra
   de baixo não ficar fora do ecrã. */
.texto-fluxo__tela {
  max-height: 80vh; overflow: scroll; scrollbar-width: auto; scrollbar-color: #00537e #e3e5e8;
  cursor: grab;
}
.texto-fluxo__tela.a-arrastar { cursor: grabbing; user-select: none; }
.texto-fluxo__tela::-webkit-scrollbar { width: 14px; height: 14px; }
.texto-fluxo__tela::-webkit-scrollbar-track { background: #e3e5e8; border-radius: 7px; }
.texto-fluxo__tela::-webkit-scrollbar-thumb { background: #00537e; border-radius: 7px; border: 3px solid #e3e5e8; }
.texto-fluxo__tela::-webkit-scrollbar-corner { background: transparent; }
.texto-fluxo__deslizar {
  display: flex; justify-content: flex-end; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #00537e;
}

/* O texto que estava solto dentro de um botão ganhou um <span> para se poder
   editar. Não muda nada no desenho: herda tudo do pai. */
.ed-solto { display: inline; }

/* os percursos: o caminho de cada caso, numa linha */
.texto-fluxo__percurso h3 { margin: 0 0 4px; font-size: 15px; }
.texto-fluxo__caminho { margin: 0; font-size: 14px; line-height: 2; }
.texto-fluxo__caminho .texto-fluxo__ecra { font-weight: 500; }
.texto-fluxo__nota { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: #6b6e74; }


/* ---------- Desenho de 23 de setembro: a moldura clara ---------- */
.ed-painel {
  background: var(--ed-painel); color: var(--ed-tinta);
  border-color: var(--ed-borda); box-shadow: 0 1px 2px rgba(23,33,46,.06);
}
.ed-cabeca { border-bottom: 1px solid var(--ed-borda); padding: 14px 16px; }
.ed-cabeca h2 { font-size: 15px; font-weight: 700; color: var(--ed-tinta); }
.ed-cabeca__marca { display: flex; align-items: center; gap: 8px; font: 700 18px var(--f-marca); color: var(--c-acao); }
.ed-cabeca__marca::after { content: "PDA"; font: 700 13px var(--f-base); color: var(--ed-tinta-3); letter-spacing: .12em; }
.ed-cabeca__simbolo { width: 26px; height: 26px; }

/* as abas: cartões com ícone */
.ed-abas { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--ed-borda); }
.ed-aba {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px; border: 1px solid var(--ed-borda); border-radius: 12px;
  background: var(--ed-painel-2); color: var(--ed-tinta-2); font-size: 12px; font-weight: 600;
}
.ed-aba svg { width: 18px; height: 18px; }
.ed-aba[aria-selected="true"] { background: var(--ed-accao); border-color: transparent; color: #fff; }
.ed-aba--larga { grid-column: span 3; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 10px 14px; }
@media (min-width: 1px) { .ed-aba--larga { grid-column: span 3; } }

.ed-ecras { padding: 12px 16px 6px; }
.ed-ecras label, .ed-seccao__titulo, .ed-pecas h3 {
  display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ed-tinta-3);
}
.ed-select, .ed-texto {
  background: var(--ed-painel); border: 1px solid var(--ed-borda); color: var(--ed-tinta); border-radius: 10px;
}
.ed-select optgroup { color: var(--ed-tinta-3); }
.ed-select option { color: var(--ed-tinta); }

.ed-corpo { padding: 6px 10px 12px; }
.ed-camada { border-radius: 8px; color: var(--ed-tinta-2); font-size: 13px; }
.ed-camada:hover { background: var(--ed-painel-2); }
.ed-camada[aria-current="true"] { background: #e7f0fb; color: var(--ed-accao); font-weight: 700; }
.ed-camada__icone { color: var(--ed-tinta-3); }

/* a paleta de peças: dois cartões por linha */
.ed-pecas { border-top: 1px solid var(--ed-borda); padding: 12px 16px; }
.ed-pecas__grelha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-pecas button, .ed-peca {
  border: 1px solid var(--ed-borda); border-radius: 10px; background: var(--ed-painel);
  color: var(--ed-tinta); font-size: 12px; font-weight: 600; padding: 10px;
}
.ed-pecas button:hover { border-color: var(--ed-accao); color: var(--ed-accao); }

.ed-pe { border-top: 1px solid var(--ed-borda); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.ed-botao {
  border: 1px solid var(--ed-borda); border-radius: 10px; background: var(--ed-painel);
  color: var(--ed-tinta); font-size: 13px; font-weight: 600; min-height: 40px;
}
.ed-botao--accao { background: var(--ed-accao); border-color: transparent; color: #fff; }
.ed-linha > label { color: var(--ed-tinta-3); }
.ed-vazio { color: var(--ed-tinta-3); }

/* o painel das propriedades, quando não há nada escolhido */
.ed-vazio-figura {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 48px 24px; text-align: center; color: var(--ed-tinta-3);
}
.ed-vazio-figura__circulo {
  display: flex; align-items: center; justify-content: center; width: 72px; height: 72px;
  border-radius: 999px; border: 2px dashed var(--ed-borda); color: var(--ed-tinta-3);
}
.ed-vazio-figura__circulo svg { width: 28px; height: 28px; }
.ed-vazio-figura b { font-size: 15px; color: var(--ed-tinta); }
.ed-dica-cartao {
  display: flex; gap: 10px; margin: 16px; padding: 12px 14px;
  background: #eef5ff; border-radius: 12px; color: var(--ed-tinta-2); font-size: 13px;
}
.ed-dica-cartao svg { width: 18px; height: 18px; flex: none; color: var(--ed-accao); }
.ed-dica-cartao b { display: block; color: var(--ed-tinta); }

/* a tela e o mapa */
html, body { background: var(--ed-tela); }
.ed-fluxo .tela { background: var(--ed-tela); }
.fluxo__cabeca {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px;
  padding: 16px 20px; background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(23,33,46,.06);
}
.fluxo__cabeca::before {
  content: ""; flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: #e7f0fb url("../img/simbolo-app.svg") center/22px no-repeat;
}
.fluxo__titulo { margin: 0; font-size: 19px; }
.fluxo__legenda { margin-top: 2px; font-size: 13px; }
.fluxo__filtro { margin: 0 0 0 auto; align-self: center; }
.fluxo__filtro button { border-radius: 999px; border-color: var(--ed-borda); background: var(--ed-painel-2); }
.fluxo__filtro button[aria-pressed="true"] { background: var(--c-acao); color: #fff; }
.fluxo__linha {
  background: #f7fafe; border: 1px solid #e6eefb; border-radius: 16px;
  margin-bottom: 20px; padding: 130px 20px 28px;
}
.fluxo__linha + .fluxo__linha { border-top: 1px solid #e6eefb; }
.fluxo__rotulo { font-size: 16px; }
.fluxo__zoom {
  background: #17212e; border: 0; border-radius: 999px; padding: 6px;
  box-shadow: 0 10px 24px rgba(23,33,46,.25);
}
.fluxo__zoom button { color: #fff; }
.fluxo__zoom button:hover { background: rgba(255,255,255,.12); }
.fluxo__zoom-valor { color: rgba(255,255,255,.85); }

/* o cabeçalho do mapa vive na tela, fora do zoom */
.ed-fluxo .tela > .fluxo__cabeca { position: sticky; top: 0; z-index: 3; margin: 12px 12px 0; }
.com-fluxo .fluxo { padding-top: 12px; }

/* o cabeçalho do mapa, mais baixo: cabe numa linha e não rouba tela */
.fluxo__cabeca { align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; }
.fluxo__cabeca::before { width: 32px; height: 32px; border-radius: 8px; background-size: 18px; }
.fluxo__titulo { font-size: 16px; line-height: 1.2; }
.fluxo__legenda { font-size: 12px; line-height: 1.3; gap: 6px; }
.fluxo__amostra { width: 20px; height: 12px; }
.fluxo__filtro { flex-wrap: nowrap; gap: 6px; margin-top: 0; }
.fluxo__filtro button { padding: 6px 12px; font-size: 12px; }
.ed-fluxo .tela > .fluxo__cabeca { margin: 10px 10px 0; }

/* o título do mapa numa linha; se não couber, corta-se com reticências */
.fluxo__titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fluxo__cabeca > div, .fluxo__cabeca { min-width: 0; }
.fluxo__legenda { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 320px; }
@media (max-width: 1400px) { .fluxo__legenda { display: none; } }
/* o título cede espaço; os filtros ficam sempre inteiros */
.fluxo__cabeca { flex-wrap: nowrap; }
.fluxo__titulo { flex: 1 1 0; min-width: 80px; }
.fluxo__filtro { flex: none; }

/* As setas ficam discretas; azuis só quando se clica numa. */
.fluxo__setas { color: #c3cbd6; }
.fluxo__setas path.fluxo__seta--escolhida { stroke: #1a73e8; stroke-width: 3; }
.fluxo__setas path.fluxo__seta--escolhida { marker-end: url(#fluxo-ponta); }
.fluxo__alvo { fill: none; stroke: #c3cbd6; stroke-width: 1.5; }
.fluxo__alvo[data-escolhida] { fill: rgba(26,115,232,.08); stroke: #1a73e8; stroke-width: 2; }
.fluxo__toque:hover { stroke: rgba(26,115,232,.12); }
.fluxo__setas path.fluxo__seta--movida { stroke-dasharray: none; }

/* Um deslizar só para o painel inteiro: o topo (marca e abas) fica colado em
   cima, o rodapé em baixo, e tudo o que está no meio desliza junto. */
.ed-painel--esq { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.ed-painel--esq .ed-cabeca, .ed-painel--esq .ed-abas {
  position: sticky; z-index: 2; background: var(--ed-painel);
}
.ed-painel--esq .ed-cabeca { top: 0; }
.ed-painel--esq .ed-abas { top: 55px; }
.ed-painel--esq .ed-corpo, .ed-painel--esq .ed-pecas {
  flex: none; min-height: 0; max-height: none; overflow: visible;
}
.ed-painel--esq .ed-pe {
  position: sticky; bottom: 0; z-index: 2; flex: none; margin-top: auto;
  background: var(--ed-painel); box-shadow: 0 -6px 12px rgba(23,33,46,.06);
}
.ed-pe { padding: 12px 16px; }

/* dimensões e ecrã novo, no painel da esquerda */
.ed-dimensoes, .ed-novo-ecra { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--ed-borda); }
.ed-dimensoes label, .ed-novo-ecra label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ed-tinta-3);
}
.ed-dimensoes__mao { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 6px; }
.ed-dimensoes__mao input, .ed-novo-ecra input {
  min-width: 0; min-height: 34px; padding: 0 8px; font: 400 13px var(--f-base);
  border: 1px solid var(--ed-borda); border-radius: 8px; background: var(--ed-painel);
}
.ed-dimensoes .ed-dica, .ed-novo-ecra .ed-dica { font-size: 11px; color: var(--ed-tinta-3); margin: 0; }

/* títulos que abrem e fecham a secção */
.ed-dobravel { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.ed-dobravel:hover { color: var(--ed-accao); }
.ed-dobravel__seta {
  width: 0; height: 0; border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .12s ease;
}
.ed-dobravel[aria-expanded="true"] .ed-dobravel__seta { transform: rotate(90deg); }