/* Energisa — Painel de Gestão.
   Self-contained on purpose: the public site's stylesheet carries a lot the
   panel never uses, and the panel changes at a different pace. */

:root {
  --teal-900: #0f3f55;
  --teal-700: #185470;
  --teal-500: #188cae;
  --laranja: #ed8b28;
  --laranja-escuro: #cf7718;

  --fundo: #f4f6f8;
  --papel: #ffffff;
  --borda: #e3e7ec;
  --texto: #19222b;
  --texto-calmo: #5b6775;
  --texto-ténue: #8b97a5;

  --verde: #1f7a4d;
  --vermelho: #b3261e;

  --raio: 8px;
  --sombra: 0 1px 2px rgba(16, 32, 48, .06), 0 4px 14px rgba(16, 32, 48, .05);
  --lateral: 268px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--teal-700); }

.saltar {
  position: absolute; left: -9999px;
  background: var(--teal-700); color: #fff; padding: 10px 16px; z-index: 50;
}
.saltar:focus { left: 8px; top: 8px; }

.ico { flex: none; }

/* ---------- estrutura ---------- */

.estrutura { display: flex; min-height: 100vh; }

.area { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.pagina { padding: 26px 30px 60px; max-width: 1400px; width: 100%; }

/* ---------- barra lateral ---------- */

.lateral {
  width: var(--lateral); flex: none;
  background: var(--teal-900); color: #cfe0e9;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.marca {
  display: block; padding: 20px 22px 18px; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.marca__imagem {
  display: block; max-width: 168px; height: auto; max-height: 46px;
  background: #fff; border-radius: 8px; padding: 7px 10px;
}
.marca__nome {
  display: block; font-size: 1.45rem; font-weight: 700;
  letter-spacing: -.6px; color: #fff; line-height: 1;
}
.marca__nome span { color: var(--laranja); }
.marca__sub {
  display: block; margin-top: 3px; font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: #7ea9bd;
}

.navegacao { padding: 12px 10px 30px; }

.item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--raio);
  color: #cfe0e9; text-decoration: none; font-size: .92rem;
}
.item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.item.activo { background: var(--teal-700); color: #fff; font-weight: 600; }
.item.activo .ico { color: var(--laranja); }

.grupo > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--raio);
  cursor: pointer; list-style: none;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: #8fb3c4;
}
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.grupo > summary > span { flex: 1; }
.grupo[open] > summary .ico:last-child { transform: rotate(180deg); }
.grupo ul { list-style: none; margin: 2px 0 8px; padding: 0 0 0 14px; }
.grupo li .item { font-size: .88rem; padding: 7px 12px; }

/* ---------- barra de topo ---------- */

.topo {
  background: var(--papel); border-bottom: 1px solid var(--borda);
  padding: 0 30px; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 20;
}
.topo__titulo { font-size: 1.05rem; margin: 0; font-weight: 600; }

.utilizador { position: relative; }
.utilizador > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  list-style: none; padding: 6px 8px; border-radius: var(--raio);
}
.utilizador > summary::-webkit-details-marker { display: none; }
.utilizador > summary:hover { background: var(--fundo); }

.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--teal-700); color: #fff;
  display: grid; place-items: center; font-size: .78rem; font-weight: 700;
}
.utilizador__meta { display: flex; flex-direction: column; line-height: 1.25; }
.utilizador__meta strong { font-size: .88rem; font-weight: 600; }
.utilizador__meta span { font-size: .72rem; color: var(--texto-ténue); }

.menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px;
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 6px; z-index: 30;
}
.menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 6px;
  color: var(--texto); text-decoration: none; font-size: .9rem;
}
.menu a:hover { background: var(--fundo); }
.menu a.perigo { color: var(--vermelho); }
.menu hr { border: 0; border-top: 1px solid var(--borda); margin: 6px 4px; }

/* ---------- painel principal ---------- */

.faixa {
  background: linear-gradient(135deg, var(--teal-900), var(--teal-700));
  color: #fff; border-radius: var(--raio); padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 20px;
}
.faixa h2 { margin: 0 0 4px; font-size: 1.5rem; }
.faixa p { margin: 0; color: #bcd6e2; font-size: .9rem; }
.faixa__accoes { display: flex; gap: 10px; flex-wrap: wrap; }
.botao--claro {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3);
  color: #fff; font-size: .86rem; padding: 8px 14px;
}
.botao--claro:hover { background: rgba(255, 255, 255, .2); }

