/* ============================================
   Iza Fotografia — painel administrativo
   ============================================ */

/* ── Tela de login ── */
#tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#tela-login .cartao { width: 100%; max-width: 380px; }
#tela-login .marca { text-align: center; margin-bottom: 18px; }
#tela-login .marca h1 { font-size: 26px; color: var(--marrom); }
#tela-login .marca span {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ── Topo do painel ── */
.topo {
  background: #fff;
  border-bottom: 1px solid var(--borda);
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topo .marca {
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--marrom);
  padding: 14px 0;
  white-space: nowrap;
}
.topo nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
.topo nav a {
  padding: 16px 13px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texto-suave);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.topo nav a:hover { color: var(--marrom); }
.topo nav a.ativa { color: var(--marrom); border-bottom-color: var(--marrom); }
.topo .sair {
  font-size: 13px;
  color: var(--texto-suave);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 8px;
}
.topo .sair:hover { color: var(--vermelho); }

/* ── Conteúdo ── */
#conteudo { max-width: 1080px; margin: 0 auto; padding: 26px 18px 60px; }
.cabecalho-aba {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.busca { max-width: 300px; }

/* ── Dashboard ── */
.cartoes-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.cartao-numero { text-align: center; padding: 18px 10px; }
.cartao-numero .num { font-size: 34px; font-weight: 700; color: var(--marrom); font-family: Georgia, serif; }
.cartao-numero .rotulo { font-size: 12px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 640px) {
  .topo { padding: 0 10px; gap: 8px; }
  .topo nav a { padding: 12px 8px; font-size: 12.5px; }
  #conteudo { padding: 18px 12px 50px; }
}