/* Gabarito da Torre. Fundo claro de "prancheta" mesmo no tema escuro no lado do DESENHO
   (papel é branco e o desenho é preto/azul), com o formulário seguindo o tema do app. */
#page-gabarito { --gb-linha: var(--border, #e2e5ea); --gb-danger: #b91c1c; }
/* O desenho continua em papel branco no tema escuro (traço preto), mas o FORMULÁRIO segue
   o tema: só o vermelho de erro precisa clarear para não sumir no fundo escuro. */
[data-theme="dark"] #page-gabarito { --gb-danger: #f58a80; }

#gabarito-content { color: var(--text, #111827); }
.gb-wrap {
  display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 16px;
  max-width: 1400px; margin: 0 auto; padding: 16px 18px 40px;
}
@media (max-width: 900px) { .gb-wrap { grid-template-columns: 1fr; } }

.gb-sec {
  background: var(--bg-card, #fff); border: 1px solid var(--gb-linha); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px;
}
.gb-sec h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-muted, #6b7280); margin: 0 0 12px;
}
.gb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.gb-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gb-campo span { font-size: 11.5px; color: var(--text-muted, #6b7280); font-weight: 600; }
.gb-campo input, .gb-campo select {
  font-family: inherit; font-size: 14px; padding: 8px 10px; border-radius: 8px;
  border: 1.5px solid var(--gb-linha); background: var(--bg-card, #fff); color: var(--text, #111);
  width: 100%; box-sizing: border-box;
}

.gb-resumo {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px;
  font-size: 12.5px; color: var(--text-muted, #6b7280);
}
.gb-resumo b { color: var(--text, #111827); }
.gb-erro, .gb-erro b { color: var(--gb-danger); }
.gb-aviso {
  margin-top: 10px; background: #fef3c7; color: #92400e; border-radius: 8px;
  padding: 9px 11px; font-size: 12.5px; line-height: 1.5;
}

.gb-btn {
  width: 100%; background: #15293a; color: #fff; border: 0; border-radius: 10px;
  padding: 13px 16px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.gb-btn[disabled] { opacity: .45; cursor: not-allowed; }
.gb-nota { font-size: 11.5px; color: var(--text-muted, #6b7280); line-height: 1.5; margin-top: 8px; }

/* O desenho é sempre em fundo de papel: o preto do traço não pode ficar sobre fundo escuro. */
.gb-desenho {
  background: #fff; border: 1px solid var(--gb-linha); border-radius: 10px;
  padding: 12px; display: flex; align-items: center; justify-content: center; min-height: 300px;
}