/* conta.css
   Tela provisoria depois de entrar (etapa 3): perfil, Meus aparelhos e saida. */

.conta {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fundo-bloco);
}

.conta-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--e3) + var(--seguro-topo)) var(--e4) var(--e3);
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
}

.conta-logo {
  width: 150px;
}

.conta-corpo {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--e5) var(--e4);
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  flex: 1;
}

.cartao {
  padding: var(--e5);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  animation: subir var(--lento) ease both;
}

.cartao h2 {
  font-size: 18px;
  margin-bottom: var(--e1);
}

.conta-perfil {
  display: flex;
  align-items: center;
  gap: var(--e4);
}

.conta-nomes h1 {
  font-size: 22px;
  margin-bottom: var(--e1);
}

.conta-email {
  margin: 0 0 var(--e2);
  color: var(--texto-suave);
  word-break: break-all;
}

.conta-ajuda {
  color: var(--texto-suave);
  font-size: 14px;
}

.aparelhos {
  list-style: none;
  margin: var(--e3) 0 0;
  padding: 0;
}

.aparelho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) 0;
  border-top: 1px solid var(--fundo-separacao);
}

.aparelho-textos {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.aparelho-textos span {
  font-size: 13px;
  color: var(--texto-suave);
}

.aparelho-vazio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) 0;
  color: var(--texto-suave);
  font-size: 14px;
}

.conta-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  justify-content: center;
}

.conta .inicio-rodape {
  margin: var(--e4) 0 calc(var(--e5) + var(--seguro-baixo));
}

@media (max-width: 767px) {
  .conta-acoes .botao {
    width: 100%;
  }
}

/* Teste provisorio das tarefas sem internet (telas/teste-fila.js) */
.tarefa-festa {
  font-weight: 700;
  margin: var(--e2) 0 var(--e3);
}

.tarefa-form {
  display: flex;
  gap: var(--e2);
}

.tarefas {
  list-style: none;
  margin: var(--e3) 0 0;
  padding: 0;
}

.tarefa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) 0;
  border-top: 1px solid var(--fundo-separacao);
}

.tarefa input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--laranja);
  flex-shrink: 0;
}

.tarefa-nome {
  flex: 1 1 140px;
  min-width: 0;
  word-break: break-word;
}

.tarefa-feita {
  color: var(--texto-fraco);
  text-decoration: line-through;
}

.tarefa-rodape {
  margin-top: var(--e3);
  font-size: 12px;
}