/* ───────────────────────────────────────────────────────────────────────────
   Frente ui-stock — Stock, Documentos, Workflows de documentos, Entidades.
   Só classes próprias (prefixos e contextos dos módulos); tokens de anjos.css.
   ─────────────────────────────────────────────────────────────────────────── */

/* Células e ações nas grelhas */
.e-grid .ref { color: var(--acento); font-weight: 700; white-space: nowrap; }
.celula-dupla { display: block; min-width: 0; line-height: 1.35; }
.celula-dupla > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.celula-dupla > small { display: block; overflow: hidden; max-width: 420px; color: var(--texto-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.acoes-linha { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.botao-linha { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 9px; background: transparent;
  color: var(--texto-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.botao-linha:hover { background: var(--superficie-2); border-color: var(--borda); color: var(--texto); }
.botao-linha:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.botao-linha.perigo:hover { background: var(--vermelho-suave); color: var(--vermelho-texto); border-color: transparent; }
.botao-linha:disabled { opacity: .4; cursor: not-allowed; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 4px; }
.numero { font-variant-numeric: tabular-nums; }

/* Diálogos (vivem no <body>) */
.dialogo-stock .form-dialogo { display: flex; flex-direction: column; gap: 14px; }
.form-grelha.grelha-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grelha .duplo { grid-column: span 2; }
.opcoes-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.opcao { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie-2); }
.opcao > span { display: flex; flex-direction: column; gap: 2px; }
.opcao strong { font-size: 13.5px; color: var(--texto); }
.opcao small { color: var(--texto-3); font-size: 12px; line-height: 1.4; }
.opcao .e-switch-wrapper { margin-top: 2px; flex-shrink: 0; }
.aviso-campo { margin: 0; color: var(--texto-3); font-size: 12.5px; }

/* KPIs no topo das listas e fichas */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra); }
.kpi-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--acento-suave); color: var(--acento); flex-shrink: 0; }
.kpi-icone.verde { background: var(--verde-suave); color: var(--verde-texto); }
.kpi-icone.laranja { background: var(--laranja-suave); color: var(--laranja-texto); }
.kpi-icone.roxo { background: var(--roxo-suave); color: var(--roxo-texto); }
.kpi-texto { display: flex; flex-direction: column; min-width: 0; }
.kpi-texto strong { font-size: 20px; font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi-texto small { color: var(--texto-3); font-size: 12.5px; }

/* Ficha: dados em leitura e cartões de secção */
.cartao-seccao { display: flex; flex-direction: column; gap: 14px; }
.cartao-seccao > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cartao-seccao > header h2 { font-size: 16px; font-weight: 700; margin: 0; }
.cartao-seccao > header p { margin: 2px 0 0; color: var(--texto-3); font-size: 13px; }
.cartao-seccao.sem-padding { padding: 0; overflow: hidden; }
.cartao-seccao.sem-padding > header { padding: 16px 18px 0; }
.barra-mini { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 18px; }
.barra-mini .pesquisa-local { min-width: 220px; }
.total-destaque { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 10px; background: var(--acento-suave); color: var(--texto-2); font-size: 13px; }
.total-destaque strong { color: var(--texto); font-size: 16px; font-variant-numeric: tabular-nums; }

/* Séries (detalhe da linha de stock) */
.series-detalhe { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-left: 3px solid var(--acento); background: var(--superficie-2); border-radius: 0 10px 10px 0; }
.series-detalhe header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.series-detalhe header strong { font-size: 13.5px; }
.series-resumo { display: flex; gap: 6px; flex-wrap: wrap; }
.series-grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; max-height: 280px; overflow: auto; }
.serie-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--borda); border-radius: 9px; background: var(--superficie); font-size: 13px; min-width: 0; }
.serie-item code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serie-item code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; color: var(--texto); }
.serie-item .ligacao { font-size: 12px; }
.series-vazio { color: var(--texto-3); font-size: 13px; padding: 4px 0; }

/* Tablet */
@media (max-width: 1100px) {
  .form-grelha.grelha-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .form-grelha.grelha-3, .form-grelha { grid-template-columns: 1fr; }
  .form-grelha .duplo { grid-column: auto; }
}

