:root {
  --tinta: #1A1A18;
  --tinta-2: #232320;
  --tinta-3: #2C2C28;
  --creme: #EDE4D0;
  --tijolo: #B03A2E;
  --tijolo-claro: #C9503F;
  --secundario: #8A8378;
  --linha: #383834;

  --fonte-titulo: 'Anton', Impact, sans-serif;
  --fonte-etiqueta: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --fonte-texto: 'Barlow', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--tinta); }

/* O atributo hidden precisa vencer qualquer display do CSS. Sem isto,
   uma regra como `.gaveta { display: flex }` deixa o elemento visível
   mesmo com hidden no HTML. */
[hidden] { display: none !important; }

body {
  background: var(--tinta);
  color: var(--creme);
  font-family: var(--fonte-texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- botões e campos ---------- */

.botao, .botao-vazado {
  font-family: var(--fonte-etiqueta);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.88rem;
  border: none; border-radius: 4px;
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.botao { background: var(--tijolo); color: var(--creme); }
.botao:hover { background: var(--tijolo-claro); }
.botao:active { transform: scale(0.98); }
.botao:disabled { opacity: 0.5; cursor: wait; }

.botao-vazado {
  background: transparent;
  border: 1px solid var(--linha);
  color: var(--secundario);
}
.botao-vazado:hover { color: var(--creme); background: rgba(237,228,208,0.06); }

.botao-texto {
  background: none; border: none;
  color: var(--secundario);
  font-family: var(--fonte-etiqueta);
  letter-spacing: 1px; text-transform: uppercase;
  font-size: 0.85rem; cursor: pointer;
}
.botao-texto:hover { color: var(--creme); }
.botao-texto.perigo:hover { color: var(--tijolo-claro); }

.botao-icone {
  background: none; border: none; color: var(--secundario);
  font-size: 1.1rem; cursor: pointer; padding: 4px 8px;
}
.botao-icone:hover { color: var(--creme); }

.campo { display: block; margin-bottom: 1.1rem; }
.campo > span {
  display: block;
  font-family: var(--fonte-etiqueta);
  font-size: 0.85rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--secundario);
  margin-bottom: 5px;
}
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="url"],
.campo input[type="number"],
.campo input[type="datetime-local"],
.campo select,
.campo textarea {
  width: 100%;
  background: var(--tinta);
  color: var(--creme);
  border: 1px solid var(--linha);
  border-radius: 4px;
  padding: 0.6rem 0.7rem;
  font-family: inherit;
  font-size: 0.95rem;
}
.campo textarea { resize: vertical; line-height: 1.6; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--tijolo);
}
.campo input[readonly] { color: var(--secundario); }
.campo small { display: block; color: var(--secundario); font-size: 0.8rem; margin-top: 4px; }

.campo-bool { display: flex; align-items: center; gap: 10px; }
.campo-bool > span { margin: 0; order: 2; }
.campo-bool input { width: 18px; height: 18px; accent-color: var(--tijolo); }

.previa {
  display: block;
  max-width: 140px; max-height: 90px;
  object-fit: contain;
  border: 1px solid var(--linha);
  border-radius: 4px;
  margin-bottom: 8px;
  background: var(--tinta);
}

.erro { color: var(--tijolo-claro); font-size: 0.9rem; margin-bottom: 0.8rem; }

/* ---------- login ---------- */

.tela-login {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 1.5rem;
}
.login-caixa {
  width: 100%; max-width: 340px;
  background: var(--tinta-2);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 2rem 1.75rem;
  text-align: center;
}
.login-marca { width: 74px; height: 74px; margin-bottom: 0.75rem; }
.login-caixa h1 {
  font-family: var(--fonte-titulo);
  font-size: 1.6rem; letter-spacing: 1px;
  margin-bottom: 1.5rem;
}
.login-caixa .campo { text-align: left; }
.login-caixa .botao { width: 100%; margin-top: 0.4rem; }

/* ---------- topo ---------- */

.topo {
  display: flex; align-items: center; gap: 20px;
  padding: 12px 20px;
  background: var(--tinta-2);
  border-bottom: 1px solid var(--linha);
  flex-wrap: wrap;
}
.topo-marca {
  font-family: var(--fonte-titulo);
  letter-spacing: 0.5px;
  font-size: 1.05rem;
}
.abas { display: flex; gap: 2px; flex: 1 1 auto; flex-wrap: wrap; }
.aba {
  background: none; border: none;
  font-family: var(--fonte-etiqueta);
  font-weight: 500; font-size: 0.9rem;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--secundario);
  padding: 8px 12px; border-radius: 4px; cursor: pointer;
}
.aba:hover { color: var(--creme); background: rgba(237,228,208,0.06); }
.aba.ativa { color: var(--creme); background: var(--tinta-3); }

.topo-acoes { display: flex; align-items: center; gap: 14px; }
.link-fora {
  color: var(--secundario);
  font-family: var(--fonte-etiqueta);
  font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase;
  text-decoration: none;
}
.link-fora:hover { color: var(--creme); }

/* ---------- conteúdo ---------- */

.conteudo { max-width: 820px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

.barra-acoes {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 1.5rem;
}
.barra-acoes h2 {
  font-family: var(--fonte-titulo);
  font-size: 1.8rem; letter-spacing: 0.5px; font-weight: 400;
}

.aviso {
  padding: 0.7rem 1rem; border-radius: 4px; margin-bottom: 1rem;
  font-size: 0.92rem;
  background: rgba(176,58,46,0.14);
  border-left: 2px solid var(--tijolo);
}
.aviso-erro { color: var(--tijolo-claro); }

.lista { display: flex; flex-direction: column; gap: 6px; }
.vazio { color: var(--secundario); padding: 2rem 0; text-align: center; }

.item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  background: var(--tinta-2);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit; color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.item:hover { border-color: var(--linha); background: var(--tinta-3); }

.item-capa {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 4px; overflow: hidden;
  background: var(--tinta);
  display: grid; place-items: center;
}
.item-capa img { width: 100%; height: 100%; object-fit: cover; }

.item-texto { min-width: 0; flex: 1 1 auto; }
.item-nome {
  font-size: 1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-resumo { font-size: 0.85rem; color: var(--secundario); }

/* ---------- gaveta de edição ---------- */

.gaveta { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: flex-end; }
.gaveta-fundo { position: absolute; inset: 0; background: rgba(10,10,9,0.6); }

.gaveta-caixa {
  position: relative;
  width: 100%; max-width: 460px;
  background: var(--tinta-2);
  border-left: 1px solid var(--linha);
  display: flex; flex-direction: column;
  max-height: 100dvh;
}

.gaveta-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--linha);
}
.gaveta-topo h3 {
  font-family: var(--fonte-titulo);
  font-size: 1.2rem; font-weight: 400; letter-spacing: 0.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gaveta-campos { padding: 20px; overflow-y: auto; flex: 1 1 auto; }

.gaveta-rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--linha);
}
.gaveta-rodape-direita { display: flex; gap: 10px; margin-left: auto; }

.gaveta #form-erro { padding: 0 20px; }

@media (max-width: 620px) {
  .topo { gap: 12px; }
  .abas { order: 3; width: 100%; }
  .barra-acoes h2 { font-size: 1.5rem; }
  .gaveta-caixa { max-width: 100%; }
}