@font-face {
  font-family: 'Oswald';
  src: url('fontes/Oswald-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

:root {
  --azul: #101921;
  --azul-2: #1d2a36;
  --dourado: #dcc493;
  --dourado-escuro: #8a7346;
  --fundo: #f1f1f1;
  --cartao: #ffffff;
  --texto: #101921;
  --texto-2: #4d5763;
  --linha: #d9dde2;
  --erro: #b42318;
  --erro-fundo: #fdecea;
  --ok: #1e6b43;
  --ok-fundo: #e6f4ec;
  --aviso: #8a5a00;
  --aviso-fundo: #fff4dc;
  --raio: 12px;
  --sombra: 0 1px 2px rgba(16, 25, 33, 0.08), 0 2px 8px rgba(16, 25, 33, 0.05);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .titulo-marca {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
h1 { font-size: 1.6rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.3rem; margin: 0 0 0.75rem; }
h3 { font-size: 1.1rem; margin: 1.2rem 0 0.5rem; }
p { margin: 0 0 0.75rem; }
a { color: var(--azul); }
[hidden] { display: none !important; }

/* Cabeçalho */
.topo {
  background: var(--azul);
  color: #fff;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topo img { height: 30px; width: auto; display: block; }
.topo .espaco { flex: 1; }
.topo .quem { font-size: 0.85rem; opacity: 0.85; text-align: right; line-height: 1.2; }
.topo button.ligacao { color: var(--dourado); }

.conteudo {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 16px calc(env(safe-area-inset-bottom) + 32px);
}
.conteudo.largo { max-width: 1180px; }

.cartao {
  background: var(--cartao);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 18px 16px;
  margin-bottom: 14px;
}

/* Botões */
button, .botao {
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  min-height: 52px;
  padding: 12px 18px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  touch-action: manipulation;
}
button:disabled { opacity: 0.55; cursor: not-allowed; }
.primario { background: var(--azul); color: #fff; }
.primario:active:not(:disabled) { background: var(--azul-2); }
.secundario { background: #fff; color: var(--azul); border: 1.5px solid var(--azul); }
.perigo { background: #fff; color: var(--erro); border: 1.5px solid var(--erro); }
.ligacao { background: none; color: var(--azul); min-height: 44px; padding: 8px 4px; text-decoration: underline; font-weight: 500; }
.pequeno { min-height: 40px; padding: 8px 12px; font-size: 0.92rem; }
.bloco { width: 100%; }
.acoes { display: flex; gap: 10px; margin-top: 16px; }
.acoes > * { flex: 1; }
:focus-visible { outline: 3px solid var(--dourado-escuro); outline-offset: 2px; }

/* Campos */
label.campo, div.campo { display: block; margin-bottom: 14px; }
label.campo > span, div.campo > label { display: block; font-weight: 600; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea {
  font: inherit;
  width: 100%;
  min-height: 50px;
  padding: 10px 12px;
  border: 1.5px solid var(--linha);
  border-radius: 10px;
  background: #fff;
  color: var(--texto);
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px rgba(220, 196, 147, 0.55); }
.com-erro input, .com-erro textarea, .com-erro select, input.com-erro { border-color: var(--erro); }
.msg-erro { color: var(--erro); font-size: 0.92rem; font-weight: 600; margin-top: 6px; }
.dica { color: var(--texto-2); font-size: 0.9rem; }

/* Perguntas */
.pergunta { padding: 16px 0; border-top: 1px solid var(--linha); }
.pergunta:first-of-type { border-top: 0; padding-top: 4px; }
.pergunta .texto { font-weight: 600; margin-bottom: 4px; }
.pergunta .ajuda { color: var(--texto-2); font-size: 0.92rem; margin-bottom: 10px; }
.pergunta.detalhe { border-left: 4px solid var(--dourado); padding-left: 12px; margin-left: 2px; border-top: 0; }
.pergunta.com-erro .texto { color: var(--erro); }
.opcoes-sn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.opcoes-sn button, .opcao-lista {
  background: #fff;
  color: var(--texto);
  border: 2px solid var(--linha);
  min-height: 56px;
  font-size: 1.05rem;
}
.opcoes-sn button[aria-pressed=true] { background: var(--azul); border-color: var(--azul); color: #fff; }
.opcao-lista { width: 100%; justify-content: flex-start; text-align: left; margin-top: 8px; font-weight: 500; padding: 12px 14px; }
.opcao-lista .caixa {
  flex: 0 0 26px; height: 26px; border-radius: 6px; border: 2px solid var(--texto-2);
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 16px;
}
.opcao-lista[aria-pressed=true] { border-color: var(--azul); background: #f6f3ea; }
.opcao-lista[aria-pressed=true] .caixa { background: var(--azul); border-color: var(--azul); }
.opcao-lista[aria-pressed=true] .caixa::after { content: '✓'; }

.explicacao {
  background: #f6f3ea;
  border-left: 4px solid var(--dourado);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.93rem;
  color: var(--azul-2);
  margin-bottom: 8px;
  white-space: pre-line;
}

/* Progresso */
.progresso { margin: 4px 0 14px; }
.progresso .barra { height: 8px; border-radius: 4px; background: #dde1e5; overflow: hidden; }
.progresso .barra > div { height: 100%; background: var(--dourado-escuro); transition: width 0.2s; }
.progresso .legenda { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--texto-2); margin-top: 6px; }

/* Avisos */
.aviso { border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: 0.95rem; }
.aviso.erro { background: var(--erro-fundo); color: var(--erro); }
.aviso.ok { background: var(--ok-fundo); color: var(--ok); }
.aviso.info { background: #e9eef3; color: var(--azul-2); }
.aviso.atencao { background: var(--aviso-fundo); color: var(--aviso); }

.ditar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.estado-rascunho { font-size: 0.85rem; color: var(--texto-2); min-height: 1.2em; }
.etiqueta {
  display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: #e9eef3; color: var(--azul-2); white-space: nowrap; letter-spacing: 0.02em;
}
.etiqueta.rascunho { background: var(--aviso-fundo); color: var(--aviso); }
.etiqueta.entregue { background: var(--ok-fundo); color: var(--ok); }
.etiqueta.incidente { background: var(--erro-fundo); color: var(--erro); }
.etiqueta.operacional { background: var(--aviso-fundo); color: var(--aviso); }
.etiqueta.rever { background: #f6f3ea; color: var(--dourado-escuro); }
.etiqueta.inativo { background: #eceff2; color: #6b7480; }

/* Listas */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { border-top: 1px solid var(--linha); }
.lista > li:first-child { border-top: 0; }
.lista button.item {
  width: 100%; background: none; color: inherit; justify-content: space-between; text-align: left;
  padding: 14px 4px; border-radius: 0; font-weight: 500;
}
.lista .sub { display: block; font-size: 0.85rem; color: var(--texto-2); font-weight: 400; }

/* Resumo */
.resumo dt { font-size: 0.9rem; color: var(--texto-2); margin-top: 12px; }
.resumo dd { margin: 2px 0 0; font-weight: 700; white-space: pre-wrap; }
.resumo .seccao-resumo { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; border-bottom: 2px solid var(--dourado); padding-bottom: 4px; }
.resumo .seccao-resumo h3 { margin: 0; }

/* Assinatura */
.quadro-assinatura {
  position: relative;
  border: 2px dashed #9aa3ad;
  border-radius: 12px;
  background: #fff;
  height: 220px;
  touch-action: none;
  overflow: hidden;
}
.quadro-assinatura canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.quadro-assinatura .linha-base { position: absolute; left: 20px; right: 20px; bottom: 50px; border-top: 1px solid #c7cdd3; pointer-events: none; }
.quadro-assinatura .instrucao { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: #8b949e; font-size: 0.85rem; pointer-events: none; }
.quadro-assinatura.com-erro { border-color: var(--erro); }

.confirmar {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 2px solid var(--linha); border-radius: 12px;
  background: #fff; cursor: pointer; font-weight: 600;
}
.confirmar input { width: 26px; height: 26px; flex: 0 0 26px; margin: 0; accent-color: var(--azul); }
.confirmar.com-erro { border-color: var(--erro); }

.centro { text-align: center; }
.selo-grande { width: 96px; height: 96px; margin: 8px auto 12px; display: block; }
.marca-login { background: var(--azul); border-radius: var(--raio); padding: 22px 16px; text-align: center; margin-bottom: 14px; }
.marca-login img { height: 64px; }
.marca-login p { color: var(--dourado); margin: 10px 0 0; font-family: 'Oswald', sans-serif; letter-spacing: 0.08em; font-size: 0.95rem; }
.passos-instalar { padding-left: 1.2rem; margin: 0.5rem 0 0; }
.passos-instalar li { margin-bottom: 6px; }

.escolha-funcao { display: grid; gap: 14px; }
.linha-funcao .nome-funcao { font-weight: 700; margin-bottom: 6px; }
.unidades-funcao { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.unidades-funcao button { background: #fff; color: var(--azul); border: 2px solid var(--linha); min-height: 56px; flex-direction: column; gap: 4px; }
.unidades-funcao button:disabled { opacity: 0.5; }
.escolha-funcao button { justify-content: space-between; text-align: left; background: #fff; color: var(--azul); border: 2px solid var(--linha); min-height: 64px; }
.escolha-funcao button .sub { font-weight: 400; color: var(--texto-2); font-size: 0.88rem; display: block; }

/* Backoffice */
.separadores { display: flex; gap: 4px; overflow-x: auto; background: var(--azul); padding: 0 12px; }
.separadores button {
  background: none; color: #c9d0d7; border-radius: 0; min-height: 46px; border-bottom: 3px solid transparent; padding: 10px 14px;
}
.separadores button[aria-selected=true] { color: #fff; border-bottom-color: var(--dourado); }
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.filtros label.campo { margin: 0; }
.filtros label.campo > span { font-size: 0.85rem; }
.campo + .dica, div.campo .dica { margin-top: 4px; }
.filtros input, .filtros select { min-height: 44px; }
.tabela-envolvente { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.tabela th { text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-2); padding: 8px; border-bottom: 2px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 10px 8px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover td { background: #f7f8f9; }
.paginacao { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 12px; }
.grelha-2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) { .grelha-2 { grid-template-columns: 1.4fr 1fr; } }
.meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 0.93rem; }
.meta dt { color: var(--texto-2); }
.meta dd { margin: 0; font-weight: 600; word-break: break-word; }
.resposta-linha { padding: 10px 0; border-bottom: 1px solid var(--linha); }
.resposta-linha .p { color: var(--texto-2); font-size: 0.93rem; }
.resposta-linha .r { font-weight: 700; white-space: pre-wrap; }
.img-assinatura { max-width: 100%; border: 1px solid var(--linha); border-radius: 8px; background: #fff; }
.correcao { border-left: 4px solid var(--dourado); padding: 8px 12px; margin: 10px 0; background: #fbfaf6; border-radius: 0 8px 8px 0; font-size: 0.93rem; }
.atribuicoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.atribuicoes label { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1.5px solid var(--linha); border-radius: 8px; background: #fff; min-height: 44px; }
.atribuicoes input { width: 20px; height: 20px; accent-color: var(--azul); }
.link-copiar { display: flex; gap: 8px; }
.link-copiar input { font-size: 0.85rem; }
.editor-pergunta { border: 1px solid var(--linha); border-radius: 10px; padding: 12px; margin: 10px 0; background: #fcfcfd; }
.editor-pergunta .id { font-size: 0.75rem; color: var(--texto-2); font-family: ui-monospace, Menlo, monospace; }
.linha-flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.linha-flex .espaco { flex: 1; }
dialog { border: 0; border-radius: var(--raio); padding: 20px; max-width: 520px; width: calc(100% - 32px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); }
dialog::backdrop { background: rgba(16, 25, 33, 0.5); }
/* Itens de grelha podem encolher: tabelas largas deslocam-se dentro do cartão, não alargam a página. */
.grelha-2 > *, .filtros > * { min-width: 0; }
.cartao { min-width: 0; overflow-wrap: anywhere; }
.tabela td, .tabela th { overflow-wrap: normal; }