.cartoes {
  display: grid; gap: 16px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.cartao {
  background: var(--papel); border: 1px solid var(--borda);
  border-left: 4px solid var(--teal-700); border-radius: var(--raio);
  padding: 15px 18px; text-decoration: none; color: inherit;
  box-shadow: var(--sombra);
}
.cartao:hover { border-left-color: var(--laranja); }
.cartao--destaque { border-left-color: var(--laranja); }
.cartao__topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.cartao__rotulo {
  font-size: .68rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texto-ténue);
}
.cartao__icone { color: var(--texto-ténue); flex: none; }
.cartao__valor {
  display: block; font-size: 2rem; line-height: 1.15;
  color: var(--teal-900); margin: 4px 0 2px;
}
.cartao__nota { display: block; font-size: .78rem; color: var(--texto-calmo); }

/* ---------- semáforo ---------- */

.semaforo {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 18px 20px; box-shadow: var(--sombra);
}
.semaforo h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--teal-900);
}
.semaforo__resumo {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 16px; font-size: .86rem; color: var(--texto-calmo);
}
.semaforo__resumo .ponto:not(:first-child) { margin-left: 10px; }

.ponto {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: #8a8f98; flex: none;
}
.ponto--vermelho { background: var(--vermelho); }
.ponto--amarelo { background: var(--laranja); }
.ponto--verde { background: var(--verde); }

.semaforo__cartoes {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.indicador {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 13px 15px; background: #fcfdfe;
}
.indicador:hover { border-color: var(--teal-500); }
.indicador--vermelho { border-left: 3px solid var(--vermelho); }
.indicador--amarelo { border-left: 3px solid var(--laranja); }
.indicador__area {
  display: block; font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-ténue); margin-bottom: 5px;
}
.indicador__linha {
  display: flex; align-items: baseline; gap: 8px; font-size: .88rem;
}
.indicador__linha strong { font-weight: 600; flex: 1; }
.indicador__quantos {
  font-size: 1.25rem; font-weight: 700; color: var(--teal-900);
}
.indicador__detalhe {
  display: block; margin-top: 6px; font-size: .78rem; color: var(--texto-calmo);
}
.semaforo__limpo { margin: 0; font-size: .88rem; color: var(--texto-calmo); }

/* ---------- listas ---------- */

.barra {
  display: flex; gap: 12px; align-items: center;
  justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap;
}
.pesquisa {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 240px;
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 0 12px; color: var(--texto-ténue);
}
.pesquisa input {
  border: 0; outline: 0; padding: 10px 0; flex: 1;
  font: inherit; background: transparent; color: var(--texto);
}

.nota {
  background: var(--papel); border-left: 3px solid var(--teal-500);
  border-radius: 6px; padding: 10px 14px; margin: 0 0 14px;
  font-size: .86rem; color: var(--texto-calmo);
}
.contagem { font-size: .82rem; color: var(--texto-ténue); margin: 0 0 10px; }

