/* Sistema DG Bancário · Duarte & Guerra — mobile-first */
:root {
  --marinho: #16243F;
  --marinho-2: #1f3357;
  --dourado: #C6A052;
  --dourado-2: #b08d3f;
  --fundo: #f6f4ef;
  --branco: #fff;
  --texto: #24262b;
  --cinza: #8a8f99;
  --ok: #2e7d4f;
  --alerta: #b3541e;
  --erro: #a03030;
}
* { box-sizing: border-box; margin: 0; }
body {
  font-family: Georgia, "Times New Roman", serif;
  background: var(--fundo); color: var(--texto);
  font-size: 16px; line-height: 1.45;
}
button, input, select, textarea { font-family: inherit; font-size: 1rem; }

header.topo {
  background: var(--marinho); color: var(--branco);
  padding: .8rem 1rem; display: flex; align-items: center; gap: .8rem;
  position: sticky; top: 0; z-index: 10;
}
header.topo h1 { font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; }
header.topo h1 span { color: var(--dourado); }
header.topo .user { margin-left: auto; font-size: .8rem; opacity: .85; }

nav.abas {
  background: var(--marinho-2); display: flex; overflow-x: auto;
  position: sticky; top: 52px; z-index: 9;
}
nav.abas button {
  background: none; border: 0; color: #cfd6e4; padding: .7rem 1rem;
  cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent;
}
nav.abas button.ativa { color: var(--dourado); border-bottom-color: var(--dourado); }

main { padding: 1rem; max-width: 1280px; margin: 0 auto; }

.cartao {
  background: var(--branco); border: 1px solid #e3ddd0; border-radius: 10px;
  padding: 1rem; margin-bottom: .8rem; box-shadow: 0 1px 3px rgba(22,36,63,.06);
}
.cartao.clicavel { cursor: pointer; }
.cartao.clicavel:hover { border-color: var(--dourado); }

.etiqueta {
  display: inline-block; font-size: .72rem; padding: .15rem .55rem;
  border-radius: 99px; letter-spacing: .03em; text-transform: uppercase;
  background: #eee7d8; color: var(--marinho);
}
.etiqueta.pre_gerado { background: #e3ecff; color: #1d3f7a; }
.etiqueta.em_revisao { background: #fdf3d9; color: #7a5d1d; }
.etiqueta.aprovado { background: #ddf0e4; color: var(--ok); }
.etiqueta.protocolo_criado { background: var(--marinho); color: var(--dourado); }
.etiqueta.pendencia { background: #f7dfd5; color: var(--alerta); }
.prazo-curto { color: var(--erro); font-weight: bold; }

.botao {
  background: var(--marinho); color: var(--branco); border: 0; border-radius: 8px;
  padding: .65rem 1.2rem; cursor: pointer;
}
.botao:hover { background: var(--marinho-2); }
.botao.ouro { background: var(--dourado); color: var(--marinho); font-weight: bold; }
.botao.ouro:hover { background: var(--dourado-2); }
.botao.claro { background: #eee7d8; color: var(--marinho); }
.botao:disabled { opacity: .5; cursor: default; }

.linha-campo { display: flex; flex-direction: column; margin-bottom: .6rem; }
.linha-campo label { font-size: .78rem; color: var(--cinza); text-transform: uppercase; letter-spacing: .04em; }
.linha-campo input, .linha-campo select, .linha-campo textarea {
  border: 1px solid #d8d2c4; border-radius: 6px; padding: .5rem .6rem; background: #fffdf8;
}
.linha-campo input:focus { outline: 2px solid var(--dourado); border-color: transparent; }

.grade { display: grid; gap: 1rem; }
@media (min-width: 960px) {
  .grade.caso { grid-template-columns: 380px 1fr; align-items: start; }
  .grade.dois { grid-template-columns: 1fr 1fr; }
}

.peticao {
  background: var(--branco); border: 1px solid #e3ddd0; border-radius: 10px;
  padding: 2rem; white-space: pre-wrap; font-size: .95rem; min-height: 320px;
}
.peticao[contenteditable="true"] { outline: 2px dashed var(--dourado); }

.check-ok { color: var(--ok); }
.check-falha { color: var(--erro); }
.aviso { background: #fdf3d9; border-left: 4px solid var(--dourado); padding: .6rem .8rem; border-radius: 6px; margin: .6rem 0; font-size: .9rem; }
.erro-caixa { background: #f7dfd5; border-left: 4px solid var(--erro); padding: .6rem .8rem; border-radius: 6px; margin: .6rem 0; }

.modal-fundo { position: fixed; inset: 0; background: rgba(22,36,63,.55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; }
.modal { background: var(--branco); border-radius: 12px; padding: 1.3rem; width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; }
.modal h3 { color: var(--marinho); margin-bottom: .8rem; }

.login-caixa { max-width: 380px; margin: 12vh auto; }
.login-caixa .logo { text-align: center; margin-bottom: 1.2rem; }
.login-caixa .logo b { color: var(--marinho); font-size: 1.5rem; letter-spacing: .06em; }
.login-caixa .logo i { color: var(--dourado); font-style: normal; }

table.lista { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.lista th, table.lista td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid #eee7d8; }
table.lista th { color: var(--cinza); font-size: .75rem; text-transform: uppercase; }

.detalhe-espelho summary { cursor: pointer; color: var(--marinho); font-weight: bold; padding: .4rem 0; }
.detalhe-espelho pre { background: #f3efe6; border-radius: 6px; padding: .6rem; overflow-x: auto; font-size: .78rem; }
.mudo { color: var(--cinza); font-size: .85rem; }