/* Ligações dentro das grelhas e contadores dos chips */
.ligacao-tabela { color: var(--acento); font-weight: 600; text-decoration: none; }
.ligacao-tabela:hover { text-decoration: underline; }
.segmentado .contador { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--superficie-3); color: var(--texto-2); font-size: 11px; font-weight: 700; }
.segmentado button.ativo .contador { background: var(--acento-suave); color: var(--acento); }
.barra-mini { padding: 12px 18px; border-bottom: 1px solid var(--borda); }
.barra-mini-contagem { color: var(--texto-3); font-size: 12.5px; }
.barra-mini-fim { margin-left: auto; }
.grelha-seccao-esqueleto { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px; }
.pesquisa-local.pequena { height: 34px; min-width: 200px; flex: 0 1 260px; }
code.serie { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; padding: 2px 6px; border-radius: 6px; background: var(--superficie-2); border: 1px solid var(--borda); }
.grelha-local.e-grid { border: 0; border-radius: 0; }
.grelha-local.e-grid .e-headercell { background: var(--superficie-2); }
.grelha-local.e-grid .e-headercell .e-headertext { font-weight: 650; color: var(--texto-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.e-grid .e-detailrow > td { background: var(--superficie); }
.interruptor-filtro { display: inline-flex; align-items: center; gap: 8px; color: var(--texto-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.separadores-cartao.e-tab > .e-tab-header { padding: 0 12px; }
.separadores-cartao.e-tab > .e-content { padding-top: 0 !important; }
.chip.chip-mini { margin-left: 6px; padding: 1px 8px; font-size: 11px; }
.com-icone { display: inline-flex; align-items: center; gap: 6px; }
.stock-pagina .lista-cartao { overflow: visible; }

/* ── Entidades ── */
.ficha-entidade { display: flex; flex-direction: column; gap: 22px; }
.bloco-form { display: flex; flex-direction: column; gap: 14px; }
.bloco-form + .bloco-form { padding-top: 18px; border-top: 1px solid var(--borda); }
div.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
div.campo > label, div.campo > span:first-child, .rotulo-grupo { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.entrada { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--borda-forte); border-radius: 10px; background: var(--superficie-2); color: var(--texto);
  font: 14px var(--fonte); outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.entrada:focus { border-color: var(--foco); box-shadow: 0 0 0 3px var(--acento-suave); background: var(--superficie); }
.entrada::placeholder { color: var(--texto-3); }
.nif-linha { display: flex; gap: 8px; }
.nif-linha .entrada { flex: 1; min-width: 0; }
.botao-vies.e-btn { height: 42px; display: inline-flex !important; align-items: center; gap: 6px; flex-shrink: 0; }
.sugestao-vies { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--verde) 40%, transparent); border-radius: 12px; background: var(--verde-suave); }
.sugestao-icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--superficie); color: var(--verde-texto); flex-shrink: 0; }
.sugestao-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 13px; color: var(--texto-2); }
.sugestao-texto strong { color: var(--texto); font-size: 13.5px; }
.aviso-vies { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--laranja-suave); color: var(--laranja-texto); font-size: 13px; font-weight: 600; }
.tipos-entidade { display: flex; flex-wrap: wrap; gap: 8px; }
.tipo-opcao { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 10px; border: 1px solid var(--borda-forte); border-radius: 999px; background: var(--superficie-2);
  color: var(--texto-2); font: 600 13px var(--fonte); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.tipo-opcao:hover { color: var(--texto); border-color: var(--acento); }
.tipo-opcao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.tipo-opcao.ativo { background: var(--acento-suave); border-color: var(--acento); color: var(--texto); }
.tipo-check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--borda-forte); background: var(--superficie); color: var(--primario-texto); }
.tipo-opcao.ativo .tipo-check { background: var(--acento); border-color: var(--acento); }
.texto-contacto { color: var(--texto-2); font-size: 13px; }
.barra-filtros .filtro-dropdown.e-input-group, .barra-filtros .e-ddl.filtro-dropdown { min-height: 40px; }
.explicacao-stock { align-self: end; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--azul-suave); color: var(--texto-2); font-size: 12.5px; line-height: 1.45; }