.tabela-envolvente {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio); overflow-x: auto; box-shadow: var(--sombra);
}
.tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabela th {
  text-align: left; padding: 11px 14px;
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-ténue); border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
.tabela td { padding: 11px 14px; border-bottom: 1px solid #f1f3f6; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tr:hover td { background: #fbfcfd; }
.direita { text-align: right; }

.accoes a {
  display: inline-flex; padding: 5px; border-radius: 6px;
  color: var(--texto-calmo);
}
.accoes a:hover { background: var(--fundo); color: var(--teal-700); }
.accoes a.perigo:hover { color: var(--vermelho); }

.selo {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; color: #fff; background: #8a8f98;
  white-space: nowrap;
}
.selo--sim { background: var(--verde); }
.selo--nao { background: #8a8f98; }

.miniatura {
  height: 30px; border-radius: 4px; border: 1px solid var(--borda);
  vertical-align: middle;
}

.paginacao {
  display: flex; gap: 14px; align-items: center;
  margin-top: 14px; font-size: .85rem; color: var(--texto-calmo);
}
.vazio {
  background: var(--papel); border: 1px dashed var(--borda);
  border-radius: var(--raio); padding: 36px; text-align: center;
  color: var(--texto-ténue);
}

/* ---------- formulários ---------- */

.migalhas { font-size: .84rem; color: var(--texto-ténue); margin: 0 0 14px; }
.migalhas span { margin: 0 6px; }

.formulario {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 22px; max-width: 760px;
  box-shadow: var(--sombra);
}
.campo { margin-bottom: 16px; }
.campo label {
  display: block; font-size: .82rem; font-weight: 600;
  margin-bottom: 5px; color: var(--texto-calmo);
}
.obrigatorio { color: var(--laranja); }
.campo input[type=text], .campo input[type=email], .campo input[type=url],
.campo input[type=number], .campo input[type=password], .campo input[type=date],
.campo input[type=datetime-local], .campo input[type=file],
.campo select, .campo textarea {
  width: 100%; padding: 9px 12px; font: inherit;
  border: 1px solid var(--borda); border-radius: 6px;
  background: #fff; color: var(--texto);
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo select[multiple] { min-height: 160px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--teal-500); outline-offset: 1px; border-color: var(--teal-500);
}
.campo small { display: block; font-size: .76rem; color: var(--texto-ténue); margin-top: 4px; }
.campo small.erro, .erro { color: var(--vermelho); }
.campo--erro input, .campo--erro select, .campo--erro textarea { border-color: var(--vermelho); }

.accoes-formulario { display: flex; gap: 10px; margin-top: 22px; }

.botao {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 6px; border: 1px solid var(--borda);
  background: var(--papel); color: var(--texto);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.botao:hover { background: var(--fundo); }
.botao--primario {
  background: var(--laranja); border-color: var(--laranja); color: #fff;
}
.botao--primario:hover { background: var(--laranja-escuro); border-color: var(--laranja-escuro); }
.botao--perigo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
/* O botão da porta é o institucional, não o laranja: o laranja é assinatura e
   chamada à acção no site público, e aqui não há nada para escolher — há uma
   porta para abrir. */
.botao--institucional {
  background: var(--teal-700); border-color: var(--teal-700); color: #fff;
  justify-content: center;
}
.botao--institucional:hover { background: var(--teal-900); border-color: var(--teal-900); }
.botao--largo { width: 100%; justify-content: center; }

.confirmar {
  background: var(--papel); border: 1px solid var(--borda);
  border-left: 4px solid var(--vermelho);
  border-radius: var(--raio); padding: 24px; max-width: 560px;
}
.confirmar h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1.2rem; }
.confirmar form { display: flex; gap: 10px; margin-top: 18px; }

/* ---------- avisos ---------- */

.avisos { margin-bottom: 18px; }
.aviso {
  margin: 0 0 8px; padding: 11px 16px; border-radius: var(--raio);
  font-size: .88rem; border-left: 4px solid var(--teal-500); background: var(--papel);
}
.aviso--success { border-left-color: var(--verde); }
.aviso--error { border-left-color: var(--vermelho); }
.aviso--warning { border-left-color: var(--laranja); }

/* The trap field, hidden several ways over — a screen reader honours only
   some of them and a robot reads the markup, not the styles.

   These rules are repeated from site.css instead of imported: the panel does
   not load the public stylesheet, and the first version of this page shipped
   without them. The field was visible, reading «Não preencher este campo»,
   and anyone who obeyed the label by filling it would have been refused
   without ever being told why. A trap that catches people is not a trap. */
.campo-armadilha {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------- o olho nas senhas ---------- */

.senha-caixa { position: relative; display: block; }
.senha-caixa > input { width: 100%; padding-right: 44px; }
.senha-olho {
  position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  color: var(--texto-ténue);
}
.senha-olho svg { width: 18px; height: 18px; }
.senha-olho:hover { color: var(--teal-700); background: rgba(16, 32, 48, .05); }
.senha-olho[aria-pressed="true"] { color: var(--laranja-escuro); }

/* ---------- porta de entrada ---------- */
/* Formato empresarial da casa, como em gestao.wooneya.co.mz: duas colunas,
   a marca e o que a empresa faz à esquerda, o acesso à direita. Os campos NÃO
   vivem dentro de um cartão branco — num fundo já claro, uma caixa branca
   sobre quase-branco é uma borda a mais e um ruído a mais. */

.corpo-porta { background: #fbfafa; }

.porta { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .porta { grid-template-columns: 1.1fr 1fr; } }

.porta__lado {
  display: none; padding: 40px;
  background: linear-gradient(155deg, var(--teal-900), var(--teal-700) 60%, #1d6a8c);
  color: #fff; flex-direction: column; justify-content: space-between; gap: 32px;
}
@media (min-width: 900px) { .porta__lado { display: flex; } }

.porta__ficha {
  height: 84px; width: 84px; object-fit: contain;
  background: #fff; border-radius: 12px; padding: 8px; display: block;
}
.porta__legal {
  margin: 14px 0 0; font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: #a8c8d8;
}

.porta__lema {
  font-size: 2rem; line-height: 1.3; font-weight: 700;
  max-width: 14ch; margin: 0 0 22px;
}
.porta__lema em { color: var(--laranja); font-style: normal; }

.porta__etiquetas {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0;
  max-width: 34rem;
}
.porta__etiquetas li {
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  padding: 5px 14px; font-size: .78rem; color: #dcecf3;
}

.porta__rodape { font-size: .78rem; color: rgba(255, 255, 255, .6); margin: 0; }

.porta__principal { display: grid; place-items: center; padding: 36px 22px; }
.porta__cartao { width: min(400px, 100%); }

.porta__marca { text-align: center; margin-bottom: 30px; }
/* O PNG oficial não tem fundo transparente. Em vez de o redesenhar — a marca
   não se redesenha — assenta-se num quadrado branco arredondado. */
.porta__marca img {
  height: 72px; width: 72px; object-fit: contain;
  margin: 0 auto 10px; display: block;
  background: #fff; border-radius: 12px; padding: 6px;
  box-shadow: 0 1px 4px rgba(16, 32, 48, .14);
}
.porta__sub {
  font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--texto-ténue);
}

.formulario-porta { display: block; }
.formulario-porta .campo { margin-bottom: 18px; }
.formulario-porta label {
  display: block; margin-bottom: 6px;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-calmo);
}
.formulario-porta input[type=text], .formulario-porta input[type=email],
.formulario-porta input[type=password] {
  width: 100%; padding: 13px 14px; font: inherit;
  border: 1px solid #d7dde4; border-radius: 6px; background: #fff;
}
.formulario-porta input:focus {
  outline: 2px solid var(--teal-500); outline-offset: 1px; border-color: var(--teal-500);
}
.formulario-porta .botao--largo { margin-top: 8px; padding: 13px 18px; }

.porta__texto {
  font-size: .9rem; color: var(--texto-calmo); margin: 0 0 18px; line-height: 1.6;
}
.porta__texto--calmo { font-size: .82rem; color: var(--texto-ténue); }
.porta__conta {
  text-align: center; font-size: .88rem; color: var(--texto-calmo); margin: -14px 0 22px;
}
.porta__conta span { font-size: .78rem; color: var(--texto-ténue); }

.porta__ligacao { text-align: center; margin: 16px 0 0; font-size: .86rem; }
.porta__risco { border: 0; border-top: 1px solid #e6e9ed; margin: 26px 0 16px; }
.porta__apoio {
  text-align: center; font-size: .82rem; color: var(--texto-calmo); margin: 0;
}
.porta__nota {
  text-align: center; font-size: .82rem; color: var(--texto-ténue); margin: 14px 0 0;
}

/* ---------- pesquisa global ---------- */

.so-leitores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.pesquisa--topo { max-width: 420px; margin: 0 20px; }
.pesquisa--larga { max-width: none; margin-bottom: 18px; }

.grupo-resultados { margin-bottom: 22px; }
.grupo-resultados h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-ténue);
}
.grupo-resultados h3 a { color: var(--texto-ténue); text-decoration: none; }
.grupo-resultados h3 a:hover { color: var(--teal-700); }
.resultados {
  list-style: none; margin: 0; padding: 0;
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden;
}
.resultados li { border-bottom: 1px solid #f1f3f6; }
.resultados li:last-child { border-bottom: 0; }
.resultados a, .resultados span {
  display: block; padding: 10px 15px; text-decoration: none;
  color: var(--texto); font-size: .9rem;
}
.resultados a:hover { background: var(--fundo); color: var(--teal-700); }

/* ---------- fluxo de estados ---------- */

.fluxo, .historico {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 16px 18px;
  margin-bottom: 18px; box-shadow: var(--sombra);
}
.fluxo h3, .historico h3 {
  margin: 0 0 12px; font-size: .7rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--texto-ténue);
}
.fluxo__botoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.selo-botao {
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--papel);
  color: var(--texto-calmo); font: inherit; font-size: .82rem; font-weight: 600;
}
.selo-botao:hover { border-color: var(--teal-500); color: var(--teal-700); }
/* O estado actual é um facto, não uma opção: mostra-se, não se clica. */
.selo-botao--actual {
  background: var(--teal-700); border-color: var(--teal-700); color: #fff;
  cursor: default; opacity: 1;
}

.fluxo__nota {
  flex: 1; min-width: 220px; padding: 8px 12px; font: inherit;
  border: 1px solid var(--borda); border-radius: 6px;
}
.fluxo__visivel {
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem; color: var(--texto-calmo);
}

.historico ol { list-style: none; margin: 0; padding: 0; }
.historico li {
  padding: 9px 0 9px 16px; border-left: 2px solid var(--borda);
  font-size: .86rem; color: var(--texto-calmo);
}
.historico li:first-child { border-left-color: var(--laranja); }
.historico li strong { color: var(--texto); }
.historico li p { margin: 4px 0 0; color: var(--texto-calmo); }
.historico .interno {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: #f1f3f6; font-size: .7rem; color: var(--texto-ténue);
}

/* Edição do site público: tarefas claras e formulários por etapas. */
.editor-intro {display:flex;justify-content:space-between;align-items:center;gap:24px;margin:8px 0 28px;padding:28px;background:var(--papel);border:1px solid var(--borda);border-top:4px solid var(--laranja);border-radius:12px}
.editor-intro h2 {font-size:clamp(24px,3vw,34px);line-height:1.2;margin:8px 0 12px;color:var(--teal-900)}
.editor-intro p {max-width:660px;color:var(--texto-calmo);margin:0}
.editor-intro .botao {flex-shrink:0}.editor-eyebrow {font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--teal-700);font-weight:700}
.editor-tarefas {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.editor-tarefa {padding:24px;border:1px solid var(--borda);border-radius:12px;background:var(--papel);display:flex;flex-direction:column;align-items:flex-start}
.editor-tarefa h3 {font-size:19px;margin:10px 0;color:var(--teal-900)}.editor-tarefa p {color:var(--texto-calmo);margin:0 0 22px;flex:1}
.editor-tarefa__meta {font-size:12px;color:var(--texto-calmo)}.editor-tarefa>div:last-child {display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.editor-ajuda {margin-top:28px;padding:24px;background:var(--papel);border:1px solid var(--borda);border-radius:12px}.editor-ajuda li {margin:12px 0}.editor-ajuda p {color:var(--texto-calmo)}
.editor-seccao {margin:0 0 24px;padding:20px;border:1px solid var(--borda);border-radius:10px;min-width:0}.editor-seccao legend {font-size:18px;font-weight:650;padding:0 8px;color:var(--teal-700)}
.editor-instrucao {color:var(--texto-calmo);font-size:14px;margin:0 0 20px}.editor-seccao .campo:last-child {margin-bottom:0}
.formulario {max-width:900px}.campo input:not([type=checkbox]),.campo select,.campo textarea {max-width:100%;min-width:0}.barra .pesquisa {flex-wrap:wrap;max-width:100%;height:auto}.barra .pesquisa input {min-width:100px}.barra .pesquisa select {padding:8px;border:1px solid var(--borda);border-radius:6px;background:var(--papel);max-width:100%}
:focus-visible {outline:3px solid var(--laranja);outline-offset:3px}.accoes-formulario {flex-wrap:wrap}.tabela-envolvente {max-width:100%}
@media(max-width:1150px){.editor-tarefas{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-intro{align-items:flex-start;flex-direction:column}}
@media(max-width:650px){.editor-tarefas{grid-template-columns:1fr}.editor-intro,.editor-tarefa,.editor-ajuda{padding:20px}.editor-seccao{padding:16px 12px}.barra{flex-wrap:wrap}.barra .pesquisa{width:100%}.pagina{padding:20px 16px 40px}.editor-tarefa>div:last-child{gap:14px}}

.menu-painel {display:none}
@media(max-width:800px){
  .estrutura{display:block}.lateral{position:relative;width:100%;height:auto;max-height:70vh}.marca{padding:14px 20px}.navegacao{padding-bottom:14px}
  .painel-js .lateral{display:none}.painel-js .menu-painel-aberto .lateral{display:flex}
  .painel-js .menu-painel{display:inline-flex}.topo{padding:12px 16px;height:auto;min-height:64px;gap:10px;flex-wrap:wrap}.topo__titulo{flex:1}.topo .pesquisa--topo{order:5;max-width:none;width:100%;margin:0}.utilizador__meta{display:none}
  .formulario{padding:18px 12px}.editor-tarefas{grid-template-columns:1fr}.tabela{min-width:650px}.tabela-envolvente{overflow-x:auto}
}

.editor-relacionados {display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px}