/* ============================================================
   Painel administrativo — estilos específicos
   ============================================================ */

.admin-body { background: var(--preto); min-height: 100vh; }

/* --- Login --- */
.login-tela {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(247,148,30,0.08), transparent 45%),
    var(--preto);
}
.login-caixa {
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 40px 34px;
  background: var(--preto-2);
}
.login-logo { height: 32px; margin-bottom: 28px; }
.login-caixa h1 { font-family: var(--fonte-display); font-size: 24px; text-transform: uppercase; }
.login-sub { color: var(--cinza); font-size: 14px; margin-top: 8px; margin-bottom: 26px; }
#form-login { display: flex; flex-direction: column; gap: 16px; }
#form-login label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--branco-suave); }
#form-login input {
  background: var(--preto);
  border: 1px solid var(--linha);
  color: var(--branco);
  padding: 12px 14px;
  border-radius: 6px;
  font-family: var(--fonte-corpo);
  font-size: 15px;
}
#form-login input:focus { border-color: var(--laranja-1); }
#form-login button { margin-top: 8px; }
.login-erro { color: #ff6b6b; font-size: 13px; min-height: 18px; }
.login-voltar { display: block; text-align: center; margin-top: 20px; color: var(--cinza); font-size: 13px; }
.login-voltar:hover { color: var(--laranja-2); }

/* --- Estrutura do painel --- */
.painel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--linha);
  background: var(--preto-2);
  position: sticky; top: 0; z-index: 50;
}
.painel-logo { height: 28px; }
.painel-header-acoes { display: flex; align-items: center; gap: 18px; }
.painel-email { font-size: 13px; color: var(--cinza); }

.painel-conteudo { max-width: 1200px; margin: 0 auto; padding: 40px 28px 80px; }
.painel-topo-lista { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.painel-topo-lista h2 { font-family: var(--fonte-display); font-size: 28px; text-transform: uppercase; }
.painel-contagem { color: var(--cinza); font-size: 14px; margin-top: 4px; }

.painel-filtros { margin-bottom: 20px; }

.tabela-wrap { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.tabela-veiculos { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-veiculos th {
  text-align: left; padding: 14px 16px;
  background: var(--preto-2);
  color: var(--cinza); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--linha);
}
.tabela-veiculos td { padding: 14px 16px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela-veiculos tr:last-child td { border-bottom: none; }
.tabela-veiculos tr:hover td { background: rgba(255,255,255,0.02); }

.tabela-foto { width: 56px; height: 42px; border-radius: 6px; object-fit: cover; background: var(--preto-3); }
.tabela-veiculo-nome { font-weight: 600; }
.tabela-veiculo-versao { color: var(--cinza); font-size: 12.5px; }
.tabela-preco { font-family: var(--fonte-dados); }

.selo-status {
  display: inline-block; padding: 4px 10px; border-radius: 20px;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700;
}
.selo-disponivel { background: rgba(80, 200, 120, 0.15); color: #6fd89a; }
.selo-reservado { background: rgba(247, 148, 30, 0.15); color: var(--laranja-2); }
.selo-vendido { background: rgba(150, 150, 150, 0.15); color: var(--cinza); }

.tabela-acoes { display: flex; gap: 8px; }
.tabela-acoes button {
  padding: 7px 12px; border: 1px solid var(--linha); border-radius: 6px; font-size: 12.5px; color: var(--branco-suave);
}
.tabela-acoes button:hover { border-color: var(--laranja-1); color: var(--laranja-2); }
.tabela-acoes button.apagar:hover { border-color: #ff6b6b; color: #ff6b6b; }

.painel-vazio { text-align: center; padding: 60px 20px; color: var(--cinza); }

.check-destaque { width: 18px; height: 18px; accent-color: var(--laranja-1); }

/* --- Modal de formulário --- */
.modal-form-caixa { max-width: 640px; }
.modal-form-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 28px; border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; background: var(--preto-2); z-index: 5;
}
.modal-form-header h2 { font-family: var(--fonte-display); font-size: 22px; text-transform: uppercase; }
.modal-fechar-form {
  width: 34px; height: 34px; border: 1px solid var(--linha); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--branco);
}
.form-veiculo { padding: 26px 28px 32px; display: flex; flex-direction: column; gap: 18px; }
.form-veiculo label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--branco-suave); }
.form-veiculo input[type=text],
.form-veiculo input[type=number],
.form-veiculo input[type=file],
.form-veiculo select,
.form-veiculo textarea {
  background: var(--preto);
  border: 1px solid var(--linha);
  color: var(--branco);
  padding: 11px 13px;
  border-radius: 6px;
  font-family: var(--fonte-corpo);
  font-size: 14.5px;
}
.form-veiculo textarea { resize: vertical; }
.form-veiculo input:focus, .form-veiculo select:focus, .form-veiculo textarea:focus { border-color: var(--laranja-1); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-check { flex-direction: row !important; align-items: center; gap: 10px !important; }
.form-check input { width: 18px; height: 18px; accent-color: var(--laranja-1); }
.form-ajuda { font-size: 12px; color: var(--cinza); }
.form-acoes { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.form-erro { color: #ff6b6b; font-size: 13px; }

.fotos-preview { display: flex; gap: 10px; flex-wrap: wrap; }
.fotos-preview img { width: 70px; height: 55px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linha); }

@media (max-width: 640px) {
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
  .painel-conteudo { padding: 28px 16px 60px; }
  .tabela-wrap { overflow-x: auto; }
  .tabela-veiculos { min-width: 640px; }
}