/* ── Desenho do workflow (SfDiagram) ── */
.desenho-workflow .titulos .voltar { margin-bottom: 6px; }
.desenho-corpo { display: grid; grid-template-columns: 230px minmax(0, 1fr) 270px; gap: 14px; align-items: start; }
.desenho-lateral { display: flex; flex-direction: column; gap: 18px; padding: 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra); max-height: 660px; overflow: auto; }
.desenho-lateral section { display: flex; flex-direction: column; gap: 8px; }
.desenho-lateral .titulo-seccao { margin: 0; }
.desenho-tela { position: relative; min-height: 620px; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra);
  background-color: var(--superficie-2); background-image: radial-gradient(color-mix(in srgb, var(--texto-3) 35%, transparent) 1px, transparent 1px); background-size: 20px 20px; }
.desenho-tela .escondido { visibility: hidden; height: 0; overflow: hidden; }
.desenho-tela > .estado-vazio { position: absolute; inset: 0; justify-content: center; }
.desenho-a-carregar { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--texto-3); font-weight: 600; }
.desenho-tela .e-diagram, .desenho-tela #diagrama-workflow { background: transparent !important; }
.lista-passos, .lista-disponiveis, .lista-ligacoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.item-passo, .item-ligacao { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent;
  color: var(--texto); text-align: left; font: 13px var(--fonte); cursor: pointer; }
.item-passo:hover, .item-ligacao:hover { background: var(--superficie-2); }
.item-passo.ativo { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
.item-passo:focus-visible, .item-ligacao:focus-visible, .item-disponivel:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.item-texto, .item-ligacao > span { display: flex; flex-direction: column; min-width: 0; }
.item-texto strong, .item-ligacao strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-texto small, .item-ligacao small { color: var(--texto-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca-passo { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--acento); background: var(--superficie); flex-shrink: 0; }
.marca-passo.inicio { background: var(--verde); border-color: var(--verde); }
.marca-passo.final { background: var(--roxo-texto); border-color: var(--roxo-texto); }
.item-disponivel { display: inline-flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; border: 1px dashed var(--borda-forte); border-radius: 9px; background: transparent; color: var(--texto-2);
  font: 600 12.5px var(--fonte); cursor: pointer; text-align: left; }
.item-disponivel:hover { border-color: var(--acento); color: var(--texto); background: var(--acento-suave); }
.legenda { gap: 6px !important; font-size: 12.5px; color: var(--texto-2); }
.legenda > span { display: inline-flex; align-items: center; gap: 8px; }
.detalhe-passo h2 { margin: 0; font-size: 17px; }
.detalhe-passo .sobretitulo { margin: 0; }
.acoes-detalhe { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.acoes-detalhe .e-btn { justify-content: flex-start; display: inline-flex !important; align-items: center; gap: 8px; height: 38px; }
.detalhe-vazio { display: flex; flex-direction: column; gap: 10px; color: var(--texto-3); font-size: 13px; }
.detalhe-vazio p { margin: 0; }
.no-passo { box-sizing: border-box; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1.5px solid var(--borda-forte);
  border-left: 5px solid var(--acento); border-radius: 12px; background: var(--superficie); box-shadow: var(--sombra); color: var(--texto); font-family: var(--fonte); overflow: hidden; cursor: grab; }
.no-passo.inicio { border-left-color: var(--verde); }
.no-passo.final { border-left-color: var(--roxo-texto); }
.no-passo.selecionado { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave), var(--sombra); }
.no-topo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.no-topo strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-icone { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--acento-suave); color: var(--acento); flex-shrink: 0; }
.no-passo > small { color: var(--texto-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.no-etiquetas .et { padding: 1px 7px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto-2); font-size: 10.5px; font-weight: 700; }
.no-etiquetas .et.inicio { background: var(--verde-suave); color: var(--verde-texto); border-color: transparent; }
.no-etiquetas .et.final { background: var(--roxo-suave); color: var(--roxo-texto); border-color: transparent; }
@media (max-width: 1300px) {
  .desenho-corpo { grid-template-columns: 220px minmax(0, 1fr); }
  .desenho-detalhe { grid-column: 1 / -1; max-height: none; }
}
@media (max-width: 900px) {
  .desenho-corpo { grid-template-columns: 1fr; }
  .desenho-lateral { max-height: none; }
}
/* nós HTML do SfDiagram: o rato é do diagrama (arrastar/selecionar), não do texto */
.no-passo { user-select: none; }
.desenho-lateral .pesquisa-local { flex: none; height: 34px; min-width: 0; }
.desenho-tela > .estado-vazio { z-index: 2; background: color-mix(in srgb, var(--superficie-2) 92%, transparent); }
.desenho-a-carregar { z-index: 2; background: var(--superficie-2); }