/* ==========================================================================
   Telas da conta dentro do site: entrar, criar conta, recuperar senha, lista
   de projetos. Usam as mesmas variáveis do site (cores e fontes vêm do
   painel), então mudar a cor principal muda estas telas junto.
   ========================================================================== */

[hidden] { display: none !important; }

.cartao-auth {
  max-width: 26rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  background: var(--cor-fundo);
  border: 1px solid var(--borda-forte, rgba(0,0,0,.1));
  border-radius: var(--raio);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.6);
}
.cartao-auth h1 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); margin-bottom: .25em; }
.cartao-auth__sub { color: inherit; opacity: .7; margin-bottom: 1.5rem; }
.cartao-auth__rodape { margin: 1rem 0 0; text-align: center; font-size: .9rem; opacity: .85; }

.formulario { display: flex; flex-direction: column; gap: 1rem; }
.formulario .campo { display: flex; flex-direction: column; gap: .35rem; }
.formulario .campo > span { font-size: .78rem; font-weight: 600; letter-spacing: .02em; opacity: .8; }
.formulario input {
  width: 100%; min-height: 48px; padding: .7rem .85rem;
  font: inherit; color: var(--cor-texto);
  background: var(--cor-fundo-alt);
  border: 1px solid var(--borda-forte, rgba(0,0,0,.15));
  border-radius: calc(var(--raio) * .6);
}
.formulario input:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 25%, transparent); }
.formulario input:disabled { opacity: .55; }
.botao--bloco { width: 100%; }

.grupo {
  margin: 0; padding: 1rem;
  border: 1px solid var(--borda-forte, rgba(0,0,0,.12));
  border-radius: calc(var(--raio) * .7);
  display: flex; flex-direction: column; gap: 1rem;
}
.grupo legend { padding: 0 .4rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }

.aviso-ok,
.aviso-erro {
  margin: 0 0 1rem; padding: .75rem 1rem;
  border-radius: calc(var(--raio) * .6);
  border: 1px solid; font-size: .92rem;
}
.aviso-ok { background: color-mix(in srgb, #16a34a 12%, transparent); border-color: color-mix(in srgb, #16a34a 45%, transparent); }
.aviso-erro { background: color-mix(in srgb, #dc2626 12%, transparent); border-color: color-mix(in srgb, #dc2626 45%, transparent); }

/* ------------------------------------------------------- área da conta */

.conta__topo {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 2rem;
}
.conta__topo h1 { margin-bottom: .1em; }
.conta__ola { margin: 0; opacity: .7; font-size: .92rem; }
.conta__acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.conta__acoes .botao { padding: .6rem 1.1rem; min-height: 44px; }

.novo-projeto {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem;
  padding: 1rem; margin-bottom: 2rem;
  background: var(--cor-fundo-alt);
  border: 1px solid var(--borda-forte, rgba(0,0,0,.1));
  border-radius: var(--raio);
}
.novo-projeto .campo { flex: 1 1 12rem; display: flex; flex-direction: column; gap: .3rem; }
.novo-projeto .campo > span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.novo-projeto input {
  width: 100%; min-height: 46px; padding: .6rem .75rem; font: inherit;
  color: var(--cor-texto); background: var(--cor-fundo);
  border: 1px solid var(--borda-forte, rgba(0,0,0,.15)); border-radius: calc(var(--raio) * .6);
}
.novo-projeto .campo--curto { flex: 0 1 16rem; }
.resolucao { display: flex; align-items: center; gap: .4rem; }
.resolucao input { width: 6rem; text-align: center; }
.novo-projeto .botao { min-height: 46px; }

.projetos { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.projeto {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem;
  background: var(--superficie, rgba(0,0,0,.02));
  border: 1px solid var(--borda-forte, rgba(0,0,0,.1));
  border-radius: var(--raio);
}
.projeto__abrir { flex: 1 1 16rem; min-width: 0; color: inherit; }
.projeto__abrir:hover { text-decoration: none; }
.projeto__abrir strong { display: block; font-size: 1.1rem; }
.projeto__abrir:hover strong { color: var(--cor-primaria); }
.projeto__meta { display: block; font-size: .8rem; opacity: .65; margin-top: .2rem; }

.projeto__botoes { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.projeto__botoes form { display: flex; gap: .3rem; margin: 0; }
.projeto__botoes input[type="text"] {
  width: 9rem; min-height: 40px; padding: .4rem .6rem; font: inherit; font-size: .85rem;
  color: var(--cor-texto); background: var(--cor-fundo);
  border: 1px solid var(--borda-forte, rgba(0,0,0,.15)); border-radius: calc(var(--raio) * .5);
}
.projeto__botoes button {
  min-height: 40px; padding: .4rem .8rem; font: inherit; font-size: .82rem; font-weight: 600;
  color: inherit; background: var(--cor-fundo);
  border: 1px solid var(--borda-forte, rgba(0,0,0,.15)); border-radius: calc(var(--raio) * .5);
  cursor: pointer;
}
.projeto__botoes button:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.projeto__botoes .perigo:hover { border-color: #dc2626; color: #f87171; }

.vazio {
  padding: 3rem 1.5rem; text-align: center; opacity: .7;
  border: 1px dashed var(--borda-forte, rgba(0,0,0,.15)); border-radius: var(--raio);
}

@media (max-width: 600px) {
  .projeto__botoes { width: 100%; }
  .projeto__botoes form:first-child { flex: 1 1 100%; }
  .projeto__botoes input[type="text"] { flex: 1; width: auto; }
}